以下代码用于构建一个基于ESP8266的点灯系统的网页端,可以通过网页控制ESP8266控制灯的颜色和亮度。
它使用了ESP8266WiFi库来连接WiFi网络,并在该网络上使用DNSServer和ESP8266WebServer库创建一个可以响应HTTP请求的Web服务器。
在Web页面中,有几个按钮可以分别控制点灯系统的绿灯、红灯、蓝灯和关闭功能,还有一个滑动条用于调节灯的亮度。通过向HandleVal路径发送HTTP GET请求,可以将所选的颜色和亮度值发送到ESP8266。
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <fstream>
#include <string>
const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 4, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);
String index_html(String WiFiAddr){
return String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"+
"<script type=\"text/javascript\">"+
"var xmlHttpReq;"+
"var funcEnabled = true; " +
"function createXmlHttpRequest(){"+
"if(window.XMLHttpRequest){"+
"xmlHttpReq = new XMLHttpRequest();"+
"}else{"+
"xmlHttpReq = new ActiveXObject(\"Microsoft.XMLHTTP\");"+
"}"+
"}"+
"function checkCmd(cmd,val){"+
"createXmlHttpRequest();"+
"xmlHttpReq.onreadystatechange=handle;"+
"var url=\"HandleVal?ssid=\"+cmd+\"&password=\"+val;"+
"xmlHttpReq.open(\"get\",url,true); xmlHttpReq.send(null);"+
"}"+
"function toggleFunc(){" +
"var offBtn = document.getElementById(\"off2\"); " +
"if (funcEnabled == false){" +
"funcEnabled = true; " +
"offBtn.style.backgroundColor = \"gray\"; " +
"offBtn.style.color = \"black\"; " +
"offBtn.value = \"关灯\"; " +
"}else{" +
"funcEnabled = false; " +
"offBtn.style.backgroundColor = \"yellow\"; " +
"offBtn.style.color = \"black\"; " +
"offBtn.value = \"开灯\"; " +
"checkCmd(document.getElementById('color').value, document.getElementById('slider').value); " +
"}" +
"}" +
"function servo1(pos) {"+
"var servo1P = document.getElementById(\"servo1Pos\");"+
"servo1P.innerHTML=\"<font color=red>\"+pos+\"</font>\";"+
"var servo=\"r\";"
"checkCmd(servo,pos);"+
"}"+
"function updateSliderValue(){" +
"var sliderValue = document.getElementById(\"slider\").value; " +
"document.getElementById(\"slider-value\").innerHTML = sliderValue; " +
"if(funcEnabled == true) " +
"checkCmd(document.getElementById('color').value, sliderValue); " +
"}" +
"function handle(){"+
"if(xmlHttpReq.readyState==4){"+
"if(xmlHttpReq.status==200){"+
"var res = xmlHttpReq.responseText;"+
"var result = document.getElementById(\"result\"); "+
"result.innerHTML = \"<font color=red>\"+res+\"</font>\";"+
"}}}"+
"</script>"+
"</head>"+
"<body>" +
"<h1 style=\"font-size: 55px; margin-top: 50px;\">点灯系统</h1>" +
"<p></p>" +
"<form action=\"\" method=\"\" name=\"\">" +
"<input id=\"green\" type=\"button\" style=\"background-color: green; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"绿灯\" οnclick=\"checkCmd('g',1024)\">" +
"<input id=\"red\" type=\"button\" style=\"background-color: red; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"红灯\" οnclick=\"checkCmd('r',1024)\">" +
"<input id=\"blue\" type=\"button\" style=\"background-color: blue; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"蓝灯\" οnclick=\"checkCmd('b',1024)\">" +
"<input id=\"off\" type=\"button\" style=\"background-color: gray; color: white; margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px;\" value=\"关灯\" οnclick=\"checkCmd('c',0)\">" +
"<br>" +
"<br>" +
"<hr>" +
" <label for=\"color\" style=\"font-size: 24px; margin-right: 10px;\">颜色:</label>"+
" <select id=\"color\" name=\"color\">"+
" <option value=\"r\">红色</option>"+
" <option value=\"b\">蓝色</option>"+
" <option value=\"g\">绿色</option>"+
" </select>"+
" <input type=\"range\" style=\"width: 400px; margin-top: 30px;\" id=\"slider\" min=\"0\" max=\"500\" οninput=\"updateSliderValue()\">"+
" <br>"+
" 当前亮度:<div id=\"slider-value\"></div>"+
" <input id=\"off2\" type=\"button\" style=\"margin-top: 30px; font-size: 36px; padding: 10px 20px; border-radius: 10px; "+
" background-color: gray; color: black;\" value=\"关灯\" οnclick=\"toggleFunc()\">"+
" </form>"+
"</div>"+
"</body>"+
"</html>";
}
void handleRoot() {
webServer.send(200, "text/html", index_html("192.168.4.1")); //!!!注意返回网页需要用"text/html" !!!
Serial.println("用户访问了主页");
}
#define LAMP_PIN 16 // D8
#define LAMP_PIN1 14 //R--D5
#define LAMP_PIN2 12 //G--D6
#define LAMP_PIN3 13 //B--D7
void controlLamp(bool lampVal) {//点灯函数,GPIO16 -----D0
pinMode(LAMP_PIN, OUTPUT);//设置为输出模式
Serial.printf("Turn lamp %s\n", lampVal ? "On" : "Off");
if(lampVal){
for (int i = 0; i < 1024; i++) {//电平升高,从暗到明
analogWrite(LAMP_PIN, i);
delay(2);
}
}else{
digitalWrite(LAMP_PIN, false);//控制IO端口
}
}
// 函数说明:对客户端请求返回值处理
void HandleVal()
{
String wifis = webServer.arg("ssid"); //从JavaScript发送的数据中找ssid的值
String wifip = webServer.arg("password"); //从JavaScript发送的数据中找password的值
Serial.println(wifis);
Serial.println(wifip); //在这里处理接收到的数据
if(wifis.equals("pwm")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
Serial.println(i);
analogWrite(LAMP_PIN, i);
}
if(wifis.equals("r")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
Serial.println(wifis+" "+i);
analogWrite(LAMP_PIN3, 0);
analogWrite(LAMP_PIN2, 0);
analogWrite(LAMP_PIN1, i);
}else if(wifis.equals("g")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
Serial.println(wifis+" "+i);
analogWrite(LAMP_PIN3, 0);
analogWrite(LAMP_PIN1, 0);
analogWrite(LAMP_PIN2, i);
}else if(wifis.equals("b")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
Serial.println(wifis+" "+i);
analogWrite(LAMP_PIN2, 0);
analogWrite(LAMP_PIN1, 0);
analogWrite(LAMP_PIN3, i);
}
else if(wifis.equals("c")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
analogWrite(LAMP_PIN2, 0);
analogWrite(LAMP_PIN1, 0);
analogWrite(LAMP_PIN3, 0);
}
if(wifip.equals("on")){
Serial.println("开灯");
controlLamp(true);
}else if(wifip.equals("off")){
Serial.println("关灯");
controlLamp(false);
}else if(wifip.equals("data")){
Serial.println("getdata");
//在这里直接返回数据给客户端
}
String cmd="ssid="+wifis+" password="+wifip+" is OK";
webServer.send(200, "text/plain", cmd);//在这里返回数据给客户端
}
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("DNSServer example");
pinMode(LAMP_PIN1, OUTPUT);//设置为输出模式
pinMode(LAMP_PIN2, OUTPUT);//设置为输出模式
pinMode(LAMP_PIN3, OUTPUT);//设置为输出模式
//initialize
digitalWrite(LAMP_PIN1, LOW);
digitalWrite(LAMP_PIN2, LOW);
digitalWrite(LAMP_PIN3, LOW);
// modify TTL associated with the domain name (in seconds)
// default is 60 seconds
dnsServer.setTTL(300);
dnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);
// start DNS server for a specific domain name
dnsServer.start(DNS_PORT, "www.daodanjishui.com", apIP);
// simple HTTP server to see that DNS server is working
webServer.on("/HandleVal", HTTP_GET, HandleVal);//接收配网提交的参数
webServer.on("/", HTTP_GET,handleRoot);//显示主页
webServer.onNotFound([]() {
String message = "Hello daodanjishui!\n\n";
message += "URI: ";
message += webServer.uri();
webServer.send(200, "text/plain", message);
});
webServer.begin();
Serial.println("webServer is ok");
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}