Remote Control With NodeMCU and Web UI




Introduction: Remote Control With NodeMCU and Web UI

About: I am a web developer, maker and consultant. I founded The Digital Craft in 2011. We have produced over 400 free video tutorials for web development and electronics. We also offer private training and consul...

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:

More videos and training at our website:

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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 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.

  1. NodeMCU
  2. Breadboard & Jumper Wires
  3. LED Light
  4. Micro USB Cable

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.

  1. We will first start the serial monitor at a 115200 baud rate.
  2. Then pause for a moment.
  3. Set the pin mode for GPIO2 as 'OUTPUT' (remember: GPIO2 is marked as D4 on your board)
  4. Write 0 or LOW to the pin to turn the LED off.
  5. Print a welcome and connecting message to the serial monitor.
  6. 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.
  7. Print a message that the WiFi has connected.
  8. 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) {

  Serial.println("WiFi connected");

  // Print the IP address of the device:


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.

  1. We first verify that the WiFi is still connected.
  2. We create an HTTPClient object and call it 'http'.
  3. We then make our request to the remote server.
  4. We get the response code from the request.
  5. 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).
  6. Print a message that we connected.
  7. Save the contents of the text faile as 'payload'
  8. Write the value of payload (1 or 0) to the pin that controls the LED light.
  9. If the value in the text file is 1 then the LED should turn on. If 0 it should turn off.
  10. Close the http connection.

void loop() {

// Verfiy WiFi is connected: if (WiFi.status() == WL_CONNECTED) {

HTTPClient http; // Object of the class HTTPClient.

http.begin(""); // 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.


Serial.println("Something baaaaaaad happened!");


http.end(); //Close connection


delay(1000); //Send a request every 30 seconds


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:

  1. index.html - houses the interface and Javascript that triggers toggle.php to update the data and log files
  2. toggle.php - sends 1 or 0 from index.html to data.txt and IP address and other info to log.txt
  3. log.txt - holds user information
  4. 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:

  1. 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.
  2. 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:

More videos and training at our website:

Wireless Contest

Participated in the
Wireless Contest

1 Person Made This Project!


  • Tiny Speed Challenge

    Tiny Speed Challenge
  • Clocks Contest

    Clocks Contest
  • PCB Design Challenge

    PCB Design Challenge

13 Discussions


3 months ago on Step 6

Step six:
There's mentioned: "delay(1000); //Send a request every 30 seconds". This is only waiting for 1 second, not 30 seconds.
Also, using a real delay() is never a good solution. It blocks the whole loop and nothing else can be done. Better is to check current and previous times, subtract it from each other and compare to a predefined number (e.g. 30000 in this case if you want to check every 30 seconds).
If the condition is not met, then the loop will simply continue and you can do other things.
If the condition is met, then you execute the whole http stuff...


3 months ago on Step 3

Step three:
In one of your video's where you flash the external blue LED, you didn't talk about the small LED on the ESP module that also flashes "anti-phase" wise.
Reason is that the LED on the ESP module is also connected to output GPIO2 (same output as the one used for the blue LED) and as such, will also be controlled by the same output commands that are used to control the blue LED.
However, the LED on the ESP module is "active low". That is, you have to send a 0 to switch on that LED and a 1 to switch off that LED. For the blue LED, it's just the opposite: sending a 1 lights up the blue LED, sending a 0 switches of the blue LED. Hence, the "anti-phase" behaviour of the LED on the ESP module...


3 months ago on Step 1

Step one: "...install esp8862 library..." should be "...install esp8266 library..."


5 months ago

i am getting this error in my ardunio IDE, i don't know what went wrong
"Sketch uses 257696 bytes (51%) of program storage space. Maximum is 499696 bytes.
Global variables use 26572 bytes (32%) of dynamic memory, leaving 55348 bytes for local variables. Maximum is 81920 bytes.


2 years ago

What will be the modifications for more then one button??


Question 2 years ago

How can I run with 74hc595 shift register for more outputs.Please give a solution.Thank you.


2 years ago

I fixed the code portions. The Instructables WYSIWYG editor seems to have a mind of it's own. :)


2 years ago

The Digi Craft always make things great! Keep doing amazing works!


Reply 2 years ago

Thank you!! I have more to come :)


2 years ago

People really should take the time to up-vote this tutorial!

It's rather thought out and well documented. You've even paid meticulous attention to overall presentation... a not so common theme on some of the other tutorials that I've come across.

A great tutorial from The Digital Craft.


Reply 2 years ago

thank you so much!!


2 years ago

As always, another great tutorial from The Digi Craft. Thank you for sharing!


Reply 2 years ago

Thank you! Plan to do many more on here :)