Device Monitor and Statistics Case

Scenes

This case mainly introduces functions such as monitoring device status, viewing device data in real time, issuing device parameters, and collecting device data.

Premise

Before starting the configuration, make sure that the following conditions are met:

1. Device data has been collected in real time on the M-IoT platform;
2. The data app has been created on the M-IoT platform (device page);

Configuration Overview

In management mode, click Data App under Development Management in the left menu, and click Design in the Operation column of the Data App list to enter the visual configuration interface and configure the components.

⚠️Important Notes

This case study will configure the following six functional modules step by step. The text labels, positions, and styles (such as color and size) of all components can be flexibly adjusted in the style panel of each component according to actual needs.：

• Display device connection status
• Display device operating status
• Display device temperature
• Issue device parameters
• Display the average temperature and humidity for the past 7 days
• Display the highest and lowest temperature and humidity for the past 7 days

Select Device Page and click Design to enter the visual config interface.

1. Display device connection status

1. From the component library on the left, select the PilotLamp component and drag it onto the canvas.

2. Select the dragged component, in the style Data Source configuration item on the right, click the icon next to it to configure the data source.

3. Configure the corresponding color according to the result returned by the interface

   • 3.1 Double-click Properties

   • 3.2 Edit properties and configure colors

   • 3.3 The data source config popup, configure the device parameters to be monitored, refer to the sequence number in the figure below

     • Select the Interface data source

     • Select System type data source

     • Select Data Source: Device IoT status, view the meaning of the indicators, please refer to View ix

       

2. Display device connection status

1. From the component library on the left, select the PilotLamp component and drag it onto the canvas.

2. Select the dragged component, in the style Data Source configuration item on the right, click the icon next to it to configure the data source.

3. Configure the corresponding color according to the result returned by the interface

   • 3.1 Double-click Properties

   • 3.2 Edit properties and configure colors

   • 3.3 The data source config popup, configure the device parameters to be monitored, refer to the sequence number in the figure below

     • Select the Interface data source

     • Select the System type data source

     • Select Data Source: Real-time IX values data source

     • Select IX: Machine Status, view the meaning of the indicator, please refer to View ix

       

3. Display device temperature

1. From the component library on the left, select the Text component and drag it onto the canvas.

2. Select the dragged component, in the style Data Source configuration item on the right, click the icon next to it to configure the data source.

3. The data source configuration interface pops up, configure the device parameters to be monitored, refer to the sequence number in the figure below

   • Select the Interface data source
   • Select the System type data source
   • Select Data Source: Real-time IX values data source
   • Select IX: indoor temp, view the meaning of the indicator, please refer to View ix

   

   ⚠️ If you want to display more ix, follow the steps above to configure Display device temperature

4. Issue device parameters

1. From the component library on the left, select the Number component and drag it onto the canvas.

2. Select the dragged component, in the style Data Source configuration item on the right, click the icon next to it to configure the data source.

3. The data source configuration interface pops up, configure the device parameters to be monitored, refer to the sequence number in the figure below

   • Select the Interface data source
   • Select the System type data source
   • Select Data Source: Real-time IX values data source
   • Select IX: Temperature Set, which indicators can be sent, please refer to View send ix
   • Select Send Data
   • Select Current Value
   ⚠️Note Current Value: indicates the current value of the component, Fixed Value: indicates a fixed value

   

4. From the component library on the left, select the Button component and drag it into the canvas.

5. Select the Button component in the previous step, and configure the parameters in the Action on the right, referring to the sequence number in the figure below

   • Select Action
   • Select the Click Event
   • Select the Send Data action
   • Select the Number component name from the previous step. To view the component name, please refer to View component name

   

   ⚠️Note If you need to configure more ix parameters for send, please refer to the above steps for configuration. In the final effect presentation, the case configures two ix for send.

5. Display the average temperature and humidity for the past 7 days

This feature requires creating custom data sources first and aggregating historical data.

