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

忘是亡心i 2023-09-30 13:05 12阅读 0赞

## 场景 ##

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

[Node-RED怎样导出导入流程为json文件\_霸道流氓气质的博客-CSDN博客][Node-RED_json_-CSDN]

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

[Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度\_霸道流氓气质的博客-CSDN博客][Node-RED_dashboard_mqtt_-CSDN]

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

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

拖拽一个并编辑

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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、效果

![bb6e8f06a3444f92a4702b4774639765.gif][]

[Node-RED_json_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124130985
[Node-RED_dashboard_mqtt_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121992760
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e1d0adcf4cc3406a8e783725408e9e17.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a5fc49083f4f4e98b17fcd9b9a65d81a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[bb6e8f06a3444f92a4702b4774639765.gif]: https://img-blog.csdnimg.cn/bb6e8f06a3444f92a4702b4774639765.gif