Catalog

Docs

Configurable Panel - Code-free UI Creation Templates

Last Updated on2020-01-08 09:19:30

Overview

The free configurable panel has the greatest degree of freedom. By using a code-free UI creation template, you can freely configure App UIs. You can select module shapes, icons, and background images for different data points (DPs), drag and sort DPs, and change the UI style.

The advantage is that the interface function modules are completely consistent with the created data points. The disadvantage is that the panel is completely modularized and lack of aesthetics. The free configurable panels are often used in the debugging phase of the project and are used as a temporary panel.

Attention: Free configured panel cannot display RAW type and Fault type functions.

Configuration Process

Take Wi-Fi multifunction sensor as an example.

Functional Requirements of Products

  1. Supporting three modes: arming, disarming, and unattended. The arming mode enables detection and alarm; the disarming mode disables detection and alarm; the unattended mode enables detection but disables alarm.

  2. Supporting three alarm modes: sound alarm, light alarm, and sound & light alarm.

  3. Integrated detection and alarm of three concentration data types: VOC, PM2.5 and formaldehyde.

  4. Smart scenes support timing function.

Configuration Steps

1. Set data points.

a) Check the standard data points in the following figure according to product requirements:

b) After determination, the details of data points are shown as follows:

c) Add the following custom data points according to product requirements.

Note: Since the free configurable panel only display data point content, the cloud timing function will not be displayed on the free configured panel, but it will support setting timing in the "Scenario and Automation" in the App after enabled.

d) After setting, choose the free configured panel, and the panel style is as follows:

2. Set multilingual text (Clean up App cache or re-scan the code if the modification is ineffective)

You can edit the text descriptions of data points in the Multilingual menu. Since the function modules in the free configurable panel are totally composed of data points, the text of this part will be all displayed on the panel. Use multi-language text wisely to get a better panel.

Note: If a field is not filled with texts, the function point name or the key value of the language package will be displayed by default.

a) The following table shows the initial text of the Product Information
Number Function points Attribute Value Language package key value Chinese (Simplified) English
31 VOC检测值 - dp_voc_value VOC检测值 VOC Value
voc_value unit dp_voc_value_unit
33 PM2.5检测值 - dp_pm25_value PM2.5检测值 PM2.5 Value
pm25_value unit dp_pm25_value_unit
39 甲醛检测值 - dp_ch2o_value 甲醛检测值 CH2O Value
ch2o_value unit dp_ch2o_value_unit
40 布防模式 - dp_mode_arm
mode_arm armed_staying dp_mode_arm_armed_staying
disarmed dp_mode_arm_disarmed
armed_leaving dp_mode_arm_armed_leaving
101 VOC告警 - dp_bt_voc
bt_voc on dp_bt_voc_on
off dp_bt_voc_off
102 PM2.5告警 - dp_bt_pm25
bt_pm25 on dp_bt_pm25_on
off dp_bt_pm25_off
103 甲醛告警 - dp_bt_coho
bt_coho on dp_bt_coho_on
off dp_bt_coho_off
104 报警方式 - dp_alarm
alarm A1 dp_alarm_a1
A2 dp_alarm_a2
A3 dp_alarm_a3
A4 dp_alarm_a4
b) Supplement the multilingual texts as follows:
Number Function points Attribute Value Language package key value Chinese (Simplified) English
31 VOC检测值 - dp_voc_value VOC检测值 VOC Value
voc_value unit dp_voc_value_unit mg/m3 ppm
33 PM2.5检测值 - dp_pm25_value PM2.5检测值 PM2.5 Value
pm25_value unit dp_pm25_value_unit μg/m³ μg/m³
39 甲醛检测值 - dp_ch2o_value 甲醛检测值 CH2O Value
ch2o_value unit dp_ch2o_value_unit ppm ppm
40 布防模式 - dp_mode_arm 模式 Model
mode_arm armed_staying dp_mode_arm_armed_staying 布防 Armed
disarmed dp_mode_arm_disarmed 撤防 Disarmed
armed_leaving dp_mode_arm_armed_leaving 离家 leaving
101 VOC告警 - dp_bt_voc VOC告警 VOC alarm
bt_voc on dp_bt_voc_on On
off dp_bt_voc_off Off
102 PM2.5告警 - dp_bt_pm25 PM2.5告警 PM2.5 alarm
bt_pm25 on dp_bt_pm25_on On
off dp_bt_pm25_off Off
103 甲醛告警 - dp_bt_coho 甲醛告警 COHO alarm
bt_coho on dp_bt_coho_on On
off dp_bt_coho_off Off
104 报警方式 - dp_alarm
alarm A1 dp_alarm_a1 声音报警 Sound
A2 dp_alarm_a2 光亮报警 Light
A3 dp_alarm_a3 声光报警 Sound&Light
A4 dp_alarm_a4 报警解除 Disarm

3. Adjust panel layout

a) In the App UI Design menu, click "Edit".

b) The initial UI are shown in the following figure.

c) You can sort icons, adjust module size, change icons, and select background. After that, the final function point style is as follows.

d) Description of each configuration function.
  • Drag and Drop

A column can display one large module, one medium module, and three small modules.

When two small modules are separated by a large module or a medium module, the two small modules will be independently columned and centered.

  • Modify Module Size

Note:

Large modules support the use of sliders to adjust Integer type function points.

The medium module can display the Boolean type function points as a switch button.

  • Change Icons

An icon will be displayed for each function point, and the icon will be displayed above the function point name.

Upload a custom icon is currently not supported.

  • Background Selection

Only large modules can display background images.

Uploading a custom background image is currently not supported.

e) The final panel is shown as the figure.