Visualizing TSDB Data

Overview


EnOS Digital Twin Visualization (DTV) is a model-based low-code application development tool that provides rich widgets and flexible configuration capabilities, empowering citizen developers to quickly build visualization applications and greatly improve development efficiency. DTV supports the configuration of visualization pages using data from EnOS Time Series Data Management (TSDB). TSDB provides efficient and stable storage and management for real-time data uploaded by devices, data processed through stream processing, and time series data integrated through offline channels.


Taking building visualization application pages as an example, this page explains how to visualize asset point data stored in TSDB through DTV. The products involved are shown in the table below:

Product Name

Mandatory/Optional

Dependent Function Description

EnOS Device Connectivity & Management (DCM)

Mandatory

To connect the required assets

TSDB

Mandatory

To store time series data

EnOS Application Portal

Optional

To host DTV

Scenario


This page guides you to quickly build a demo page that visually displays real-time air quality data uploaded by an air device sensor, including real-time indoor temperature, humidity, and other air-related metrics.


Sample Visualization Page Based on the TSDB Data:


tsdb_output


Widget List:


Widget

Style

Data Source

Description

Indoor Temperature

Meter Gauge

LatestData

Display real-time indoor temperature

Indoor Humidity

Meter Gauge

LatestData

Display real-time indoor humidity


For more information, see Meter Gauge.


Data Source List


Data Source

Data Source Type

Description

Latest Data

TSDB

Obtain the latest uploaded data from TSDB.


For more information about TSDB data source, see Preparing TSDB Data Source.

Workflow


tsdb_workflow

Prerequisites


Before you start, make sure of the following items:

  • The required assets are connected to DCM and the asset or the asset’s associated model has been tagged with auth_unit:true.

  • The assets have been synchronized to Application Portal, and the current account has been granted permission to access the assets in Application Portal. Contact the OU administrator for the access if required.

  • You have admin permissions in Management Console (contact the system admin for permissions) and you have access to the following menus in Management Console:

Menu

Mandatory/Optional

Description

Device Management > Device Assets

Mandatory

Check if the required assets are connected to DCM.

Time Series Database Management > Data Insights

Mandatory

Check if the TSDB data is usable in DTV.

To obtain access to the above menus, contact the OU administrator.

  • You have access to the following EnOS Industry Application Common Building Blocks (CBB):

CBB

Mandatory/Optional

Description

DTV

Mandatory

Create visualization pages using the TSDB data.

To obtain access to the above CBB, contact the OU administrator.

Design Mode


This section describes how to configure dashboard pages in DTV to visualize the TSDB data.

Step 1: Preparing the TSDB Data Source


In this scenario, all the required devices are connected through DCM, and the corresponding data is stored in TSDB and can be used in DTV to configure the visualization pages. Here, as real-time indoor air quality data needs to be visualized on the DTV page, the LatestData data source needs to be prepared to obtain the latest uploaded time series data. Check the required devices and data with the following steps:


  1. Go to Device Management > Device Assets in Management Console, and check the following items:

    • Asset ID: ID of the required device, which is the ID of the sensor for obtaining real-time air quality data, e.g., 9PC9LNpk. When configuring data for the corresponding widget later, you will need this ID to specify the device.

      checkassetid
    • Device Name: Name of the required device, e.g., IAQ_1_1.

      checkdevicename
    • Model: Model of the required device, e.g., EnOS_CITY_IAQ. When configuring the data for the corresponding widgets later, you will need this model to be selected as the data source category.

      checkmodel
  2. Go to Time Series Data Management > Data Insights in Management Console, and configure the following information to view the required TSDB data items and the corresponding device data.


Configuration Item

Sample Value

Description

Select Devices

IAQ_1_1(9PC9LNpk)

The sensor to get real-time air quality data.

Select Measurement Points

IAQ_zone_air_humidity

Indoor humidity data.

Select Measurement Points

IAQ_zone_air_temp

Indoor temperature data.


checkinsight

Step 2: Enabling the TSDB Data Source


Go to Digital Twin Visualization > Data Sources > Built-in Data Sources in Application Portal, and enable the LatestData data source.


enable

Step 3: Configuring a Dashboard Page


DTV organizes visualization widgets through dashboard pages. Create a dashboard to display visualization widgets and asset data with the following steps:

  1. Select Digital Twin Visualization > Dashboards in Application Portal.

  2. Select New and enter the page name, e.g., “Air Quality.”

  3. Select Page Settings and configure as follows:

Configuration Item

Mandatory/Optional

Example

Description

Theme

Optional

dark

The theme color of the dashboard. DTV currently supports three theme colors: light, green, and dark.


After creating the dashboard, add the Indoor Temperature widget and Indoor Humidity widget to the dashboard page with the following steps:

  1. Select Add > Widget/Container > Widget, and select the target widget type in the pop-up window. Add the following widgets to the page.

Name

Type

Description

Indoor Temperature

Meter Gauge

Select Gauge > Meter Gauge in the pop-up window.

Indoor Humidity

Meter Gauge

Select Gauge > Meter Gauge in the pop-up window.

2. Hover over the upper right corner of the widgets, select Edit from the drop-down list, and configure the following widget information:


Indoor Temperature Widget


Category

