Create an IoT data visualization dashboard with Particle, Microsoft Azure, and Electric-io

Particle has teamed up with Microsoft Azure to offer first-class integration with Azure IoT Hub. This allows for Particle devices to take advantage of Azure services like Streaming Analytics and Machine Learning to create advanced cloud workloads that operate on incoming data from your Particle devices. In this tutorial, we will cover how to connect your Particle device to an Azure IoT Hub and visualize telemetry data on your very own electric-io dashboard to build an IoT data visualization.

Electric-io is an open source project on github that lets you to create custom dashboards for visualizing data from Azure IoT Hubs. The project offers a variety of customizations using drag and drop components to allow you to create the “IoT dashboard of your dreams” ^TM.

---

Ingredients

• 1x – Internet connected Particle device (Photon or Electron)
• 1x – Azure subscription (PM me if you need help getting a free trial)

---

Step 1: Creating the Particle & Azure IoT Hub Integration

Begin by navigating to the Particle Console then expand the sections below and follow the instructions to create an Azure IoT Hub integration:

Once you have completed these steps, select “I have done all these things” and proceed to setup your integration.

You will need to provide the following:

• • Event Name – Events starting with this prefix will trigger publishing an event to Azure IoT Hub. Event names come from the Particle.publish() call in your firmware. Suggested to use “electric-io” but you can use any name you wish.

 

• • IoT Hub Name – The name given when you created your Azure IoT Hub

 

• • Shared Policy Name – The name of the Azure shared policy that you created during setup

 

• • Shared Policy Key – The associated key of the Azure shared policy that you created during setup

 

• Device – Select which of your devices will trigger publishing to Azure IoT Hub. If you’d like the publish to trigger from any of the devices you own, select ‘Any.’

Next, expand the Advanced Settings area and select Custom under the JSON DATA section. Here we will define a schema for the data we intend to push to electric-io for visualization. All data payloads coming in from device to Azure IoT Hub should be in JSON format and properties should not be nested.

For example:

If you wish to visualize parameters named humidity and temperature  then you would add the following:

{
  "event": "{{{PARTICLE_EVENT_NAME}}}",
  "data": "{{{PARTICLE_EVENT_VALUE}}}",
  "device_id": "{{{PARTICLE_DEVICE_ID}}}",
  "published_at": "{{{PARTICLE_PUBLISHED_AT}}}",
  "temperature": "{{temperature}}",
  "humidity": "{{humidity}}"
}

The final result should look similar to this (Shared Policy Key will be different of course):

---

Step 2: Test the IoT Hub Integration by publishing data from a Particle device

For this step, we will assume that you are sending temperature and humidity data, however, you can easily modify these instructions to send any type of data from any available sensor so long as it follows a flat json format without nested properties.

Assuming that you are using an example application which reads temperature and humidity data from a sensor similar to the following:

#define DHTPIN 2    // what pin we're connected to  
// Uncomment whatever type you're using!  
#define DHTTYPE DHT11		// DHT 11   
//#define DHTTYPE DHT22		// DHT 22 (AM2302)  
//#define DHTTYPE DHT21		// DHT 21 (AM2301)  
// Connect pin 1 (on the left) of the sensor to +5V  
// Connect pin 2 of the sensor to whatever your DHTPIN is  
// Connect pin 4 (on the right) of the sensor to GROUND  
// Connect a 10K resistor from pin 2 (data) to pin 1 (power) of the sensor  
DHT dht(DHTPIN, DHTTYPE);  

void setup()  
{  
  dht.begin();  
  delay(10000);  
}  
void loop()  
{  
delay(10000);  
// Read temperature as Farenheit  
float temperature = dht.getTempFarenheit();  
float humidity = dht.getHumidity();  
}