1. Add a data source

   • 1.1. Switch to Switch Mgm mode, click Develop -> DataSource in the left menu to open the data source page, switch to the Device DataSource data source, and click the Add button to create a new data source.

     

     • Time dimension: Click the radio button after the time dimension to pop up the time dimension parameters

     • Time period: Statistics for the past 7 days

     • Collection cycle: once a day

     • Collection start and collection interval: Statistics on the average temperature and humidity from 0:00 to 24:00 every day. Fill in according to the actual situation. For example, if the effective statistical time is from 8:00 am to 18:00 pm every day, fill in 8 and 10 respectively

     • Parameters: Click the Add Parameter button to add four parameters, namely:
       

       • Identity is indoor Hum, Method is Average.
       • Identity is indoor temp, Method is Average.
       • Identity is outdoor hum, Method is Average.
       • Identity is Outdoor Temp, Method is Average.

       After filling in the information, click the Ok button to save the data source.

   • 1.2 Select Output Type as Object Array and click OK.

     ⚠️Note According to the returned sample, select the appropriate component, please refer to output type data sample

     

2. Visual page design

   • 2.1 From the component library on the left, select the Multiple component and drag it into the canvas.

   • 2.2 Select the dragged component, in the style Data Source configuration item on the right, click the Config button to configure the data source.

   • 2.3 The data source config popup, configure the device parameters to be monitored, refer to the sequence number in the figure below

     • Select the Interface data source
     • Select the Custom type data source
     • Select the Avg Data (Last Week/per day)_new data source
     ⚠️Note Select the data source you just created

     

   • 2.4 Format the data source time display format

     ⚠️Note

     • Only fields with field name ts can be formatted

     • Standard is selected according to specific needs

       

   • 2.5 Select the dragged component and configure the Private Properties parameters in the Style on the right, refer to the serial number in the figure below

     • Select ts

     • select avg:indoor_rh

     • Select avg:indoor_t

       

6. Display the highest and lowest temperature and humidity for the past 7 days

This feature requires custom data sources to be created and displayed using graphical components.

1. Add a data source

   • 1.1. Switch to Switch Mgm mode, click Develop -> DataSource in the left menu to open the data source page, switch to the Device DataSource data source, and click the Add button to create a new data source.

     

     • Time dimension: Click the radio button after the time dimension to pop up the time dimension parameters

     • Time period: Statistics for the past 7 days

     • Collection cycle: once a day

     • Collection start and collection interval: Statistics on the highest and lowest temperature and humidity from 0:00 to 24:00 every day. Fill in according to the actual situation. For example, if the effective statistical time is from 8:00 am to 18:00 pm every day, fill in 8 and 10 respectively.

     • Parameters: Click the Add Parameter button to add eight parameters, namely:
       

       • Identity is indoor Hum, Method is Max.
       • Identity is indoor temp, Method is Max.
       • Identity is outdoor hum, Method is Max.
       • Identity is Outdoor Temp, Method is Max.
       • Identity is indoor Hum, Method is Min.
       • Identity is indoor temp, Method is Min.
       • Identity is outdoor hum, Method is Min.
       • Identity is Outdoor Temp, Method is Min.

       After filling in the information, click the Ok button to save the data source.

   • 1.2 Select Output Type as Object Array and click OK.

     ⚠️Note According to the returned sample, select the appropriate component, please refer to output type data sample

     

2. Visual page design

   • 2.1 From the component library on the left, select the Bar component and drag it into the canvas.

   • 2.2 Select the dragged component, in the style Data Source configuration item on the right, click the Config button to configure the data source.

   • 2.3 The data source config popup, configure the device parameters to be monitored, refer to the sequence number in the figure below

     • Select the Interface data source
     • Select the Custom type data source
     • Select the Max&Min Data (Near One Week)_new data source
     ⚠️Note Select the data source you just created

     

   • 2.4 Format the data source time display format

     • Note
       • Only fields named ts can format
       • Standard based on specific needs

       

   • 2.5 Select the dragged component and configure the Private Properties parameters in the Style on the right, refer to the serial number in the figure below

     • Select ts

     • Select min_value:indoor_rh, max_value:indoor_t, max_value:indoor_rh, max_value:indoor_rh

       

Final rendering effect

Issue device parameter Demo

Status display before issues

WEB

HMI

Status display after issued

WEB

HMI

View component name

Select the component and view the Name property in the Style Tab on the right

View send ix

The ix that can be sent must fit three conditions：

1. IX is for Environment Parameters
2. IX Display Type is number
3. IX R/W is R/W

View ix

1. Enter the Model menu and click Config
2. Select the Modules tab to view the IX data

Output type data example

Single Value

1000

Object Array

[
  {
    "id": "1001",
    "name": "name1"
  },
  {
    "id": "1002",
    "name": "name2"
  }
]

Single Value Array

[1, 2, 3]

Object

{
  "id": "1001",
  "name": "name1"
}