Create your own local Azure IoT Edge dashboard

Earlier this year, when Azure IoT Edge was still in Public Preview, I wrote a couple of blogs about Visualizing Azure IoT Edge using local dashboard.

Back then, I had to do some magic with both a C# IoT Edge module, a custom NodeJS docker container, and a Docker network to get it running.

Since then, a lot has changed. Microsoft already released a ton of new features. a And there is still more to come regarding the Azure IoT platform.

But that awkward local dashboard solution was nagging me. A few months ago, Microsoft introduced a NodeJS module as a first-class citizen for IoT Edge modules.

So it was time to pick up the gauntlet and use NodeJS for this awesome local IoT Edge dashboard:

#tldr;  If you like to dig into the code, zip it, clone it, extend it or even make a pull request, I made this project open source. If you only want to use it the easy-going way, pull it from docker eg. ‘svelde/localdashboard:1.0.1-amd64’.

At this moment, only Linux containers are supported. It is tested both on Windows and Ubuntu as host OS.

Interested in this module? Let’s see how you can use it.

Visualizing Azure IoT Edge using local dashboard

In my last series of blogs, we first looked at how to deploy a non-IoT Edge module using Azure IoT Edge.

For this example, I used a NodeJS website running SocketIO. It was possible to access this website with a default SocketIO chat application.

After that, we looked at how to add some charts in the HTML page offered by the NodeJS server.

Let’s see how we can combine this all into one solution. Let’s build a local for raw Azure IoT Edge telemetry.

Show telemetry in NodeJS using SocketIO and HighCharts

In my previous blog, I showed you how to host NodeJS in a Docker Image.

Today we will learn how we show telemetry in NodeJS. The message will arrive as a string on an HTML page using SocketIO and we will put it on a chart from HighCharts.

This is a great example of how we can represent raw data in something useful, something end user will understand.

We will extend our previous example. In that example, we were leaning on NodeJS and we have the Express web framework running to show an HTML page. We added SocketIO so users of the index.html can exchange messages.

But what if the incoming message is

{
  "machine":{
    "temperature":21.810507137356563
  },
  "timeCreated":"2018-01-06T23:55:56.1058921Z"
}

a JSON message on a single line? And it is shown as a string?

Nice, but this is only good for nerds like me.

What if we could represent it as:

a chart?

This a much better solution, isn’t it?

Deploying a NodeJS server with SocketIO to Docker using Azure IoT Edge

The current Azure IoT Edge public preview uses Docker to deploy logic from the cloud into local gateways. It’s currently featuring:

• C# modules written in .Net standard
• Python modules
• Azure Function built on your machine
• Azure Stream Analytics jobs built and deployed in the cloud
• Azure Machine Learning

We can expect Microsoft will support other types of modules soon as they have proven with other recent projects. An Azure Cognitive Services module is a good example, it’s put in every IoT Edge presentation.

The IoT Edge portal makes it possible to deploy modules which are available in private or public image repositories.

Could it be possible to build and deploy images to the gateway which are not specifically designed for IoT Edge?

It turns out, it is possible.

Let’s deploy a NodeJS server which serves SocketIO.