On Mar 1, 2022, we introduced AWS IoT Software Package, an open-source UI parts library for IoT software builders. With AWS IoT Software Package, builders can construct wealthy interactive net purposes leveraging knowledge from AWS IoT SiteWise. IoT software builders can ship personalized person experiences like industrial asset monitoring purposes utilizing net front-end frameworks like ReactJS, Vue.js or vanilla JavaScript together with reusable parts from AWS IoT Software Package.
Determine 1: Screenshot of pattern ReactJS software constructed with AWS IoT Software Package
What’s AWS IoT Software Package?
AWS IoT Software Package is an open-source, client-side library that allows IoT software builders to simplify the event of complicated IoT purposes. It leverages performant, reusable parts that summary crucial technical concerns anticipated from a real-time net software; for instance, dealing with streaming knowledge, caching, preloading knowledge, dynamic aggregation, and stopping request fragmentation. This abstraction permits IoT software builders to give attention to constructing customized person experiences and fear much less about underlying technical complexities.
In instances the place clients require integrating and enriching their current net purposes for visualizing IoT knowledge from AWS IoT SiteWise, AWS IoT Software Package additionally permits clients to combine the included parts into their current net software.
Getting began with AWS IoT Software Package
AWS IoT Software Package is presently out there as a npm bundle – @iot-app-kit/parts
. You may set up this bundle with:
Utilizing npm
npm set up @iot-app-kit/parts
For extra particulars, please confer with the technical documentation for AWS IoT Software Package.
Constructing with AWS IoT Software Package
On this weblog put up, we’ll construct a ReactJS net software with AWS IoT Software Package and AWS IoT SiteWise for monitoring an industrial juice bottling line, displaying the telemetry (akin to Machine Standing and Manufacturing Depend) from every of the constituent machines within the bottling line.
Walkthrough
Stipulations
The next is required to construct this resolution:
- AWS CLI
- AWS CDK
- An AWS CLI profile with permissions to deploy stacks through AWS CloudFormation
- A default VPC current in your AWS account
Step 1: Simulate telemetry of an industrial bottling line
The commercial juice bottling line we wish to mannequin is comprised of the next interconnected machines (so as):
Order | Machine Identify | Machine ID | Description |
1st | Washing Machine | UN01 | Washes, sanitizes and dries every incoming empty bottle. |
2nd | Filling Machine | UN02 | Fills every incoming sanitized bottle to the configured amount. |
third | Capping Machine | UN03 | Caps and seals every incoming crammed bottle. |
4th | Labelling Machine | UN04 | Attaches and prints the product label on every capped bottle. |
fifth | Case Packing Machine | UN05 | Packs configured group of labelled bottles right into a single case. |
sixth | Palletizing Machine | UN06 | Palletizes a number of instances of processed bottles right into a pallet for cargo. |

