Powered by Blogger.

Sunday, December 11, 2016


Lesson 15 - Magicblocks.io Mobile App

In this lesson you will learn how to use the magicblocks.io mobile application with your world of IoT. Currently only the Android version is available and can be downloaded from Google playstore here
In the world of IoT it is all about connecting devices, and making them talk with each other. We learnt about the MagicWiFi, which is a fully fledged cloud connected IoT controller and how it can be configured via the cloud. We also learnt how you can connect your Arduino to the world of IoT with the MagicShield. This lesson uncovers the possibility of using your mobile phone as a device to shape your internet of things. With the magicblocks.io mobile app your Android smartphone is turned to a virtual device ready to communicate with the magicblocks.io platform with the touch of a button. Your Android smartphone is a complicated device with ample processing power, memory and network connectivity with a rich array of sensors. It basically can outdo any other IoT device that can be obtained for a similar price range. But it must be understood that you Android smartphone is not designed to be an IoT controller as it is a consumer device designed to be used in person at all times instead of autonomous operation. Therefore it services ideally as an interaction point between the user and the platform as and when needed which is what you can achieve via the mobile application. 

This lesson will introduce you to the magicblocks.io mobile app and how to connect your smartphone to your playground.

Step 1 

Download the magicblocks.io app from the playstore

Step 2
Once you open the app you will be requested for the credentials. Since your app enables you smartphone to operate as a device, you will need to create a device with a new set of credentials as in Lesson 3. Once you create a device you can login to the app using that device ID and the device key.

Click on 'Start' and the application will open.

Step 3

You will now be greeted by the 'Basic Input' panel where you will see various types of inputs that you can send to the playground.

Basic Inputs:
  • Accelerometer: this will send the data from the phone's 3-axis accelerometer as an object. This can be used to detect movement 
    • eg: {"x": "1.1", "y": "1.2", "z": "9.9"}
  • Gyroscope: This will send the data from your phone's z-axis gyroscope as an object. This can be used to identify the orientation of your phone
    • eg: {"gamma": "180"}
The accelerometer and gyroscope readings are sent once every 1 second
  • Location: This will send the location of your phone based on GPS.
    • eg: {"lat": "5.4372", "long": "79.173284"}
The location reading will be updated if the location is changed.
  • Flip: This identifies a flip gesture of your smartphone. That is if you turn on flip and turn the phone upside down and bring it back to normal, it will be recognized as a flip and the flip message will be sent
    • eg: { "flip": "1" } 
  • Buttons 1,2,3: These are push to on buttons which are triggered by touch. One touch generates a button click action. These button clicks can be used to trigger any input in your playground
    • eg: { "btn1": "click" }, { "btn2": "click" }, { "btn3": "click" }
  • Switches 1,2,3: Similar to the buttons but these switches have two distinct states.
    • eg: { "switch1": "1" }, { "switch1": "0" } { "switch2": "1" }, { "switch2": "0" }  { "switch3": "1" }, { "switch3": "0" }
  • Slider 1 &2: You can use the slider to generate a variable input to your playground. The value of the slider will vary between 0 & 100
    • eg: { "slider1": "18" } 

Step 4
Now that you are familiar with the inputs that can be generated from the magicblocks.io mobile application, next step is to attach it to your playground. Since you have already created the device (which is your smartphone) this is fairly easy. On the playground drag a 'Magic Link In' block to the flow and set the endpoint Id as the device id of your mobile app. Set the 'type' to 'JSON' as shown below. Connect the output of the 'Magic Link In' node to a debug node so that you can easily see the data from the app.

Step 5
Click on the accelerometer and see the data flowing into the debug node. You will notice that the data logged in the debug tab looks more complicated than whats mentioned above. The actual message data is contained within the message field in the payload object. You can reference this value in you own javascript function block or you can feed the object directly to another block such as dashboard block.