Wi-Fi配置

ESP8266-ESP32 Adruino Wi-Fi配置

需求

• 在设备启动后，若无法连接Wi-Fi时，需要按AP模式​创建热点，随后根据热点ssid​与password​生成二维码，让用户可以连接到热点。在连接热点后，提供界面让用户输入可用的Wi-Fi信息，随后重启
• 在设备后，如果未进行参数配置则根据设备后台管理地址生成二维码，让用户可以进入后台设置参数

软件实现

依赖项

• 屏幕驱动: bodmer/TFT_eSPI​​

  • 框架：adruino​​
  • 平台: Raspberry Pi Pico (RP2040), STM32, ESP8266 and ESP32
  • 驱动：

• 二维码生成：https://github.com/peteha99/esp_gen_qr​

• Wi-Fi 管理模块：https://github.com/tzapu/WiFiManager​

任务拆分

1. 屏幕驱动
2. 二维码生成
3. 提供Wi-Fi配置界面

‍

具体实现

1. 屏幕驱动

生成二维码使用peteha99/esp_gen_qr​，需要依赖TFT_eSPI​库。该库用SPI方式驱动TFT屏幕，支持多款驱动（包括本项目使用的ST7789），和多个32位处理平台（针对ESP32、ESP8266、STM32FXXX、Rasp2040进行过专门的优化），同时针对部分型号MCU支持使用屏幕并口输出、DMA等特性。

除此之外，还提供一个配套的GUI库TFT_eWidget。

配置

使用TFT_eSPI​前需要按照自己的电路对库中一些宏定义进行修改，主要有两种方式完成设置：

用户配置文件

在依赖的库目录下（PIO项目：.pio/libdeps/you-env-name/TFT_eSPI）新建TFT_eSPI_Setups​文件夹用于存放修改后的用户配置文件User_Setup.h​，随后设置User_Setup_Select.h​指向我们修改后的配置文件例如：

#include <../TFT_eSPI_Setups/my_custom_setup.h>

在PIO中设置编译变量

我们还可以在platformio.ini中进行配置，本项目使用本方式进行配置，具体配置参数如下

build_flags =
  ;###############################################################
  ; TFT_eSPI library setting here (no need to edit library files):
  ;###############################################################
  -D USER_SETUP_LOADED=1      ; Set this settings as valid
  -D SMOOTH_FONT=1            ; needed to work with TFT-eFEX
  -D ST7789_DRIVER=1          ; Select driver
; -D TFT_INVERSION_ON=1
  -D TFT_WIDTH=240            ; Set TFT size
  -D TFT_HEIGHT=240
; -D TFT_RGB_ORDER=TFT_RGB    ; Colour order Red-Green-Blue
; -D TFT_RGB_ORDER=TFT_BGR    ; Colour order Blue-Green-Red
; -D LOAD_GLCD=1              ; Load Fonts
; -D LOAD_FONT2=1             ; Load Fonts
; -D LOAD_FONT4=1             ; Load Fonts
; -D LOAD_FONT7=1             ; Load Fonts
  -D TFT_MOSI=PIN_D7
  -D TFT_SCLK=PIN_D5
  -D TFT_CS=-1
  -D TFT_DC=PIN_D3            ; Data/Comand pin
  -D TFT_RST=PIN_D4           ; Reset pin
  -D SPI_FREQUENCY=40000000   ;27000000   ; Set SPI frequency
  -D SWAP_BYTES=1             ; For JPEG Decoder
  -D WM_DEBUG_LEVEL=DEBUG_NOTIFY ; WifiManager debug level DEBUG_MAX
  -D COIN_THING_SERIAL=0      ; Serial debugging

宏定义

宏定义	含义	值
USER_SETUP_LOADED	使用用户配置标志	1
ST7789_DRIVER	ST7789屏幕驱动，只能选择一个驱动	1
TFT_WIDTH	屏幕宽度	240
TFT_HEIGHT	屏幕高度	240
TFT_MOSI	SPI信号线，主出从入	PIN_D7
TFT_SCLK	SPI时钟线	PIN_D5
TFT_CS	片选引脚	-1
TFT_DC	数据/命令引脚	PIN_D3
TFT_RST	复位引脚	PIN_D4
SPI_FREQUENCY	SPI时钟频率	40000000
TFT_INVERSION_ON	屏幕上下翻转	默认值

示例

• 显示文字

  • // 加载文体
    xTft.loadFont(F("NotoSans-Regular20"));
    
    String msg = F("Hello World!");
    // 设置文字位置
    xTft.setCursor(5, 5);
    // 显示文字
    xTft.print(msg);
    // 卸载文体
    xTft.unloadFont();
    

