Introduction: Remote Controlled LED Using Mobile Phone and Internet

By Hammad Tariq
About: I am a digital nomad and I often find myself navigating myself the fields of IoT, IIoT, VR, Voice Activation, Web and Mobile Apps and you know.. you got the idea :)

Previously, I wrote a tutorial about controlling a LED using your mobile phone app, Arduino and HC-05 bluetooth module. In today's tutorial I am going to expand on previous one and this time instead of bluetooth, we will be using a WiFi Arduino Shield, after this tutorial you will be able to control the LED (or any other circuitry such as your lights or appliances or anything) not only from few meters away but also from thousands of miles away or probably from a different continent, altogether.

In this tutorial, we will build a circuit using Arduino and will connect it with our home's WiFi, next we will develop a cross platform HTML5 mobile app using JavaScript.

For this tutorial, you will need:

  • A WiFi module/shield to connect with home's WiFi
  • Arduino to control the communication
  • Evothings to develop our mobile app

You can use any WiFi shield/module which is compatible with Arduino. It should be able to run a TCP server as that is what we will need to connect to the Arduino. For the purpose of this tutorial, I will be using DFROBOT's WiFi Shield v2.2.

Note: This is a fairly straight-forward tutorial, it will work with all WiFi shields out there, provided that your shield or WiFi module is running a TCP server and can communicate with Arduino through serial port.

Let's move forward and configure our WiFi shield with Arduino.

Step 1: Configuring DFRobot's WiFi Shield With Arduino

The DFRobot WiFi Shield v2.2 is straight forward to work as it has easy to use wiki and as for the steps which are not covered in the wiki, I will describe them here. The shield uses WizFi210 chip, so if you can get hold of any other shield with the same chip, the tutorial will work the same way minus the circuitry specific to this shield.

Caution: I am using Android Uno for this tutorial and shield is perfectly compatible in terms of pin headers matching with that of Uno, if you are using any other board such as Arduino Mega, please refer to the wiki for pin out diagram.

Setup: To start, follow the steps in wiki and start the TCP server.

You will need following knowledge-points to work with your shield:

  • You configure the WiFi shield in "USB" mode (the little black pin on the side of antenna) but for your Arduino sketch to work you will have to slide the pin to "Arduino" side, do that once your TCP server is running successfully.
  • Similarly, the little white pin on the same side as of antenna is used to control the Rx and Tx pins, as you know Uno only has one hardware serial port, so when you want to upload the sketch to the Arduino, slide the white pin to "PROG" and once you are done with uploading, slide it to "RUN".
  • In order to turn the TCP server off (in cases such as when you want to attach the WiFi shield to a new WiFi network), upload "Blink" example again to the Arduino, use the shield in same "USB" and "RUN" mode, open serial monitor, select the drop down with "No line ending" and send escape command "+++" followed by one second gap, this will exit the chip from TCP server mode and you will be able to get replies of your "at" commands. For more commands and chip related settings, see the user manual here.

If you have read the wiki and above points, you have understood all of the shield and now you are ready to work with it.

Important: Again, the shield uses serial port to communicate with the server, that means when configured correctly, you can send commands from any serial terminal, it will pass them through to the Arduino and Arduino will be able to determine what to do with those commands!

In next step, we will be repeating a step from Arduino 101 (you will know what that is)!

Step 2: Connecting a LED With Our WiFi Shield

Like all good Arduino shields, our DFRobot's WiFi shield also has female pin headers with which you can interface your circuitry in order to use underlying functionality of your Arduino board. Such as, if you want to use pin 12 of Arduino, just connect to the D12 of the shield and if you want to use GND, just use shield's GND pin (remember this is for Arduino Uno, for other boards you may need to connect directly to Arduino pins).

Simply attach your LED's long pin to a 220 ohm resistor and other end of the resistor will go to D12. For shorter leg, attach it to the GND pin of the shield.

Let's move forward to the next step and start uploading our all-too-important Arduino sketch.

Step 3: Upload the Sketch and Test WiFi Serial Communication

The sketch we are going to use is the same which we used in Bluetooth example, however, for the sake of this example I have changed the output pin, as with pin 13, there is some problem in my shield, it stops working on it's own.

Caution: Make sure the black pin on shield is towards "Arduino" and white pin is towards "PROG" while uploading, once uploaded, just move white pin towards "RUN".

