What you will learn
In this tutorial, you will learn how to visualize the data output of a connected device. This can also include the device (ESP8266-based prototype) you might have previously connected to the Bosch IoT Suite in the tutorial “Connecting a simple device to the Bosch IoT Suite”.
This tutorial is based on “Generate a Node.js Dashboard that reads device data from Bosch IoT Suite and visualizes it in Vorto UI Widgets” tutorial from Vorto.
In case you want to create own widgets, check out the “Extending the Dashboard with custom widgets – Tutorial” from Vorto.
What you need to install and prepare
The Vorto Dashboard offers pre-configured widgets to visualize data of digital twins managed by Bosch IoT Things. The application needs access to your Bosch IoT Things service instance. It will analyze the information model of each Thing in the service instance.
In case the Thing has at least one compatible feature definition (function block model), the dashboard will map the values to the assigned widget.
The definition refers to a defined function block model. You can find further information on the model here.
Install
Download and install node.js on your computer. Also the package manager for node.js NPM is required and will be installed along with node.js.
Prepare
The Vorto Dashboard requires a compatible device or at least its digital twin within Bosch IoT Things. Go straight to the chapter “Provide access to your digital twin in the Vorto Dashboard” if you already worked through the tutorial “Connecting a simple device to the Bosch IoT Suite”. If not, please start this tutorial from the beginning.
Tasks to complete
Login with your existing Bosch IoT Suite account or create a new one by following these steps:
- Navigate to the Bosch IoT Suite.
- Create a Bosch IoT Suite account.
- Login with your credentials.

Subscribe to the Bosch IoT Suite for Asset Communication package by following these steps:
- Navigate to Service Subscriptions.
- Click New Subscription.
- Follow the subscription wizard.

Configure your unique Bosch IoT Things namespace by following these steps:
- Navigate to Bosch IoT Things by clicking Go to Dashboard.
- Click Solution/Namespace.
- Insert a new globally unique namespace using java package notation, e.g. your.things.namespace.
- Click Submit namespace.

Create an OAuth2 Client with full access to Bosch IoT Things and Bosch IoT Hub by following the next steps:
- Navigate to the Bosch IoT Suite.
- Click the user account icon
, then click Sign In in the overlay.
- Once you are authenticated, click the user account icon
.
- Click OAuth2 Clients in the overlay.
- In the section New OAuth2 Client insert a new name, e.g. Asset Communication Client.
- Select the Hub and the Things full access scopes.
- Click Create.

Generate and copy a test token by following the next steps:
- Navigate to your Bosch IoT Suite.
- Click the user account icon
.
- Click OAuth2 Clients in the overlay.
- Click Use next to your active OAuth2 Client.
- Copy the test token by clicking Copy to clipboard.

Register your device with the Bosch IoT Suite for Asset Communication package at the Device Provisioning API by following these steps:
- Click Authorize. A dialog opens. Paste the test token as value of the bearerAuth (http, Bearer) section. Proceed with Authorize, then Close the dialog.
- Unfold the provisioning section and click the POST method “/{service-instance-id}/devices”.
- Click Try it out.
- Add your Service Instance ID (you will find all important information as described in the “Service Instance ID” infobox).
- Click Edit below the Edit Value field.
- Copy the following code and replace everything in the field Edit Value:
{ "id":"<com.bosch.example:my-device-id-4711>", "hub":{ "device":{ "enabled":true }, "credentials":{ "type":"hashed-password", "secrets":[ { "password":"<yourPassword>" } ] } }, "things":{ "thing":{ "attributes":{ "manufacturer":"<Robert Bosch GmbH>" }, "features":{ "illuminance":{ "definition":[ "org.eclipse.vorto:Illuminance:1.0.0" ], "properties":{ "status":{ "value":{ "currentMeasured":555, "minMeasured":0, "maxMeasured":999 } } } } } } } }
- Define your credentials (check the “Device credentials” infobox) by editing everything in <pointy brackets> (make sure to delete the <pointy brackets>).
- Click Execute to run your API call and register your device.
You should get a response with the code HTTP 201 created and a payload reflecting the device you just registered.

Register your Vorto Dashboard device with the Bosch IoT Suite for Asset Communication package at the Device Provisioning API by following these steps:
- Create a new folder on your computer.
- Create a new text file.
- Save the text file as
config.json
and place it in the new folder. - Open the file with a text editor (e.g. Notepad ++, TextEdit).
- Copy the following template and paste it into the file:
{ "client_id": "<xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx>", "client_secret": "<xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>", "scope": "<service:iot-things-eu-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx_things/full-access>", "intervalMS": 10000 }
- Fill in the credentials of the OAuth2 Client (check the info box OAuth2 Client credentials to see where to find them) you used to authorize within the provisioning process. Replace everything in pointy brackets (delete the pointy brackets afterwards).
- Save the file.
You should now have an individualized config.json
file with your credentials taken from the OAuth2 Client.
Install the Vorto Dashboard by following these steps:
- Open the terminal.
- Type
npm install -g vorto-dashboard
. - Press the Enter key to confirm.
NPM is installing the Vorto Dashboard.
Run the Vorto Dashboard by following these steps:
- Open the terminal.
- Navigate into the folder to which you saved the
config.json
file. - Type
vorto-dashboard ./config.json
and press Enter. The Vorto Dashboard is started. - Open your web browser and type
localhost:8080
into the address bar. The Vorto Dashboard overview screen opens. - Select your added Thing in order to open it.
As a result you should see two boxes:
- One box containing all information about your connected Thing.
- One box named illuminance containing a gauge widget.
Troubleshooting
In case of irregularities during the process, check this section for help.
Your computer is located behind a (corporate) proxy
In case you cannot run the Vorto Dashboard due to reasons caused by your proxy preferences, you will have to insert your proxy credentials in the node.js as well. Add the following lines with your credentials in the terminal:
npm config set proxy http://<username>:<password>@<proxy-server-url>:<port>
npm config set https-proxy http://<username>:<password>@<proxy-server-url>:<port>
Your Vorto Dashboard is not working properly
When your Vorto Dashboard is not working properly (e.g. the gauge widget is not visible or information is missing) try to use another web browser like Google Chrome.