# Configuration Description of Control Components - [Control Components](#section7914183213491) - [Display Component](#section16681645104918) - [Enum Component](#section566910277516) - [Reversal Component](#section162211550155113) - [Increase\_Decrease Component](#section1092141210525) - [Progress Component](#section04131030125215) - [Multifunction Component](#section1114919529527) ## Control Components There are six types of **Control** components: **Display**, **Enum**, **Reversal**, **Progress**, **IncreaseDecrease**, and **Multifunction**. ## Display Component The **Display** component is used for information presentation. It displays information in two or three areas and supports left-right alignment \(without dividers\) or center alignment \(with dividers\). Each area can contain the text or the text and image. The image size is fixed at 24 vp x 24 vp. The text color can be customized. The color and image can be selected based on the data range. The following figure shows an example. ![](figures/display-component.png) The code for the example is as follows: ``` { "gravity": "default", "heightType": "default", "name": "Battery level", "span": 1, "uiList": [ { "subType": "text", "textDisplay": { "down": {}, "upLeft": { "description": { "path": "bluetoothConnectStatus/bluetoothConnectStatus", "value": [ { "scope": "0", "target": "Disconnected" }, { "scope": "1", "target": "Connected" } ] }, "type": "dynamicText", "value": "${bluetoothConnectStatus/bluetoothConnectStatus}" }, "upRight": {} } }, { "icon": { "path": "infoDisplay/battery", "value": [ { "defaultTarget ": "/template/pic/battery_10_default.png", "disableTarget ": "/template/pic/battery_10_default.png", "scope": "-10", "target": "/template/pic/battery_10_default.png" }, { "defaultTarget ": "/template/pic/battery_20_default.png", "disableTarget ": "/template/pic/battery_20_default.png", "scope": "10-20", "target": "/template/pic/battery_20_default.png" }, { "defaultTarget ": "/template/pic/battery_30_default.png", "disableTarget ": "/template/pic/battery_30_default.png", "scope": "20-30", "target": "/template/pic/battery_30_default.png" }, { "defaultTarget ": "/template/pic/battery_40_default.png", "disableTarget ": "/template/pic/battery_40_default.png", "scope": "30-40", "target": "/template/pic/battery_40_default.png" }, { "defaultTarget ": "/template/pic/battery_50_default.png", "disableTarget ": "/template/pic/battery_50_default.png", "scope": "40-50", "target": "/template/pic/battery_50_default.png" }, { "defaultTarget ": "/template/pic/battery_60_default.png", "disableTarget ": "/template/pic/battery_60_default.png", "scope": "50-60", "target": "/template/pic/battery_60_default.png" }, { "defaultTarget ": "/template/pic/battery_70_default.png", "disableTarget ": "/template/pic/battery_70_default.png", "scope": "60-70", "target": "/template/pic/battery_70_default.png" }, { "defaultTarget ": "/template/pic/battery_80_default.png", "disableTarget ": "/template/pic/battery_80_default.png", "scope": "70-80", "target": "/template/pic/battery_80_default.png" }, { "defaultTarget ": "/template/pic/battery_90_default.png", "disableTarget ": "/template/pic/battery_90_default.png", "scope": "80-90", "target": "/template/pic/battery_90_default.png" }, { "defaultTarget ": "/template/pic/battery_99_default.png", "disableTarget ": "/template/pic/battery_99_default.png", "scope": "90-100", "target": "/template/pic/battery_99_default.png" }, { "defaultTarget ": "/template/pic/battery_100_default.png", "disableTarget ": "/template/pic/battery_100_default.png", "scope": "100-", "target": "/template/pic/battery_100_default.png" } ] }, "iconText": { "type": "dynamicText", "value": "${infoDisplay/battery}%", "range": "100-0" }, "subType": "iconTextHorizontal" } ], "uiType": "DISPLAY" } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Battery level.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

gravity

No

String (1-128)

Layout of the child components.

The value can be default or centerDivider. The default value is default, which means left-right alignment without dividers. centerDivider means center alignment with dividers.

uiList

Yes

DisplayItem[]

List of child components.

Set the number of child components based on project requirements.
DisplayItem

Name

Mandatory

Type

Description

Remarks

subType

Yes

String (1-128)