Determine 2: Illustration of machines within the industrial bottling line simulated with this demo
Every of those machines emits the next knowledge measurements as telemetry:
Measurement Identify | Measurement Unit | Knowledge Kind | Modeled Tag | Description |
Machine State | None | Integer | {Machine_ID}/Standing/StateCurrent | Present operational state of the machine. Attainable values are listed in Desk 3: Machine States Description. |
Machine Mode | None | Integer | {Machine_ID}/Standing/ModeCurrent | The mode below which the machine is working. Attainable values are listed in Desk 4: Machine Working Modes. |
Present Pace | Bottles per minute | Double | {Machine_ID}/Standing/CurMachSpeed | Present operational pace of the machine measured in bottles processed per minute. |
Blocked | None | Boolean | {Machine_ID}/Standing/Blocked | Indicating whether or not the machine is blocked from working on account of downstream machine(s) circumstances. |
Starved | None | Boolean | {Machine_ID}/Standing/Starved | Indicating whether or not the machine is starved from working on account of upstream consumption circumstances. |
Cease Cause | None | Integer | {Machine_ID}/Admin/StopReasonCode | Machine Cease Cause Code. |
Processed Depend | None | Integer | {Machine_ID}/Admin/ProcessedCount | Incremental counter of bottles processed by the machine, both efficiently or unsuccessfully. |
Faulty Depend | None | Integer | {Machine_ID}/Admin/DefectiveCount | Incremental counter of bottles processed unsuccessfully by the machine. |
StateCurrent Values | Implied Machine State |
1 | PRODUCING |
2 | IDLE |
3 | STARVED |
4 | BLOCKED |
5 | CHANGEOVER |
6 | STOPPED |
7 | FAULTED |
ModeCurrent Values | Implied Machine Mode |
1 | AUTOMATIC |
2 | MAINTENANCE |
3 | MANUAL |
We’ll use Node-RED hosted on an Amazon EC2 occasion to create a circulation which simulates an OPC-UA server permitting to learn the modeled tags talked about in Desk 2: Listing of modeled OPC-UA tags for every of the machines within the industrial juice bottling line. To shortly setup the Node-RED setting, clone the accompanying AWS CDK infrastructure as code from github.
- Clone the appliance to your native machine.
git clone https://github.com/aws-samples/aws-iot-app-kit-bottling-line-demo.git iot-app-kit-demo
- Change to the undertaking listing.
cd iot-app-kit-demo
- Set up dependencies for the AWS CDK. Be aware, that is for the infrastructure solely.
npm ci
- Configure your account and area for CDK deployment
Be aware: Please use an AWS area the place AWS IoT SiteWise is out there.
cdk bootstrap aws://<ACCOUNT-NUMBER>/<REGION>
- Deploy the cdk stack named OpcuaSimulatorStack. When prompted with “Do you want to deploy these adjustments (y/n)?” Enter Y.
cdk deploy OpcuaSimulatorStack

