{"id":254,"date":"2019-11-26T09:31:51","date_gmt":"2019-11-26T09:31:51","guid":{"rendered":"https:\/\/starthardware.org\/en\/?p=254"},"modified":"2020-01-06T12:14:20","modified_gmt":"2020-01-06T12:14:20","slug":"interactive-christmas-decoration-part-3-server-and-led","status":"publish","type":"post","link":"https:\/\/starthardware.org\/en\/interactive-christmas-decoration-part-3-server-and-led\/","title":{"rendered":"Interactive Christmas Decoration \u2013 Part 3: Server and LED"},"content":{"rendered":"\n

Now it it time to connect the NodeMCU to Wifi. We will use it as a server so we can connect it with the SmartPhone. The circuit stays the same, we will only change the code.<\/p>\n\n\n\n

Circuit<\/h2>\n\n\n\n
\"Simple<\/figure>\n\n\n\n

Code to run the NodeMCU as a Server<\/h2>\n\n\n\n
\"NodeMCU
Reset Button<\/figcaption><\/figure><\/div>\n\n\n\n

The code is more complex. What happens is that the NodeMCU now acts as a webserver and is listening on the standard port 80. If you connect to its IP address it will show a webpage with a button. Press the button to switch the LED on and off. <\/p>\n\n\n\n

To make it run, fill in your Wifi name (SSID) and password, upload it to the NodeMCU and in the Arduino software open the Serial Monitor. You can find it at Tools>Serial Monitor<\/em>. Set the baud rate <\/em>(bottom of the Serial Monitor window) to 115200 and press the reset button on the NodeMCU.<\/p>\n\n\n\n

The IP address is shown. Connect your smartphone to the same wifi and enter the IP in a browser window. The webpage will show a button to toggle the LED on the NodeMCU.<\/p>\n\n\n\n

#include <ESP8266WiFi.h>\n#include <ESP8266WebServer.h>\n\nconst char* ssid  = \"XXXXXXXX\";        \/\/ Wifi name (SSID)\nconst char* password = \"XXXXXXXX\";  \/\/ Wifi password\n\nESP8266WebServer server(80);    \/\/ Server port\nString Temp = \"\";\n\nint d7pin = D7;\nint d7state = 0;\n\n\/* ***** ***** ***** ***** HTML ***** ***** ***** ***** *\/\n\nconst char HTML_header[] PROGMEM = R\"=====(\n<!DOCTYPE html>\n<html>\n\n<head>\n    <meta content=\"text\/html; charset=ISO-8859-1\" http-equiv=\"content-type\">\n    <meta http-equiv=\"refresh\" content=\"5\">\n    <title>WebSchalter<\/title>\n<\/head>\n\n<style>\n    html {\n        background-color: grey;\n    }\n\n    body {\n        margin: auto;\n        \n        margin-top: 60px;\n    }\n\n    button {\n        height: 120px;\n        width: 100%;\n        font-size: 48px;\n        background-color: cornflowerblue;\n        border: none;\n        color: white;\n        margin-bottom: 10px;\n    }\n    \n    button:active {\n        background-color: darkturquoise;\n        color: white;\n        border: none;\n    }\n    \n    button.on{\n        background-color: red;\n    }\n\n    a {\n        text-decoration: none;\n    }\n\n    \n    \n<\/style>\n\n<body>)=====\";\n\nString HTML_d7_off = \"<a href=\\\"\/args?d7pin=1\\\"><button>d7 - LED<\/button><\/a>\";\nString HTML_d7_on = \"<a href=\\\"\/args?d7pin=0\\\"><button class=\\\"on\\\">d7 - LED<\/button><\/a>\";\n\nconst char HTML_footer[] PROGMEM = R\"=====(\n<\/body>\n<\/html>\n)=====\";\n\n\/* ***** ***** ***** ***** Setup ***** ***** ***** ***** *\/\nvoid setup()\n{\n  pinMode(d7pin , OUTPUT);                  \/\/ D7 set as Output\n  Serial.begin(115200);                     \/\/ start serial communication\n  connectToWifi();                          \/\/ start wifi\n}\n\n\/* ***** Webpage: executed when \"http:\/\/<ip address>\/\" is called ***** *\/\n\nvoid the_webpage() {\n  Temp = HTML_header;                        \/\/ top part of the html\n  \n  if (d7state == 1) {                        \/\/ d7 part of html page \u2013 the html code for a button\n    Temp += HTML_d7_on;\n  } else {\n    Temp += HTML_d7_off;\n  }\n  \n  Temp += HTML_footer;                       \/\/ bottom part of the html page\n  server.send(200, \"text\/html\", Temp);       \/\/ serving the html page\n}\n\n\/* ***** ***** ***** ***** Event Functions ***** ***** ***** ***** *\/\n\nvoid handleArgs() { \n  if (server.arg(\"d7pin\")!= \"\"){             \/\/ if specific argument is not empty\n    d7state = server.arg(\"d7pin\").toInt();   \/\/ set d7 pin to received argument\n  }\n  \n  the_webpage();                             \/\/ deliver webpage\n}\n\n\/* ***** ***** ***** Wifi Functions ***** ***** ***** *\/\n\nvoid showStates(){                           \/\/ map all states to pins\n  digitalWrite(d7pin, d7state);  \n}\n\n\/* ***** ***** ***** ***** Loop ***** ***** ***** ***** *\/\n\nvoid loop() {\n  server.handleClient();                     \/\/ update function for server\n  showStates();                              \/\/ map states to pins\n  delay(10);                                 \/\/ some time to process\n}\n\n\/* ***** ***** ***** Wifi Functions ***** ***** ***** *\/\n\nvoid connectToWifi() {  \n  Serial.println();\n  Serial.print(\"Connect to\"); Serial.println(ssid);   \n  WiFi.begin(ssid, password);\n  \n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(\".\");             \n  }\n\n  Serial.println(\"\");\n  Serial.println(\"Wifi connected\");\n  Serial.println (\"Webserver running, waiting for ESP8266 ...\");\n\n  delay(2000);\n  Serial.println();\n  Serial.println(\"IP addresse of the web server is: \");\n  Serial.println(WiFi.localIP());   \/\/ output the ip\n  server.on(\"\/\", the_webpage);      \/\/ show website on root call \n  server.on(\"\/args\", handleArgs);   \/\/ associate the handler function to the path\n\n  server.begin();                   \/\/ start the server\n  Serial.println (\"Webserver running, waiting for ESP8266 ...\");\n}<\/code><\/pre>\n\n\n\n
The Complete Tutorial<\/h2>\n\n\n\n