ESP8266制作天气预报海藻球微景观生态缸记录（四）-增加网页显示

本文主要是介绍ESP8266制作天气预报海藻球微景观生态缸记录（四）-增加网页显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

已经正常工作了几天，下一步要加上网页控制，预计要实现的顺序如下：

显示当前亮度
通过滑块调整亮度并保存亮度值【根据光线自动调亮度的方案作废】
可以通过网页设定各种天气下颜色显示效果并保存
上传一堆天气图标进去，并在网页上显示天气图标。

先实现第一步。

大致的原理就是建立起一个web服务器，如果有浏览器访问，则输出html代码，浏览器收到代码后解析并呈现出来。

为了实现滑块控制，所以这里使用异步服务器，需要用到的库文件见下：

https://download.csdn.net/download/tansuo2005/83887043https://download.csdn.net/download/tansuo2005/83887043

这两个库要通过Arduino的“项目-加载库-添加.zip库”的功能加入。

通过html代码中的%%标记，将变量（灯光亮度）中的内容输出。

实现的代码见下：

#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
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="textLight">当前灯光亮度：%LIGHTVALUE%/255</span></p>
</body>
</html>
)rawliteral";
//网页处理器
String processor(const String& var){if (var == "LIGHTVALUE"){//如果收到的是名为LIGHTVALUE的请求，则返回当前light变量里的值.return light;}return String();
}
void setup() {
// 开始设置web服务器——首页设置server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send_P(200, "text/html", index_html, processor);//把index_html变量的内容，打印出去});// 启动网页服务server.begin();
}

这样，就可以把light变量的内容打印到网页上。