Subtype of the component.

The value can be text, icon, iconTextVertical, or iconTextHorizontal.

icon

No

DynamicContent

Dynamic color, icon, and text. The value is dynamically matched based on the data range in path. When both icon and text are available, the icon is placed above the text.

 
The sample code is as follows:
"icon": {
    "defaultIcon":  "",
    "path":  "battery/useDay",
    "disableIcon":  "",
    "value": [
        {
            "scope":  "-50",
            "target":  ""
        },
        {
            "scope":  "50-100",
            "target":  ""
        },
        {
            "scope":  "100-",
            "target":  ""
        }
    ]
}

iconText

No

NormalText/DynamicText

Description of the icon.

 
"iconText":{
    "color": "",
    "type":  "normalText",
    "value": "Battery level"
}

textDisplay

No

DiaplayContent

Text to display, which can be displayed in the upper left, upper right, and lower part of the component. Set the text based on the project requirements. The text type can be NormalText or DynamicText.

 
"textDisplay": {
        "down": {},
        "upLeft": {
          "description": {
            "path": "bluetoothConnectStatus/bluetoothConnectStatus",
            "value": [
              {
                "scope": "0",
                "target": "Disconnected"
              },
              {
                "scope": "1",
                "target": "Connected"
              }
            ]
          },
          "type": "dynamicText",
          "value": "${bluetoothConnectStatus/bluetoothConnectStatus}"
        },
        "upRight": {}
      }
DynamicContent

Name

Mandatory

Type

Description

Remarks

path

Yes

String (1-128)

Dynamic content condition, which may need to be set based on the reported device data.

Example: bluetoothConnectStatus/bluetoothConnectStatus, indicating the current device status.

value

Yes

Variation

Dynamic value range.

{ "scope": "0", "target": "Disconnected" }.
Variation

Name

Mandatory

Type

Description

Remarks

scope

Yes

String (1-128)

Condition scope.

Value ranges are separated by hyphens (-). There are five types:

  • -50 (a value less than or equal to 50)
  • 50-100 (a value greater than 50 and less than or equal to 100)
  • 100- (a value greater than 100)
  • - (any value)
  • 50 (the specific value 50)

target

Yes

String (1-128)

Value of a condition.

The value can be a color value or a resource value, for example, 11FCFC or an icon URL.

defaultTarget

No

String (1-128)

URL of the default icon.

-

disableTarget

No

String (1-128)

URL of the icon in the disabled state.

-
NormalText

Name

Mandatory

Type

Description

Remarks

type

Yes

String (1-128)

Type.

The value is fixed at NormalText.

value

Yes

String (1-128)

Display name of the component.

The value is fixed, for example, value: Battery level.

color

No

String (1-128)

Display color of the component.

The value is fixed, for example, 11FCFC.
DynamicText

Name

Mandatory

Type

Description

Remarks

type

Yes

String (1-128)

Type.

The value is fixed at DynamicText.

value

Yes

String (1-128)

Display name of the component.

Example: ${bluetoothConnectStatus/bluetoothConnectStatus}. Note: ${} indicates a placeholder, and the value within the braces must be dynamically matched based on the reported device data.

ratio

No

float

Compensation factor.

For example, if the battery level of the toothbrush is 0.5, the unit displayed on the UI is percent (%), and the displayed content is 50%, then the compensation factor is 0.01. The value displayed on the UI will be divided by the compensation factor before being delivered along the command.

color

No

DynamicContent

Display color of the component, which is a dynamic value.

 
"color": {
    "path": "battery/useDay",
    "value": [
        {
            "scope": "-50",
            "target": "11FCFC"
        },
        {
            "scope": "50-100",
            "target": "22FCFC"
        },
        {
            "scope": "100-",
            "target": "33FCFC"
        }
    ]
}

description

No

DynamicContent

