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

2021-7-31 20:48:57

演示

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

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

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

先来一段演示视频：

再来完整代码：

web_server_iot.zip (9.04 KB, 下载次数: 10 )

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

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

复制代码

2. 修改配置：

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

复制代码

文件CMakeLists.txt：
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文件

/*
简单web server控制IoT
*/
#include
#include
#include
#include
#include
#include
#include "nvs_flash.h"
#include "esp_netif.h"
#include "protocol_examples_common.h"
#include
#include "driver/gpio.h"
#include "led_strip.h"
/*
通过提供web server服务，来提供http接口，实现IoT控制
*/
static const char *TAG = "webserver_iot";
#define IOT_GPIO_RMT_CHANNEL 0
#define IOT_GPIO 8
static const char *CTRL_OPEN = "open";
static const char *CTRL_CLOSE = "close";
static led_strip_t *pStrip_a;
static uint8_t s_led_state = 0;
......
/* 主程序 */
void app_main(void)
{
static httpd_handle_t server = NULL;
/* 初始化LED */
configure_led();
/* 网络初始化 */
ESP_ERROR_CHECK(nvs_flash_init());
ESP_ERROR_CHECK(esp_netif_init());
ESP_ERROR_CHECK(esp_event_loop_create_default());
/* 使用默认演示例子中的example_connect连接wifi，具体见examples/protocols/README.md */
ESP_ERROR_CHECK(example_connect());
/* 设置wifi事件回调 */
ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &connect_handler, &server));
ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, WIFI_EVENT_STA_DISCONNECTED, &disconnect_handler, &server));
/* 首次主动启动web server */
server = start_webserver();
}

复制代码

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控制