Determine 3: Structure diagram of AWS IoT Software Package Bottling Line Demo
Profitable deployment of the OpcuaSimulatorStack ought to create an OPC-UA server, AWS IoT Greengrass V2 core, a corresponding AWS IoT SiteWise gateway together with asset fashions and derived belongings (representing the machines within the juice bottling line). The entire software parts i.e., OPC-UA Server, AWS IoT Greengrass V2 core and AWS IoT SiteWise gateway are deployed in an Ubuntu EC2 Occasion created by the OpcuaSimulatorStack.
Deploying the OpcuaSimulatorStack ought to take a couple of minutes and can be indicated by the output of the cdk deploy command. In Step 2, we can be constructing a ReactJS net software to observe the belongings created for the juice bottling line.
Step 2: Construct a customized software to visualise the economic bottling line operation
The cloned code repository aws-iot-app-kit-bottling-line-demo.git
accommodates a starter ReactJS software within the listing named belongings/react-app
. On this step, we can be including our AWS IoT Software Package parts to the starter ReactJS software in incremental steps.
- Change to the ReactJS software listing.
cd belongings/react-app
- Set up required NPM dependencies
npm ci
- Create a
.env
file within the root listing of the react-app i.e.,belongings/react-app/.env
contact .env
- Edit the
.env
file and add your AWS IAM credentials for programmatic entry as setting variables prefixed withREACT_APP_
as proven within the snippet. The worth forREACT_APP_AWS_SESSION_TOKEN
is simply required in case you are utilizing short-lived IAM credentials for programmatic entry.
REACT_APP_AWS_ACCESS_KEY_ID=<replace-with-aws-access-key-id>
REACT_APP_AWS_SECRET_ACCESS_KEY=<replace-with-aws-access-key>
REACT_APP_AWS_SESSION_TOKEN=<replace-with-aws-session-token>
- Save the
.env
file after modifying.
From right here, we’ll start including AWS IoT Software Package parts one after the other to show the utilization of every part.
- Add AWS IoT Software Package NPM packages to ReactJS software dependencies.
npm set up @iot-app-kit/parts @iot-app-kit/react-components @iot-app-kit/source-iotsitewise
- Open and edit
src/App.tsx
to import put in AWS IoT Software Package parts between the remark traces/* --- BEGIN: AWS @iot-app-kit and associated imports*/
and/* --- END: AWS @iot-app-kit and associated imports*/
as proven under. Change the worth ofawsRegion
with the precise AWS area (the place OpcuaSimulatorStack was deployed in Step 1).
...
/* --- BEGIN: AWS @iot-app-kit and associated imports*/
import { initialize } from "@iot-app-kit/source-iotsitewise";
import { fromEnvReactApp } from "./fromEnv";
import {
BarChart,
LineChart,
StatusTimeline,
ResourceExplorer,
WebglContext,
StatusGrid,
Kpi,
} from "@iot-app-kit/react-components";
import { COMPARISON_OPERATOR } from "@synchro-charts/core";
import "./App.css";
const { defineCustomElements } = require("@iot-app-kit/parts/loader");
const { question } = initialize({
awsCredentials: fromEnvReactApp(),
awsRegion: "<replace-with-aws-region>",
});
defineCustomElements();
/* --- END: AWS @iot-app-kit and associated imports*/
...
- Check with the AWS IoT SiteWise console to populate the respective asset property ids between the remark traces
/* --- BEGIN: Asset Id and Asset Property Ids from AWS IoT SiteWise*/
and/* --- END: Asset Property Ids from AWS IoT SiteWise*/
that must be displayed with AWS IoT Software Package
...
/* --- BEGIN: Asset Id and Asset Property Ids from AWS IoT SiteWise*/
// Asset Id of the AWS IoT SiteWise asset that you just wish to show by // default
const DEFAULT_MACHINE_ASSET_ID = '<replace-with-sitwise-asset-id>';
const [ assetId, setAssetId ] = useState(DEFAULT_MACHINE_ASSET_ID);
const [ assetName, setAssetName ] = useState('<replace-with-corresponding-sitwise-asset-name>');
// Asset Property Ids of the AWS IoT SiteWise belongings that you just wish to // question knowledge for
// Refer AWS IoT SiteWise measurements
const OEE_BAD_COUNT_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const OEE_TOTAL_COUNT_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const CURRENT_SPEED_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const MACHINE_STOP_REASON_CODE_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
// Refer IoT SiteWise transforms
const MACHINE_STATE_ENUM_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const MACHINE_MODE_ENUM_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const STARVED_INDICATOR_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
const BLOCKED_INDICATOR_PROPERTY = '<replace-with-corresponding-sitwise-asset-property-id>';
/* --- END: Asset Property Ids from AWS IoT SiteWise*/
...
- Since we’ve got a number of belongings in our juice bottling line, allow us to first implement the ResourceExplorer part to permit filtering, sorting, and pagination of our belongings. Add the next code between the remark traces
{/* --- BEGIN: `ResourceExplorer` implementation*/}
and{/* --- END: `ResourceExplorer` implementation*/}
insrc/App.tsx
...
{/* --- BEGIN: `ResourceExplorer` implementation*/}
<ResourceExplorer
question={question.assetTree.fromRoot()}
onSelectionChange={(occasion) => {
console.log("adjustments asset", occasion);
props.setAssetId((occasion?.element?.selectedItems?.[0] as any)?.id);
props.setAssetName((occasion?.element?.selectedItems?.[0] as any)?.identify);
}}
columnDefinitions={columnDefinitions}
/>
{/* --- END: `ResourceExplorer` implementation*/}
...
- Subsequent, we’ll implement StatusTimeline part to visualise the Machine State asset property of our varied belongings. Add the next code between the remark traces
{/* --- BEGIN: `StatusTimeline` implementation*/}
and{/* --- END: `StatusTimeline` implementation*/}
.
...
{/* --- BEGIN: `StatusTimeline` implementation*/}
<div fashion={{ peak: "170px" }}>
<StatusTimeline
viewport={{ length: '15m' }}
annotations={{
y: [
{ color: '#1D8102', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'PRODUCING' },
{ color: '#0073BB', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'IDLE' },
{ color: '#D45200', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'STARVED' },
{ color: '#DA4976', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'BLOCKED' },
{ color: '#5951D6', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'CHANGEOVER' },
{ color: '#455A64', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'STOPPED' },
{ color: '#AB1D00', comparisonOperator: COMPARISON_OPERATOR.EQUAL, value: 'FAULTED' }
]
}}
queries={[
query.timeSeriesData({
assets: [{
assetId: props.assetId,
properties: [{
propertyId: props.machineStatePropertyId
}]
}]
})
]}
/>
</div>
{/* --- END: `StatusTimeline` implementation*/}
...
- Subsequent, we’ll implement a LineChart part to visualise the next metrics outlined in AWS IoT SiteWise for every of the machines within the juice bottling line:
- Complete Depend of bottles processed each quarter-hour
- Dangerous Depend of bottles processed each quarter-hour
Add the next code between the remark traces {/* --- BEGIN: `LineChart` implementation*/}
and {/* --- END: `LineChart` implementation*/}
.
...
{/* --- BEGIN: `LineChart` implementation*/}
<div fashion={{ peak: "170px" }}>
<LineChart
viewport={{ length: "15m" }}
queries={[
query.timeSeriesData({
assets: [
{
assetId: props.assetId,
properties: [
{
propertyId: props.badPartsCountPropertyId,
refId: "bad-parts-count",
},
{
propertyId: props.totalPartsCountPropertyId,
refId: "total-parts-count",
},
],
},
],
}),
]}
styleSettings={{
"bad-parts-count": { shade: "#D13212", identify: "Dangerous Depend" },
"total-parts-count": { shade: "#1D8102", identify: "Complete Depend" },
}}
/>
</div>
{/* --- END: `LineChart` implementation*/}
...
- Add WebglContext part between the remark traces
{/* --- BEGIN: `WebglContext` implementation*/}
and{/* --- END: `WebglContext` implementation*/}
.
Be aware: WebglContext ought to be declared solely as soon as all through your ReactJS part tree.
...
{/* --- BEGIN: `WebglContext` implementation*/}
<WebglContext/>
{/* --- END: `WebglContext` implementation*/}
...
- Begin an area growth server and consider the revised ReactJS software by navigating to
http://localhost:3000
. As soon as launched, flick thru the juice bottling line asset hierarchy and choose the asset you wish to monitor utilizing the ResourceExplorer part. Upon deciding on a specific asset, you’ll be able to view the Machine State measurements within the displayed StatusTimeline part and Complete Depend and Good Depend metrics within the LineChart parts.
npm begin
AWS IoT Software Package additionally contains parts for the next visualization widgets:
- BarChart
- Kpi
- ScatterChart
- StatusGrid
The starter ReactJS software additionally accommodates pattern implementations of BarChart, Kpi and StatusGrid parts within the file src/App.tsx
. You may confer with AWS IoT Software Package documentation for particulars on the right way to use these parts in your ReactJS software.

Determine 4: Screenshot of demo software
You can too confer with the pattern file src/App.accomplished.tsx
for a accomplished implementation of AWS IoT Software Package.
You can too host the ReactJS software constructed on this walkthrough with AWS Amplify. You may confer with AWS Amplify getting began hands-on information to get began.
Cleansing up
Delete the created AWS assets setup on this walkthrough by altering listing to the undertaking listing and executing the next stack deletion instructions. When prompted with “Are you positive you wish to delete: (y/n)?”
Enter Y.
cd iot-app-kit-demo
cdk destroy OpcuaSimulatorStack
Conclusion
AWS IoT Software Package gives abstraction, simplicity, and independence in constructing net purposes to fulfill customized UI/UX necessities. You may be taught extra by visiting AWS IoT Software Package to get began constructing real-time IoT net purposes to observe and visualize IoT knowledge from AWS IoT SiteWise.