Developing Mobile App to Control Lights of Two Rooms

Developing mobile apps is a crucial part of an IoT or DIY engineers arsenal. We can use a Android or iOS app to configure or control our prototypes or finished devices. Previously, I wrote couple of tutorials, they were:

1. Controlling a LED using Arduino and HC-05 Bluetooth Module and Mobile App
2. Controlling a LED using Arduino and WiFi Shield and Mobile App
   

I am using LEDs to keep tutorials simple, of course if you can switch a LED On/Off, you can add relay or a switch IC to your circuit and control the lights of your rooms or other appliances or maybe you can move forward and control the doors of your car etc.

The next logical step in this series is to expand our circuit and app in order to demonstrate the capability of controlling multiple LEDs using our Arduino.

In this tutorial, I will be expanding on my first tutorial (Controlling a LED using Arduino and HC-05 using Mobile App).

Just to revisit few points (please see the corresponding tutorial before moving forward):

• We are developing our app in Evothings Studio.
• Evothings Client is made in Cordova.
• Cordova is a framework to develop Android/iOS apps using HTML5 and JavaScript.

Let's move forward to revisit our circuit and also to upload a new sketch to the Arduino.

First add another LED to our previous circuit, straight forward it is (refer to fritzing circuit attached to this step).

Next, upload a new sketch to the Arduino.

/*
Arduino Turn LED On/Off using Serial Commands
Created May 1, 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(9600);            // set the baud rate to 9600, same should be of your Serial Monitor
 pinMode(13, OUTPUT);
}
void loop()
{
  if(Serial.available()){
  while(Serial.available())
    {
      char inChar = (char)Serial.read(); //read the input
      inputString += inChar;        //make a string of the characters coming on serial
    }
    Serial.println(inputString);
    while (Serial.available() > 0)  
    { junk = Serial.read() ; }      // clear the serial buffer
    if(inputString == "a"){         //in case of 'a' turn the LED on
      digitalWrite(12, HIGH);  
    }else if(inputString == "b"){   //incase of 'b' turn the LED off
      digitalWrite(12, LOW);
    }else if(inputString == "c"){ // in case of 'c', turn the LED on
      digitalWrite(11, HIGH);
    }else if(inputString == "d"){ // in case of 'd', turn the LED off
      digitalWrite(11, LOW);
    }
    inputString = "";
  }
}

All done! Let's, let's move to our app.

I have uploaded the corresponding app to my git account, you can download or clone it from here: https://github.com/hammadtq/Evothings-App-to-contr...

After downloading, just as before:

• Open and connect Evothings Client on your mobile phone
• Drag the index.html to Evothings Studio
• Hit "Run" on Evothing Studio

If your circuit is working well, you should now be able to control 2 LEDs using your app. The app is good work on both iOS and Android.

In next step, I will explain what I have changed in the app.

jQueryMobile is the easiest JavaScript UI library specailized to work on mobile devices, it works with jQuery library.

We are going to use two UI elements from the library:

1. Tabs for Navigation
2. Pages to for new screens

Next, I simply made two pages in my project called as LED1.html and LED2.html and added a div with data-role tags and nav-bar tags to declare the navigation tabs (please see the attached image to this step).

Next step was to encapsulate our already existing buttons in data-role="main" div as that div is what navigation tabs will consider showing once given the chance.

Now, we have included navigation tabs and also wrapped our content to work with jQueryMobile but wait, we haven't included jQueryMobile itself, so download the latest source code from here and just extract jquery.mobile-x.x.x.min.css and jquery.mobile-x.x.x.min.js, place it in your respective js and css folders, then link these in LED1.html and LED2.html.

Also, please note that with latest jQueryMobile, you need to use latest jQuery library as well.

It was that simple, your new shiny app is ready and now you can demo it to your friends, family customers.

Have fun!