In this tutorial, we are going to control "three LEDs" connected to our ESP12E NodeMCU Wifi Development Board from a web application. We will create a web app with three buttons for three leds for turning it on and off. We will see step wise process along with source code for the implementation. Note that the web app which we will make can control your LED of ESP12E NodeMCU Wifi Development Board through local network only. That means that your ESP12E module and your laptop in which the web page is there should be connected to same WiFi network, or same hot-spot. The reason is because the IP address which is assigned to ESP12E Module is local. It is connected to internet via single tunnel. But don't worry, I will also write a tutorial on controlling the LED connected to ESP12E NodeMCU from any where in the world :) . So lets begin.
You will need following bill of material for this experiment:
Half Size Breadboard - 1
ESP12E (Node MCU) Development Board- 1
Micro USB Cable - 1
Step 1: Setting Up ESP12E NodeMCU on Breadboard With LED
Keep this circuit diagram handy. Compare it with your breadboard circuit which you will making to avoid any mistakes.
Now follow the below instructions:
1. Connect first LED to Pin "D1" of ESP12E NodeMCU board such that the positive terminal is connected to D1 and negative terminal of LED is connected to GND.
2. Now Connect first LED to Pin "D2" of ESP12E NodeMCU board such that the positive terminal is connected to D2 and negative terminal of LED is connected to GND.
3. Similarly Connect first LED to Pin "D3" of ESP12E NodeMCU board such that the positive terminal is connected to D3 and negative terminal of LED is connected to GND.
Look the image for reference.
Step 2: Writing C Program for ESP12E to Control LED Over Web
Now, we will write a C code for ESP12E NodeMCU module such that, it will act as a server. And we will use the IP of ESP12E to control LED connected to it. Download the code and upload it on your ESP12E. Watch the Video for reference.
And in the browser type in
http://Your IP Address (xxx.xxx.x.x)/D1/1This will turn on the LED connected to pin D1 of ESP12E NODEMCU.
You can replace the pin 'D1' to 'D2' and 'D3' respectively.'1' represents 'on' and '0' represents off.
http://Your IP Address (xxx.xxx.x.x)/D1/1 - to turn on the led
http://Your IP Address (xxx.xxx.x.x)/D1/0 - to turn off the led.
Step 3: Writing the HTML Application
This is to start creating the html page. Refer Video For reference.
I Hope you enjoyed my tutorial.