Description of the component, which is a dynamic value.

 
"description": {
    "path": "bluetoothConnectStatus/bluetoothConnectStatus",
    "value": [
        {
            "scope": "0",
            "target": "Disconnected"
        },
        {
            "scope": "1",
                "target": "Connected"
        }
    ]
}
## Enum Component The **Enum** component is used for type selection. It displays one to four areas, separated by dividers. Each area contains one or two lines to present an image and text, where the image is placed above the text. Each area is clickable. After an area is clicked, a new image \(or the same image with a different color\) is displayed, indicating a status change. As shown in the figure below, after you click the **Read** area, the image is displayed in blue. ![](figures/enum-component.png) The code for the example is as follows: ``` { "gravity": "centerDivider", "heightType": "default", "name": "Mode", "span": 1, "command": [ { "characteristic": "mode", "enumInfo": [ { "displayItem":{ "icon": { "path": "lightMode/mode", "value": [ { "defaultTarget": "/ic_read_nor.png", "scope": "-", "target": "/ic_read_on.png" } ], "valueNight": [ { "defaultTarget": "/ic_read_nor_dark.png", "scope": "-", "target": "/ic_read_on_dark.png" } ] }, "iconText": { "type": "normalText", "value": "Read" }, "subType": "iconTextVertical" }, "value": 2 }, { "displayItem": { "icon": { "path": "lightMode/mode", "value": [ { "defaultTarget": "/ic_write_nor.png", "scope": "-", "target": "/ic_write_on.png" } ], "valueNight": [ { "defaultTarget": "/ic_write_nor_dark.png", "scope": "-", "target": "/ic_write_on_dark.png" } ] }, "iconText": { "type": "normalText", "value": "Write" }, "subType": "iconTextVertical" }, "value": 3 }, { "displayItem": { "icon": { "path": "lightMode/mode", "value": [ { "defaultTarget": "/ic_computer_nor.png", "scope": "-", "target": "/ic_computer_on.png" } ], "valueNight": [ { "defaultTarget": "/ic_computer_nor_dark.png", "scope": "-", "target": "/ic_computer_on_dark.png" } ] }, "iconText": { "type": "normalText", "value": "PC" }, "subType": "iconTextVertical" }, "value": 4 }, { "displayItem": { "icon": { "path": "lightMode/mode", "value": [ { "defaultTarget": "/ic_favorite_nor.png", "scope": "-", "target": "/ic_favorite_on.png" } ], "valueNight": [ { "defaultTarget": "/ic_favorite_nor_dark.png", "scope": "-", "target": "/ic_favorite_on_dark.png" } ] }, "iconText": { "type": "normalText", "value": "Favorite" }, "subType": "iconTextVertical" }, "value": 5 } ], "sid": "lightMode" } ], "uiType": "ENUM" } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Brightness.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

tag

No

String (1-128)

Tag of the component.

This is an extended field and is used to tag the component.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

command

Yes

Command[]

Array of commands available for the component.

ACTION_NORMAL messages are sent prior to ACTION_ENUM messages.

gravity

No

String (1-128)

Layout of the child components.

The value can be default, center, or centerDivider. The default value is default, which means left-right alignment without dividers. centerDivider means center alignment, and centerDivider means center alignment with dividers.
NormalCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: lightMode.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: mode.

value

Yes

int

Command value to deliver.

Example: value: 1.
EnumCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: lightMode.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: mode.

value

Yes

int

Command value to deliver.

Example: value: 1.
EnumInfo

Name

Mandatory

Type

Description

Remarks

displayItem

No

DisplayItem

General child component to display.

-

value

Yes

int

Service property value corresponding to the command.

Example: 4.

disable

No

String[]

Array of tags disabled after the command is triggered.

For example, brightness adjustment should be disabled when the lamp is turned off. In this case, set this field to ["Brightness"].
## Reversal Component The **Reversal** component is used to display a switch in two or three areas. The following table lists the content that can be displayed in each area. The text color can be customized. The color and image can be selected based on the data range. The content in the area on the right can only be used to display the switch image. **Table 1** Content displayed on the Reversal component

Area

Content

Mandatory

Left area

Text or text + image (The image size is fixed at 24 vp x 24 vp.)

Yes

Middle area

Text or text + image (The image size is fixed at 24 vp x 24 vp.)

No

Right area

Image (The image size is fixed at 24 vp x 24 vp.)

