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

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);

Implementation steps

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.

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

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.

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

1. Double-click Properties

2. Edit properties, configure color

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 System type data source
   • Select Data Source: Device IoT status, view the meaning of the indicators, please refer to View ix

Display the device running 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.

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

1. Double-click Properties

2. Edit properties, configure color

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: Machine Status, view the meaning of the indicator, please refer to View ix

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

Send 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 Data
     • ⚠️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 onto 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.

Display the average temperature and humidity for the past 7 days

Add a data source

1. Switch to Switch Mgm mode, click Develop->DataSource in the left menu, open the data source page, switch to the Device DataSource data source, click the Add button, and 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.

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

Visual page design

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

2. Select the dragged component, in the style Data Source configuration item on the right, click the Config button 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 Custom type data source
   • Select the Avg Data (Last Week/per day)_new data source
     • ⚠️Note Select the data source you just created

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

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

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

Add a data source

1. Switch to Switch Mgm mode, click Develop->DataSource in the left menu, open the data source page, switch to the Device DataSource data source, click the Add button, and 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.

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

Visual page design

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

2. Select the dragged component, in the style Data Source configuration item on the right, click the Config button 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 Custom type data source

   • Select the Max&Min Data (Near One Week)_new data source

     • ⚠️Note Select the data source you just created

     

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

     

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

⚠️Notes

This case configures display device connection status, display device running status, display device temperature, send device parameters, display average temperature and humidity for the past 7 days, and display the highest and lowest temperature and humidity for the past 7 days. The text content and style of each component are configured in the corresponding configuration items according to actual needs.

Final rendering effect

Before parameters are sent：

WEB

HMI

After the parameters are sent：

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"
}