Introduction: Mobile Application to Monitor and Control Arduino, Using Kito.io IOT Platform

Monitor and Control your Arduino from Your kito Mobile App.

I have developed an IOT Platform for helping DIY Makers that does just that with no need to know Xcode, Android, JavaScript other than know how to write Arduino's Sketches; the beauty of it all, it takes few minutes to set up.

My name is Giorgio and I developed kito.io, the IOT Platform for DIY Makers.

This is the Hello World Example:

You will use your Kito Mobile App to turn ON and OFF the LED13 on your Arduino; it will take few minutes.

Before Starting the tutorial you will need:

1) An Arduino Board and be able to deploy sketches to it.

2) Sign up on ionic.io (free) and install the ionicView Mobile Application (free); (while kito.io is in beta stage)

3) Install Chrome and the Kito Serial Tcp Bridge Application (free) from the Chrome web Store.

4) Sign up at kito.io using a valid email address; there is where you will receive the temporary password to Signin, and you can access the code for the example under Tutorials > Example 01 - Arduino LED13

Now lets get to it!

Step 1: Create a Kito Device Using the Example Data Model

Once you are signed in kito.io, click the Devices on the top navigation bar.

We need to create a kito device from a data model:

  1. Click "Create New" button.

  2. Name the Device ex01_ArduinoLed .
    [Important!] Use this name since the generated Arduino library and the example sketch depends on it.

  3. Select the Data Model ex01_Led13 from the drop down list under Examples Data Models.
    You can see what the Data Model is, before actually saving the Device.
    [Important!] Once you created the Device, it is not possible to change the Data Model associated with it.

    In This case the Data Model is simple;
    Operation Mode (opMode): One Sensor for data that go from the Arduino to the Mobile App, and a Command for data that go from the Mobile App to the Arduino.
    Data Type (Type): Integer allows any integer value to be exchanged; we are going to use 1 for LED ON and 0 for LED OFF.
  4. Click "Submit" button to create and save the Device.

Step 2: Download the KitoDevice Arduino Library

Once your Device is created, you can download the auto-generated Arduino library.

  1. Click "Arduino Library" to download the .zip file.
    [note] If the downloaded file does not have .zip extention you can rename it to end with .zip
  2. Unzip the downloaded file.
  3. Move the kitoex01_ArduinoLed folder to the /Arduino/libraries/ location.
    In My case is under Documents/Arduino/libraries/
  4. Start or Re-Start the Arduino IDE.
    When the Arduino IDE opens up, it will read the folder to check for libraries, and you will find it
    Sketch > Include library under Contributed libraries list.
    If you do not find it there try with Manage Libraries... from the same menu. It will scan the libraries folder again.

Step 3: Compile and Upload the Arduino Example Sketch

Go to kito.io and signin into your account.

We are going to use the kito Example 01 sketch code.

  1. Click Tutorials and Example 01
  2. Scroll to the code, Copy and Paste the code to a new sketch
  3. Save the sketch.
    You can give the name you prefer.
  4. Compile and upload to your Arduino.

Step 4: Create the Mobile App Interface

To control and monitor the LED13 we will have the Mobile App showing two buttons; ON and OFF.

The ON Button will be green when the LED13 is ON.

The OFF Button will be orange when the LED13 is OFF.

  1. Click Devices in the kito.io navigation bar
  2. Click the ex01_ArduinoLed Device.
  3. Click "Add UI Elements" button.

The page that will open allows to insert different kind of UI Elements for the device:

Select type "buttons" form the Drop Down menu.

Set the Label name to LED13

Below there is already one button to configure:

  • - The button Label is ON
  • - Choose Status OpCode : led13Status
  • -Choose Active Color Green
  • - Set Status Active Value: 1 (meaning when LED13 is ON)
  • - Select Command OpCode: led13Command
  • - Set Command Value: 1 (meaning LED13 ON)

In words:
A button marked ON will be green when the led13Status is 1.
When pressed it will send led13Command with value 1 to the Arduino.

Click "Add Button" to enter the OFF button.

As for the ON button

- The button Label is OFF
- Same OpCode Status: led13Status
- Choose Active Color Orange
- Set Status Active Value: 0 (meaning when LED13 is ON)
- Same Command OpCode: led13Command
- Set Command Value: 0 (meaning LED13 OFF)


Click "Ok" and Done!

The Mobile Application has now two buttons for LED13.
Check it out, if you have already installed the ionicView application (ionic.io) login into it and click the view eye, enter app code: E7633CBF to view the kito application; login into the kito application using your kito.io credentials.






Step 5: Connect Your Arduino Using Kito Serial Tcp Bridge Support Software

To control and Monitor your Arduino from your mobile phone a mean to connect to the network is needed.

In a finished real project you would use either a WiFi Shield, an Ethernet Shield or even better a low cost Serial/WiFi Board like the HF-LPT100 or the ESP8266 (less than $3 to $7 cost).

Well if you do not have one now, kito.io provides the kito Serial Tcp Bridge Application to fill the gap and let you make progress in your project, while waiting for the board to arrive :)

Go to Chrome Web Store and look for kito Serial Tcp Bridge app, install it on your computer that you have the Arduino connected via serial port.

  1. Open the Kito Serial Tcp Bridge
  2. Select the right serial port interface and click Start
  3. Make sure that the Server information have www.kito.io and tcp port 2121 and Click Start for the TCP Connection

Done!

You should see the device coming online on the kito Mobile Application, and also on the kito.io website.