Всем привет! Делаю на ESP8266 простой веб сервер, но постепенно дорабатываю. Сейчас я уже могу включать и выключать светодиод через инет. Т.к создавать интерфейс на ардуино было лень, сделал его в графическом редакторе и код html конвертировал в одну линию. Программа:
Можете сами на Nodemcu протестить (в коде ещё задавался статический ип, если будут ошибки, значит я что-то лишнее убрал).
HTML интерфейс:
Вопрос такой: как под кнопками выводить данные с датчиков (температура, влажность...). Ну или подскажите, как менять текст html обьекта с помощью nodemcu. Помогите пж!!!
Код:
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>
const char* ssid = "A1-2796BA";
const char* password = "Ne_skazhu";
const char* www_username = "admin";
const char* www_password = "esp8266";
String ip = "";
const char index_html[] PROGMEM={"<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Web Server</title>\n<meta name=\"generator\" content=\"WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com\">\n<link href=\"Untitled1.css\" rel=\"stylesheet\">\n<link href=\"index.css\" rel=\"stylesheet\">\n</head>\n<body>\n<div id=\"wb_Text1\" style=\"position:absolute;left:34px;top:41px;width:570px;height:23px;z-index:0;\">\n<span style=\"color:#000000;font-family:Arial;font-size:20px;\">TURN ON:</span></div>\n<div id=\"wb_Text2\" style=\"position:absolute;left:34px;top:85px;width:570px;height:23px;z-index:1;\">\n<span style=\"color:#000000;font-family:Arial;font-size:20px;\">TURN OFF:</span></div>\n<input type=\"submit\" id=\"Button1\" onclick=\"window.location.href=' ./on';return false;\" name=\"\" value=\"Submit\" style=\"position:absolute;left:146px;top:40px;width:96px;height:25px;z-index:2;\">\n<input type=\"submit\" id=\"Button2\" onclick=\"window.location.href='./off';return false;\" name=\"\" value=\"Submit\" style=\"position:absolute;left:146px;top:84px;width:96px;height:25px;z-index:3;\">\n</body>\n</html>"};
ESP8266WebServer server(80);
const int led = D4;
void handleNotFound(){
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET)?"GET":"POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i=0; i<server.args(); i++){
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup(void){
pinMode(led, OUTPUT);
digitalWrite(led, HIGH);
Serial.begin(115200);
WiFi.mode(WIFI_STA); // режим клиента
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", [](){
if(!server.authenticate(www_username, www_password))
return server.requestAuthentication();
server.send_P(200, "text/html", index_html);
String addy = server.client().remoteIP().toString();
if(ip != addy){
Serial.print(addy);
Serial.println(" is on the web");
ip = addy;
}
});
server.on("/on", [](){
if(!server.authenticate(www_username, www_password))
return server.requestAuthentication();
digitalWrite(led, LOW);
server.send(200, "text/html", "<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>LED ON</title>\n<meta name=\"generator\" content=\"WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com\">\n<meta http-equiv=\"refresh\" content=\"3;http://188.22.183.190/\"> \n<link href=\"Untitled1.css\" rel=\"stylesheet\">\n<link href=\"on.css\" rel=\"stylesheet\">\n</head>\n<body>\n<div id=\"wb_Text1\" style=\"position:absolute;left:20px;top:19px;width:250px;height:24px;z-index:0;\">\n<span style=\"color:#000000;font-family:Arial;font-size:21px;\">The LED is now ON</span></div>\n</body>\n</html>");
Serial.println("The LED is now ON");
});
server.on("/off", [](){
if(!server.authenticate(www_username, www_password))
return server.requestAuthentication();
digitalWrite(led, HIGH);
server.send(200, "text/html", "<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>LED OFF</title>\n<meta name=\"generator\" content=\"WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com\">\n<meta http-equiv=\"refresh\" content=\"3;http://188.22.183.190/\"> \n<link href=\"Untitled1.css\" rel=\"stylesheet\">\n<link href=\"off.css\" rel=\"stylesheet\">\n</head>\n<body>\n<div id=\"wb_Text1\" style=\"position:absolute;left:20px;top:19px;width:250px;height:24px;z-index:0;\">\n<span style=\"color:#000000;font-family:Arial;font-size:21px;\">The LED is now OFF</span></div>\n</body>\n</html>");
Serial.println("The LED is now OFF");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
ArduinoOTA.begin();
}
void loop(void){
ArduinoOTA.handle();
server.handleClient();
}HTML интерфейс:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Server</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="Untitled1.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="wb_Text1" style="position:absolute;left:34px;top:41px;width:570px;height:23px;z-index:0;">
<span style="color:#000000;font-family:Arial;font-size:20px;">TURN ON:</span></div>
<div id="wb_Text2" style="position:absolute;left:34px;top:85px;width:570px;height:23px;z-index:1;">
<span style="color:#000000;font-family:Arial;font-size:20px;">TURN OFF:</span></div>
<input type="submit" id="Button1" onclick="window.location.href=' ./on';return false;" name="" value="Submit" style="position:absolute;left:146px;top:40px;width:96px;height:25px;z-index:2;">
<input type="submit" id="Button2" onclick="window.location.href='./off';return false;" name="" value="Submit" style="position:absolute;left:146px;top:84px;width:96px;height:25px;z-index:3;">
</body>
</html>