This offer is only addressed to commercial customers including freelancers and entrepreneurs. All prices exclude all taxes.
Subscribe Find out first about new and important news
  • Share via email
  • Subscribe to blog alert

Visualization of the digital twin

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.

Duration of the tutorial

This tutorial will take you approximately 30 min to 45 min after installing the necessary software.

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.

You already created a compatible device in your Bosch IoT Things service instance when you worked through the following sections of the tutorial “Connecting a simple device to the Bosch IoT Suite”:

If you did so, continue with the following section.

Provide access to your digital twin

in the Vorto Dashboard

Register your Vorto Dashboard device with the Bosch IoT Suite for Asset Communication package at the Device Provisioning API by following these steps:

  1. Create a new folder on your computer.
  2. Create a new text file.
  3. Save the text file as config.json and place it in the new folder.
  4. Open the file with a text editor (e.g. Notepad ++, TextEdit).
  5. 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
    }
  6. 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).
  7. Save the file.

You should now have an individualized config.json file with your credentials taken from the OAuth2 Client.

OAuth2 Client credentials

Here you will find the credentials of the OAuth2 Client:

  1. Navigate to your Bosch IoT Suite.
  2. Click the user account icon in the top right, then click OAuth2 Clients in the overlay.
  3. Click Details next to your active OAuth2 Client.

Install the Vorto Dashboard

  1. Open the terminal.
  2. Type npm install -g vorto-dashboard.
  3. Press the Enter key to confirm.

NPM is installing the Vorto Dashboard.

Troubleshooting

In case of any error messages, check the troubleshooting section for help.

Run the Vorto Dashboard

  1. Open the terminal.
  2. Navigate into the folder to which you saved the config.json file.
  3. Type vorto-dashboard ./config.json and press Enter. The Vorto Dashboard is started.
  4. Open your web browser and type localhost:8080 into the address bar. The Vorto Dashboard overview screen opens.
  5. 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.

Icon illustrating troubleshooting.

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.

Cookie Information

This website uses cookies for reasons of functionality, comfort, and statistics. If you consent to this use of cookies, please click ”Ok“. If you like to disable the cookies for webtracking, please click here. For more information see our Privacy Policy