Collecting smartphone sensor data via PubNub messaging

Hammad TariqUncategorized

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

In this tutorial you will learn about using Pubnub realtime data stream network with Evothings Studio for broadcasting sensor data between multiple mobile devices.


When we talk about Internet of Things (IoT), we are essentially talking about a network of devices that are connected to each other via internet. Most of the time though, they don’t talk directly, and information often only flows in one direction – i.e. towards the cloud, and not the other way around. In real world though, there are quite a number use-cases where devices actually benefit from talk more or less directly to each other in realtime using 1:1 to or 1:many communication design patterns. Pubnub is one of most interesting data stream networks out there, that can be used to build the realtime communication network of multiple internet connected devices of same or different manufacturers.

Similarly, visualization of meaningful data on a mobile phone app is a major part of many IoT use-cases. For that matter, Evothings Studio is a rapid mobile app prototyping tool for IoT-related apps. It uses common scripting languages of HTML and JavaScript to build the mobile app. As Pubnub has a JavaScript SDK, we can use Evothings Studio to develop mobile apps for publishing, capturing and visualizing realtime data stream originating from multiple IoT devices.

In this example, we will demonstrate how to build a 1:many realtime data stream network by using two or more mobile phones. In the Evothings Free tier, one mobile phone will be used as subscriber to capture and visualize the data stream, and another one will be used as publisher. For the sake of simplicity, instead of using any external sensors, we will just be using the phone’s internal accelerometer sensor readings of publisher mobile phones. Better yet, if you have an indie account or higher you have additional phones attached. And since PubNub uses a publish/subscribe model, you can add more devices when required.


You’ll need at least two charged smartphones, connected via wifi or using a SIM card (GPRS/3G/4G). We’ll set up an account with PubNub and then the Evothings Studio, which is a download for your computer, and an app for your phone(s).

Step 1: Setup a free Pubnub Account

If you already have a PubNub account, free or commercial, you can of course use that, or get one here. Once logged-in, create a new app by providing the name of your project, for this example, I provided the name “Demo”.
On the next page, click on the name of the project, you will see “Publisher” and “Subscriber” keys for your project, note them down!

Step 2: Setup Evothings Studio

Evothings Studio consists of two parts; one is Evothings Workbench that you install on your computer and secondly the Evothings Viewer app that you can install on your iOS or Android smartphone.

  1. Get a Cloud Token from the Evothings Studio download page.
  2. Open Evothings Workbench, press the “Get Key” button and note down the connection key.
  3. Open Evothings Viewer on your mobile phone, provide the connection key and press the “connect” button.
  4. Once connected, go to Examples tab in Evothings Workbench, find and click the “Run” button for “Hello World” example. Your “Hello World” app will load into the Evothings Viewer.
  5. Click the “Copy” button for “Hello World” example, provide the location of your workspace in your computer – or use the default folder – and press save.
  6. From “My Apps” tab, open the “index.html” of your newly copied project and make any changes you’d like. Each time you save anew, the changes will push to connected clients!

Congratulations! You are now up and running with Evothings Studio.

Step 3: Configuring the Mobile App

One important feature of Evothings is that you can load a single mobile app code to multiple Evothings Viewers, simultaneously! That means, I can preview my changes on multiple mobile phones at once by simply providing one connection key to all Evothings Viewer apps.

We will make full use of this multi-reload functionality in our example. I am going to connect 3 mobile phones together, I have:

1 x subscriber phone (my Apple iPhone)
2 x publisher and subscriber phones (my old Samsung S-II and Huawei Ascend Mate-7)

For your ease, I have already completed and uploaded example code described below to my Github repository. Clone or download the repository to your computer. Next, open the folder pubnub-sensor-broadcast, find index.html file and drag & drop the icon to the “My Apps” tab of Evothings Workbench. The project is now imported and Evothings Studio will be watching this folder as soon as you press run. But wait, do you have the Viewer app on all your phones yet, otherwise now is a good time to download and connect all three of them. If you key times out in the Workbench, just get a new. And no, it doesn’t need to be the same key on all phones either, as long as they’ve been generated from the same copy of the Workbench. The system remembers that too.

Next, open index.html in a code editor and find PUBNUB.init JavaScript function. You need to provide your Pubnub publish and subscribe key here on lines 43 and 44 (you obtained them while registering for Pubnub). Now find manufacturer JavaScript variable in init function. Here is what you need to understand on how to distinguish one phone from another for the demo. In the real world, I’d be making some kind of login function, giving each sensor has a unique of sorts.

Since I have an indie account, I can develop using more than two phones at a time. I’ll be using my Samsung S-II and Huawei Ascend Mate-7 as publisher devices. Since, I’ll be using the same app code to run on all 3 phones in this demo, and have added a condition where the JavaScript code checks the manufacturer name of the mobile phone before deciding whether to publish the sensor readings or not. Similarly, the Samsung phone has been declared as the publisher of X1, Y1 and Z1 values while Huawei phone is publishing as X2, Y2, Z2. I could be using something else here to distinguish between clients, from the device object in Cordova; where a fuller example of finding properties of a device could look like this: (note: the “cordova.js” lib is already bundled in the Viewer app, so you don’t need to add it).

<script src="cordova.js"></script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
<p id="deviceProperties">Loading device properties...</p>

Change the manufacturer names using variables declared as device1 and device2, save the file and press RUN for the project entry in “My Apps” tab of Evothings Workbench. The app should now load on on all three Evothings Viewer apps in one go.

Step 4: Testing the stream

Simply, shake the publisher phones one by one. The corresponding readings on all phones will start reflecting the accelerometer state of the device in motion.

Code Explanation

All of the pubnub and accelerometer related JavaScript code is in index.html. In the init function, we initialize pubnub by providing our pubnub keys. Then, we are subscribing to listen all event on “my_channel”. Once, we accelerometer readings here, we parse the JSON and update the related html. In the same function we are checking for the device manufacturer name and deciding whether to read accelerometer data or not (as explained above).

In the initialiseAccelerometer function, we are reading accelerometer at a frequency of 300ms. Once we read a value, we pass it to accelerometerHandler function where after rounding off the values, the data is published to the pubnub cloud using pubnub.publish function.

For more discussion, please visit Evothings Forum and our Gitter chat channel to hangout with other IoT developers!