/*********
https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
https://github.com/binaryupdates/NodeMCU-Webserver-Station-Mode/blob/main/ESP8266_Webserver_Station_Mode.ino
*********/
#include <WiFi.h>
#include <WebServer.h>
void handle_OnConnect();
void handle_ledon();
void handle_ledoff();
void handle_NotFound();
String updateWebpage(uint8_t LEDstatus);
const char* ssid = "Wokwi-GUEST";
const char* password = "";
const uint8_t led1 = 26;
const uint8_t led2 = 27;
// WebServer = Class, server = Object
WebServer server(80);
bool LEDstatus = LOW;
// ----------------- setup -------------------
void setup() {
Serial.begin(9600);
delay(100);
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
//check NodeMCU is connected to Wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.on("/ledon", handle_ledon);
server.on("/ledoff", handle_ledoff);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP Server Started");
}
// ---------------- loop -------------------
void loop() {
server.handleClient(); // watch and wait until client request
if(LEDstatus)
{
digitalWrite(led1, HIGH);}
else
{
digitalWrite(led1, LOW);}
}
// ------------------ functions ---------------
void handle_OnConnect() {
LEDstatus = LOW;
Serial.println("LED: OFF");
server.send(200, "text/html", updateWebpage(LEDstatus));
}
void handle_ledon() {
LEDstatus = HIGH;
Serial.println("LED: ON");
server.send(200, "text/html", updateWebpage(LEDstatus));
}
void handle_ledoff() {
LEDstatus = LOW;
Serial.println("LED: OFF");
server.send(200, "text/html", updateWebpage(LEDstatus));
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String updateWebpage(uint8_t LEDstatus) {
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>LED Control</title>\n";
ptr +="<style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #3498db;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Station(STA) Mode</h3>\n";
if(LEDstatus){
ptr +="<p>BLUE LED: ON</p><a class=\"button button-off\" href=\"/ledoff\">OFF</a>\n";
}else{
ptr +="<p>BLUE LED: OFF</p><a class=\"button button-on\" href=\"/ledon\">ON</a>\n";
}
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}