合宙ESP32-C3通过网页配置WIFI存储在EEPROM

本文在《合宙ESP32-C3开发板Arduino操作SPIFFS存储》基础上继续进行，关于合宙的这块板子介绍点这里。首先把index.html和style.css上传至EPS32-C3开发板，文件如下。
index.html

<!DOCTYPE html>
<html>
<head>
    <title>设置WIFI</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- //for-mobile-apps -->
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body>
    <!-- main -->
    <div class="main">
        <h1>
            设置WIFI
        </h1>
        <form action="/post" method="post">
            <input type="text" name="ssid" value="ssid" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'ssid';}"
                   required="">
            <input type="password" name="passwd" value="password" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}"
                   required="">
            <input type="submit" value="提交">
        </form>
    </div>
    <div class="footer">
        <p>
            &copy 2022 yizu.org
        </p>
    </div>
    <!-- //main -->
</body>
</html>

style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
.txt-rt{text-align:right;}
.txt-lt{text-align:left;}
.txt-center{text-align:center;}
.float-rt{float:right;}
.float-lt{float:left;}
.clear{clear:both;}
.pos-relative{position:relative;}
.pos-absolute{position:absolute;}
.vertical-base{    vertical-align:baseline;}
.vertical-top{    vertical-align:top;}
nav.vertical ul li{    display:block;}
nav.horizontal ul li{    display: inline-block;}
body{
    font-family: 'Cabin', sans-serif !important;
    background:#d5d5d5 0px 0px;
}
.main{
    width: 35%;
    margin: 8em auto 0;
    padding: 0em 4em 5em;
}
.main h1{
    color: #7e8fad;
    text-align: center;
    font-size: 2.5em;
    margin: 0 0 1.5em;
}
.main input[type="text"],.main input[type="password"]{
    outline: none;
    border: 1px solid rgb(254, 2, 2);
    background: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    padding: 15px 10px;
    width: 96%;
    font-size: 1.3em;
    color: #7e8fad;
    text-align: center;
    font-family: 'Syncopate', sans-serif;
}
.main input[type="password"]{
    margin:1.5em 0;
}
.main input[type="submit"]{
    outline:none;
    border:1px solid #DBA9C8;
    background:#b47c9f;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    padding:15px 10px;
    width:100%;
    color:#fdbfe6;
    font-size:1.5em;
    font-family: 'Syncopate', sans-serif;
    cursor:pointer;
}
.main input[type="submit"]:hover{
    background:#fed2ed;
    color:#b47c9f;
    border: 1px solid #FFF;
}
.footer{
    text-align:center;
    padding:2em 0 0;
}
.footer p{
    font-size:1em;
    color:#B47C9F;
    margin:0;
}
.footer p a{
    color:#fff;
}
.footer p a:hover{
    color:#B47C9F;
}
@media (max-width:1440px){
    .main {
        width: 37%;
    }
    .main input[type="text"], .main input[type="password"] {
        width: 95.8%;
    }
}
@media (max-width: 1280px){
    .main {
        width: 40%;
    }
    .main input[type="text"], .main input[type="password"] {
        width: 95.6%;
    }
}
@media (max-width: 1024px){
    .main {
        width: 50%;
        margin: 5em auto 0;
    }
}
@media (max-width:768px){
    .main {
        width: 60%;
    }
    .main input[type="text"], .main input[type="password"] {
        width: 95.2%;
        font-size: 1.1em;
    }
}
@media (max-width:736px){
    .main {
        padding: 0em 4em 2em;
    }
    .footer {
        padding: 2em 0;
    }
}
@media (max-width:667px){
    .main {
        width: 65%;
        margin: 3em auto 0;
    }
    .main h1 {
        font-size: 2.3em;
        margin: 0 0 1.2em;
    }
    .main input[type="text"], .main input[type="password"] {
        width: 94.5%;
    }
}
@media (max-width:640px){
    .main input[type="submit"] {
        font-size: 1.3em;
    }
}
@media (max-width: 600px){
    .main input[type="text"], .main input[type="password"] {
        width: 94.2%;
    }
}
@media (max-width:480px){
    .main h1 {
        font-size: 2em;
        margin: 0 0 1em;
    }
    .main {
        padding: 0em 0em 2em;
        width: 85%;
    }
}
@media (max-width: 414px){
    .main input[type="text"], .main input[type="password"] {
        width: 93.5%;
    }
    .footer p {
        width: 80%;
        margin: 0 auto;
        line-height: 1.8em;
    }
}
@media (max-width:320px){
    .main {
        padding: 0;
        width: 90%;
        margin: 2em auto 0;
    }
    .main h1 {
        font-size: 1.7em;
    }
    .main input[type="text"], .main input[type="password"] {
        padding: 10px;
        font-size: 13px;
        width: 92.5%;
    }
    .main input[type="submit"] {
        font-size: 1em;
        padding: 10px;
    }
    .footer p {
        width: 90%;
        font-size: 15px;
    }
}

