ESP32利用WebServer进行设备配置

东成2022

已于 2024-10-09 17:28:53 修改

阅读量1.5k

点赞数 8

文章标签：单片机嵌入式硬件 c++

于 2024-10-09 17:27:01 首次发布

本文链接：https://blog.youkuaiyun.com/zzjnlwb/article/details/142785210

版权

目标需求

利用esp32的WebServer功能，展示一个网页，对里面的参数进行配置，并以json文本格式保存到flash里面。

1、定义HTML

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>采集器配置</title>
    <link rel="stylesheet" href="http://www.kanzz.net/res/eve.css">
</head>
<body>
<form id="config-form" autocomplete="off">
            <div class="form-item">
                <label for="versioin">软件版本:</label>
                <input type="text" id="versioin" name="versioin" value="%VERSION%" value="1.0">
            </div>
            <div class="form-item">
                <label for="sn">编号:</label>
                <input type="text" id="sn" name="sn" value="%SN%" required>
            </div>
            <div class="form-item">
                <label for="ip">IP 地址：</label>
                <input type="text" id="ip" name="ip" value="%MYIP%" required>
            </div>
            <div class="form-item">
                <label for="mask">子网掩码：</label>
                <input type="text" id="mask" name="mask" value="%MYMASK%" required>
            </div>
            <div class="form-item">
                <label for="gateway">网关：</label>
                <input type="text" id="gateway" name="gateway" value="%GATEWAY%" required>
            </div>
            <div class="form-item">
                <label for="ssid">WiFi SSID:</label>
                <input type="text" id="ssid" name="ssid" value="%SSID%" required>
            </div>
            <div class="form-item">
                <label for="wifipwd">WiFi Password:</label>
                <input type="text" id="wifipwd" name="wifipwd" value="%WIFIPWD%">
            </div>
            <div class="form-item">
                <label for="waittime">拉取时间(秒):</label>
                <input type="text" id="waittime" name="waittime" value="%WAITTIME%">
            </div>
            <div class="form-item">
                <label for="apiurl">推送接⼝:</label>
                <input type="text" id="apiurl" name="apiurl" value="%APIURL%">
            </div>
            <div class="form-item">
                <label for="appid">AppID:</label>
                <input type="text" id="appid" name="appid" value="%APPID%">
            </div>
            <div class="form-item">
                <label for="secret">Secret:</label>
                <input type="text" id="secret" name="secret" value="%SECRET%">
            </div>
            <div class="form-item">
                <button type="submit">保存配置</button>
            </div>
        </form>
</body>
</html>
)rawliteral";

const char info_html[] PROGMEM = R"rawliteral(
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
            <title>采集器配置</title>
            <link rel="stylesheet" href="http://www.kanzz.net/res/eve.css">
        </head>
        <body>
            <div style="margin:100px auto;width:400px;">
                <div style="color: #060;font-size: 16px;line-height: 30px;margin: 20px 0;">修改完成!</div>
                <div class="button"><button id="back" style="width: 160px;height: 40px;line-height: 30px;border: 1px solid #999;color: #fff;background-color: #5cd6b2;border: none;border-radius: 4px;box-shadow: 4px 4px 4px #999;cursor: pointer;">返回</button></div>
            </div>
            <script>        
                document.getElementById('back').addEventListener('click', function(event) {
                    location.href = '/';
                })
            </script>
        </body>
        </html>
)rawliteral";

其中定义了一些变量，展示页面的时候会用变量来替代，如：

<div class="form-item">
    <label for="ssid">WiFi SSID:</label>
    <input type="text" id="ssid" name="ssid" value="%SSID%" required>
</div>

代码中的 value="%SSID%"

2、安装ESPAsyncWebServer

3、定义JSON字符串

String jsonStr = "{\"version\": \"1.1\", \"sn\":\"2021\", \"mask\":\"255.255.255.0\", \"gateway\":\"192.168.0.1\", \"waittime\":\"0.5\", \"apiurl\":\"https://\", \"appid\":\"appid12345\", \"secret\":\"secret\"}";

4、读取Flash中的JSON文件

String readJsonFile()
{
  File configFile = SPIFFS.open("/config.json", FILE_READ);
  if (!configFile) {
    Serial.println("Failed to open config file");
    return "";
  }
  if(configFile.available())
  {
    String line = configFile.readString();
    configFile.close();
    return line;
  }
}

5、保存JSON文件到Flash中

void saveJsonFile()
{
  File configFile = SPIFFS.open("/config.json", "w");
  if (!configFile) {
    Serial.println("Failed to open config file for writing");
    return;
  }
  configFile.println(jsonStr);
  configFile.close();
  Serial.println("Config file saved");
}

6、处理HTML模板中的变量

String processor(const String& var)
{
  jsonConfig config = transTojson();
  if (var == "VERSION")
  {
    return config.version;
  }
  if (var == "SN")
  {
    return config.sn;
  }
  if (var == "MYIP")
  {
    return ip;
  }
  if (var == "MYMASK")
  {
    return config.mask;
  }
  if (var == "GATEWAY")
  {
    return config.gateway;
  }
  if (var == "SSID")
  {
    return ssid;
  }
  if (var == "WIFIPWD")
  {
    return password;
  }
  if (var == "WAITTIME")
  {
    return config.waittime;
  }
  if (var == "APIURL")
  {
    return config.apiurl;
  }
  if (var == "APPID")
  {
    return config.appid;
  }
  if (var == "SECRET")
  {
    return config.secret;
  }
  return String();
}

7、WebServer的监听

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

server.on("/save", HTTP_POST, [](AsyncWebServerRequest *request){
    String version, sn, mask, gateway, waittime, apiurl, appid, secret;
    if (request->hasParam("version", true)) {
        version = request->getParam("version", true)->value();
    } else {
        version = "-";
    }
    if (request->hasParam("sn", true)) {
        sn = request->getParam("sn", true)->value();
    } else {
        sn = "-";
    }
    if (request->hasParam("mask", true)) {
        mask = request->getParam("mask", true)->value();
    } else {
        mask = "-";
    }
    if (request->hasParam("gateway", true)) {
        gateway = request->getParam("gateway", true)->value();
    } else {
        gateway = "-";
    }
    if (request->hasParam("waittime", true)) {
        waittime = request->getParam("waittime", true)->value();
    } else {
        waittime = "-";
    }
    if (request->hasParam("apiurl", true)) {
        apiurl = request->getParam("apiurl", true)->value();
    } else {
        apiurl = "-";
    }
    if (request->hasParam("appid", true)) {
        appid = request->getParam("appid", true)->value();
    } else {
        appid = "-";
    }
    if (request->hasParam("secret", true)) {
        secret = request->getParam("secret", true)->value();
    } else {
        secret = "-";
    }
    jsonStr = "{\"version\": \"" + version + "\", \"sn\":\"" + sn + "\", \"mask\":\"" + mask + "\", \"gateway\":\"" + gateway + "\", \"waittime\":\"" + waittime + "\", \"apiurl\":\"" + apiurl + "\", \"appid\":\"" + appid + "\", \"secret\":\"" + secret + "\"}";
    saveJsonFile();
    delay(100);
    request->send_P(200, "text/html", info_html);
  });

根据逻辑整合起来后，测试成功！