├── Screenshot_01.png
├── README.md
└── ESP8266_Web_Server_LED.ino


/Screenshot_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamff-dev/ESP8266_Web_Server_LED/HEAD/Screenshot_01.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ESP8266 Web server (LED diodes control)
 2 | This is a simple IOT example for the NodeMCU or ESP8266. You can control some LED diodes from NodeMCU through an user-friendly web server.
 3 | 
 4 | <h2>Web server</h2>
 5 | 
 6 | <img width="225" height="385" src="https://raw.githubusercontent.com/BlueArduino20/ESP8266_Web_Server_LED/master/Screenshot_01.png" title="ESP8266 Web server">
 7 | 
 8 | <a href="https://www.buymeacoffee.com/rSiZtB3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
 9 | 
10 | <h2>Default settings</h2>
11 | 
12 | - **WiFi SSID:** ESP8266-IOT
13 | 
14 | - **Gateway:** 192.168.2.1
15 | 
16 | <h2>Connections</h2>
17 | <table><tr><th>NodeMCU</th><th>LED</th></tr>
18 | <tr><td align="center">D5 (GPIO14)</td><td align="center">1st anode</td></tr>
19 | <tr><td align="center">D6 (GPIO12)</td><td align="center">2nd anode</td></tr>
20 | <tr><td align="center">D7 (GPIO13)</td><td align="center">3rd anode</td></tr>
21 | <tr><td align="center">D8 (GPIO15)</td><td align="center">4th anode</td></tr>
22 | <tr><td align="center">GND</td><td align="center">All cathodes</td></tr></table>
23 | 
24 | **Advice!** You should add 330Ω resistors before every anode.
25 | 


