Catalog

Docs

Configurable Panel - Code-free UI Creation Templates

Last Updated on2020-02-20 05:14:18

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

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:

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
NumberFunction pointsAttribute ValueLanguage package key valueChinese (Simplified)English
31VOC检测值-dp_voc_valueVOC检测值VOC Value
voc_valueunitdp_voc_value_unit
33PM2.5检测值-dp_pm25_valuePM2.5检测值PM2.5 Value
pm25_valueunitdp_pm25_value_unit
39甲醛检测值-dp_ch2o_value甲醛检测值CH2O Value
ch2o_valueunitdp_ch2o_value_unit
40布防模式-dp_mode_arm
mode_armarmed_stayingdp_mode_arm_armed_staying
disarmeddp_mode_arm_disarmed
armed_leavingdp_mode_arm_armed_leaving
101VOC告警-dp_bt_voc
bt_vocondp_bt_voc_on
offdp_bt_voc_off
102PM2.5告警-dp_bt_pm25
bt_pm25ondp_bt_pm25_on
offdp_bt_pm25_off
103甲醛告警-dp_bt_coho
bt_cohoondp_bt_coho_on
offdp_bt_coho_off
104报警方式-dp_alarm
alarmA1dp_alarm_a1
A2dp_alarm_a2
A3dp_alarm_a3
A4dp_alarm_a4
b) Supplement the multilingual texts as follows:
NumberFunction pointsAttribute ValueLanguage package key valueChinese (Simplified)English
31VOC检测值-dp_voc_valueVOC检测值VOC Value
voc_valueunitdp_voc_value_unitmg/m3ppm
33PM2.5检测值-dp_pm25_valuePM2.5检测值PM2.5 Value
pm25_valueunitdp_pm25_value_unitμg/m³μg/m³
39甲醛检测值-dp_ch2o_value甲醛检测值CH2O Value
ch2o_valueunitdp_ch2o_value_unitppmppm
40布防模式-dp_mode_arm模式Model
mode_armarmed_stayingdp_mode_arm_armed_staying布防Armed
disarmeddp_mode_arm_disarmed撤防Disarmed
armed_leavingdp_mode_arm_armed_leaving离家leaving
101VOC告警-dp_bt_vocVOC告警VOC alarm
bt_vocondp_bt_voc_onOn
offdp_bt_voc_offOff
102PM2.5告警-dp_bt_pm25PM2.5告警PM2.5 alarm
bt_pm25ondp_bt_pm25_onOn
offdp_bt_pm25_offOff
103甲醛告警-dp_bt_coho甲醛告警COHO alarm
bt_cohoondp_bt_coho_onOn
offdp_bt_coho_offOff
104报警方式-dp_alarm
alarmA1dp_alarm_a1声音报警Sound
A2dp_alarm_a2光亮报警Light
A3dp_alarm_a3声光报警Sound&Light
A4dp_alarm_a4报警解除Disarm

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.