【Micropython esp32/8266】AP模式下自定义GPIO状态显示+主动按键控制

perseverance52

已于 2022-09-11 16:30:08 修改

阅读量1.8k

点赞数 2

分类专栏： MicroPython嵌入式开发 # MicroPython for ESP8266 # MicroPython for ESP32 文章标签： MicroPython 网页控制 esp32/8266

于 2022-09-09 22:40:19 首次发布

本文为Perseverance52博主原创文章，未经博主允许，不得转载！

本文链接：https://blog.csdn.net/weixin_42880082/article/details/126790155

版权

MicroPython嵌入式开发同时被 3 个专栏收录

64 篇文章 98 订阅

订阅专栏

MicroPython for ESP32

47 篇文章 42 订阅

订阅专栏

MicroPython for ESP8266

13 篇文章 5 订阅

订阅专栏

【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>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>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>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>""" + 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)