Micropython esp32/8266AP模式下自定义GPIO状态显示+主动按键控制
Posted perseverance52
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Micropython esp32/8266AP模式下自定义GPIO状态显示+主动按键控制相关的知识，希望对你有一定的参考价值。
【Micropython esp32/8266】AP模式下自定义GPIO状态显示+主动按键控制
- ✨本示例基于
Thonny开发。✨ - 📍验证对象：esp8266，在esp32上需要修改其自定义GPIO引脚即可。
- 🌻网页控制演示
🎯功能说明
⛳通过micropython设备：esp8266/32设备，创建一个AP热点，使用电脑或手机接入到AP热点，通过浏览器访问设备的默认网关地址：
192.168.4.1，可以看到设备被定义的GPIO引脚的状态咋表格中显示，通过下拉菜单选择对应的GPIO引脚，再通过2个按钮来控制其状态。
获取的下拉框的值按钮仅作调试测试使用，当前选择的引脚。
📑网页访问html代码
<!DOCTYPE html><html><meta charset="UTF-8">
<script type="text/javascript">
function submitForm()
var form = document.getElementById("myform");
form.submit();
function getvalue()
var value=document.myForm.mySelect.value;
alert(value);
</script>
<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>htmlfont-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;
h1color: #0F3376; padding: 2vh;pfont-size: 1.5rem;.buttondisplay: 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;
.button2background-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>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>1</td><td>0</td></tr></table><br/><form action='/' name="myForm" id="myform">
GPIO引脚选择：
<select onchange="submitForm();" name="mySelect">
<option value="pin0">GPIO0</option>
<option value="pin1" selected>GPIO2</option>
<option value="pin2">GPIO4</option>
<option value="pin3">GPIO5</option>
<option value="pin4">GPIO12</option>
<option value="pin5">GPIO13</option>
<option value="pin6">GPIO14</option>
<option value="pin7">GPIO15</option>
</select>
</form><br/><button onClick='getvalue()'>获取的下拉框的值</button><p><a href="/?press=on"><button class="button">ON</button></a></p>
<p><a href="/?press=off"><button class="button button2">OFF</button></a></p></body></html>
- 🎉通过菜鸟网页工具，在线调试html内容：
https://www.runoob.com/try/try.php?filename=tryhtml_hr
📝程序代码
'''
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)
gpio =2
def web_page():
rows = ['<th>%s</th>' % str(p) for p in pins]
str1 ="""</tr><tr>"""
status=[p.value() for p in pins]
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><br/>""")
str2=''.join(rows)
html = """<!DOCTYPE html><html><meta charset="UTF-8">
<script type="text/javascript">
function submitForm()
var form = document.getElementById("myform");
form.submit();
function getvalue()
var value=document.myForm.mySelect.value;
alert(value);
</script>
<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>htmlfont-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;
h1color: #0F3376; padding: 2vh;pfont-size: 1.5rem;.buttondisplay: 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;
.button2background-color: #4286f4;</style></head><body> <h1><font color="red">ESP32/8266网页控制界面</font></h1>
<table border="1" align="center"><tr>""" + str2 +"""<form action='/' name="myForm" id="myform">
GPIO引脚选择：
<select onchange="submitForm();" name="mySelect">
<option value="pin0">GPIO0</option>
<option value="pin1" selected>GPIO2</option>
<option value="pin2">GPIO4</option>
<option value="pin3">GPIO5</option>
<option value="pin4">GPIO12</option>
<option value="pin5">GPIO13</option>
<option value="pin6">GPIO14</option>
<option value="pin7">GPIO15</option>
</select>
</form><br/><button onClick='getvalue()'>获取的下拉框的值</button>""" + """<p><a href="/?press=on"><button class="button">ON</button></a></p>
<p><a href="/?press=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)
status=[p.value() for p in pins]
print(status)
while 1:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
request = str(request)
# print('Content = %s' % request)
# print(request.split('='))
mySelect=request.find('/?mySelect')
if mySelect ==6:
print(request[20:22])
pin_str=int(request[20:22])
gpio =int(pin_str)
print(gpio)
led_on = request.find('/?press=on')
led_off = request.find('/?press=off')
if led_on == 6:
print('Press=',led_on)
pins[gpio].value(1)
print(gpio)
if led_off == 6:
print('Press=',led_off)
pins[gpio].value(0)
print(gpio)
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', 59912)
Got a connection from ('192.168.4.2', 59913)
3
3
Got a connection from ('192.168.4.2', 59917)
Press= 6
3
Got a connection from ('192.168.4.2', 59920)
Press= 6
3
Got a connection from ('192.168.4.2', 59923)
Press= 6
3
Got a connection from ('192.168.4.2', 59926)
4
4
Got a connection from ('192.168.4.2', 64763)
Press= 6
4
Got a connection from ('192.168.4.2', 64766)
Press= 6
4
Got a connection from ('192.168.4.2', 64769)
Press= 6
4
Got a connection from ('192.168.4.2', 64772)
6
6
Got a connection from ('192.168.4.2', 64775)
Press= 6
6
Got a connection from ('192.168.4.2', 64778)
Press= 6
6
Got a connection from ('192.168.4.2', 64781)
Press= 6
6
Got a connection from ('192.168.4.2', 64784)
7
7
Got a connection from ('192.168.4.2', 64791)
Press= 6
7
Got a connection from ('192.168.4.2', 64794)
Press= 6
7
Got a connection from ('192.168.4.2', 64797)
Press= 6
7
Got a connection from ('192.168.4.2', 64800)
Press= 6
7
Got a connection from ('192.168.4.2', 64803)
Press= 6
7
Got a connection from ('192.168.4.2', 64806)
Press= 6
7
Got a connection from ('192.168.4.2', 64809)
Press= 6
7
Got a connection from ('192.168.4.2', 64812)
Press= 6
7
Got a connection from ('192.168.4.2', 64815)
0
0
Got a connection from ('192.168.4.2', 64818)
Press= 6
0
Got a connection from ('192.168.4.2', 64821)
Press= 6
0
Got a connection from ('192.168.4.2', 64824)
以上是关于Micropython esp32/8266AP模式下自定义GPIO状态显示+主动按键控制的主要内容，如果未能解决你的问题，请参考以下文章
Micropython esp32/8266AP模式下自定义GPIO状态显示+主动按键控制
MicroPython ESP32/8266定时器中断示例解析
Arduino ESP8266/32 自定义IO组网页状态显示与控制
Micropython esp32/8266网页点灯控制示例