No
The following figure shows an example. ![](figures/reversal-component.png) The code for the example is as follows: ``` { "gravity": "default", "heightType": "default", "name": "Battery", "span": 1, "command": [ { "characteristic": "on", "reversal": [ { "disableIcon": "/ic_power_nor.png", "icon": "/ic_on.png", "disableIconNight": "/ic_power_nor_dark.png", "iconNight": "/ic_on_dark.png", "value": 1 }, { "disable": { "name": [ "mode", "brightness" ] }, "disableIcon": "/ic_power_nor.png", "icon": "/ic_off.png", "disableIconNight": "/ic_power_nor_dark.png", "iconNight": "/ic_off_dark.png", "value": 0 } ], "sid": "switch" } ], "displayItemOne": { "subType": "text", "textDisplay": { "down": {}, "upLeft": { "description": { "path": "switch/on", "value": [ { "scope": "0", "target": "Off" }, { "scope": "1", "target": "On" } ] }, "type": "dynamicText", "value": "${switch/on}" }, "upRight": {} } }, "uiType": "REVERSAL" } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Battery.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width. The value 0.5 means that the component occupies half of the screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

tag

No

String (1-128)

Tag of the component.

This is an extended field and is used to tag the component.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

displayItemOne

Yes

DisplayItem

General child component to display.

This field indicates the first component to display.

displayItemTwo

No

DisplayItem

General child component to display.

This field is used when there are three items in a row. The first two items are general components, and the third item is the reverse switch.

command

Yes

ReversalCommand[]

Array of commands available for the component.

-

gravity

No

String (1-128)

Layout of the child components.

The value can be default, center, or centerDivider. The default value is default, which means left-right alignment without dividers. centerDivider means center alignment, and centerDivider means center alignment with dividers.
ReversalCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: switch.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: on.

reversal

Yes

Reversal[]

Reverse command property.

This field provides an array of values corresponding to switch and on. Different values can be selected during control.
Reversal

Name

Mandatory

Type

Description

Remarks

value

No

int

Property value in the command.

Value of switch.

icon

Yes

String (1-128)

URL of the icon corresponding to the command.

-

disableIcon

No

String (1-128)

URL of the icon in the disabled state.

-

disable

No

String[]

Array of tags disabled after the command is triggered.

For example, brightness adjustment should be disabled when the lamp is turned off. In this case, set this field to ["Brightness"].

dialogList

No

String[]

Dialog box displayed after the command is triggered.

The value in dialogList corresponds to the ID of a dialog box.
Property

Name

Mandatory

Type

Description

Remarks

path

Yes

String (1-32)

Property path.

Example: switch/on, where switch indicates a service and on indicates a property of the service.

value

Yes

String (1-32)

Value of the property.

Example: 1, indicating that the value of path is 1.
## Increase\_Decrease Component The **Increase\_Decrease** component is used to increase or decrease data and displays three areas. The left area displays the decrease button, the right area displays the increase button, and the middle area displays the operation data. You can click either button to change the data in the middle area. The following figure shows an example. ![](figures/increase-decrease-component.png) The code for the example is as follows: ``` { "name": "Humidity", "span": 1, "gravity": "default", "uiType": "INCREASE_DECREASE", "heightType": "low", "displayItem": { "subType": "text", "textDisplay": { "down": {}, "upLeft": { "type": "normalText", "value": "Target" }, "upRight": {} } }, "command": [ { "sid": "temperature", "characteristic": "temperature", "max": 36, "min": 17, "ratio": 1, "step": 1, "defaultValue": 26, "disableIconDecrease": "", "iconDecrease": "", "disableIconIncrease": "", "iconIncrease": "" } ] } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Humidity.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

tag

No

String (1-128)

Tag of the component.

This is an extended field and is used to tag the component.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

displayItem

No

DisplayItem

General child component to display.

Component displayed in the middle area.

command

Yes

IncreaseDecreaseCommand[]

Array of commands available for the component.

-

gravity

No

String (1-128)

Layout of the child components.

The value can be default, center, or centerDivider. The default value is default, which means left-right alignment without dividers. centerDivider means center alignment, and centerDivider means center alignment with dividers.
IncreaseDecreaseCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: humidity.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: humidity.

max

Yes

int

Maximum value.

For example, the maximum humidity is 100.

min

Yes

int

Minimum value.

For example, the minimum humidity is 0.

ratio

No

float

Compensation factor.