--------------------------------------------------------------------------------
/ESP8266_Web_Server_LED.ino:
--------------------------------------------------------------------------------
  1 | #include <ESP8266WiFi.h>
  2 | #include <ESP8266WiFiAP.h>
  3 | #include <ESP8266WiFiGeneric.h>
  4 | #include <ESP8266WiFiMulti.h>
  5 | #include <ESP8266WiFiScan.h>
  6 | #include <ESP8266WiFiSTA.h>
  7 | #include <ESP8266WiFiType.h>
  8 | #include <WiFiClient.h>
  9 | #include <WiFiClientSecure.h>
 10 | #include <WiFiServer.h>
 11 | #include <WiFiUdp.h>
 12 | #include <ESP8266WiFi.h>
 13 | #include <DNSServer.h> 
 14 | #include <ESP8266WebServer.h>
 15 | 
 16 | #define APSSID "ESP8266-IOT" // SSID & Title
 17 | #define APPASSWORD "" // Blank password = Open AP
 18 | #define SUBTITLE "Internet Of Things" // Cool subtitle
 19 | 
 20 | const byte HTTP_CODE = 200;
 21 | const byte TICK_TIMER = 1000;
 22 | IPAddress APIP(192, 168, 2, 1);
 23 | 
 24 | unsigned long bootTime=0, lastActivity=0, lastTick=0, tickCtr=0;
 25 | DNSServer dnsServer; ESP8266WebServer webServer(80);
 26 | 
 27 | String input(String argName) {
 28 |   String a=webServer.arg(argName);
 29 |   a.replace("<","&lt;");a.replace(">","&gt;");
 30 |   a.substring(0,200); return a; }
 31 | 
 32 | String footer() { return "<footer>"
 33 |   "<div class=\"footer\""
 34 |   " <p><b>Author:</b> BlueArduino20. <b>2017</b></p>"
 35 |   "</div>"
 36 |   "</footer>";
 37 | }
 38 | 
 39 | String header() {
 40 |   String a = String(APSSID);
 41 |   String CSS = "article { background: #f2f2f2; padding: 1.3em; }" 
 42 |   "body { color: #333; font-family: Century Gothic, sans-serif; font-size: 18px; line-height: 24px; margin: 0; padding: 0; }"
 43 |   "div { padding: 0.35em; }"
 44 |   "h1 { margin: 0.5em 0 0 0; padding: 0.5em; }"
 45 |   "input { border-radius: 0; border: 1px solid #555555; }"
 46 |   "label { color: #333; display: block; font-style: italic; font-weight: bold; }"
 47 |   "nav { background: #0066ff; color: #fff; display: block; font-size: 1.3em; padding: 1em; }"
 48 |   "nav b { display: block; font-size: 1.5em; margin-bottom: 0.5em; } "
 49 |   "textarea { width: 100%; }"
 50 |   ".button {"
 51 |   "background-color: #4CAF50;"
 52 |   "border: 1px solid black;"
 53 |   "border-radius: 6px;"
 54 |   "color: white;"
 55 |   "padding: 15px 32px;"
 56 |   "text-align: center;"
 57 |   "text-decoration: none;"
 58 |   "display: inline-block;"
 59 |   "font-size: 16px;"
 60 |   "margin: 4px 2px;"
 61 |   "cursor: pointer;"
 62 |   "}"
 63 |   ".buttonb { background-color: #555555; }"
 64 |   ".footer {"
 65 |   "position: fixed;"
 66 |   "left: 0;"
 67 |   "bottom: 0;"
 68 |   "width: 100%;"
 69 |   "background-color: #0066ff;"
 70 |   "color: white;"
 71 |   "text-align: center;"
 72 |   "font-family: \"Verdana\", Sans, serif;"
 73 |   "border-radius: 0px;"
 74 |   "height: 25px"
 75 |   "}";
 76 |   String h = "<!DOCTYPE html><html>"
 77 |     "<head><title>"+a+" :: "+SUBTITLE+"</title>"
 78 |     "<meta name=viewport content=\"width=device-width,initial-scale=1\">"
 79 |     "<style>"+CSS+"</style></head>"
 80 |     "<body><nav><b>"+a+"</b> "+SUBTITLE+"</nav><br>";
 81 |   return h; }
 82 | 
 83 | String index() {
 84 |   return header() +
 85 |   // 1st ONE:
 86 |   +"<center><table><tr><th><div><form action=/1ON method=post>"+
 87 |   +"<input type=submit class=\"button\" value=\"1 ON\"></form></center></th>"+
 88 |   +"<th><center><div><form action=/1OFF method=post>"+
 89 |   +"<input type=submit class=\"button buttonb\" value=\"1 OFF\"></form></center></th></tr>"+
 90 |   // 2nd ONE:
 91 |   + "<table><tr><th><center><div><form action=/2ON method=post>"+
 92 |   +"<input type=submit class=\"button\" value=\"2 ON\"></form></center></th>"+
 93 |   +"<th><center><div><form action=/2OFF method=post>"+
 94 |   +"<input type=submit class=\"button buttonb\" value=\"2 OFF\"></form></center></th></tr>"+
 95 |   // 3rd ONE:
 96 |   + "<table><tr><th><center><div><form action=/3ON method=post>"+
 97 |   +"<input type=submit class=\"button\" value=\"3 ON\"></form></center></th>"+
 98 |   +"<th><center><div><form action=/3OFF method=post>"+
 99 |   +"<input type=submit class=\"button buttonb\" value=\"3 OFF\"></form></th></tr></center>"+
100 |   // 4th ONE:
101 |   + "<table><tr><th><center><div><form action=/4ON method=post>"+
102 |   +"<input type=submit class=\"button\" value=\"4 ON\"></form></center></th>"+
103 |   +"<th><center><div><form action=/4OFF method=post>"+
104 |   +"<input type=submit class=\"button buttonb\" value=\"4 OFF\"></form></th></tr></table></center><br>" + footer();
105 | }
106 | 
107 | 
108 | void setup() {
109 |   
110 |   bootTime = lastActivity = millis();
111 |   WiFi.mode(WIFI_AP);
112 |   WiFi.softAPConfig(APIP, APIP, IPAddress(255, 255, 255, 0));
113 |   WiFi.softAP(APSSID, APPASSWORD);
114 | 
115 |   webServer.on("/1ON",[]() { digitalWrite(13, HIGH); webServer.send(HTTP_CODE, "text/html", index()); });
116 |   webServer.on("/2ON",[]() { digitalWrite(14, HIGH); webServer.send(HTTP_CODE, "text/html", index()); });
117 |   webServer.on("/3ON",[]() { digitalWrite(12, HIGH); webServer.send(HTTP_CODE, "text/html", index()); });
118 |   webServer.on("/4ON",[]() { digitalWrite(15, HIGH); webServer.send(HTTP_CODE, "text/html", index()); });
119 |   webServer.on("/1OFF",[]() { digitalWrite(13, LOW); webServer.send(HTTP_CODE, "text/html", index()); });
120 |   webServer.on("/2OFF",[]() { digitalWrite(14, LOW); webServer.send(HTTP_CODE, "text/html", index()); });
121 |   webServer.on("/3OFF",[]() { digitalWrite(12, LOW); webServer.send(HTTP_CODE, "text/html", index()); });
122 |   webServer.on("/4OFF",[]() { digitalWrite(15, LOW); webServer.send(HTTP_CODE, "text/html", index()); });
123 |   webServer.onNotFound([]() { lastActivity=millis(); webServer.send(HTTP_CODE, "text/html", index()); });
124 | 
125 |   webServer.begin();
126 |   pinMode(13, OUTPUT); // LED setup
127 |   pinMode(14, OUTPUT);
128 |   pinMode(12, OUTPUT);
129 |   pinMode(15, OUTPUT);
130 |   pinMode(16, OUTPUT);
131 |   digitalWrite(16, LOW); // The built-in led will notify us that the setup is finished.
132 |   delay(1000);
133 |   digitalWrite(16, HIGH);
134 | }
135 | 
136 | 
137 | void loop() { 
138 |   if ((millis()-lastTick)>TICK_TIMER) {lastTick=millis();} 
139 | dnsServer.processNextRequest(); webServer.handleClient(); }
140 | 


--------------------------------------------------------------------------------