├── ESP8266_Web_Server_LED.ino ├── README.md └── Screenshot_01.png /ESP8266_Web_Server_LED.ino: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | #include 9 | #include 10 | #include 11 | #include 12 | #include 13 | #include 14 | #include 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("<","<");a.replace(">",">"); 30 | a.substring(0,200); return a; } 31 | 32 | String footer() { return "
" 33 | "
Author: BlueArduino20. 2017

" 35 | "
" 36 | "
"; 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 = "" 77 | ""+a+" :: "+SUBTITLE+"" 78 | "" 79 | "" 80 | "
"; 81 | return h; } 82 | 83 | String index() { 84 | return header() + 85 | // 1st ONE: 86 | +"
"+ 88 | +""+ 90 | // 2nd ONE: 91 | + "
"+ 87 | +"
"+ 89 | +"
"+ 93 | +""+ 95 | // 3rd ONE: 96 | + "
"+ 92 | +"
"+ 94 | +"
"+ 98 | +""+ 100 | // 4th ONE: 101 | + "
"+ 97 | +"
"+ 99 | +"
"+ 103 | +"
"+ 102 | +"
"+ 104 | +"

" + 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 | -------------------------------------------------------------------------------- /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 |

Web server

5 | 6 | 7 | 8 | Buy Me A Coffee 9 | 10 |

Default settings

11 | 12 | - **WiFi SSID:** ESP8266-IOT 13 | 14 | - **Gateway:** 192.168.2.1 15 | 16 |

Connections

17 | 18 | 19 | 20 | 21 | 22 |
NodeMCULED
D5 (GPIO14)1st anode
D6 (GPIO12)2nd anode
D7 (GPIO13)3rd anode
D8 (GPIO15)4th anode
GNDAll cathodes
23 | 24 | **Advice!** You should add 330Ω resistors before every anode. 25 | -------------------------------------------------------------------------------- /Screenshot_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamff-dev/ESP8266_Web_Server_LED/1a9e6b98640b3865e8769bd2ec73530681e2a06c/Screenshot_01.png --------------------------------------------------------------------------------