RISC-V技术论坛

登录

直播中

HonestQiao

8年用户 560经验值

擅长:嵌入式技术

私信 关注

【乐鑫ESP32-C3 RISC-V处理器IoT开发板试用体验】通过浏览器访问网页进行IoT控制

单片机 ESP32

演示

本帖最后由 HonestQiao 于 2021-8-1 08:33 编辑

今天要给大家演示的，通过浏览器访问网页进行IoT控制。

需要完成的工作包括：
1. 开发板连接WiFi
2. 开发板连接WiFi后，提供web服务
3. 电脑或者手机通过浏览器访问开发板提供的web服务
4. 在网页界面上，控制开发板上LED等的点亮和关闭

先来一段演示视频：


再来完整代码：

web_server_iot.zip (9.04 KB)
(下载次数: 10, 2021-7-31 20:15 上传)

讲解如下：
1. 拷贝examples中的http_server/simple，以此为基础进行：

1. cp -r $IDF_PATH/examples/protocols/http_server/simple web_server_iot
   

2. 修改配置：

1. 文件Makefile：
   
2. EXTRA_COMPONENT_DIRS := $(IDF_PATH)/examples/common_components/led_strip
   
3. EXTRA_COMPONENT_DIRS += $(IDF_PATH)/examples/common_components/protocol_examples_common

1. 文件CMakeLists.txt：
   
2. set(EXTRA_COMPONENT_DIRS "$ENV{IDF_PATH}/examples/common_components/led_strip $ENV{IDF_PATH}/examples/common_components/protocol_examples_common")

因为本实例参考了blink例子，进行板载LED的控制，所以EXTRA_COMPONENT_DIRS中需要添加examples/common_components/led_strip

3. 主代码：具体代码，请查看完整代码包中的main.c文件

1. /*
   
2.     简单web server控制IoT
   
3. */
   
4. 
   
5. #include
   
6. #include
   
7. #include
   
8. #include
   
9. #include
   
10. #include
    
11. #include "nvs_flash.h"
    
12. #include "esp_netif.h"
    
13. #include "protocol_examples_common.h"
    
14. #include
    
15. #include "driver/gpio.h"
    
16. #include "led_strip.h"
    
17. 
    
18. /*
    
19.     通过提供web server服务，来提供http接口，实现IoT控制
    
20. */
    
21. 
    
22. static const char *TAG = "webserver_iot";
    
23. 
    
24. #define IOT_GPIO_RMT_CHANNEL 0
    
25. #define IOT_GPIO 8
    
26. 
    
27. static const char *CTRL_OPEN = "open";
    
28. static const char *CTRL_CLOSE = "close";
    
29. static led_strip_t *pStrip_a;
    
30. static uint8_t s_led_state = 0;
    
31. 
    
32. ......
    
33. 
    
34. /* 主程序 */
    
35. void app_main(void)
    
36. {
    
37.     static httpd_handle_t server = NULL;
    
38. 
    
39.     /* 初始化LED */
    
40.     configure_led();
    
41. 
    
42.     /* 网络初始化 */
    
43.     ESP_ERROR_CHECK(nvs_flash_init());
    
44.     ESP_ERROR_CHECK(esp_netif_init());
    
45.     ESP_ERROR_CHECK(esp_event_loop_create_default());
    
46. 
    
47.     /* 使用默认演示例子中的example_connect连接wifi，具体见examples/protocols/README.md */
    
48.     ESP_ERROR_CHECK(example_connect());
    
49. 
    
50.     /* 设置wifi事件回调 */
    
51.     ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &connect_handler, &server));
    
52.     ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, WIFI_EVENT_STA_DISCONNECTED, &disconnect_handler, &server));
    
53. 
    
54.     /* 首次主动启动web server */
    
55.     server = start_webserver();
    
56. }
    

4. 逻辑讲解：

• configure_led()：初始化led，参考blink
  
• 连接wifi：example_connect()，演示组件中提供的方法，对应的wifi连接信息，在menuconfig中设置，后续有说明
• 注册wifi事件回调：
  1.   esp_event_handler_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &connect_handler, &server);
     
  2.     esp_event_handler_register(WIFI_EVENT, WIFI_EVENT_STA_DISCONNECTED, &disconnect_handler, &server);
     
  
  
• 启动web服务：start_webserver()
• 接受用户请求，进行状态返回，或者LED控制
  

在wifi事件IP_EVENT_STA_GOT_IP(成功连接并获得ip地址)的回调中，有两个关键的httpd_register_uri_handler注册：

1.         httpd_register_uri_handler(server, &index_config);
   
2.         httpd_register_uri_handler(server, &ctrl_config);

通过index_config、ctrl_config的设置：

1. static const httpd_uri_t index_config = {
   
2.     .uri       = "/",
   
3.     .method    = HTTP_GET,
   
4.     .handler   = index_get_handler,
   
5.     .user_ctx  = "..."
   
6. };
   
7. 
   
8. static const httpd_uri_t ctrl_config = {
   
9.     .uri       = "/ctrl",
   
10.     .method    = HTTP_POST,
    
11.     .handler   = ctrl_post_handler,
    
12.     .user_ctx  = NULL
    
13. };

我们可以看到，分别注册了两个网址回调，一个是/，用来访问默认的网页界面，一个是/ctrl，用来提供控制指令的发送。
两者对应的回调函数，分别为：

• index_get_handler：表示处理直接访问/的请求，如果为/?status=时间戳，就会返回当前的LED状态，否则，显示一个控制界面。
• ctrl_post_handler：表示接受POST /ctrl的请求，收到open则点亮LED，收到close，则关闭LED
  

而控制led，则由两个函数完成：

• configure_led：初始化LED
• ctrl_led：点亮或者关闭LED
  

注意，代码中定义了#define IOT_GPIO 8，板载的LED为GPIO8，可以根据自己的实际需要进行设置

上述控制界面网页，由index_config.user_ctx来提供：

1. 
   
2. 
   
3. 
   
4.    
   
5.    
   
6.    
   
7.    
   
8.    
   
9.    
   
10.    
    
11.    
    
12.    
    
13.    
    
14. 
    
    
    
15. 
    
16.    
    
    
17.         
    
    
18.             

    Web Server IoT

    
    
19.         

        

            

                Open

                Close

            

        

        

        

        

   

• 浏览器访问 http://ip/，返回上述控制界面
• 页面发送ajax请求 /?status=1234567890，返回当前LED的状态open 或者 close
• 点击Open按钮后，发送ajax post请求到/ctrl，数据为open，web server收到后，点亮LED，并返回open
• 点击Close按钮后，发送ajax post请求到/ctrl，数据为close，web server收到后，关闭LED，并返回close
• 页面收到web server返回后，会在状态区块中，显示：Status: [状态]
  

• idf set-target esp32c3设置target
• idf menuconfig配置：
  

• wifi配置：
  

• http server配置：
  

• http请求头长度设置
  

• 保存配置：
  

• 配置完成后，执行idf build进行编译
• 刷机：idf flash
• 监控：idf monitor
• wifi配置错误时，会如下显示：
  

• 正常连接wifi，并开启web server，其中显示的ip地址，即为网页控制要访问的地址
  

• 访问首页
  

• 控制操作对应的输出
  

• 命令行请求接口测试：
  

演示.mp4 (2021-7-31 20:11 上传)

1.23 MB, 下载次数: 4

回帖（1）

dianzi

2021-8-4 15:56:44

好帖子，感谢分享！

好帖子，感谢分享！

举报

×

20

完善资料，
赚取积分