For example, if the detected humidity is 0.5 and the displayed humidity is 50, then the compensation factor is 0.01. The value displayed on the UI will be divided by the compensation factor before being delivered along the command.

step

Yes

int

Step value.

Value that changes at each step.

iconDecrease

Yes

String

URL of the decrease icon.

-

disableIconDecrease

Yes

String

URL of the decrease icon in the disabled state.

-

iconIncrease

Yes

String

URL of the increase icon.

-

disableIconIncrease

Yes

String

URL of the increase icon in the disabled state.

-

defaultValue

No

int

Default value.

-

disable

No

String[]

Array of tags disabled after the command is triggered.

For example, brightness adjustment should be disabled when the lamp is turned off. In this case, set this field to ["Brightness"].
## Progress Component The **Progress** component is used to control the progress. It displays two areas. The left area provides the description of the current progress. This area can contain the text or text and image. The image size must be 24 vp x 24 vp. The text color can be customized. The color and image can be selected based on the data range. The right area displays the progress bar. The following figure shows an example. ![](figures/process-component.png) The code for the example is as follows: ``` { "gravity": "default", "heightType": "low", "name": "Brightness", "span": 1, "command": [ { "characteristic": "brightness", "defaultValue": 100, "max" : 255, "min": 0, "radio" : 1, "sid": "brightness" } ], "displayItemLeft": { "subType": "text", "textDisplay": { "down": { "color": { "path" : "brightness/brightness", "value" : [{ "scope": "-", "target": "007DFF" }] }, "ratio": "0.392156", "type": "dynamicText", "value": "${brightness/brightness}%" }, "upLeft": { "type": "normalText", "value": "brightness" }, "upRight": {} } }, "uiType": "PROGRESS" } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Brightness.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

displayItem

No

DisplayItem

General child component to display.

Component displayed in the middle area.

command

Yes

ProgressCommand[]

Array of commands available for the component.

-
ProgressCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: brightness.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: brightness.

max

Yes

int

Maximum value.

For example, the maximum luminance is 100.

min

Yes

int

Minimum value.

For example, the minimum luminance is 0.

ratio

No

float

Compensation factor.

For example, if the brightness of the lamp is 0.5, the unit displayed on the UI is percent (%), and the displayed content is 50%, then the compensation factor is 0.01. The value displayed on the UI will be divided by the compensation factor before being delivered along the command.

step

Yes

int

Step value.

Value that changes at each step.

defaultValue

No

int

Default value.

-

disable

No

String[]

Array of tags disabled after the command is triggered.

For example, brightness adjustment should be disabled when the lamp is turned off. In this case, set this field to ["Brightness"].
## Multifunction Component The **Multifunction** component is used for function control and displays two or three areas. The left area describes the status. The optional middle area is used for timing. The right area displays operation buttons. The following figure shows an example. ![](figures/multifunction-component.png) The code for the example is as follows: ``` { "name": "Cooking", "span": 1, "uiType": "MULTIFUNCTION", "displayItemOne": { "subType":"text", "textDisplay": { "down": {}, "upLeft": { "description": { "path": "workingStatus/status", "value": [ { "scope": "1", "target": "Standby" }, { "scope": "2", "target": "Preparing" }, { "scope": "3", "target": "Cooking" }, { "scope": "4", "target": "Finished" }, { "scope": "5", "target": "Reserving" } ] }, "type": "dynamicText", "value": "${workingStatus/status}" }, "upRight": {} } }, "displayItemTwo": { "subType":"text", "textDisplay":{ "down":{ "type":"normaltext", "value":"Time left" }, "upLeft":{ "type":"dynamicText", "value":"${remainingTime/time}" }, "upRight":{ } } }, "multifunctionInfo": { "path": "workingStatus/action", "value": [ { "scope": "1", "commandOne": [ { "characteristic": "action", "disableIcon": "/ic_prepare.png", "icon": "/ic_prepare.png", "disableIconNight": "/ic_prepare.png", "iconNight": "/ic_prepare.png", "value": 3, "sid": "workingStatus" } ] }, { "scope": "2", "commandOne": [ { "characteristic": "action", "disableIcon": "/ic_prepare.png", "icon": "/ic_prepare.png", "disableIconNight": "/ic_prepare.png", "iconNight": "/ic_prepare.png", "value": 3, "sid": "workingStatus" } ], "commandTwo": [ { "characteristic": "action", "disableIcon": "/ic_cancel.png", "icon": "/ic_cancel.png", "disableIconNight": "/ic_cancel.png", "iconNight": "/ic_cancel.png", "value": 0, "sid": "workingStatus" } ] }, { "scope": "3", "commandOne": [ { "characteristic": "action", "disableIcon": "/ic_cancel.png", "icon": "/ic_cancel.png", "disableIconNight": "/ic_cancel.png", "iconNight": "/ic_cancel.png", "value": 0, "sid": "workingStatus" } ] }, { "scope": "4", "commandOne": [ { "characteristic": "action", "disableIcon": "/ic_complete.png", "icon": "/ic_complete.png", "disableIconNight": "/ic_complete.png", "iconNight": "/ic_complete.png", "value": 0, "sid": "workingStatus" } ] }, { "scope": "5", "commandOne": [ { "characteristic": "action", "disableIcon": "/ic_cancel.png", "icon": "/ic_cancel.png", "disableIconNight": "/ic_cancel.png", "iconNight": "/ic_cancel.png", "value": 0, "sid": "workingStatus" } ] } ] } } ``` The parameters are described as follows.