把以下代码编译上传开发板。

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <SPIFFS.h>
#include <EEPROM.h>
#include <TimeLib.h>

const char* ssid = "myAP";
const char* password = "123456789";

WebServer server(80);

const int led = 13;
time_t resetTime=0;

void handleRouter() {
  digitalWrite(led, 1);
  String path = server.uri(); 
  if(path=="/"){
    path="/index.html";
  }
  if (SPIFFS.exists(path)){
    File file=SPIFFS.open(path,"r");
    String contentType="text/html";
    if(path.substring(path.lastIndexOf('.'))==".css"){
      contentType="text/css";
    }
    server.streamFile(file,contentType);
    file.close();
  }
  else{
    server.send(404, "text/plain", "File Not Found!\n\n");
  }
  digitalWrite(led, 0);
}

void postRouter() {
  digitalWrite(led, 1);
  EEPROM.begin(64);//4的倍数
  if(server.hasArg("ssid")){
    String ssid2 = server.arg("ssid");
    Serial.printf("Write ssid:%s\n",ssid2);
    EEPROM.write(0,ssid2.length());
    for(int i=0;i<ssid2.length();i++){
      EEPROM.write(i+1,ssid2[i]);
    }
  }
  if(server.hasArg("passwd")){
    String passwd2 = server.arg("passwd");
    passwd2.trim();
    Serial.printf("Write password:%s\n",passwd2);
    if(passwd2.length()>0){
      EEPROM.write(32, passwd2.length());
      for (int i = 0; i < passwd2.length(); i++) {
        EEPROM.write(i + 32 + 1, passwd2[i]);
      }
    }else{
      EEPROM.write(32,0);
    }
    EEPROM.end();
  }
  server.send(200, "text/plain", "设置WIFI成功，请按RST键重启WIFI！\n\n");
  digitalWrite(led, 0);
}

void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  
  //开始操作EEPROM
  EEPROM.begin(64);//4的倍数
  byte len=EEPROM.read(0);
  if(len>0&&len<30){
    char ssid2[len+1];
    for(int i=0;i<len;i++){
      ssid2[i]=EEPROM.read(i+1);
    }
    ssid2[len]='\0';
    Serial.printf("ssid:%s\n",ssid2);
    //Serial.printf("ssid Lenth:%d\n",len);
    byte len2=EEPROM.read(32);
    if(len2>0&&len2<30){
      char passwd2[len2+1];
      for (int i = 0; i < len2; i++){
        passwd2[i] = EEPROM.read(i + 32+1);
      }
      passwd2[len2]='\0';
      EEPROM.end();
      Serial.printf("password:%s\n",passwd2);
      //Serial.printf("password Lenth:%d\n",len2);
      WiFi.begin(ssid2,passwd2);
    }else{
      WiFi.begin(ssid2);
    }
  }else{
    WiFi.softAP(ssid, password);
    Serial.println("");
    Serial.print("AP IP address:");
    Serial.println(WiFi.softAPIP());
  }
  //开启web服务
  SPIFFS.begin(); 
  server.on("/",handleRouter);
  server.on("/post",postRouter);
  server.onNotFound(handleRouter);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  delay(2);

  //按boot键三秒,清除Wifi信息
  if(digitalRead(9)==LOW&&resetTime==0){
    resetTime=now();
    digitalWrite(led, 1);
  }
  if(digitalRead(9)==LOW&&resetTime>0&&now()-resetTime>3){
    resetTime=NULL;
    EEPROM.begin(64);
    EEPROM.write(0,0);
    EEPROM.end();
    Serial.println("EEPROM is clear.");
    digitalWrite(led, 0);
  }
}

接通电源后，长按boot按键3秒以上，会清楚原来的WIFI配置信息，再重启板子，就会开启一个热点myAP，手机或者电脑连上这个热点，访问192.168.4.1，就可以进行WIFI设置，设置完再重启，就会自动连接刚刚设置的WIFI。

爱易族

合宙ESP32-C3通过网页配置WIFI存储在EEPROM