I recently made a video series on controlling an LED on a NodeMCU (esp8266) dev board from a web based UI on a remote server. The LED is used for an example but you can really control anything that is attached to the dev board. The goal of this instructable is to give a you a basic project that you can expand upon.

I will break down the parts here in this instructable. However, the full walk-through is in the videos.

The full code for this instructable and video series can be found on our Github page:
https://github.com/thedigicraft/livestreams/tree/m...

More videos and training at our website:

https://thedigitalcraft.com/

Step 1: Setup the Arduino IDE for the NodeMCU

You will first need to do a little setup with the Arduino IDE in order to make it work with the NodeMCU / ESP8266.

Install the library:

Start the Arduino IDE
Open preferences
Add http://arduino.esp8266.com/stable/package_esp8266com_index.json to the Additional Board Manager URL field.
Open the Boards Manager from the Tools -> Board menu, search for and install esp8862 library

Step 2: Components

Materials Needed

The materials needed for this project are minimal. You can use the links below to see what you need. If you purchase from there, we do get a little extra money back. However, feel free to find these products anywhere you find a good deal.

Step 3: Wiring It Up

The wiring for this project is very simple.

Set the NodeMCU into the breadboard so that the USB side is facing out.
Place the LED somewhere off to the side of the NodeMCU. Made sure the LED pins are in their own column (side by side) not in the same column. For instance in the diagram: the long LED pin is in column 23 and the short LED pin is in 22.
Run 1 jumper wire from the same column of the long LED pin (23 in the diagram) over to the GPIO2 pin of the NodeMCU board. On the board it is actually labeled as D4.
Run 1 jumper wire from the same column of the short LED pin (22 in the diagram) over to the Ground pin of the NodeMCU. On the board is may be marked as GND
Lastly, plug your micro USB cable into the NodeMCU and then into your computer.

Step 4: The Device Code

The code is going to load in the ESP8266WiFi and the ESP8266HTTPClient library in order for you to interact with the NodeMCU within the Arduino IDE.

#include <ESP8266Wifi.h>
#include <ESP8266HTTPclient.h>

Then we need to plug in the credentials to your WiFi.

const char* ssid = "your wifi id";
const char* password = "yourpassword";

Next we will work on the setup() function.

Step 5: The Setup()

We next build out the setup function. This will run once prior to the main loop() function.

We will first start the serial monitor at a 115200 baud rate.
Then pause for a moment.
Set the pin mode for GPIO2 as 'OUTPUT' (remember: GPIO2 is marked as D4 on your board)
Write 0 or LOW to the pin to turn the LED off.
Print a welcome and connecting message to the serial monitor.
Attempt to start the wifi connection.
1. We will run a while loop until the get 'WL_CONNECTED' as the status.
2. We add a short delay to give it a sec on each loop through.
Print a message that the WiFi has connected.
Print the IP address that the device has been assigned by your router.

void setup () {

  Serial.begin(115200); // Start the serial monitor.
  delay(10); // Give it a moment.

  pinMode(2, OUTPUT); // Set GPIO2 as an OUTPUT.
  digitalWrite(2, 0); // Start off.

  // Connect to WiFi network:
  Serial.println("Hello Digital Craft");
  Serial.println("Connecting "); 
  WiFi.begin(ssid, password);

  // Show ... until connected:
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("WiFi connected");

  // Print the IP address of the device:
  Serial.println(WiFi.localIP());

}

Step 6: The Loop()

Now we will run the loop that checks to see if the light should be on or off. This will connect to a remote server. It will read a simple text file that should have either a 1 or a 0 in it. This is using our test server now. The goal is to have your own server and control.

We first verify that the WiFi is still connected.
We create an HTTPClient object and call it 'http'.
We then make our request to the remote server.
We get the response code from the request.
If the code is greater than 0 then we at least made some sort of contact. (You could make this more defined by looking for a 200 or something).
Print a message that we connected.
Save the contents of the text faile as 'payload'
Write the value of payload (1 or 0) to the pin that controls the LED light.
If the value in the text file is 1 then the LED should turn on. If 0 it should turn off.
Close the http connection.

void loop() {  // Verfiy WiFi is connected:
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;  // Object of the class HTTPClient.
    http.begin("http://dockit.org/nodemcu/data.txt");  // Request destination.
    int httpCode = http.GET(); // Send the request.
    if (httpCode > 0) { //Check the returning code
      Serial.println("We got a repsonse!");
      String payload = http.getString();   // Get the text from the destination (1 or 0).
      Serial.println(payload); // Print the text.
      digitalWrite(2, payload.toInt()); // Send the payload value to the pin.
    }else{
      Serial.println("Something baaaaaaad happened!");
    }
    http.end();   //Close connection
  }
  delay(1000);    //Send a request every 30 seconds
}

wifi_led.ino
Download

Step 7: The Web Interface

The web interface is a simple interface that uses Twitter Bootstrap and Jquery to make things a bit easier. There are 4 files used in this step:

index.html - houses the interface and Javascript that triggers toggle.php to update the data and log files
toggle.php - sends 1 or 0 from index.html to data.txt and IP address and other info to log.txt
log.txt - holds user information
data.txt - holds the current state of the LED light (1 or 0)

We use HTML, CSS, Javascript and PHP to add style and functionality to the UI.

For fun, we incorporated a log of IP address and locations of the people using the UI. This is optional.

The attached video is the video that walks through this portion of the project. This was recorded live so that there could be interaction while building it.

There is too much involved in the Web UI to detail it all here. Please use the video for the full instructions.

The summary of what is happening is:

A user clicks on the button. This triggers:
1. A request to toggle.php to change the state of the light to either on or off.
2. A request to toggle.php to add a line to the log file that includes:
  - The state of the LED
  - Location of the person who clicked the button (rough geolocation based on IP address)
  - A time-stamp of the moment that the button was clicked.
3. The simple light graphic in the header gets either .off or .on (CSS classes) applied to it and appears to be on or off to match the state of the light.
While the page is open it is continually refreshing the log for new entries and checking if the button state and label needs to change. This allows for other people to use the UI and you are updated if the state of the light changes.

The full code for this instructable and video series can be found on our Github page:

https://github.com/thedigicraft/livestreams/tree/master/nodemcu_remote_led_web_ui