Visualize data from Azure IoT Hub using React and ux4iot

Imagine you have data coming in from an IoT device, e.g. a temperature sensor, and you want to visualize the values. You also want your frontend to live-update as soon as new data arrives. You could use something like Grafana or IoT Central, but then you are stuck in an existing UI and cannot influence the user experience very much. ux4iot gives you complete freedom over the user interface, while making access to IoT data very easy.

 

It‘s basically a pretty direct connection from your frontend to your devices (via IoT Hub — ok, so it’s actually not a direct connection, but it feels like one). For React, you get a hook called useTelemetry so that every time a new temperature value arrives, your local state is updated and your components are re-rendered.

Getting Started

The easiest way to setup a ux4iot instance is by going to the quick-start repo and pushing the “Deploy to Azure Button”. This will take you to the deployment page where you can select the Resource group and region to deploy to.

Form in Azure Portal for creating a custom deployment
Deploying a ux4iot instance and IoT Hub
ux4iot custom resource along with the IoT Hub in the Azure resource group

React App

We now need a React application. This is easily accomplished by using create-react-app (if you do not want to perform the steps yourself, you can find the finished project on GitHub):

							
							
					npx create-react-app temp-visualizer				
			
							
							
					cd temp-visualizer
npm install ux4iot-react				
			
							
							
					import './App.css';
import {Ux4iotContextProvider, useTelemetry} from "ux4iot-react";

const UX4IOT_ADMIN_CONNECTION_STRING = 'YOUR_ADMIN_CONNECTION_STRING';

const TemperatureView = props => {
    const temperature = useTelemetry('simulated-device', 'temperature');
    return <div>{temperature}</div>;
}

function App() {
    return (
        <div className="App">
            <Ux4iotContextProvider
                options={{ adminConnectionString: UX4IOT_ADMIN_CONNECTION_STRING }}
            >
                <TemperatureView />
            </Ux4iotContextProvider>
        </div>
    );
}

export default App				
			
Retrieving the Admin connection string for a ux4iot instance
Retrieving the Admin connection string for a ux4iot instance
							
							
					npm run start				
			

Simulating Device Data

Retrieving the Admin connection string for a ux4iot instance
Retrieving the Admin connection string for a ux4iot instance
							
							
					docker run --rm -ti \
    -e DEVICE_CONNECTION_STRING="HostName=..." \
    ghcr.io/stefan-hudelmaier/simulated-temperature-sensor:main				
			

See it in Action

Create a device called simulated-device in the IoT Hub that you deployed earlier. Copy the connection string of the device and use it as the value of the DEVICE_CONNECTION_STRING environment variable in the snippet above.

Getting the connection string of an IoT Hub device in the Azure Portal
Getting the connection string of an IoT Hub device
The data simulator is on the left, the React application is on the right

Recommended posts

Peter Scherfchen
2022/09/21

Managing Azure Event Hubs with kafkactl

Write an excerpt (optional)