Control Devices Over Internet Through Browser (IoT)

In this tutorial I will be showing you how you can control devices like LEDs, relays, motors etc. over the internet through a web browser. And you can access the controls securely over any device. The web platform I used here is RemoteMe.org.

So let's get started...

Step 1: Things You Will Need

For this project you will need:

• ESP8266 (NodeMCU)

• LED

• Push button

• Breadboard

Software:

• Arduino IDE

• Account on RemoteMe

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

Step 2: Setting Up the Arduino 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 tutorial here.

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

• RBD_Timer.h

• RBD_Button.h

• RemoteMe.h

• ESP8266WiFi.h

• ESP8266WiFiMulti.h

• ArduinoHttpClient.h

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

With that the IDE is ready for use.

Step 3: 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.

• Goto RemoteMe.org click on "Application", Goto Signup and enter your details and hit sign up.

• You will be greeted with a welcome page, Now to the Left side in the menu select "Devices".

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

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

Step 4: 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)

Copy the Token and paste it in the code.

Now connect your NodeMCU to your PC, Select the right port and upload the code.

Step 5: Connections

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.

Step 6: 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 befor 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.

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

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

Checkout the video demo to see how it works.

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

Thank you.