Nodemcu Webserver with Arduino IDE for controlling LEDs.

Nodemcu Webserver with Arduino IDE for controlling LEDs.
In this simple project we want to turn an led on and off via a webpage . This is done using the ESP8266 Nodemcu-12E WiFi module programmed using Arduino IDE in order to build a nodemcu webserver. This is an example of Internet of Things.

Nodemcu Esp8266 decsription

The major concept is to use the ESP8622 WiFi module and Arduino IDE to create an IP address  that is then used to access a Web Server through which we can control the state of the LED via a web page using a mobile phone or any other device that can access internet.
The major challenge with this method is that the ESP8266 module and the device accessing the web server created must use the same WiFi connection.

ESP8266 Nodemcu 12E module pin diagram

nodemcu esp8266 pinout

Connecting the LED to the Nodemcu

This setup is very simple and only involves connecting the LED to the nodemcu esp8266 pin D2 which is GPIO4.
nodemcu webserver schematic

Code for Nodemcu webserver to control LEDs.

Before you begin writing the code you should first know how to configure the nodemcu esp8266 with Arduino IDE.

Installing the NodeMCU Support for the Arduino

First open the Arduino IDE and go to files and click on the preference. You should get a dialogue box as shown below.
preferences nodemcu link
Paste the URL below in the Additional boards Manager
  • http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • Click OK,this saves the link in the IDE and closes the preference Tab.
  • Now we specify the type of board being used by going to Tools> board> Board Manager.
    From the board mananger we select the board being used. In this case we select NodeMCU 1.0 (ESP-12EModule).
    Then select the correct COM port that will be used to upload the program to your NodeMCU.
    Some times an error can occur when downloading from the URL. This can be solved by creating a hardware folder inside the sketchbook directory. For example C:\Users\admin\Documents\Arduino\hardware
    An important library to include in the Arduino IDE for this code to work properly is the ESP8266WiFi.h library which can be downloaded from here.

    Code

    #include<ESP8266WiFi.h>
    #define LED D2   //LED at GPIO4 D2
    const char* ssid = "YOUR WIFI ID";
    const char* password = "WiFi password";
    unsigned char status_led=0;
    WiFiServer server(80);
    void setup() {
    Serial.begin(115200);
    pinMode(LED, OUTPUT);
    digitalWrite(LED, LOW);
    // Connect to WiFi network
    Serial.println();
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected");
    // Start the server
    server.begin();
    Serial.println("Server started at...");
    Serial.println(WiFi.localIP());
    }
    void loop() {
    // Check if a client has connected
    WiFiClient client = server.available();
    if (!client) {
    return;
    }
    // Wait until the client sends some data
    Serial.println("new client");
    while (! client.available())
    {
    delay (1);
    }
    // Read the first line of the request
    String req = client.readStringUntil('\r');
    Serial.println(req);
    client.flush();
    // Match the request
    if (req.indexOf("/ledoff") != -1) {
    status_led=0;
    digitalWrite(LED, LOW);
    Serial.println("LED OFF");
    }
    else if(req.indexOf("/ledon") != -1)
    {
    status_led=1;
    digitalWrite(LED,HIGH);
    Serial.println("LED ON");
    }
    // Return the response
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("Connection: close");
    client.println("");
    // Display the HTML web page
    client.println("<!DOCTYPE HTML>");
    client.println("<HTML>");
    client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
    client.println("<link rel=\"icon\" href=\"data:,\">");
    // CSS to style the on/off buttons
    client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
    client.println(".button { background-color: #FF0000; border: none; color: white; padding: 16px 40px;");
    client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
    client.println(".button2 {background-color: #008000; border: none; color: white; padding: 16px 40px;");
    client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head>");
    // Web Page Heading
    client.println("<h1>LED CONTROL<h1>");
    // Display and ON/OFF buttons
    client.println("<p><a href="\"/ledon\"\""> <button class="\"button\"">ON</button></a>");
    client.println("<p><a href="\"/ledoff\"\""><button class="\"button2\"">
    client.println("</body></html>");
    delay(1);
    Serial.println("Client disonnected");
    Serial.println("");
    }
    After uploading the code to the Nodemcu board , open the Arduino IDE serial monitor and the IP address of the available Wifi network. For example in the setup above the address is 192.168.1.11 as shown below
    The IP address is then entered into an internet browser using your phone or computer and the following screen will be observed.
    webpage layout
    The LED can be is then turned on and off from the webpage above . Whenever a given button is pressed the corresponding status of the LED is shown on the serial monitor.
    serial monitor
    Back to top