【Micropython esp32/8266】AP模式下网页点灯控制示例+自定义GPIO状态显示
-
✨本示例基于
Thonny开发。✨ -
📢验证对象esp8266，esp32也兼容，需要在代码上将引脚定义修改为对应的esp32引脚即可。
-
🌻操作演示
-
🎋补充优化html界面
🎉优化的html页面代码：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>ESP32/8266网页控制界面(AP模式)</title>
<style>body {text-align: center;} table {margin: auto;}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1><font color="red">ESP32/8266网页控制界面</font></h1>
<table border="1" align="center">
<tr><th>Pin(0)</th><th>Pin(2)</th><th>Pin(4)</th><th>Pin(5)</th><th>Pin(12)</th><th>Pin(13)</th><th>Pin(14)</th><th>Pin(15)</th></tr><tr><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</table></br>
<form action="" method="post">
GPIO引脚选择：
<select name="selectList">
<option>GPIO0</option>
<option>GPIO2</option>
<option>GPIO4</option>
<option>GPIO5</option>
<option>GPIO12</option>
<option>GPIO13</option>
<option>GPIO14</option>
<option>GPIO15</option>
</select>
</form>
<p>GPIO2 state: <strong>OFF</strong></p><p><a href="/?led=on"><button class="button">ON</button></a></p>
<p><a href="/?led=off"><button class="button button2">OFF</button></a></p></body></html>
📌本篇是对前面两篇内容的功能综合到一块。可扩展性比较强，暂时没有将每个引脚纳入控制范围内，可以在此基础上添加对显示引脚的控制进行完善。现在大体的功能基本实现。
🌿访问控制页面html代码
<!DOCTYPE html>
<html>
<head> <title>ESP8266 Pins</title> </head>
<style>
body {text-align: center;} table {margin: auto;}
</style>
<body> <h1>ESP8266 Pins</h1>
<table border="1" align="center"><tr> <th>Pin(0)</th>
<th>Pin(2)</th>
<th>Pin(4)</th>
<th>Pin(5)</th>
<th>Pin(12)</th>
<th>Pin(13)</th>
<th>Pin(14)</th>
<th>Pin(15)</th>
</tr><tr>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
</tr> </table>
</body>
</html>
📝程序代码
'''
authmode模式：
AUTH_OPEN -- 0
AUTH_WEP -- 1
AUTH_WPA_PSK -- 2
AUTH_WPA2_PSK -- 3
AUTH_WPA_WPA2_PSK -- 4
'''
import usocket as socket
import network
from machine import Pin
pins = [Pin(i, Pin.OUT,Pin.PULL_UP) for i in (0, 2, 4, 5, 12, 13, 14, 15)]
ap_ssid = "ESP8266AP"
ap_password = "12345678"
ap_authmode = 3 # WPA2
wlan_ap = network.WLAN(network.AP_IF)
wlan_ap.active(True)
wlan_ap.config(essid=ap_ssid, password=ap_password, authmode=ap_authmode)
print('Connect to WiFi ssid ' + ap_ssid + ', default password: ' + ap_password)
print('and access the ESP via your favorite web browser at 192.168.4.1.')
#print('Listening on:', addr)
led = Pin(2, Pin.OUT)
def web_page():
rows = ['<th>%s</th>' % str(p) for p in pins]
str1 ="""</tr><tr>"""
rows_Value = ['<td>%d</td>' %p.value() for p in pins]
# rows=rows_Pin.extend(rows_Value)
rows.append(str1)
rows.extend(rows_Value)
rows.append("""</tr></table>""")
str2=''.join(rows)
if led.value():
gpio_state="OFF"
else:
gpio_state="ON"
html = """<!DOCTYPE html><html><meta charset="UTF-8"><head><title>ESP32/8266网页控制界面(AP模式)</title><style>body {text-align: center;} table {margin: auto;}</style><table border="1" align="center"><tr>""" + str2 +"""<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1><font color="red">ESP32/8266网页控制界面</font></h1>
<p>GPIO2 state: <strong>""" + gpio_state + """</strong></p><p><a href="/?led=on"><button class="button">ON</button></a></p>
<p><a href="/?led=off"><button class="button button2">OFF</button></a></p></body></html>"""
return html
addr = socket.getaddrinfo('192.168.4.1', 80)[0][-1]
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
#s.bind(addr)
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
request = str(request)
print('Content = %s' % request)
led_on = request.find('/?led=on')
led_off = request.find('/?led=off')
if led_on == 6:
print('LED ON=',led_on)
led.value(0)
if led_off == 6:
print('LED OFF=',led_off)
led.value(1)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
⛳Shell调试窗口数据信息
>>> %Run -c $EDITOR_CONTENT
Connect to WiFi ssid ESP8266AP, default password: 12345678
and access the ESP via your favorite web browser at 192.168.4.1.
[0, 0, 0, 0, 0, 0, 0, 0]
Got a connection from ('192.168.4.2', 62002)
Content = b'GET /?led=off HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nReferer: http://192.168.4.1/\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
LED OFF= 6
Got a connection from ('192.168.4.2', 62003)
Content = b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8\r\nReferer: http://192.168.4.1/?led=off\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
Got a connection from ('192.168.4.2', 62006)
Content = b'GET /?led=on HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nReferer: http://192.168.4.1/?led=off\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
LED ON= 6
Got a connection from ('192.168.4.2', 62007)
Content = b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8\r\nReferer: http://192.168.4.1/?led=on\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
Got a connection from ('192.168.4.2', 62010)
Content = b'GET /?led=off HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nReferer: http://192.168.4.1/?led=on\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
LED OFF= 6
Got a connection from ('192.168.4.2', 62011)
Content = b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.4.1\r\nConnection: keep-alive\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27\r\nAccept: image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8\r\nReferer: http://192.168.4.1/?led=off\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
从调试信息中可以看到代码中的
.find()函数返回值：6
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