/*
Arduino Turn LED On/Off using Serial Commands
Created April 29, 2015
Hammad Tariq, Incubator (Pakistan)
It's a simple sketch which waits for a character on serial
and in case of a desirable character, it turns an LED on/off.
Possible string values:
a (to turn the LED on)
b (tor turn the LED off)
*/
char junk;
String inputString="";
void setup()                    // run once, when the sketch starts
{
 Serial.begin(115200); 
 pinMode(12, OUTPUT);
}
void loop()
{
  if(Serial.available()){
  while(Serial.available())
    {
      char inChar = (char)Serial.read(); //read the input from serial
      inputString += inChar;
    }
    Serial.println(inputString);
    while (Serial.available() > 0)  
    { junk = Serial.read() ; }      // clear the buffer
    if(inputString == "a"){     // in case of 'a', turn the LED on
      digitalWrite(12, HIGH);  
    }else if(inputString == "b"){ // in case of 'b', turn the LED off
      digitalWrite(12, LOW);
    }
    inputString = "";
  }
}

In next step we are going to test our serial communication with Arduino.

Attachments

Step 4: Test the TCP Communication Using a Mobile Telnet App

Now that we have our little circuit ready, we would like to test if our TCP serial communication is working fine. You can test this via Putty or any other terminal as well but as we are building a mobile app, I will take things straight to the mobile phone. I am using an Android phone, so I will follow these steps (for other phones, please search and install a suitable Telnet app from the app store):

  • Go to Google Play Store and find Mobile Telnet app
  • Install the app and through the menu open "Telnet Settings"
  • Give the internal IP address and port number of your WiFi shield (you configured it in step 1) and press "OK"
  • From the menu tap on "Connect"
  • The app will not tell you it's connected but if you don't see "Failed to connect .. " after couple of seconds, try sending character "a", if the telnet connected successfully, your LED will switch on while sending "b" will switch it off.

Step 5: Install Evothings Studio and Cient

For this tutorial, we only need Evothings to develop our app, download the studio to your computer and install Evothings Client on your Android or iOS smart phone.

Next, open Evothings Client on your phone, scan for the workbench or connect through your computer's IP and once you see "Connected", run the "Hello World" example from studio to see if your Evothings installation is working.

Step 6: Finding a Related TCP Example in Evothings Studio

Now that we have built our circuit, tested the serial communication through TCP and have installed Evothings, time to build the app.

Evothings comes pre-installed with useful Cordova plugins for rapid development of IoT apps, in this case we are looking for a Sockets plugin and example code to talk to our TCP server.

Let's find the right example inside Evothings Studio:

Inside the studio, you will find an example with the name of "Arduino LED On/Off TCP", you can click on the "Code" button and see what's inside. The important files in our case are index.html and /libs/evothings/arduinotcp/arduinotcp.js

This example is using org.chromium.socket plugin and related Arduino sketch you can find by going to example's parent folder and then opening arduinowifi/arduinowifi directory. However, for simplicity and using the liberty of open-source license, we are going to use our own sketch which we uploaded to Arduino in previous step.

In next step I will explain the minor modifications to the example scripts in order to get this example working for us!

Step 7: Modification in the Example Code

Short Version:

Just clone or download the app folder from this git repo: https://github.com/hammadtq/arduino-led-onoff-tcp...

After downloading, drag the index.html into your studio and you are ready to go!

Detailed Explanation:

As we are developing our app in HTML and JavaScript, the first thing I did was to add a new input method in index.html for specifying the port of our TCP server (running on WiFi Shield).

Next I modified the code to remove the pin number configuration as our sketch is not expecting any pin numbers, they are hard-coded inside the sketch.

Then I went in /libs/evothings/arduinotcp/arduinotcp.js and changed the evothings.arduinotcp.digitalWrite function.

<p>evothings.arduinotcp.digitalWrite = function(value)<br>	{
		if (value == HIGH)
		{
			internal.sendRequest('a', internal.callbackFun)
		}
		else if (value == LOW)
		{
			internal.sendRequest('b', internal.callbackFun)
		}
	}</p>

This is the most important function anyway, please note the 'a' and 'b' I am sending on encountering a 'HIGH' or 'LOW' command.

Congratulations, our project is now complete, let's move to the next step to learn important knowledge-points!

Step 8: Port Forwarding & Publising Your App

Port Forwarding:

You are currently connecting to your WiFi Shield using LAN IP address, using this setup you can control your LED from within the range of your current WiFi router, if you want to access it via internet and from a remote location, you will need to do Port Forwarding in your internet router, please refer to the documentation of your router or search on Google using router's make and model.

Publishing your App:

Using Evothings, we have rapidly developed our app, the next steps are to create a Cordova project, install Android or iOS SDK, let Cordova talk to the SDK, install Chrome Sockets Cordova plugin and then working to get the app in ship-shape and after-wards uploading our new IoT app to our favourite mobile app store.

Have fun!