Secondary Menu

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...
More About TheDigiCraft »

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.

Install the library:

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.

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.

Attachments

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:

A request to toggle.php to change the state of the light to either on or off.

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.

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: