It is made to control led remotely with Web Server.I used ESP8266 NodeMCU, but it can be used in other versions.
I assume you have Arduino IDE on your system. However, the ESP8266 we will be using does not come in the standard installation of the IDE, so we will have to do some additional processing.
Let's add the following address to the Additional Circuit Boards Manager URLs section from the File>Preferences menu.
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Then find and install ESP8266 from Tools>Card>Card Manager:
Next we need to add ESP8266WebServer, the only library we will use. Draft > add library > manage libraries
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
You need to modify the following two variables with your network credentials, so that your ESP8266 can establish a connection with your router.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
IPAddress gateway(192, 168, 1, 1); // Default Gateway
IPAddress local_IP(192, 168, 1, 37); // Static IP Address for ESP8266
IPAddress subnet(255, 255, 0, 0); // Subnet Mask
Important: You need to use an available IP address in your local network and the corresponding gateway.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print("."); //"." on the screen until the connection is established. We get it out.(Loading)
}
String SendHTML(uint8_t led1stat,uint8_t led2stat,uint8_t led3stat,uint8_t led4stat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>Web Server</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;background-image: url('https://img.freepik.com/free-vector/network-mesh-wire-digital-technology-background_1017-27428.jpg?w=2000&t=st=1666631373~exp=1666631973~hmac=16d284cb25630daf0cf2b97358d888edc4bbda780368991243e4faf89485f865');} h1 {color: black;margin: 30px auto 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #1abc9c ;border: none;color: white;padding-left: 13px; padding-right: 13px;text-decoration: none;font-size: 28px;margin: 0px auto 25px;cursor: pointer;border-radius: 5px;}\n";
ptr +=".button-on {background-color: #0095c7;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +="p {font-size: 16px;color:black;margin-bottom: 10px;}\n";
ptr +="p1 {font-size: 28px;color: black;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body bgcolor= efefef style=color:white>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 NodeMCU WebServer</h1>\n";
if(led1stat)
{ptr +="<p>Status1: Open</p><a class=\"button button-off\" href=\"/led1off\">Close</a>\n";}
else
{ptr +="<p>Status1: Closed</p><a class=\"button button-on\" href=\"/led1on\">Open</a>\n";}
if(led2stat)
{ptr +="<p>Status2: Open</p><a class=\"button button-off\" href=\"/led2off\">Close</a>\n";}
else
{ptr +="<p>Status2: Closed</p><a class=\"button button-on\" href=\"/led2on\">Open</a>\n";}
if(led3stat)
{ptr +="<p>Status3: Open</p><a class=\"button button-off\" href=\"/led3off\">Close</a>\n";}
else
{ptr +="<p>Status3: Closed</p><a class=\"button button-on\" href=\"/led3on\">Open</a>\n";}
if(led4stat)
{ptr +="<p>Status4: Open</p><a class=\"button button-off\" href=\"/led4off\">Close</a>\n";}
else
{ptr +="<p>Status4: Closed</p><a class=\"button button-on\" href=\"/led4on\">Open</a>\n";}
//social media Logo
ptr +="<br/><p1>Social Media</p1>";
ptr += "<a target=”github” a href='https://github.com/doguhanpolat'>";
ptr += "<br/><br/><img src= 'https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png' Z\" width=\"90\" height=\"45\" alt=\"logo\\\">\n";
ptr += "<a target=”github” a href='https://www.linkedin.com/in/doguhan-polat/'>";
ptr += "<img src= 'https://logos-world.net/wp-content/uploads/2020/04/Linkedin-Symbol.png' Z\" width=\"85\" height=\"45\" alt=\"logo\\\">\n";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
Press the ESP8266 RESET button, and it will output the ESP IP address on the Serial Monitor
Copy that IP address, because you need it to access the web server.
Open your browser, type the ESP IP address, and you’ll see the following page. This page is sent by the ESP8266 when you make a request on the ESP IP address.
