Hello,
I'm in the process of programming interesting project using Nodemu + ESP8266 (WiFi module).
Microcontroler create own web page and there is a switch toggle (slider) which you can turn on and turn off LED diod. Now I can turn ON and turn OFF led diod by switch toggle(slider) in web page but I would like to add :
My code is below. I Will be very thankful for any help.
I'm in the process of programming interesting project using Nodemu + ESP8266 (WiFi module).
Microcontroler create own web page and there is a switch toggle (slider) which you can turn on and turn off LED diod. Now I can turn ON and turn OFF led diod by switch toggle(slider) in web page but I would like to add :
- 1) Turning off and turning on not only using webpage switch toggle but also using additional "tact switch" which is connected in this way :
- (it is very important to make this led diod universal so in case when you touch "switch tact", your led diod turn ON and you open webpage and there is also slider in status "ON", when you press switch toggle slider in webpage it turn OFF).
- Personally I think that there must be code connective switch tact with switch toggle slider also Javascript to show a status of led in this slider but it is too complicated for me to programm it by my self. Please help me.
My code is below. I Will be very thankful for any help.
Code:
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* ssid = "YOUR SSID";
const char* password = "YOUR PASSWORD";
const int GPIO_1 = 0;
#define button D1
char html_code[] =
"<!DOCTYPE HTML>"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">"
"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>"
"<title>Smart Home LED</title>"
"<style>"
".switch{position:relative;display:inline-block;width:60px;height:34px;}"
".switch input {display:none;}"
".slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}"
".slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s;}"
"input:checked + .slider{background-color:#2196F3;}"
"input:focus + .slider{box-shadow:0 0 1px #2196F3;}"
"input:checked + .slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}"
".slider.round{border-radius:34px;}"
".slider.round:before{border-radius:50%;}"
"</style>"
"</head>"
"<body>"
"<h1>Smart Home LED</h1>"
"<form action=\"?\" method=\"post\">"
"<label class=\"switch\">"
"<input type=\"checkbox\" name=\"switch_1\" value=\"on\" onchange=\"this.form.submit()\">"
"<span class=\"slider round\"></span>"
"</label>"
"<input type=\"hidden\" name=\"switch_1\" value=\"off\" onchange=\"this.form.submit()\">"
"</form>"
"</body>"
"</html>";
char html_off[] =
"<!DOCTYPE HTML>"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">"
"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>"
"<title>Smart Home LED</title>"
"<style>"
".switch{position:relative;display:inline-block;width:60px;height:34px;}"
".switch input {display:none;}"
".slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}"
".slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s;}"
"input:checked + .slider{background-color:#2196F3;}"
"input:focus + .slider{box-shadow:0 0 1px #2196F3;}"
"input:checked + .slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}"
".slider.round{border-radius:34px;}"
".slider.round:before{border-radius:50%;}"
"</style>"
"</head>"
"<body>"
"<h1>Smart Home LED</h1>"
"<form action=\"?\" method=\"post\">"
"<label class=\"switch\">"
"<input type=\"checkbox\" name=\"switch_1\" value=\"off\" onchange=\"this.form.submit()\" checked>"
"<span class=\"slider round\"></span>"
"</label>"
"<input type=\"hidden\" name=\"switch_1\" value=\"off\" onchange=\"this.form.submit()\">"
"</form>"
"</body>"
"</html>";
ESP8266WebServer server(80);
const int led = 0;
void handleRoot() {
if (server.hasArg("switch_1")){
handleSubmit();
} else{
server.send(200,"text/html",html_code);
}
}
void returnFail(String msg){
server.sendHeader("Connection","close");
server.sendHeader("Access-Control-Allow-Origin","*");
server.send(500,"text/plain",msg+"\r\n");
}
void handleSubmit(){
String LEDvalue;
if(!server.hasArg("switch_1")) return returnFail("BAD ARGS");
Serial.println(server.arg("switch_1"));
LEDvalue = server.arg("switch_1");
if (LEDvalue =="on"){
writeLED(1);
server.send(200,"text/html",html_off);
} else if (LEDvalue=="off"){
writeLED(0);
server.send(200,"text/html",html_code);
} else{
returnFail("Bad LED Value");
}
}
void writeLED(int LEDon){
if (LEDon ==1){
digitalWrite(GPIO_1,1);
} else if (LEDon==0){
digitalWrite(GPIO_1,0);
}
}
void handle_on(){
writeLED(1);
}
void handle_off(){
writeLED(0);
}
void handleNotFound(){
digitalWrite(led, 1);
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);
pinMode(button, INPUT);
digitalWrite(led, 0);
Serial.begin(115200);
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());
if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.on("/inline", [](){
server.send(200, "text/plain", "this works as well");
});
server.on("/page_3", [](){
server.send(200, "text/plain", "Page 3");
});
server.on("/led_on",handle_on);
server.on("/led_off",handle_off);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void){
server.handleClient();
}
