• 物联网开发笔记(32)- 使用Micropython开发ESP32开发板之手机扫二维码远程控制开关灯(2)


    一、目的

            上一节我们测试了远程控制的环境是好的,这一节在我们的240x240的oled屏幕上显示二维码,然后用手机扫二维码,远程控制LED灯的状态。

    二、环境

            ESP32 + 240x240的oled彩色屏幕+ Thonny IDE + 几根杜邦线    

            接线方式请看上前面的章节,此处不再重复赘述。

     

    三、用到的知识

            前面我们学习的远程控制开关LED灯和240x240屏幕的知识。大家不会的话,请看前面的章节。不懂得也可以留言哈。

    四、用到的图片

            用来返回开发板等的状态,不能放在开发板上,需要放在网站上,因为开发板的内存太小了。你可以向我一样放在csdn上。

            

           

    五、Html代码

            把下面的两个HTML代码放到ESP32开发板上。

    led_on.html:

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>blog.csdn.nettitle>
    6. head>
    7. <body>
    8. <span style="font-size: 40px;">手机远程控制LED系统span><span style="font-size: 30px;"> blog.csdn.net/zhusongziyespan>
    9. <img src="https://img-blog.csdnimg.cn/f37948052b334aa5b6e7d7b79ef768f2.png" style="width: 100%;">
    10. body>
    11. html>

    led_off.html:

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>blog.csdn.nettitle>
    6. head>
    7. <body>
    8. <span style="font-size: 40px;">手机远程控制LED系统span><span style="font-size: 30px;"> https://blog.csdn.net/zhusongziyespan>
    9. <img src="https://img-blog.csdnimg.cn/93d26a24c29044509ca5ca62df50107c.png" style="width: 100%;">
    10. body>
    11. html>

    六、Python代码

    把下面的pythL代码放到ESP32开发板上。

    1. from uQR import QRCode
    2. from machine import Pin, SPI
    3. import st7789_new
    4. import socket
    5. import time
    6. import network
    7. import machine
    8. import re
    9. # 全局变量,标记led灯
    10. led = Pin(2, Pin.OUT)
    11. # 无线连接函数
    12. def do_connect():
    13. wlan = network.WLAN(network.STA_IF)
    14. wlan.active(True)
    15. if not wlan.isconnected():
    16. print('connecting to network...')
    17. wlan.connect('WIFI名字', 'WIFI密码') #WIFI名字密码
    18. i = 1
    19. while not wlan.isconnected():
    20. print("正在链接中...{}".format(i))
    21. i += 1
    22. time.sleep(1)
    23. print('network config:', wlan.ifconfig())
    24. return wlan.ifconfig()[0]
    25. # 显示二维码函数
    26. def show_qrcode(ip):
    27. tft = st7789_new.ST7889_Image(SPI(2, 80000000), dc=Pin(4), cs=Pin(5), rst=Pin(15)) # 注意dc=Pin(4),前面我们用的2,因为板载蓝色LED占用的2所以这里改为4
    28. tft.fill(st7789_new.color565(255, 255, 255)) # 背景设置为白色
    29. qr = QRCode(border=2)
    30. qr.add_data('http://{}'.format(ip)) # ip 192.168.0.106-->http://192.168.0.106
    31. matrix = qr.get_matrix()
    32. row_len = len(matrix)
    33. col_len = len(matrix[0])
    34. print("row=%d, col=%d" % (row_len, col_len))
    35. # 放大倍数
    36. scale_rate = 8
    37. # 准备黑色,白色数据
    38. buffer_black = bytearray(scale_rate * scale_rate * 2) # 每个点pixel有2个字节表示颜色
    39. buffer_white = bytearray(scale_rate * scale_rate * 2) # 每个点pixel有2个字节表示颜色
    40. color_black = st7789_new.color565(0, 0, 0)
    41. color_black_byte1 = color_black & 0xff00 >> 8
    42. color_black_byte2 = color_black & 0xff
    43. color_white = st7789_new.color565(255, 255, 255)
    44. color_white_byte1 = color_white & 0xff00 >> 8
    45. color_white_byte2 = color_white & 0xff
    46. for i in range(0, scale_rate * scale_rate * 2, 2):
    47. buffer_black[i] = color_black_byte1
    48. buffer_black[i + 1] = color_black_byte2
    49. buffer_white[i] = color_white_byte1
    50. buffer_white[i + 1] = color_white_byte2
    51. # 循环次数不增加,只增加每次发送的数据量,每次发送scale_rate X scale_rate个点的信息
    52. for row in range(row_len):
    53. for col in range(col_len):
    54. if matrix[row][col]:
    55. # tft.pixel(row, col, st7789_new.color565(0, 0, 0))
    56. tft.show_img(row * scale_rate, col * scale_rate, row * scale_rate + scale_rate - 1, col * scale_rate + scale_rate - 1, buffer_black)
    57. else:
    58. # tft.pixel(row, col, st7789_new.color565(255, 255, 255))
    59. tft.show_img(row * scale_rate, col * scale_rate, row * scale_rate + scale_rate - 1 , col * scale_rate + scale_rate - 1, buffer_white)
    60. col += 1
    61. row += 1
    62. # 开启客户端
    63. def handle_request(client_socket):
    64. """
    65. 处理浏览器发送过来的数据
    66. 然后回送相对应的数据(html、css、js、img。。。)
    67. :return:
    68. """
    69. # 1. 接收
    70. recv_content = client_socket.recv(1024).decode("utf-8")
    71. print("-----接收到的数据如下----:")
    72. # print(recv_content)
    73. lines = recv_content.splitlines() # 将接收到的http的request请求数据按照行进行切割到一个列表中
    74. # for line in lines:
    75. # print("---")
    76. # print(line)
    77. # 2. 处理请求
    78. # 提取出浏览器发送过来的request中的路径
    79. # GET / HTTP/1.1
    80. # GET /index.html HTTP/1.1
    81. # .......
    82. # lines[0]
    83. # 提取出/index.html 或者 /
    84. request_file_path = re.match(r"[^/]+(/[^ ]*)", lines[0]).group(1)
    85. print("----提出来的请求路径是:----")
    86. print(request_file_path)
    87. # 完善对方访问主页的情况,如果只有/那么就认为浏览器要访问的是主页
    88. if request_file_path == "/":
    89. if led.value():
    90. request_file_path = "led_on.html"
    91. else:
    92. request_file_path = "led_off.html"
    93. try:
    94. # 取出对应的文件的数据内容
    95. with open(request_file_path, "rb") as f:
    96. content = f.read()
    97. except Exception as ret:
    98. # 如果要是有异常,那么就认为:找不到那个对应的文件,此时就应该对浏览器404
    99. print(ret)
    100. response_headers = "HTTP/1.1 404 Not Found\r\n"
    101. response_headers += "Content-Type:text/html;charset=utf-8\r\n"
    102. response_headers += "\r\n"
    103. response_boy = "----sorry,the file you need not found-------"
    104. response = response_headers + response_boy
    105. # 3.2 给浏览器回送对应的数据
    106. client_socket.send(response.encode("utf-8"))
    107. else:
    108. # 如果要是没有异常,那么就认为:找到了指定的文件,将其数据回送给浏览器即可
    109. response_headers = "HTTP/1.1 200 OK\r\n"
    110. response_headers += "Content-Type:text/html;charset=utf-8\r\n"
    111. response_headers += "\r\n"
    112. response_boy = content
    113. response = response_headers.encode("utf-8") + response_boy
    114. # 3.2 给浏览器回送对应的数据
    115. client_socket.send(response)
    116. # 4. 关闭套接字
    117. client_socket.close()
    118. # 开启服务端
    119. def tcp_server_control_led():
    120. print("---1---")
    121. # 1. 创建套接字
    122. tcp_server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    123. # 为了保证在tcp先断开的情况下,下一次依然能够使用指定的端口,需要设置
    124. tcp_server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    125. print("---2---")
    126. # 2. 绑定本地信息
    127. tcp_server_socket.bind(("", 80))
    128. print("---3---")
    129. # 3. 变成监听套接字
    130. tcp_server_socket.listen(128)
    131. print("---4---")
    132. while True:
    133. # 4. 等待客户端的链接
    134. client_socket, client_info = tcp_server_socket.accept()
    135. print("---5---")
    136. print(client_info) # 打印 当前是哪个客户端进行了请求
    137. print("---6---")
    138. # 5. 为客户端服务
    139. handle_request(client_socket)
    140. print("---7---")
    141. # 6. 关闭套接字
    142. tcp_server_socket.close()
    143. def main():
    144. # 1. 链接wifi
    145. ip = do_connect()
    146. print("ip地址是:", ip)
    147. # 2. 显示二维码
    148. show_qrcode(ip)
    149. # 3. 创建tcp服务器,等待客户端链接,然后根据客户端的命令控制LED灯
    150. tcp_server_control_led()
    151. if __name__ == "__main__":
    152. main()

    此时ESP32开发板上,我们放了3个文件:

    七、运行效果

            我们运行上述代码:

    首先打印如下信息,同时屏幕显示二维码:

     

     然后用手机扫描二维码,此时手机会显示我们开发板的图片:

     

    Thonny打印信息如下:

    八、期望

            好啦,这一节就到这里,下一节我们来讲述真正的手机页面远程控制板载的蓝色LED的亮灭哈,大家不要着急,先打好基础,要不然不容易么明白,哈哈哈。。。

  • 相关阅读:
    麒麟v10安装mysql(ARM架构)
    spark任务,使用 repartition 对数据进行了重新分区,但任务输入数据大小仍存在不均衡
    Docker创建mysql容器
    自然语言处理 Paddle NLP - 快递单信息抽取 (ERNIE 1.0)
    图形界面应用案例——关灯游戏(以及扩展)(python)
    我的NVIDIA开发者之旅——优化显卡性能
    sqli_lab安装与使用时问题解决
    .NET Core WebApi第7讲:项目的发布与部署
    2.2 数据通信的基础知识
    前端进击笔记第十一节 改善编程思维:从事件驱动到数据驱动
  • 原文地址:https://blog.csdn.net/zhusongziye/article/details/127712076