立即注册

扫一扫,访问微社区

micropython-microbit 中文社区

查看: 1303|回复: 0

ESP8266 的http服务器及WEB控制演示

    [复制链接]
  • TA的每日心情
    奋斗
    2018-9-3 08:49
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    发表于 2018-5-9 00:33:18 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    本帖最后由 microCPyE 于 2018-5-9 10:56 编辑

    WEB.png
    电脑端

    mp.png
    手机端

    alloff.png
    全关状态

    演示代码

    Github仓库:https://github.com/ELE-Clouds/Mo ... ESP8266/WIFI/httpcc
    1. # -*- coding: UTF-8 -*-

    2. u'''
    3. ******************************************************************************
    4. * 文  件:__init__.py
    5. * 概  述:模块初始化
    6. * 版  本:V0.10
    7. * 作  者:Robin Chen
    8. * 日  期:2018年5月8日
    9. * 历  史: 日期             编辑           版本         记录
    10.           2018年5月8日    Robin Chen    V0.10       创建文件
    11. ******************************************************************************'''

    12. from ESP8266.WIFI.httpcc import netConnect

    13. SSID="WIFI名称"
    14. PASSWORD="WIFI密码"

    15. ip = netConnect.connectWifi(SSID,PASSWORD)   #连接网络

    16. if ip != "0,0,0,0":
    17.     print("连接成功,当前IP为:",ip)
    18. else:
    19.     print("连接失败,3秒后重新连接!")

    20. l = ("Web控制功能演示","WEB数据传输功能演示")


    21. while True:
    22.     print("\n\n\n  操作选择  \n  -------")
    23.     for i in range(len(l)):
    24.         print(i, ":", l[i])
    25.     print("====================")
    26.     n = input("请输入序号进行选择,输入'Q'或'q'回车后退出:")

    27.     if n == "0":
    28.         from ESP8266.WIFI.httpcc import WebControl
    29.         break
    30.     elif n == "1":
    31.         from ESP8266.WIFI.httpcc import DataUp
    32.         break
    33.     elif n == "Q" or n == "q":
    34.         break
    35.     else:
    36.         continue
    复制代码
    1. # -*- coding: UTF-8 -*-

    2. u'''
    3. ******************************************************************************
    4. * 文  件:netConnect.py
    5. * 概  述:网络连接函数
    6. * 版  本:V0.10
    7. * 作  者:Robin Chen
    8. * 日  期:2018年5月8日
    9. * 历  史: 日期             编辑           版本         记录
    10.           2018年5月8日    Robin Chen    V0.10       创建文件
    11. ******************************************************************************'''

    12. import network
    13. import time

    14. # 设当前设备为“客户端”模式,并连接WIFI
    15. def connectWifi(_ssid, _passwd):
    16.     global wlan
    17.     wlan = network.WLAN(network.STA_IF)
    18.     wlan.active(True)
    19.     wlan.disconnect()
    20.     wlan.connect(_ssid, _passwd)
    21.     while (wlan.ifconfig()[0] == '0.0.0.0'):
    22.         time.sleep(3)   # 3秒后重新连接
    23.     return wlan.ifconfig()[0]

    24. # 设当前设备为AP模式
    复制代码
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>ESP8266 WEB控制功能演示</title>
    5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    6. <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
    7. <meta http-equiv="content-style-type" content="text/css">
    8. </head>
    9. <body>
    10. <div style="text-align: center;"><h1>ESP8266 Web 控制三色灯亮灭</h1></div>

    11. <form action="" method="">
    12. <div style="text-align: center;">
    13. <img src="ESP8266/WIFI/httpcc/chinabird.jpg" alt="">
    14. <hr align="center" width="100%">
    15. </div>
    16. <div style="text-align: center;">
    17. <button name="CMD" value="redlight" type="submit"> 红  灯 </button>
    18. <button name="CMD" value="greenlight" type="submit" > 绿  灯 </button>
    19. <button name="CMD" value="bluelight" type="submit" > 蓝  灯 </button>
    20. </div>
    21. <br>
    22. <div style="text-align: center;">
    23. <button name="CMD" value="alloff" type="submit"> 全部关闭 </button>
    24. <button name="CMD" value="allon" type="submit" > 全部打开 </button>
    25. </div>
    26. </form>
    27. </body>
    28. </html>
    复制代码
    1. # -*- coding: UTF-8 -*-

    2. u'''
    3. ******************************************************************************
    4. * 文  件:WebControl.py
    5. * 概  述:Web页面控制设备
    6. * 版  本:V0.10
    7. * 作  者:Robin Chen
    8. * 日  期:2018年5月8日
    9. * 历  史: 日期             编辑           版本         记录
    10.           2018年5月8日    Robin Chen    V0.10       创建文件
    11. ******************************************************************************'''
    12. from ESP8266.WIFI.httpcc import netConnect  # 此处引用为获取netConnect文件中的全局变量“wlan”。
    13. import socket
    14. from machine import Pin

    15. # 读取WEB页面代码文件
    16. htmls = open("ESP8266/WIFI/httpcc/WebKZ.html",“r”)
    17. html= htmls.read()      #此处直接由文件读取,如果直接在此处写入页面代码,须使用 '''  ''' 将代码包含,否则无法显示
    18. htmls.close()


    19. # 功能和引脚对照表
    20. #D1->GPIO5        ----        红色
    21. #D2->GPIO4        ----        绿色
    22. #D5->GPIO14        ----        蓝色


    23. ledBlue = Pin(14, Pin.OUT)        # 蓝色
    24. ledGrean = Pin(4, Pin.OUT)        # 绿色
    25. ledRed = Pin(5, Pin.OUT)        # 红色


    26. # 只亮绿色
    27. def greanOnly():
    28.   ledBlue.off()
    29.   ledGrean.on()
    30.   ledRed.off()

    31. # 全开
    32. def allOn():
    33.   ledBlue.on()
    34.   ledGrean.on()
    35.   ledRed.on()

    36. # 只亮红色
    37. def redOnly():
    38.   ledBlue.off()
    39.   ledGrean.off()
    40.   ledRed.on()

    41. # 只亮蓝色
    42. def blueOnly():
    43.   ledBlue.on()
    44.   ledGrean.off()
    45.   ledRed.off()

    46. # 全关
    47. def allOff():
    48.   ledBlue.off()
    49.   ledGrean.off()
    50.   ledRed.off()


    51. port=80
    52. listenSocket=None
    53. ip=netConnect.wlan.ifconfig()[0]

    54. listenSocket = socket.socket() #建立一个实例
    55. listenSocket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    56. listenSocket.bind((ip,port))   #绑定建立网路连接的ip地址和端口
    57. listenSocket.listen(5)         #开始侦听

    58. print ('等待TCP连接...')

    59. while True:
    60.     print("连接中.....")
    61.     conn, addr = listenSocket.accept()
    62.     print("已连接 %s" % str(addr))
    63.     request = conn.recv(1024)
    64.     print("内容: %s" % str(request))
    65.     request = str(request)


    66.     CMD_grean = request.find('/?CMD=greenlight') #如果在请求的包中,发现有?CMD=greenlight,下同
    67.     CMD_allon = request.find('/?CMD=allon')
    68.     CMD_red = request.find('/?CMD=redlight')
    69.     CMD_blue = request.find('/?CMD=bluelight')
    70.     CMD_alloff = request.find('/?CMD=alloff')


    71.     print("Data: " + str(CMD_grean))
    72.     print("Data: " + str(CMD_allon))
    73.     print("Data: " + str(CMD_red))
    74.     print("Data: " + str(CMD_blue))
    75.     print("Data: " + str(CMD_alloff))


    76.     if CMD_grean == 6:  #如果此命令有效,下同
    77.         print('+grean')
    78.         greanOnly()     #调用仅点亮绿灯函数,下同

    79.     if CMD_allon == 6:
    80.         print('+allon')
    81.         allOn()

    82.     if CMD_red == 6:
    83.         print('+red')
    84.         redOnly()

    85.     if CMD_blue == 6:
    86.         print('+blue')
    87.         blueOnly()

    88.     if CMD_alloff == 6:
    89.         print('+alloff')
    90.         allOff()

    91.     response = html       #将html的网页定义装载在回应字段
    92.     conn.send(response)   #send到浏览器上,就形成了控制界面
    93.     conn.close()
    复制代码



    效果

    效果图.png

    本次在代码中增加了控制台选择界面,方便选择不同的演示模块使用。

    allon.png
    所有颜色灯全开

    b.png
    仅亮蓝灯

    g.png
    仅亮绿灯


    R.png

    仅亮红灯

    总结
    web控制的前提首先是要在ESP8266模块中加入web控制页面代码,当有外部设备访问时,ESP8266就将代码发送到对方的浏览器中进行显示。然后在浏览器中通过按钮将信息以WEB连接地址的形式发送给ESP8266模块。ESP8266模块再对连接地址信息进行解析,找到有用的信息,然后进行判断,并作出相应的动作。
    在做WEB页面时要注意使用表单系统,即按钮部件要在<form></form>标签内,否则无效。ESP8266主要根据按钮的name属性和value属性值进行判断是哪个按钮进行了动作。从而作出相应的动作。在点击按钮后,按钮的name属性与value属性值将会被提交到连接地址中,然后被ESP8266模块截获。





                                   
    登录/注册后可看大图


    欢迎大家留言讨论!
    论坛关联QQ群:541341988
    Linux用户也可以加入我们的 IRC 社区: #MicroPython_CN    (MicroPython中文社区)
    当然,Windows用户也是能进得去的.
    IRC.png

    手机扫码浏览

    本帖被以下淘专辑推荐:

    回复

    使用道具 举报

    游客
    回复
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    站长推荐上一条 /3 下一条

    Archiver|手机版|小黑屋|micropython-microbit 中文社区 ( 鄂ICP备17012469号 )

    GMT+8, 2018-9-20 13:12 , Processed in 0.138346 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表