• 物联网开发笔记（33）- 使用Micropython开发ESP32开发板之手机扫二维码远程控制开关灯（3）

    一、目的

            上一节我们实现了远程查看开发板灯的状态，这一节在我们远程控制LED灯的开关。NICE!

    二、环境

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

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

    三、用到的知识

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

    四、用到的图片

         开关的图标：

                  

     * 绿色图标为开，红色图标为关

     五、HTML代码

            我们只需要将图标添加到我们上一节的代码即可

    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.     <div>
    11.         <span style="font-size: 100px;vertical-align:middle;">开关 span>
    12.         <a href="/switch_btn">
    13.             <img src="https://img-blog.csdnimg.cn/bc4239a675104179bbbf4fc57bff6188.png" style="height:160px;vertical-align:middle;">
    14.         a>
    15.     div>
    16. body>
    17. 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.     <div>
    11.         <span style="font-size: 100px;vertical-align:middle;">开关 span>
    12.         <a href="/switch_btn">
    13.             <img src="https://img-blog.csdnimg.cn/aecc049ebe46438eae917321246bdf99.png" style="height:160px;vertical-align:middle;">
    14.         a>
    15.     div>
    16. body>
    17. html>

    六、python代码

            更新如下，稍作改动：

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

    七、演示效果

            我们在Thonny上运行程序，首先shell打印如下：

    同时我们看到屏幕显示二维码，我们使用手机浏览器扫描二维码：

     

     

    然后手机上显示当前的状态，我们可以点击手机上的开关实现对远程开关灯的操作。

     

     

    八、结束语

            好了，通过这三节的学习，相信你已经学会了，如何远程控制开关灯，如果你需要更加深入的学习，建议学习Python网络编程的知识，包括但不限于TCP，HTTP等。

  • 相关阅读:
    计算机视觉面试知识点总结
    基于RabbitMQ的模拟消息队列之五——虚拟主机设计
    数仓4.0（三）------数据仓库系统（续）
    查看iOS应用的ipa包构建版本6种方法
    19_ue4进阶末日生存游戏开发[关联UI和数据]
    jmeter录制登录脚本
    如何判断用户的密码是否为强密码？
    操控xls文件的jxl包下载
    vmware安装MacOS以及flutter遇到的问题
    【算法|双指针系列No.5】leetcode611. 有效三角形的个数
  • 原文地址：https://blog.csdn.net/zhusongziye/article/details/127713178