ESP8266制作天气预报海藻球微景观生态缸记录（五）-增加网页控制亮度并保存进EEPROM

本文链接：https://blog.youkuaiyun.com/tansuo2005/article/details/123367645

加上了一个亮度控制的滑块，滑动滑块，改变亮度变量的值，达到控制灯光亮度的目的。

在改变亮度值的同时，将亮度值写入EEPROM，这样下次开机，会依然保持上次设定的亮度值。

代码如下：

#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <EEPROM.h>//引入eeprom库文件
const char* PARAM_INPUT_LIGHTVALUE = "lightValue";//设定从网页发送来的灯光亮度请求名
String light = "150";//彩灯缺省亮度
//设置这个异步网页服务器的端口为80
AsyncWebServer server(80);
//要打印的首页
//标记在%之间的LIGHTVALUE，是要向网页处理器发出名为LIGHTVALUE的请求，然后获得值[对于本例，就是灯光亮度]
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ESP 网页服务器</title>
</head>
<body>
    <h2>彩灯控制</h2>
    <p>当前灯光亮度：<span id="textLightValue">%LIGHTVALUE%</span>/255</p>
    <p>设置灯光亮度：<input type="range" min="0" max="255" value="%LIGHTVALUE%" step="1" onchange="changeLightValue(this.value)"></p>
    <script>
        function changeLightValue(value) {
            var sliderValue = value;
            document.getElementById("textLightValue").innerHTML = sliderValue;
            console.log(sliderValue);
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/sliderLight?lightValue=" + sliderValue, true);
            xhr.send();
        }
    </script>
</body>
</html>
)rawliteral";
//网页处理器
String processor(const String& var){
  if (var == "LIGHTVALUE"){//如果收到的是名为LIGHTVALUE的请求，则返回当前light变量里的值.
    return light;
  }
  return String();
}
void setup() {
//启用EEPROM
EEPROM.begin(1024);
if(get_String(EEPROM.read(0),1)!=0)//设定灯光初始亮度，如果从EEPROM中找到数据【不为0】，则输出EEPROM中的数据。
  {
    light=get_String(EEPROM.read(0),1);
  }
// 开始设置web服务器——首页设置
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);//把index_html变量的内容，打印出去
  });
// 开始设置web服务器——彩灯亮度控制设置
  server.on("/sliderLight", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    if (request->hasParam(PARAM_INPUT_LIGHTVALUE)) {
      inputMessage = request->getParam(PARAM_INPUT_LIGHTVALUE)->value();//get传递过来的value参数
      light = inputMessage;//设置灯光亮度为网页滑块控制的亮度
      set_String(0,1,light);//保存进EEPROM
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  // 启动网页服务
  server.begin();
}
void loop() {
strip.setBrightness(atoi(light.c_str()));//达到一旦light变量变化，则灯光亮度也变
}
//字符串写入EEPROM
//以light亮度变量为例。a=0；b=1；代表第0位存储亮度字符串的长度，从第1位开始逐字存储。
//如果以后再存入下一个变量，则a的值应为light的长度+1，b的值应为a的长度+1
//如果以后再存入下一个变量，则a的值应为light的长度+1+上一个变量的长度+1；b的值为a的长度+1
//以此类推
//但实际上，如果不怕浪费EEPROM，不必这样计算下一个变量的存储起始位置，直接从假设的上一个变量长度的最大值开始即可。
void set_String(int a,int b,String str){
  EEPROM.write(a, str.length());//EEPROM第a位，写入str字符串的长度
  //把str所有数据逐个保存在EEPROM
  for (int i = 0; i < str.length(); i++){
    EEPROM.write(b + i, str[i]);
  }
  EEPROM.commit();
}

//从EEPROM读取字符串
//对于light来讲，a=EEPROM.read(x)；b=1；此时的a为从eeprom中取得的字符串长度
//对于下一个变量来讲，则a=EEPROM.read(a的长度+1)；b=a的长度+1
//对于下一个变量来讲，则a=EEPROM.read(a的长度+1+上一个变量的长度+1)；b=a的长度+1
//以此类推
//但实际上，如果不怕浪费EEPROM，不必这样计算下一个变量的存储起始位置，直接从假设的上一个变量的最长度大值开始即可。
String get_String(int a, int b){ 
  String data = "";
  //从EEPROM中逐个取出每一位的值，并链接
  for (int i = 0; i < a; i++){
    data += char(EEPROM.read(b + i));
  }
  return data;
}