Configuration Item

Example

Description

Basic

Title

Enter ‘Indoor Temperature’

Enter the title of the widget.

Data

Data Source

Select ‘LatestData’

After the data source is selected, the following data source parameters need to be configured: 1.Category: Select the corresponding model as category to display the data from the model in the widget. 2.Aggregation: Select ‘false’ to not aggregate data when requesting data from the data source. 3.Asset ID: Specify the asset ID to query data of the specified device.

Data

Measurement

Select ‘IAQ_zone_air_temp’

Select ‘Add Data Field’ and select ‘ IAQ_zone_air_temp’ in the pop-up window to display the temperature data.

Style

Measurement Style

/

Measurement Style determines how the selected measurement data is displayed in the widget. Configure the following style information: 1.Unit Name: Specify the unit name as ℃. 2.Decimal Places: Specify the decimal places of the data displayed in the widgets are 1. 3.Axis Range: Specify the axis range displayed in the widget is -20 as the minimum value and 50 as the maximum value. 4.Show as Percentage: Uncheck the box to specify that the data is not displayed as a percentage. 5.Formatting Rules: Select ‘Add’ and configure the display color as gradient blue when data falls within the corresponding data range.


Indoor Humidity Widget


Category

Configuration Item

Example

Description

Basic

Title

Enter ‘Indoor Humidity’

Enter the title of the widget.

Data

Data Source

Select ‘LatestData’

After the data source is selected, the following data source parameters need to be configured: 1.Category: Select the corresponding model as category to display the data from the model in the widget. 2.Aggregation: Select ‘false’ to not aggregate data when requesting data from the data source. 3.Asset ID: Specify the asset ID to query data of the specified device.

Data

Measurement

Select ‘IAQ_zone_air_humidity’

Select ‘Add Data Field’ and select ‘ IAQ_zone_air_humidity’ in the pop-up window to display the humidity data.

Style

Measurement Style

/

Measurement Style determines how the selected measurement data is displayed in the widget. Configure the following style information: 1.Unit Name: Specify the unit name as %rh. 2.Decimal Places: Specify the decimal places of the data displayed in the widgets are 1. 3.Axis Range: Specify the axis range displayed in the widget is 0 as the minimum value and 100 as the maximum value. 4.Show as Percentage: Uncheck the box to specify that the data is not displayed as a percentage. 5.Formatting Rules: Select ‘Add’ and configure the display color as gradient pink when data falls within the corresponding data range.


For more information on configuring meter gauge, see Meter Gauge.

Step 4: Publishing the Dashboard Page


After configuring the dashboard page, you need to publish the page and obtain the page URL for future integration into an application menu.

  1. Go to Dashboards, and select the edit button of the configured page.

  2. Select Save > Save and Publish to copy the page URL. For the menu configuration in the next step, only use “/dt/….” and the texts following it.

    publish publishsuccess

Step 5: Configuring the Dashboard Page as an Application Menu


Configure the obtained page URL in an application through the following steps:

  1. Select Application Registration in Management Console.

  2. Select the application to which the dashboard page will be added.

  3. Select Menu > Create Menu.

  4. Enter the menu name in Name, e.g., “Air Quality.”

  5. Enter the URL of the dashboard page copied in the previous step in URL.

    menu
  6. Refer to Managing Menu Groups to add the new menu to the corresponding menu group and configure user access to the menu.

Runtime Mode


Viewing the Visualization Page Built with TSDB Data


After the above configuration is completed, you can view the visualization page in the integrated application by the following steps:

  1. Go to the application to which the dashboard page is added in Application Portal, and select Air Quality on the navigation pane to view the page.

  2. In Management Console, select Time Series Data Management > Data Insights in Management Console, and configure the following information to view the TSDB data of the device. If the data matches the data presented in the visualization page, it means that the configuration is correct.


Configuration Item

Sample Value

Description

Select Devices

IAQ_1_1(9PC9LNpk)

The sensor to get real-time air quality data.

Select Measurement Points

IAQ_zone_air_humidity

Indoor humidity data.

Select Measurement Points

IAQ_zone_air_temp

Indoor temperature data.


checkinsight

FAQ


Q: Why can’t I select LatestData as a data source when configuring the widget?


A: It may be because the LatestData data source is not enabled in DTV. Select Digital Twin Visualization > Data Sources > Built-in Data Sources in the Application Portal, and simply turn on the switch for the LatestData data source.


Q: Why can’t I see the TSDB data in the runtime mode after configuring the widget?


A: Possible Reason 1: The required model is not tagged. Go to Models > Model List in Management Console, and tag on the asset model: auth_unit : true .

Q1


Possible Reason 2: The required asset is not synchronized. Go to Resource Management > Asset Synchronization in Admin Console of Application Portal, and check if you can see the required asset displayed in Data Insights. If not, click Synchronize Assets.

Q2


Possible Reason 3: Your account is not authorized to view the asset data. Go to Admin Console of Application Portal, check if the required asset is added to the organization structure assigned to your account, if the required menu is assigned to the role, and if that role is assigned to your account.


Q: Why can’t I see the configured page menu in Application Portal?


A: This may be because your account does not have access permissions to the relevant menu group. To obtain menu group access permissions, contact the OU administrator.