Visualize Azure IoT Hub data with a .NET Web App

This project shows you how to visualize data sent to Azure via IoT Hub with a simple.NET Web App. This is a continuation of the Send environmental data from ProjectLab to Azure w/ IoT Hub project.

Disclosure: This project is based on Microsoft Learn article Visualize real-time sensor data from your Azure IoT hub in a web application, with their web sample app tweaked to show Temperature, Humidity and Pressure reading sent from a Project Lab.

Meadow.Foundation a platform for quickly and easily building connected things using.NET on Meadow. Created by Wilderness Labs, It's completely open source and maintained by the Wilderness Labs community.

Before you dive in this project, ensure that your Meadow board and development environment is fully up to date. Check the Release Notes section to double check.

Step 1 - Download the web app from GitHub

Get the web app sample from our GitHub repo:

• WebAzureIoTHub from Meadow.ProjectLab.Samples repo

Step 2 - Examine the Web App

Open the folder on your text editor of your choice. In Visual Studio, you will see the following structure of the project:

The important files to look closely are the four highlighted above:

• chart-device-data.js - is a client-side script that listens on the web socket, keeps track of each DeviceId, and stores the last 50 points of incoming data for each device. It then binds the selected device data to the chart object.
• index.html - handles the UI layout for the web page and references the necessary scripts for client-side logic.
• event-hub-reader.js - is a service-side script that connects to the IoT hub's built-in endpoint using the specified connection string and consumer group. It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.
• server.js - is a service-side script that initializes the web socket and the Event Hub wrapper class. It provides a callback to the Event Hub wrapper class that the class uses to broadcast incoming messages to the web socket.

Step 3 - Add a Consumer Group on your IoT Hub

Go to IoT Hub portal on Azure and click on Built-in endpoints under Hub Settings, and enter a name for your new consumer group:

Keep that that consumer group name handy somewhere, we'll need it to paste it on our web app setting further down.

Step 4 - Get the service connection string on your IoT Hub

Go to IoT Hub portal on Azure and click on Shared access policies under Security settings, on the right side click on Service, it will open its key panel on the right and copy the Primary connection string.

Keep that that Primary connection string handy somewhere, we'll need it to paste it on our web app setting further down.

Step 5 - Configure variables for the web app

With Consume Group created and the primary connection string values, set them on your machine as environmental variables by using set commands:

set IotHubConnectionString=IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=EVENT_HUB_CONSUMER_GROUP

Additionally, you can also set the values in the launch.json file in VSCode. Open the file and look for IotHubConnectionString and EventHubConsumerGroup variablesto set the values accordingly:

...
"env": {
    "NODE_ENV": "local",
    "IotHubConnectionString": "IOT_HUB_CONNECTION_STRING",
    "EventHubConsumerGroup": "EVENT_HUB_CONSUMER_GROUP"
}
...

Step 6 - Run the web app

At this point, make sure your device is sending data to Azure.

Open a Terminal in VS Code, or a terminal inside the web app and use npm to install all its components and dependencies, and start the web app:

npm install
npm start

If the app wont start, click on Run -> Start Debugging, and it'll pick up the launch.json values we set previously and the web app will start. You should see an output like this:

C:\Program Files\nodejs\node.exe .\server.js
Using IoT Hub connection string [HostName=...]
Using event hub consumer group [ ... ]
Listening on 3000.
Successfully created the EventHubConsumerClient from IoT Hub event hub-compatible connection string.
The partition ids are:  (2) ['0', '1']
.
.
.

Open a browser and go to localhost:3000 to see your web app running. You will see as data comes in, the graph will update automatically with no need to refresh:

Check out Meadow.Foundation!

This project is only the tip of the iceberg in terms of the extensive exciting things you can do with Meadow.Foundation.

• It comes with a huge peripheral driver library with drivers for the most common sensors and peripherals.
• The peripheral drivers encapsulate the core logic and expose a simple, clean, modern API.
• This project is backed by a growing community that is constantly working on building cool connected things and are always excited to help new-comers and discuss new projects.

References

• Meadow Guides
• Meadow.Foundation
• Send environmental data from ProjectLab to Azure w/ IoT Hub
• Real-time data visualization of your IoT hub data in a web app