2. 二维码生成

使用https://github.com/peteha99/esp_gen_qr.git​模块，提供字符串转二维码的功能

示例

• 显示Wi-Fi连接信息

  • #include <Arduino.h>
    #include <TFT_eSPI.h>
    #include <ESP_QRcode.h>
    
    void setup(){
    	// 初始化tft_espi
    	TFT_eSPI xTft;
    	xTft.begin();
    	//设置黑色背景
    	XTft.fillScreen(TFT_BLACK);
    
    	// String类不同于std::string 其值
    	String qrText(F("!"));
    	ESP_QRcode tftQR(&xTft);
    	// 内容 x坐标 y坐标 宽度 二维码版本
    	tftQR.qrcode(qrText.c_str(), 20, 50, 200, 3);
    }
    
    void loop(){}
    

‍

3. 提供Wi-Fi配置界面

使用wnatth3/WiFiManager​库来进行esp8266/esp32Wi-Fi配置，该库提供一个优雅的Wi-Fi配置web界面，支持在Wi-Fi连接成功或者连接失败后，执行用户自定义任务。

​WiFiManager​在成功设置Wi-Fi连接后，会调用esp8266/esp32的adruino的sdk存储Wi-Fi连接信息，再次启动后调用wifi_station_get_config_default()​接口来获取Wi-Fi连接信息。因此，在使用该库时，不需要存储Wi-Fi配置信息。

.pio/libdeps/develop/WiFiManager/WiFiManager.cpp:981
https://github.com/barn53/WiFiManager/blob/eb8f77e756fe36c7d731dbab78753a6466daba67/WiFiManager.cpp#L981

在尝试连接Wi-Fi失败时，按照wifiManager.autoConnect("AutoConnectAP", "password")​设置的ssid与密码开启一个热点，在用户连接热点

示例

以下示例使用了TFT屏幕，实现了二维码辅助配置Wi-Fi manager完整流程，首次启动需要用户扫描二维码配置Wi-Fi，之后就会根据之前保存的信息自动连接Wi-Fi。

void setup(){
  auto sp_tft = std::make_shared<TFT_eSPI>();
  // 初始化屏幕
  sp_tft->begin();
  sp_tft->fillScreen(TFT_BLACK);
  sp_tft->setTextColor(TFT_WHITE);

  auto espGenQrDemo = EspGenQrDemo(sp_tft);

  // 拼接Wi-Fi连接信息
  String qr_msg = (F("WIFI:T:WPA;S:"));
  qr_msg += WIFI_SSID;
  qr_msg += F(";P:");
  qr_msg += WIFI_PASSWD;
  qr_msg += F(";H:;");

  // 0. 声明Wi-Fi Manager
  WiFiManager wifiManager;
  // 1. 设置Wi-Fi为STA模式
  WiFi.mode(WIFI_STA);  // explicitly set mode, esp defaults to STA+AP
                        // it is a good practice to make sure your code sets
                        // wifi mode how you want it.

  // 2. 配置自动连接失败回调函数注册
  // 回调函数当设备在 WiFi 连接尝试失败后进入配置模式时执行
  wifiManager.setAPCallback([&](WiFiManager* wifimanager) {
    LOG_I_PRINTLN(F("Wi-Fi自动连接失败, 显示热点二维码"));
    // 连接失败时显示热点二维码
    espGenQrDemo.ShowQrCode(qr_msg.c_str(), 20, 20, 200, 3);
  });

  // 3. Wi-Fi成功连接，保存配置后回调函数注册
  wifiManager.setSaveConfigCallback([&]() {
    LOG_I_PRINTLN("Wi-Fi配置成功, 即将重启设备");
    delay(5000);
    ESP.reset();
  });
  LOG_I_PRINTLN("尝试自动重连Wi-Fi");
  wifiManager.autoConnect(String(WIFI_SSID).c_str(),
                          String(WIFI_PASSWD).c_str());

  sp_tft->setTextSize(3);
  sp_tft->setCursor(0, 5);
  sp_tft->println(F("IP:"));
  sp_tft->setCursor(0, 40);
  sp_tft->println(WiFi.localIP().toString());

  LOG_I_PRINTLN("Wi-Fi自动连接成功");
  Serial.println(F("\nInitialisation done."));
  Serial.print(F("IP: "));
  Serial.println(WiFi.localIP().toString());
}

void loop(){}

参考资料

二维码（QR Code）的生成原理及解析：http://t.csdnimg.cn/zPRXa