Node-RED中Switch开关和Dropdown选择组件的使用

场景

Node-RED怎样导出导入流程为json文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124130985

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121992760

在上面的基础上怎样使用Switch开关组件和DropDown下拉选择组件。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、switch元件是一个开关组件，可以切换两个状态。

拖拽并编辑，使其切换时输出ON和OFF

 

 

2、DropDown是一个下拉选择组件，可以选取指定的选项。

拖拽一个并编辑

 

 

3、json数据

[
    {
        "id": "f4a4d8eab7935bc8",
        "type": "tab",
        "label": "流程 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "d1d9c2e21c5f8a4f",
        "type": "ui_switch",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "label": "电源开关 ",
        "tooltip": "",
        "group": "a0954be5.a7f7e8",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "decouple": "false",
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "onvalue": "On",
        "onvalueType": "str",
        "onicon": "",
        "oncolor": "",
        "offvalue": "Off",
        "offvalueType": "str",
        "officon": "",
        "offcolor": "",
        "animate": false,
        "className": "",
        "x": 240,
        "y": 100,
        "wires": [
            [
                "9d1f30e70627590b"
            ]
        ]
    },
    {
        "id": "9d1f30e70627590b",
        "type": "debug",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 450,
        "y": 120,
        "wires": []
    },
    {
        "id": "2f4297828a7f0b25",
        "type": "debug",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 450,
        "y": 260,
        "wires": []
    },
    {
        "id": "8289f775f52b04a3",
        "type": "ui_dropdown",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "label": "选择传感器",
        "tooltip": "",
        "place": "传感器种类",
        "group": "a0954be5.a7f7e8",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "温度",
                "value": "0",
                "type": "str"
            },
            {
                "label": "湿度",
                "value": "1",
                "type": "str"
            },
            {
                "label": "光线",
                "value": "2",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 240,
        "y": 240,
        "wires": [
            [
                "2f4297828a7f0b25"
            ]
        ]
    },
    {
        "id": "a0954be5.a7f7e8",
        "type": "ui_group",
        "name": "MyInput",
        "tab": "3f79c420.cfc1bc",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "3f79c420.cfc1bc",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

4、效果