Name

Mandatory

Type

Description

Remarks

name

Yes

String (1-128)

Display name of the component.

Example: Battery.

span

Yes

float

Span of the component.

Set the component span based on the screen width of the mobile phone. The value 1 means that the component occupies the entire screen width.

uiType

Yes

String (1-128)

Type of the component.

The value can be DISPLAY, REVERSAL, INCREASE_DECREASE, ENUM, or MULTIFUNCTION.

heightType

No

String (1-128)

Height type of the component.

The value can be default or low. The default value is default.

displayItemOne

Yes

DisplayItem

General child component to display.

The first component to display.

displayItemTwo

No

DisplayItem

General child component to display.

This field is used when there are three items in a row. The first two items are general components, and the third item is a multi-function button.

multifunctionInfo

Yes

DynamicCommandContent

Multi-function button.

-
DynamicCommandContent

Name

Mandatory

Type

Description

Remarks

path

Yes

String (1-128)

Dynamic content condition, which may need to be set based on the reported device data.

Example: workingStatus/status, indicating the current device status.

value

Yes

VariationCommand

Dynamic value range.

Example: { "scope": "-50", "target": "11FCFC" }.
VariationCommand

Name

Mandatory

Type

Description

Remarks

scope

Yes

String (1-128)

Condition scope.

Value ranges are separated by hyphens (-). There are five types:

  • -50 (a value less than or equal to 50)
  • 50-100 (a value greater than 50 and less than or equal to 100)
  • 100- (a value greater than 100)
  • - (any value)
  • 50 (the specific value 50)

commandOne

Yes

MultifunctionCommand

The first command to execute.

 
The sample code is as follows:
{ 
    "characteristic":  "action", 
    "disableIcon":  "icon_start_dis.png",
    "icon":  "icon_start.png", 
    "value":  1,    
    "sid":  "action" 
}

commandTwo

No

MultifunctionCommand

The second command to execute.

 
The sample code is as follows:
{ 
    "characteristic":  "action", 
    "disableIcon":  "icon_start_dis.png",
    "icon":  "icon_start.png", 
    "value":  1,    
    "sid":  "action" 
}
MultifunctionCommand

Name

Mandatory

Type

Description

Remarks

sid

Yes

String (1-32)

Service corresponding to a command.

Example: switch.

characteristic

Yes

String (1-32)

Property corresponding to the command.

Example: on.

value

No

int

Property value in the command.

Either value or valueString must be specified. For a WLAN device, value is used. For a Bluetooth device, value or valueString is used.

valueString

No

String (1-128)

Property value in the command.

Either value or valueString must be specified. For a WLAN device, value is used. For a Bluetooth device, value or valueString is used.

icon

Yes

String (1-128)

URL of the icon corresponding to the command.

-

disableIcon

No

String (1-128)

URL of the icon in the disabled state.

-

disable

No

String[]

Array of tags disabled after the command is triggered.

Example: ["Steaming function"]. For example, the steaming function is disabled when the soy milk maker is shut down.