Henrik Sommerfeld

My IoT Exploration – Part 4 – Presenting the Data

This is my fourth post about exploring Internet of Things, previous posts can be found here:

For the last piece of this project I pretty much followed the approach described in Visualizing IoT Data with Web App. Since I wanted to learn how to create and deploy Azure Web Apps, this was a good fit. The data going in to IoT Hub is passed on to Stream Analytics where I have a query that outputs data that I can read in my web app. This is the updated design sketch.

The query I have in Stream Analytics is really simple, just passing on the values it receives to an Event Hub. I guess I can do more cool things here later, but for now it’s fine to just pass the data on so I can show it in near real time. I’m setting the TumblingWindow, the time interval for when Stream Analytics is outputting data, to match the interval that I’m sending data from my Raspberry Pi to IoT Hub. This is also very much a question of cost, the more data you push in and out of Azure, the more it will cost you. I might dig a bit further into the cost aspect in an upcoming post, but for now I conclude that this is sufficient for my hobby project. After all, the conditions hopefully won’t change terribly fast in my home office.

WITH ProcessedData as (
    SELECT      
        AVG(temperature) Temperature,
        AVG(humidity) Humidity,
        AVG(pressure) Pressure,
        System.Timestamp AS Timestamp
    FROM
        [HomeInput]
    GROUP BY
        TumblingWindow (second, 30)
)

SELECT * INTO [HomeOutput] FROM ProcessedData

Now it’s time for some coding again and I’m doing this with NodeJS as in the guide Visualizing IoT Data with Web App. There is a template for NodeJS + Express to choose in the Azure portal. I first tried the command line route to provision the web site, but I found that the command created a bunch of stuff (like DefaultAppServicePlan) that I didn’t ask for. I felt I had more control creating this through the portal. Since I’m using Socket.io (see the code on GitHub, link below), I also need to enable Web sockets (which isn’t on by default).

Enable Web Stockets in Azure Web App

Since the app is reading the data from the event hub, I also need a connection string to it and store that somewhere. In Azure it’s only a matter of adding an app setting in the same settings page as above.

Event hub connection string

For development I have a json file that contains the connection string. The code first looks for the app setting and secondly for the config file. Just make sure you exclude that config file when you commit the project to source control.

var getConnectionString = function(settings) {
    if (settings.OFFICE_MONITORING_CONNSTRING)
    {
        return settings.OFFICE_MONITORING_CONNSTRING;
    }
    else  {
        var configFilePath = path.resolve(__dirname, "config/azure.json");
        var configContent = fs.readFileSync(configFilePath, "utf8");
        var configContentJSON = JSON.parse(configContent);
        return configContentJSON.AzureConnectionString;
    }
};

The entire code can be found in my GitHub project Azure-IoT-Dashboard

For deployment I set up the web app to deploy directly from my GitHub project whenever I commit a change. This is also the reason I am only using JavaScript and CSS for this instead of TypeScript and SCSS. This allows for the deployment to be a simple copy operation. I noticed that about six seconds after I pushed changes from Visual Studio Code on my local machine to GitHub, the deployment was finished in Azure. I will probably add a compilation step to this as well later on, but for now this is sufficient.

Screenshot of web page of Home office monitoring with C3
Screenshot of the end result – Home office monitoring

So, here I have reached the end of this project. I read data from the Sense HAT on my Raspberry Pi with Python, send that data to a local NodeJS service written in TypeScript, then to Azure IoT Hub and finally (via Stream Analytics) visualising it on a web page. I’m using the C3 JavaScript library to create graphs for temperature, humidity and air pressure. Even though there are many things that can be improved here, I’ve learned a lot from this project and I’ve had great fun doing it. The end result can be seen at http://office.sommerfeld.nu/ (can’t guarantee it will be up forever).

No matching posts found. You can use wildcards and search only in titles, e.g. title:iot
Loading search index, please wait...
Search index failed to download 😢