https://adventure.ports.network
Developers to Join
adventures
/how-to
Simple Project TO START CODING.
1X LED LIGHT (RGB LED LIGHT-CATHODE)
1X ESP32 MICROCONTROLLER
Parts required to this project
1X USB CABLE TO CONNECT YOUR ESP32 TO YOUR PC .
3 X WIRES
3 X RESISTORS ( 220 ohms )
1 X CAPACITOR (10UF )
HARDWARE
SOFTWARE
ARDUINO IDE SOFTWARE
ARDUINO LIBRARY :
wifi.h
1 X BREAD BOARD ( 400 DOTS )
Wireless Web Server to turn ON/OFF Led Light
(STA MODE )
ASSEMBLY THE PARTS
CHECK THE IMAGES TO ASSEMBLY THE PARTS:
( All parts required )
( RGB LED Light (CATHODE) )
( 220 ohm Resistors )
(10uf Capacitor )
Image 3
Image 2
Image 4
Image 1
( Wiring )
Image 5
COMPILING AND UPLOADING THE CODE
AFTER INSTALL THE ARDUINO IDE SOFTWARE,
SOME LIBRARIES ARE REQUIRED TO GET THE WEBSERVER WORKING .
SOME LIBRARIES ARE REQUIRED TO GET THE WEBSERVER WORKING .
GO TO ARDUINO HOMEPAGE AND DOWNLOAD THE ARDUINO IDE SOFTWARE .
EASY STEP TO STEP , HOW TO UPLOAD THE CODE TO THE ESP32 BOARD .
STEP 1
STEP 2
STEP 3
INSTALL THE ARDUINO IDE SOFTWARE TO YOUR COMPUTER
LIBRARY REQUIRED
wifi.h
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "SSID*******";
const char* password = "PASSWORD*******";
//
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliary variables to store the current output state
String outputLEDstate = "off";
// Assign output variables to GPIO pins
//Setup the Led Light - Assign output variables to GPIO pins
uint8_t ledR = 16;
uint8_t ledG = 17;
uint8_t ledB = 5;
uint8_t ledArray[3] = {1, 2, 3}; // three led channels
const boolean invert = false; // set true if common anode, false if common cathode - "d-o-t.link uses common cathode".
uint8_t color = 0; // a value from 0 to 255 representing the hue
uint32_t R, G, B; // the Red Green and Blue color components
uint8_t brightness = 255; // 255 is maximum brightness, but can be changed. Might need 256 for common anode to fully turn off.
//
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
//
void setup() {
Serial.begin(115200);
delay(10);
//
//Setup the Led light
ledcAttachPin(ledR, 1); // assign RGB led pins to channels
ledcAttachPin(ledG, 2);
ledcAttachPin(ledB, 3);
ledcSetup(1, 12000, 8); // 12 kHz PWM, 8-bit resolution
ledcSetup(2, 12000, 8);
ledcSetup(3, 12000, 8);
//
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println("Wifi Network ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /led/on") >= 0) {
Serial.println("GPIO Status | on");
outputLEDstate = "on";
// Section to Control the Led Light .
// check the color hue chart to change the color of the LED. Lots of colors to play with.
ledcWrite(1, 255); // change the value from 0 to 255, and change the color hue .
ledcWrite(2, 20); // change the value from 0 to 255, and change the color hue .
ledcWrite(3, 10); // change the value from 0 to 255, and change the color hue .
} else if (header.indexOf("GET /led/off") >= 0) {
Serial.println("GPIO Status | off");
outputLEDstate = "off";
ledcWrite(1, 0); // 0 to turn the led off.
ledcWrite(2, 0); // 0 to turn the led off.
ledcWrite(3, 0); // 0 to turn the led off.
}
// Display the HTML web page - Powered by logicmetry.co.uk - d-o-t.link
client.println("<!doctype html>");
client.println("<html>");
client.println("<head>");
client.println("<meta charset=\"utf-8\">");
client.println("<head><meta name=\"d-o-t-link\" content=\"width=device-width, initial-scale=2\">");
client.println("<title>d-o-t.link</title>");
// CSS to style the on/off buttons and other HTML elements
client.println("<style>");
client.println("html { font-family: Calibri; display: inline-block; text-align: center;}");
client.println(".box {");
client.println("position:relative;");
client.println("margin:auto;");
client.println("margin-top:0px;");
client.println("width:350px;");
client.println("height:100px;");
client.println("border: none;");
client.println("}");
client.println(".links {");
client.println("position:relative;");
client.println("width:200px;");
client.println("height:100px;");
client.println("border: none;");
client.println("background: url(data:image/webp;base64,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) no-repeat;");
client.println("background-size: auto;");
client.println("cursor: pointer;");
client.println("z-index:10;");
client.println("}");
client.println(".links:active {");
client.println("transform:scale(1.1);");
client.println("}");
client.println(".links1 {");
client.println("margin-left:0px;");
client.println("left:0%;");
client.println("top:0%;");
client.println("filter: grayscale(100%);");
client.println("}");
client.println(".links2 {");
client.println("margin-left:0px;");
client.println("left:19%;");
client.println("top:0%;");
client.println("filter: grayscale(10%);");
client.println("}");
client.println(".battery{");
client.println("position:relative;");
client.println("left:170px;");
client.println("top:-97px;");
client.println("width:200px;");
client.println("height:100px;");
client.println("border: none;");
client.println("background: url(data:image/webp;base64,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LzEuMS8iIHhtbG5zOkdJTVA9Imh0dHA6Ly93d3cuZ2ltcC5vcmcveG1wLyIgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0iZ2ltcDpkb2NpZDpnaW1wOmU4MTUwZGZmLTZjNzgtNDdlMy04YTk3LTZmYWJlZWQ3ZGI2YyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpmM2Y2Y2M2OS03MjM2LTRkODUtOWY2MS01ODI5YmI1YTVhM2YiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMTc4YzNiMS0wM2Q3LTRjODYtOGEwYi1iN2ExNzBmMmNhOTQiIGRjOkZvcm1hdD0iaW1hZ2Uvd2VicCIgR0lNUDpBUEk9IjIuMCIgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIgR0lNUDpUaW1lU3RhbXA9IjE3MDc4OTkwOTkzNDUwNTgiIEdJTVA6VmVyc2lvbj0iMi4xMC4zNCIgdGlmZjpPcmllbnRhdGlvbj0iMSIgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQ6MDI6MTRUMTk6MjQ6NTYrMTE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0OjAyOjE0VDE5OjI0OjU2KzExOjAwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0OmNoYW5nZWQ9Ii8iIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjJjZjFiMjgtOTU0YS00ZThkLThhNWMtZWRjNDY3MzUyZmZmIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIiBzdEV2dDp3aGVuPSIyMDI0LTAyLTE0VDE5OjI0OjU5Ii8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+) no-repeat;");
client.println("cursor: pointer;");
client.println("z-index: 20;");
client.println("}");
client.println(".spn1 {");
client.println("position:relative;");
client.println("left:25px ;");
client.println("top:30px ;");
client.println("color: black;");
client.println("font-size:30px;");
client.println("box-sizing:border-box;");
client.println("}");
client.println(".txtbox {");
client.println("position:relative;");
client.println("left:0px ;");
client.println("top:-100% ;");
client.println("color: black;");
client.println("font-size:30px;");
client.println("display:inline-block;");
client.println("border:1p solid black;");
client.println("box-sizing:border-box;");
client.println("}");
client.println(".txtbox1 {");
client.println("background-color: lightgray;");
client.println("}");
client.println(".txtbox2 {");
client.println("background-color: lightgreen;");
client.println("}");
client.println("@keyframes move1 {");
client.println("from {left: 0%;}");
client.println("to {left: 19%;}");
client.println("}");
client.println("@keyframes move2 {");
client.println("from {left: 19%;}");
client.println("to {left: 0%;}");
client.println("}");
client.println(".edit-text {");
client.println("-webkit-user-select: none;");
client.println("-ms-user-select: none;");
client.println("user-select: none;");
client.println("}");
client.println("</style>");
client.println("</head>");
// Web Page Heading
client.println("<body>");
client.println("<h1>Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIOs
client.println("<p>Status " + outputLEDstate + "</p>");
// If the outputLEDstate is off, it displays the ON button
if (outputLEDstate=="off") {
client.println("<div id=\"divbox\"class=\"box\">");
client.println("<div id=\"div1\"class=\"links links1 edit-text\" onclick=\"clickfunction()\"><span id=\"spn\" class=\"spn1\">link</span></div>");
client.println("<div id=\"div2\"class=\"battery\" ></div>");
client.println("<p id=\"txt\"class=\"txtbox txtbox1\">DISCONNECTED</p>");
client.println("</div>");
// java script - the java script is in this section to make the code easier to read .
client.println("<script>");
client.println("const element = document.getElementById(\"div1\");");
client.println("const text = document.getElementById(\"txt\");");
client.println("function clickfunction() {");
client.println("element.style.animation = \"move1 0.5s 1\";");
client.println("}");
client.println("element.addEventListener(\"animationend\", clickfunction2);");
client.println("function clickfunction2() {");
client.println("text.innerHTML = \"CONNECTED\";");
client.println("text.style.backgroundColor = \"lightgreen\";");
client.println("element.style.left = \"19%\";");
client.println("element.style.filter = \"grayscale(10%)\";");
client.println("window.location.href = \"/led/on\";");
client.println("}");
client.println("</script>");
} else {
client.println("<div id=\"divbox\"class=\"box\">");
client.println("<div id=\"div1\"class=\"links links2 edit-text\" onclick=\"clickfunction()\"><span id=\"spn\" class=\"spn1\">link</span></div>");
client.println("<div id=\"div2\"class=\"battery\" ></div>");
client.println("<p id=\"txt\"class=\"txtbox txtbox2\">CONNECTED</p>");
client.println("</div>");
// java script - the java script is in this section to make the code easier to read.
client.println("<script>");
client.println("const element = document.getElementById(\"div1\");");
client.println("const text = document.getElementById(\"txt\");");
client.println("function clickfunction() {");
client.println("element.style.animation = \"move2 0.5s 1\";");
client.println("}");
client.println("element.addEventListener(\"animationend\", clickfunction2);");
client.println("function clickfunction2() {");
client.println("text.innerHTML = \"DISCONNECTED\";");
client.println("text.style.backgroundColor = \"lightgray\";");
client.println("element.style.left = \"0%\";");
client.println("element.style.filter = \"grayscale(100%)\";");
client.println("window.location.href = \"/led/off\";");
client.println("}");
client.println("</script>");
}
client.println("</body>");
client.println("</html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "SSID*******";
const char* password = "PASSWORD*******";
//
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliary variables to store the current output state
String outputLEDstate = "off";
// Assign output variables to GPIO pins
//Setup the Led Light - Assign output variables to GPIO pins
uint8_t ledR = 16;
uint8_t ledG = 17;
uint8_t ledB = 5;
uint8_t ledArray[3] = {1, 2, 3}; // three led channels
const boolean invert = false; // set true if common anode, false if common cathode - "d-o-t.link uses common cathode".
uint8_t color = 0; // a value from 0 to 255 representing the hue
uint32_t R, G, B; // the Red Green and Blue color components
uint8_t brightness = 255; // 255 is maximum brightness, but can be changed. Might need 256 for common anode to fully turn off.
//
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
//
void setup() {
Serial.begin(115200);
delay(10);
//
//Setup the Led light
ledcAttachPin(ledR, 1); // assign RGB led pins to channels
ledcAttachPin(ledG, 2);
ledcAttachPin(ledB, 3);
ledcSetup(1, 12000, 8); // 12 kHz PWM, 8-bit resolution
ledcSetup(2, 12000, 8);
ledcSetup(3, 12000, 8);
//
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println("Wifi Network ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /led/on") >= 0) {
Serial.println("GPIO Status | on");
outputLEDstate = "on";
// Section to Control the Led Light .
// check the color hue chart to change the color of the LED. Lots of colors to play with.
ledcWrite(1, 255); // change the value from 0 to 255, and change the color hue .
ledcWrite(2, 20); // change the value from 0 to 255, and change the color hue .
ledcWrite(3, 10); // change the value from 0 to 255, and change the color hue .
} else if (header.indexOf("GET /led/off") >= 0) {
Serial.println("GPIO Status | off");
outputLEDstate = "off";
ledcWrite(1, 0); // 0 to turn the led off.
ledcWrite(2, 0); // 0 to turn the led off.
ledcWrite(3, 0); // 0 to turn the led off.
}
// Display the HTML web page - Powered by logicmetry.co.uk - d-o-t.link
client.println("<!doctype html>");
client.println("<html>");
client.println("<head>");
client.println("<meta charset=\"utf-8\">");
client.println("<head><meta name=\"d-o-t-link\" content=\"width=device-width, initial-scale=2\">");
client.println("<title>d-o-t.link</title>");
// CSS to style the on/off buttons and other HTML elements
client.println("<style>");
client.println("html { font-family: Calibri; display: inline-block; text-align: center;}");
client.println(".box {");
client.println("position:relative;");
client.println("margin:auto;");
client.println("margin-top:0px;");
client.println("width:350px;");
client.println("height:100px;");
client.println("border: none;");
client.println("}");
client.println(".links {");
client.println("position:relative;");
client.println("width:200px;");
client.println("height:100px;");
client.println("border: none;");
client.println("background: url(data:image/webp;base64,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) no-repeat;");
client.println("background-size: auto;");
client.println("cursor: pointer;");
client.println("z-index:10;");
client.println("}");
client.println(".links:active {");
client.println("transform:scale(1.1);");
client.println("}");
client.println(".links1 {");
client.println("margin-left:0px;");
client.println("left:0%;");
client.println("top:0%;");
client.println("filter: grayscale(100%);");
client.println("}");
client.println(".links2 {");
client.println("margin-left:0px;");
client.println("left:19%;");
client.println("top:0%;");
client.println("filter: grayscale(10%);");
client.println("}");
client.println(".battery{");
client.println("position:relative;");
client.println("left:170px;");
client.println("top:-97px;");
client.println("width:200px;");
client.println("height:100px;");
client.println("border: none;");
client.println("background: url(data:image/webp;base64,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LzEuMS8iIHhtbG5zOkdJTVA9Imh0dHA6Ly93d3cuZ2ltcC5vcmcveG1wLyIgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0iZ2ltcDpkb2NpZDpnaW1wOmU4MTUwZGZmLTZjNzgtNDdlMy04YTk3LTZmYWJlZWQ3ZGI2YyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpmM2Y2Y2M2OS03MjM2LTRkODUtOWY2MS01ODI5YmI1YTVhM2YiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMTc4YzNiMS0wM2Q3LTRjODYtOGEwYi1iN2ExNzBmMmNhOTQiIGRjOkZvcm1hdD0iaW1hZ2Uvd2VicCIgR0lNUDpBUEk9IjIuMCIgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIgR0lNUDpUaW1lU3RhbXA9IjE3MDc4OTkwOTkzNDUwNTgiIEdJTVA6VmVyc2lvbj0iMi4xMC4zNCIgdGlmZjpPcmllbnRhdGlvbj0iMSIgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQ6MDI6MTRUMTk6MjQ6NTYrMTE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0OjAyOjE0VDE5OjI0OjU2KzExOjAwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0OmNoYW5nZWQ9Ii8iIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjJjZjFiMjgtOTU0YS00ZThkLThhNWMtZWRjNDY3MzUyZmZmIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIiBzdEV2dDp3aGVuPSIyMDI0LTAyLTE0VDE5OjI0OjU5Ii8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+) no-repeat;");
client.println("cursor: pointer;");
client.println("z-index: 20;");
client.println("}");
client.println(".spn1 {");
client.println("position:relative;");
client.println("left:25px ;");
client.println("top:30px ;");
client.println("color: black;");
client.println("font-size:30px;");
client.println("box-sizing:border-box;");
client.println("}");
client.println(".txtbox {");
client.println("position:relative;");
client.println("left:0px ;");
client.println("top:-100% ;");
client.println("color: black;");
client.println("font-size:30px;");
client.println("display:inline-block;");
client.println("border:1p solid black;");
client.println("box-sizing:border-box;");
client.println("}");
client.println(".txtbox1 {");
client.println("background-color: lightgray;");
client.println("}");
client.println(".txtbox2 {");
client.println("background-color: lightgreen;");
client.println("}");
client.println("@keyframes move1 {");
client.println("from {left: 0%;}");
client.println("to {left: 19%;}");
client.println("}");
client.println("@keyframes move2 {");
client.println("from {left: 19%;}");
client.println("to {left: 0%;}");
client.println("}");
client.println(".edit-text {");
client.println("-webkit-user-select: none;");
client.println("-ms-user-select: none;");
client.println("user-select: none;");
client.println("}");
client.println("</style>");
client.println("</head>");
// Web Page Heading
client.println("<body>");
client.println("<h1>Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIOs
client.println("<p>Status " + outputLEDstate + "</p>");
// If the outputLEDstate is off, it displays the ON button
if (outputLEDstate=="off") {
client.println("<div id=\"divbox\"class=\"box\">");
client.println("<div id=\"div1\"class=\"links links1 edit-text\" onclick=\"clickfunction()\"><span id=\"spn\" class=\"spn1\">link</span></div>");
client.println("<div id=\"div2\"class=\"battery\" ></div>");
client.println("<p id=\"txt\"class=\"txtbox txtbox1\">DISCONNECTED</p>");
client.println("</div>");
// java script - the java script is in this section to make the code easier to read .
client.println("<script>");
client.println("const element = document.getElementById(\"div1\");");
client.println("const text = document.getElementById(\"txt\");");
client.println("function clickfunction() {");
client.println("element.style.animation = \"move1 0.5s 1\";");
client.println("}");
client.println("element.addEventListener(\"animationend\", clickfunction2);");
client.println("function clickfunction2() {");
client.println("text.innerHTML = \"CONNECTED\";");
client.println("text.style.backgroundColor = \"lightgreen\";");
client.println("element.style.left = \"19%\";");
client.println("element.style.filter = \"grayscale(10%)\";");
client.println("window.location.href = \"/led/on\";");
client.println("}");
client.println("</script>");
} else {
client.println("<div id=\"divbox\"class=\"box\">");
client.println("<div id=\"div1\"class=\"links links2 edit-text\" onclick=\"clickfunction()\"><span id=\"spn\" class=\"spn1\">link</span></div>");
client.println("<div id=\"div2\"class=\"battery\" ></div>");
client.println("<p id=\"txt\"class=\"txtbox txtbox2\">CONNECTED</p>");
client.println("</div>");
// java script - the java script is in this section to make the code easier to read.
client.println("<script>");
client.println("const element = document.getElementById(\"div1\");");
client.println("const text = document.getElementById(\"txt\");");
client.println("function clickfunction() {");
client.println("element.style.animation = \"move2 0.5s 1\";");
client.println("}");
client.println("element.addEventListener(\"animationend\", clickfunction2);");
client.println("function clickfunction2() {");
client.println("text.innerHTML = \"DISCONNECTED\";");
client.println("text.style.backgroundColor = \"lightgray\";");
client.println("element.style.left = \"0%\";");
client.println("element.style.filter = \"grayscale(100%)\";");
client.println("window.location.href = \"/led/off\";");
client.println("}");
client.println("</script>");
}
client.println("</body>");
client.println("</html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
COPY AND PASTE THE CODE IN THE ARDUINO IDE SOFTWARE
STEP 4
CHANGE THE SSID AND THE PASSWORD TO YOUR WIFI .
STEP 5
STEP 6
UPLOAD THE CODE .
STEP 7
Open the Serial Monitor in the Arduino IDE Software to Find the IP address of the ESP32 board.
Select the Baud rate of 115200 from the dropdown list in the bottom right corner of the Serial monitor, as the picture .
STEP 8
a - Reset the Esp32 board by pressing the EN[RST] button on the board.
b - Wait for the ESP32 board to connect to the Wifi network.
c - The Serial Monitor will display messages to indicate the connection progress .
b - Wait for the ESP32 board to connect to the Wifi network.
c - The Serial Monitor will display messages to indicate the connection progress .
STEP 9
STEP 10
Once the Esp32 board is connected to the Wifi network, the Serial Monitor will display the IP address of the ESP32 board .
Connecting to the ESP32 WEB SERVER and Testing
Open the webbrowser on your computer or mobile device and enter the Ip address of the ESP32 board given in the Serial Monitor .
Web Browser URL address bar
(example)
(example)
(example)
i-o-s.link start page .
Click on i-o-s.link to connect and turn on the Led light .
have fun
All Rights Reserved . https://adventure.ports.network