ESP32C3使用WEB网页配网教程

水连珠tech 2024-07-30 15:33:01 阅读 63

ESP32C3 使用web网页配网教程

概述

今天我来给大家介绍一下如何用 ESP32C3 创建一个网页,用来配置 WiFi 参数。通过这种方式,我们可以通过网页输入 WiFi 的 SSID 和密码,让 ESP32C3 连接到指定的 WiFi 网络。

先决条件

在开始之前,确保你已经搞定了以下几个事情:

安装并配置好 ESP-IDF 开发环境。对 ESP-IDF 和 ESP32C3 有个基本的了解。

步骤

1. 克隆项目仓库

首先,从 GitHub 或 Gitee 上克隆项目仓库:

GitHub 链接: https://github.com/renbingcheng/esp_web_wificfgGitee 链接: https://gitee.com/renbingcheng/esp_web_wificfg

<code>git clone https://github.com/renbingcheng/esp_web_wificfg

cd esp_web_wificfg

或者

git clone https://gitee.com/renbingcheng/esp_web_wificfg

cd esp_web_wificfg

2. 配置项目

打开 menuconfig 配置界面:

idf.py menuconfig

在这里,确保设置了正确的目标芯片(ESP32C3)和其他相关参数。

3. 项目代码讲解

主文件 main.c

这个文件包含了启动 WiFi AP 模式和配置网页服务器的代码。以下是关键代码片段的讲解:

#include <string.h>

#include "freertos/FreeRTOS.h"

#include "freertos/task.h"

#include "freertos/event_groups.h"

#include "esp_system.h"

#include "esp_wifi.h"

#include "esp_event.h"

#include "esp_log.h"

#include "esp_netif.h"

#include "nvs_flash.h"

#include "lwip/err.h"

#include "lwip/sys.h"

#define WIFI_SSID "your_wifi_ssid"

#define WIFI_PASS "your_wifi_password"

#define MAX_RETRY 5

static EventGroupHandle_t s_wifi_event_group;

#define WIFI_CONNECTED_BIT BIT0

#define WIFI_FAIL_BIT BIT1

static const char *TAG = "wifi_station";

static int s_retry_num = 0;

static void event_handler(void* arg, esp_event_base_t event_base, int32_t event_id, void* event_data) {

if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_START) {

esp_wifi_connect();

} else if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_DISCONNECTED) {

if (s_retry_num < MAX_RETRY) {

esp_wifi_connect();

s_retry_num++;

ESP_LOGI(TAG, "retry to connect to the AP");

} else {

xEventGroupSetBits(s_wifi_event_group, WIFI_FAIL_BIT);

}

ESP_LOGI(TAG,"connect to the AP fail");

} else if (event_base == IP_EVENT && event_id == IP_EVENT_STA_GOT_IP) {

ip_event_got_ip_t* event = (ip_event_got_ip_t*) event_data;

ESP_LOGI(TAG, "got ip:%s", ip4addr_ntoa(&event->ip_info.ip));

s_retry_num = 0;

xEventGroupSetBits(s_wifi_event_group, WIFI_CONNECTED_BIT);

}

}

void wifi_init_sta(void) {

s_wifi_event_group = xEventGroupCreate();

esp_netif_init();

esp_event_loop_create_default();

esp_netif_create_default_wifi_sta();

wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();

esp_wifi_init(&cfg);

esp_event_handler_instance_t instance_any_id;

esp_event_handler_instance_t instance_got_ip;

esp_event_handler_instance_register(WIFI_EVENT, ESP_EVENT_ANY_ID, &event_handler, NULL, &instance_any_id);

esp_event_handler_instance_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &event_handler, NULL, &instance_got_ip);

wifi_config_t wifi_config = {

.sta = {

.ssid = WIFI_SSID,

.password = WIFI_PASS

},

};

esp_wifi_set_mode(WIFI_MODE_STA);

esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config);

esp_wifi_start();

EventBits_t bits = xEventGroupWaitBits(s_wifi_event_group,

WIFI_CONNECTED_BIT | WIFI_FAIL_BIT,

pdFALSE,

pdFALSE,

portMAX_DELAY);

if (bits & WIFI_CONNECTED_BIT) {

ESP_LOGI(TAG, "connected to ap SSID:%s", WIFI_SSID);

} else if (bits & WIFI_FAIL_BIT) {

ESP_LOGI(TAG, "Failed to connect to SSID:%s", WIFI_SSID);

} else {

ESP_LOGE(TAG, "UNEXPECTED EVENT");

}

esp_event_handler_instance_unregister(IP_EVENT, IP_EVENT_STA_GOT_IP, instance_got_ip);

esp_event_handler_instance_unregister(WIFI_EVENT, ESP_EVENT_ANY_ID, instance_any_id);

vEventGroupDelete(s_wifi_event_group);

}

void app_main(void) {

esp_err_t ret = nvs_flash_init();

if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {

ESP_ERROR_CHECK(nvs_flash_erase());

ret = nvs_flash_init();

}

ESP_ERROR_CHECK(ret);

wifi_init_sta();

}

关键部分讲解

WiFi 事件处理器:处理 WiFi 连接和断开事件。WiFi 初始化:配置并启动 WiFi。主函数:初始化 NVS(非易失性存储),然后启动 WiFi STA 模式。

4. 添加网页代码

在项目目录中创建一个新的文件 index.html,并将以下代码复制到文件中:

<!DOCTYPE html>

<html lang="zh">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>WiFi 密码配置</title>

<style>

.form-container {

max-width: 500px;

margin: 0 auto;

padding: 2rem;

border: 1px solid #ccc;

border-radius: 10px;

}

label, input {

display: block;

margin-bottom: 1rem;

}

@media (max-width: 600px) {

.form-container {

padding: 1rem;

}

}

</style>

</head>

<body>

<div class="form_container">code>

<h3>WiFi 密码配置</h3>

<form>

<label for="wifi_ssid">WiFi 名称</label>code>

<input type="text" id="wifi_ssid" name="wifi_ssid" placeholder="ssid">code>

<label for="wifi_password">密码</label>code>

<input type="password" id="wifi_password" name="wifi_password" placeholder="password">code>

<button id="send_wifi" type="button" onclick="send_wifi_data()">提交</button>code>

<button id="clear_input" type="button" onclick="clear_button()">清除</button>code>

</form>

</div>

<script>

function send_wifi_data() {

var wifi_ssid = document.getElementById("wifi_ssid").value;

var wifi_password = document.getElementById("wifi_password").value;

var xhttp = new XMLHttpRequest();

xhttp.open("POST", "/wifi_data", true);

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4) {

if (xhttp.status == 200) {

console.log(xhttp.responseText);

alert(xhttp.responseText);

} else if (xhttp.status == 0) {

alert("Server closed the connection abruptly!");

} else {

alert(xhttp.status + " Error!\n" + xhttp.responseText);

}

}

};

var data = {

"wifi_ssid": wifi_ssid,

"wifi_passwd": wifi_password

}

xhttp.send(JSON.stringify(data));

}

function clear_button() {

document.getElementById("wifi_ssid").value = '';

document.getElementById("wifi_password").value = '';

}

</script>

</body>

</html>

5. 构建并烧录代码

使用以下命令构建并烧录代码到 ESP32C3:

idf.py build

idf.py flash

6. 监控输出

使用 idf.py monitor 监控 ESP32C3 的输出,确保设备成功连接到 WiFi 网络。

idf.py monitor

结论

通过以上步骤,你已经成功地在 ESP32C3 上设置了一个用于配置 WiFi 参数的网页服务器。这种方法不仅方便,而且可以让你的 IoT 设备在不同的网络环境下更容易连接。

希望这个教程对你有所帮助!如果有任何问题或建议,欢迎在下方留言讨论。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。