博客
关于我
Node-RED中Slider滑杆和Numeric数值输入组件的使用
阅读量:797 次
发布时间:2023-02-16

本文共 1258 字,大约阅读时间需要 4 分钟。

场景

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

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

在上面的基础上怎样使用Slide滑杆组件和Numeric数值组件。

注:

博客:

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、Slider组件可以拖动滑杆来输入最大/最小范围之间的值。

拖拽一个组件并编辑

2、Numbic元件也可以输入数值资料,这是使用上/下按钮来输入数值。

拖拽一个Numbic元件并编辑

3、json数据

[    {        "id": "24bfd0cfc8d00b23",        "type": "ui_numeric",        "z": "f4a4d8eab7935bc8",        "name": "",        "label": "输入成绩: ",        "tooltip": "",        "group": "248cbbb0.18e794",        "order": 3,        "width": 0,        "height": 0,        "wrap": false,        "passthru": true,        "topic": "topic",        "topicType": "msg",        "format": "{  {value}}",        "min": 0,        "max": "100",        "step": 1,        "className": "",        "x": 280,        "y": 260,        "wires": [            [                "f21d40d0a18a6f6c"            ]        ]    },    {        "id": "248cbbb0.18e794",        "type": "ui_group",        "name": "MyGroup",        "tab": "3f79c420.cfc1bc",        "order": 1,        "disp": true,        "width": "6",        "collapse": false    },    {        "id": "3f79c420.cfc1bc",        "type": "ui_tab",        "name": "Home",        "icon": "dashboard",        "disabled": false,        "hidden": false    }]

4、访问ui页面

拖动条和调整数值时会输出

转载地址:http://bijfk.baihongyu.com/

你可能感兴趣的文章
nginx: [emerg] getpwnam(“www”) failed 错误处理方法
查看>>
nginx:Error ./configure: error: the HTTP rewrite module requires the PCRE library
查看>>
Nginx、HAProxy、LVS
查看>>
Nginx下配置codeigniter框架方法
查看>>
Nginx中使用expires指令实现配置浏览器缓存
查看>>
Nginx之二:nginx.conf简单配置(参数详解)
查看>>
Nginx代理websocket配置(解决websocket异常断开连接tcp连接不断问题)
查看>>
Nginx代理初探
查看>>
nginx代理地图服务--离线部署地图服务(地图数据篇.4)
查看>>
Nginx代理外网映射
查看>>
Nginx代理模式下 log-format 获取客户端真实IP
查看>>
Nginx代理解决跨域问题(导致图片只能预览不能下载)
查看>>
Nginx代理访问提示ERR_CONTENT_LENGTH_MISMATCH
查看>>
Nginx代理配置详解
查看>>
Nginx代理静态资源(gis瓦片图片)实现非固定ip的url适配网络环境映射ip下的资源请求解决方案
查看>>
Nginx代理静态资源(gis瓦片图片)实现非固定ip的url适配网络环境映射ip下的资源请求解决方案
查看>>
nginx反向代理
查看>>
Nginx反向代理
查看>>
nginx反向代理、文件批量改名及统计ip访问量等精髓总结
查看>>
Nginx反向代理与正向代理配置
查看>>