This version is simplify and easy to modified than Version 1. This sketch demonstrates how to set up a simple HTTP-like server to control LED light. The server will set a GPIO/Digital pin depending on the request. The IP address of the ESP8266 module, will be printed to Serial when the module is connected. You can learn basic HTML at w3school to modified HTML coding.
- Wemos/Robotdyn D1 R2 ESP8266
- LED
- Resistor 220 ohm
- Wire Jumper
Video
Coding
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* ssid = "controller"; //Put your wifi ssid here
const char* password = "0123456789"; //Put your wifi password here
ESP8266WebServer server(80);
const int led1 = D0;
const int led2 = D1;
const int led3 = D2;
void setup(void) {
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
pinMode(led3, OUTPUT);
digitalWrite(led1, LOW);
digitalWrite(led2, LOW);
digitalWrite(led3, LOW);
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());
if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.on("/", [](){
server.send(200,"text/html", webPage());
});
//+++++++++++++++++++++++ START LED 1 ++++++++++++++++++++
server.on("/led1On", [](){
digitalWrite(led1, HIGH);
server.send(200, "text/html", webPage());
delay(100);
});
server.on("/led1Off", [](){
digitalWrite(led1, LOW);
server.send(200, "text/html", webPage());
delay(100);
});
//+++++++++++++++++++++++ END LED 1 ++++++++++++++++++++
//+++++++++++++++++++++++ START LED 2 ++++++++++++++++++++
server.on("/led2On", [](){
digitalWrite(led2, HIGH);
server.send(200, "text/html", webPage());
delay(100);
});
server.on("/led2Off", [](){
digitalWrite(led2, LOW);
server.send(200, "text/html", webPage());
delay(100);
});
// +++++++++++++++++++++++ END LED 2 ++++++++++++++++++++
//+++++++++++++++++++++++ START LED 3 ++++++++++++++++++++
server.on("/led3On", [](){
digitalWrite(led3, HIGH);
server.send(200, "text/html", webPage());
delay(100);
});
server.on("/led3Off", [](){
digitalWrite(led3, LOW);
server.send(200, "text/html", webPage());
delay(100);
});
// +++++++++++++++++++++++ END LED 3 ++++++++++++++++++++
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
}
String webPage()
{
String web;
web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ESP 8266</title><style>html { font-family: Open sans; display: inline-block; margin: 0px auto; text-align: center;}</style></head>";
web += "<h1 style=\"text-align: center;font-family: Open sans;font-weight: 100;font-size: 30px;\">ESP8266 Web Server LED Control</h1><div>";
//++++++++++ LED-1 +++++++++++++
web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 1</p>";
if (digitalRead(led1) == HIGH)
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
}
else
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
}
web += "<div style=\"text-align: center;\"> <a href=\"led1On\"><button>ON</button></a> <a href=\"led1Off\"><button>OFF</button></a></div><br><br/>";
// ++++++++ LED-1 +++++++++++++
//++++++++++ LED-2 +++++++++++++
web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 2</p>";
if (digitalRead(led2) == HIGH)
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
}
else
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
}
web += "<div style=\"text-align: center;\"> <a href=\"led2On\"><button>ON</button></a> <a href=\"led2Off\"><button>OFF</button></a></div><br><br/>";
// ++++++++ LED-2 +++++++++++++
//++++++++++ LED-3 +++++++++++++
web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 3</p>";
if (digitalRead(led3) == HIGH)
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
}
else
{
web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
}
web += "<div style=\"text-align: center;\"> <a href=\"led3On\"><button>ON</button></a> <a href=\"led3Off\"><button>OFF</button></a></div>";
web += "</div>";
return(web);
}
No comments:
Post a Comment