Add the following three lines to your existing Particle application to publish the data as an electric-io event (if you used a different name for the event in Step #1, change the portion which says ‘electric-io’ to the name of your custom event):

char payload[255];
snprintf(payload, sizeof(payload), "{ \"temperature\": %f, \"humidity\": %f   }", temperature, humidity);  
Particle.publish("electric-io", payload);

Flash this code to your device and verify that data is being received in the Azure IoT Hub Integration (this area can be found at the very bottom of the integration created in Step #1:

---

Step 3: Deploy the Electric-io Dashboard on Microsoft Azure

We will use an Azure Web App for Containers service to deploy the electric-io dashboard. This service will allow us to deploy a container instance of noopkat/electric-io on an underlying Azure App Service on Linux.

Begin by navigating to the Create an Azure Web for Containers blade.

You will need to provide the following:

• • App Name – The desired name for your web app, this will create a DNS entry for your web app @ .azurewebsites.net

 

• • Subscription – The subscription to deploy your web app under

 

• • Resource-Group – A logical named grouping which contains related app resources. It is suggested to reuse the one that was created for the IoT Hub, but it is not required.

 

• • OS – The underlying Operating System to be used for the App Service, suggested to use Linux.

 

• App Service plan / Location – The hosting instance size and location for the App Service. You will want to create a new service here that is near your locale. It is suggested to choose a size of B1 from the Dev/Test offerings when creating the App Service Plan.

Start by filling in appropriate values for App Name, Subscription, Resource Group, and OS.

Next create the new App Service plan (it is highly recommended to select a free B1 instance size):

At the very end you will see a section for Configure container. Select this and choose Docker Compose ⇒ Docker Hub. Create a file on your desktop named ‘docker-compose-azure.yml’ and paste in the following:

version: "3"
services:
  app:
    image: noopkat/electric-io
    container_name: electric-io
    <span class="hljs-built_in">command</span>: npm run start
    ports: # Can override if you have port collisions with something else
      - 3000:3000
    environment: # Expose to docker environment override
      - SIMULATING=<span class="hljs-literal">false</span>
      - DEBUG
      - CONSUMER_GROUP
      - PLATFORM=azure
      - CONNECTION_STRING=&lt;IoTHubConnectionString&gt;
      - EDIT_MODE=unlocked
    volumes: # For file editing, watching, etc
      - electric-io:/usr/app
      - /usr/app/node_modules
volumes:
    electric-io:

Next, open a new tab and obtain the connection string for your IoT Hub by visiting your IoT Hub ⇒ Shared access policies ⇒ name of the policy created for the Azure IoT Hub Integration in Step 1 ⇒ Connection string–primary key.

Now replace the placeholder in docker-compose-azure.yml with this value and return to the previous tab.

Next, select “Choose File” and upload your modified docker-compose-azure.yml and select Apply:

If everything looks correct, go ahead and select Create:

You can monitor the deployment progress under your Web App Container Settings (It may take a few minutes to deploy):

In a few minutes, you should see your electric-io dashboard running @ <App Name>.azurewebsites.net:

---

Step 4. Create the IoT dashboard of your dreams!

Start by creating a new card of type line chart, select the device you wish to monitor, and edit the Data Property to temperature:

Repeat the process again, this time using humidity as the data property and you should notice your events being published in real-time:

Now let’s add a couple new cards of type number and configure them similarly to the previous cards:

When you are satisfied with your creation, you will probably want to lock down the editor. Head back to the Azure Web App and select Container Settings:

Now let’s make a quick modification to docker-compose-azure.yml by changing the value of edit mode to locked:

Now select Choose File to upload the docker-compose-azure.yml then select Save to apply the change:

In a few minutes your settings should update and the editor should no longer be visible:

If you need to make future changes, simply modify docker-compose-azure.yml to set Edit_Mode back to unlocked and reapply it.

Optionally, if you wish to password protect your site, select Authentication / Authorization and configure an appropriate authentication provider:

---

Conclusion

We were able to create a customized dashboard by leveraging Particle’s Azure IoT Hub integration with a containerized deployment of electric-io on Microsoft Azure. You should now have everything you need to continue forward creating the “dashboard of your dreams” for a variety of different sensors by applying the knowledge learned in this tutorial.

For those looking to go beyond, we would like to hear your ideas! Please share your awesome creations in the comments section. Additionally, if you have a desire to make electric-io better, we encourage you to contribute your ideas, pull requests, and issues to the official electric-io github repo.

We hope you enjoyed the content, and until next time, happy hacking!

P.S. If you made it this far and want to keep in touch, be sure to follow @pjdecarlo and @noopkat on Twitter to stay up to date on our latest crazy ideas!