Introduction: Developing Mobile App to Control Lights of Two Rooms

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

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.

Step 1: Adding Another LED and Uploading New Arduino Sketch

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); //read the input inputString += inChar; //make a string of the characters coming on serial } Serial.println(inputString); while (Serial.available() > 0) { junk = ; } // 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.

Step 2: Download Evothings App to Control the Lights of 2 Rooms

I have uploaded the corresponding app to my git account, you can download or clone it from here:

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.

Step 3: Using JQuery Mobile Tabs and Pages With Evothings

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 and, 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!