In this tutorial, we will learn how to use ESP8266 dev-board to control devices like LED, Relay, etc. over the internet using web-browser. The web platform we use here is RemoteMe.org visit the page to know more about it. Make sure to refer to images which will help you better understand the process. So let’s get started.

Requirements:

Note that you can use an Arduino or Raspberry-pi for the project if you don’t have NodeMCU.

Setting Up The IDE:-

First, to work with NodeMCU Esp8266 you have to add the boards into IDE if you haven’t done it already, check out this article.

After the Boards are available on IDE there are some libraries needed for this project.

To install these libraries:-

  • Open IDE and Goto >> Sketch >> Include Library >> Manage Libraries. A popup window should appear. Here you will Search for the required Libraries.
  • List of Libraries:-
  1. RBD_Timer
  2. RBD_Button
  3. RemoteMe
  4. RemoteMeUtils
  5. ESP8266WiFi
  6. ESP8266WiFiMulti
  7. ArduinoHttpClient

Install these one by one and restart the IDE when done.

With that the IDE is ready for use.

Setting Up Page on RemoteMe:

For using RemoteMe first you have to signup so you can create your own web pages and start controlling devices. Follow the steps carefully:

  • Goto RemoteMe.org click on Signup and enter your details and hit signup
Remoteme.org signup page
  • After you login to RemoteMe you will see a page with many “Out of the box projects”. Select “Devices” from the menu to the left.
  • On the right side you will see an option named “New device” , Clicking on it will give you a drop down menu , Here select “New Web Page”.
How to work on remoteme
  • Now give a name and Device ID, I have named it ‘LED’ and given Device ID ‘203’. (The device ID is the unique number that will distinguish between different devices.)
  • Make sure the toggle is set to ‘active’ and hit ‘submit’. A new device named LED with device ID 203 will appear on the page. Now select the down arrow at the right side of the device and you will see an empty slot where you can create webpages.
  • Goto this GitHub page. You have to drag three files (index.html, scripts.js & styles.css) and drop them one by one into the empty slot in your device and you are done.

Uploading Code on MCU:

Below I have provided the code you require to make the project work.

Before you can upload the code, there are some minor changes you have to make in the code.

Once the code is open in the IDE you have to enter your WiFi name and password in the required field so the board can connect to your network.

Make Changes on the following part of the code :-

#define WIFI_NAME "Enter your WiFi name" 

#define WIFI_PASSWORD "Enter your WiFi password"

#define DEVICE_ID 203

#define DEVICE_NAME "LED"

#define TOKEN "Enter Authentication Token"
  • To get the Authentication token Goto Remoteme.org >> Applications >> Tokens (In the menu on Left side bellow Devices)
Remoteme application token
  • Copy the Token and paste it in the code.
  • Now connect your NodeMCU to your PC , Select the right port and upload the code.

Download the code from here: LED.ino

Connections :

Control Devices Over Internet

Follow the picture above to make connections:-

  • The LED is connected to Pin D5 of the MCU.
  • The push button is connected to Pin D2.
  • Use a resistor in series with LED to prevent damage to LED.

Testing :

Now you have successfully completed the project. It is time to test the build.

  • First to check if the connections are right, Press the push-button and you should see the LED turn On, Pressing the button again will turn off the LED.
  • Now head over to the RemotMe website and open your application. login using the account with which you signed in.
  • Now goto Devices and select the device you just created. Notice the Connection link symbol on the left side before device ID has turned green which indicates that the ESP board is connected to the server.
  • Now click on the “index.html” file and select “open in new tab”, in a new tab a web page will appear with a circle. You can click on the circle to turn on and off the LED.
Control Devices Over Internet testing
  • To control your LED using smartphone. Again go to the device page and click on “index.html”. This time select the ,last option “Get anonymous link…”, A pop-up window will appear with with a link you can open in any smartphone to control the LED without having to login every time.
Control Devices Over Internet using smartphone
  • Even better option, you can select the QR option right next to the link. And scan the QR using your Android or iPhone and you will be redirected to the web page with circle.

Hope you like the project, If you have any questions feel free to ask in the comments.

4 1 vote
Article Rating