首页 > 编程语言 >Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度

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

时间:2023-03-22 10:06:22浏览次数:44  
标签:Node node 节点 mqtt dashboard 图形化 red


场景


上面讲了node-red中获取mqtt数据的调试过程。

如果要模拟通过温度传感器的mqtt订阅的主题中获取温度数据并在能显示仪表盘的界面中

实时检测刷新数据。

node-red支持自定义节点,当然也就支持自定义图形化的节点。也有优秀的开发者把自己建立的图形化节点无偿分享。

我们常用的图形化节点叫做仪表板,dashboard,也能做出效果不错的界面

注:

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

实现

1、安装node-red

运行node-red,找到节点管理

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

找到安装,搜索dashboard,点击node-red-dashboard的安装

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

安装成功之后会添加一些新的UI节点。

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

2、继续上面的mqtt in节点后面,拖拽一个guage节点,并连接

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

3、双击该gauge节点

给其编辑一个分组,label设置显示的标签,min与max设置最大最小值,Units设置单位,Name设置节点显示名称。

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

4、点击完成,并部署

浏览器访问:

​http://127.0.0.1:1880/ui​

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

5、更改mqtt主题中数据,查看dashboard中显示效果

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

 

标签:Node,node,节点,mqtt,dashboard,图形化,red
From: https://blog.51cto.com/BADAOLIUMANGQZ/6142069

相关文章

  • 【ASP.NET Core】在node.js上托管Blazor WebAssembly应用
    由于Blazor-WebAssembly是在浏览器中运行的,通常不需要执行服务器代码,只要有个“窝”能托管并提供相关文件的下载即可。所以,当你有一个现成的Blazorwasm项目,没必要用其......
  • node学习四之npm知识点
    1.版本号知识点使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码,这里简单介绍一下。语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本......
  • 物联网 | HASS+MQTT+树莓派室内监测小型物联网系统
    实践说明本次实践将在阿里云服务器上部署HomeAssistant服务和MQTT服务,并在树莓派4B上通过GPIO口连接温湿度、火焰和烟雾传感器。最终编写Python程序将树莓派通过MQTT连接到......
  • NodeJs的模块化和包
    模块化的基本概念什么是模块化?模块化是解决一个复杂问题时,自顶向下逐层把系统划分为若干个模块的过程,编程中,就是遵守一定规则,把一个大文件拆成独立并相互依赖的多个小模......
  • Docker镜像使用node-gyp
    #syntax=docker/dockerfile:1FROMnode:18-alpineENVNODE_ENV=production#重要的是这一句,安装node-gyp所需的便衣依赖即可RUNapkupdate&&apkupgrade&&ap......
  • nodejs处理一段redis获取集合,数组的代码优化(其中包含:es6同步返回数据的处理,new Pro
    从异步,用延时来处理,改成同步获取数据获取数据主要分2步:1.从redis集合中获取数组;2.遍历数组,抓取其中字符串,解析,拼接成需要的数据,返回给前端原代码,用sleep方法,避免异步......
  • nodejs获取redis集合内容,同步方法
    可以使用redis模块来连接和操作Redis数据库。以下是使用该模块获取Redis集合内容的同步方法://引入redis模块constredis=require('redis');//创建redis客户端const......
  • nvm: node版本管理
    前端在实际开发中,有时需要不同的node版本,这时就需要一个node版本管理工具在Mac中,我们使用nvm来管理node的不同版本安装安装nvmbrewinstallnvm配置配置~/.base_pro......
  • 什么是webpack、npm、node、nodejs?他们之间有什么区别?
     最近在学一学前端的东西,发现前端技术栈有几个概念有些分不清,比如接触Vue后,对Vue-Cli有了解后,仅仅知道Vue-Cli是一个Vue项目的脚手架,可以快速的构建一个Vue的基于Npm的模......
  • Centos下安装Node 环境
    一、Node.js安装包下载[root@izvf8kkg6lhgidzlocal]#cd/usr/local/[root@izvf8kkg6lhgidzlocal]#wgethttps://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64......