零基础NODE-RED：UI界面的添加和仪表的制作

最新推荐文章于 2026-03-23 00:57:06 发布
原创 最新推荐文章于 2026-03-23 00:57:06 发布 · 990 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#node.js #nodered #零基础

添加新的ui界面

下滑状态栏找到GAUG1节点拖动到主程序中

连接real0和gauge节点（该节点可用在UI界面中显示仪表）

双击刚刚新添加的节点

点击小铅笔的按钮

注：由于此时还没有添加UI界面所以现在要添加一个新的UI界面

再次点击小铅笔的按钮

更改名称为如图所示

点击添加

注：这里添加的是主界面

再次更改名称为如图所示

点击添加

注：这里添加的是主界面当中的小界面

仪表的基本设计

更改当前仪表的样式

修改仪表显示的名称

修改仪表的最小值和最大值

修改仪表在程序中的名称

点击添加

点击部署

输入192.168.200.1：1880/ui可进入到ui界面

注：如图所示，观察添加的主界面名称和小界面的区别

回到程序双击仪表

点击SIZE修改大小为3x3

点击完成

点击部署

回到UI界面可以看到当前的界面大小已经改变为3x3

回到程序双击仪表

修改单位为W

点击添加

点击部署

回到UI界面可发现单位已发生改变

Node-RedUI界面显示温湿度光照
10-04
将Node-Red收到的Hex数据（1个字节）转化为10进制数据。
node-red-dashboard-custom-widget:使用ui-template创建Node-RED-Dashboard UI小部件
05-11
节点红色定制小部件1 遵循指南外部源创建ui-widget ui-template代码段 <!-- external libraries --> [removed][removed] <link rel="stylesheet" href="http://billmill.org/css/style.css" /> <style> ... </style> [removed] ;(function(scope) { scope.msgReady = ... // ng-if var timer = setInterval(function() { //check that D3 libs are loaded, if not wait if (!window.d3) return; clea
Node-RED图像识别实战：从本地图片到实时摄像头，5步搞定智能识别UI展示
最新发布
weixin_30919429的博客
03-23 51
本文详细介绍了如何使用Node-RED构建图像识别工作流，从本地图片处理到实时摄像头捕捉，5步实现智能识别UI展示。通过安装关键节点、配置工作流、优化性能及设计Dashboard界面，开发者可以快速部署视觉识别应用，适用于智能家居、工业质检等多种场景。
Node-RED教程（十五）：工业仪表盘开发
知无涯
03-31 5879
Node-RED系列文章目前已经写了14篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。 物联网平台Node-RED系列（一）：Node-RED的介绍与安装 物联网平台Node-RED系列（二）：Node-RED的面板的操作 物联网平台Node-RED系列（三）：Node-RED公共节点的使用 物联网平台Node-RED系列（四）：Node-RED函数节点的使用
node-red 可视化探索
weixin_44133581的博客
06-17 3347
配置socket选择配置流程产生url。
Node-RED系列（二二）：使用dashboard搭配echarts制作漂亮的面板
知无涯
06-06 1万+
在node-red中dashboard 是一个很常用的模块，其中它有一个chart节点可以用来制作一些图表，比如柱状图，折线图，饼图，但其中的图表并不是很美观，而且可配置项非常的少。 于是就有很多小伙伴找我做一套比较好看的图表面板，在对比了一下几个图表库，我选中了echarts。 不仅美观大方，而且非常容易集成，配置。下面先来看一下我做的效果。这里是直接做了四个折线图，第一个折线图有动态效果，第二个折线图是一个多线条的折线图，第三个折线图是在一个图例显示两个折线图。第二第三都可以用于数据对比。 第四个折线
Node-RED教程（十四）：定制Node-REDUI
知无涯
03-31 1万+
Node-RED系列文章目前已经写了13篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。 物联网平台Node-RED系列（一）：Node-RED的介绍与安装 物联网平台Node-RED系列（二）：Node-RED的面板的操作 物联网平台Node-RED系列（三）：Node-RED公共节点的使用 物联网平台Node-RED系列（四）：Node-RED函数节点的使用
Node-Red UI界面基础设计
weixin_43195420的博客
09-08 2万+
Node-Red的Dashboard配置，修改UI界面色调、布局
Node-RED与uibuilder构建自定义UI
z924219829的博客
10-23 8874
Node-RED是一款可以进行可视化编程的低代码工具, 在快速构建原型和做小型应用有着较大优势. 在Node-RED中构建图形化(GUI)界面通常使用Dashboard完成, 其UI简约好看, 但其界面无法自定义, 只能使用现有的节点组件, 对于特殊界面无法满足. 因此Node-RED社区推出了uibuilder. 其可以使用HTML/JS/CSS等自定义构建页面, 同时也可以引入其它框架(Vue, React等)和组件库(Vue-Bootstrap等), 在通讯层面则通过封装的socket.io。
零基础小白学Node-RED（04）：仪表板
知无涯
10-20 4304
dashboard主要用于快速创建实时数据仪表板。它需要node-red版本为0.14或更高。
如何快速搭建 Node-RED 实时数据仪表盘：零基础入门指南
gitblog_01005的博客
10-25 960
Node-RED Dashboard 是一款专为 Node-RED 设计的实时数据可视化工具，能够帮助用户快速创建直观的仪表盘界面。通过简单拖拽节点，即可将物联网设备数据、传感器读数或业务指标以图表、仪表等形式动态展示，无需复杂前端开发技能。 ## ???? 准备工作：环境搭建必备条件 在开始使用 Node-RED Dashboard 前，请确保已安装 [Node-RED](https://nod...
Node-RED教程（一）：Node-RED的介绍与安装
热门推荐
知无涯
01-31 3万+
最新最全的Node-RED，node-red教程都在这里。 本篇介绍node-red的安装。使用docker 安装node-red
Node-RED UI Builder 完全指南：从零构建自定义界面
gitblog_00916的博客
11-24 1026
想要快速掌握Node-RED UI Builder的使用方法吗？这份终极指南将带你从基础概念到实战应用，轻松创建专业级自定义用户界面。无论你是物联网开发者还是前端爱好者，都能通过本教程快速上手这个强大的可视化界面构建工具。 ## 项目架构深度解析 Node-RED UI Builder是一个用于Node-RED的插件，可以轻松创建数据驱动的Web用户界面。该项目采用模块化设计，主要包含以下几个
Node-RED仪表板可视化设计：打造专业级数据展示界面
gitblog_00983的博客
12-11 1035
还在为数据展示发愁吗？想要快速构建专业的数据可视化界面？Node-RED Dashboard就是你的最佳选择！今天就来聊聊这个功能强大的数据可视化工具，让你轻松上手，玩转数据展示。 ## 核心优势解析：为什么大家都在用？ Node-RED Dashboard之所以备受青睐，主要得益于以下几个突出特点： **极简安装体验** 🚀 只需在Node-RED的Palette Manager中搜索"
【亲测免费】 探索Node-RED Dashboard：构建直观易用的IoT应用界面
gitblog_00052的博客
03-26 1790
则是Node-RED生态系统中的一个重要组成部分，专为创建交互式用户界面提供了便利。 ## 项目简介 Node-RED Dashboard是一款图形化用户界面工具包，允许开发者轻松构建实时数据可视化界面，无需深陷于HTML、CSS或JavaScript的复杂性中。它与Node-RED的核心紧密结合，使用户可以通过拖放的方式来设计仪表板，并将它们与背后的数据流连接起来，从而实现丰富的交互功能。 ...
NodeRed 修改主题（详细教程）
qq_36379705的博客
11-04 4481
默认的NodeRed的编辑器主题是白色和红色,UI中的图片也是白色和红色,个人不喜欢这种风格,所以研究一下怎么给Node-Red换皮,同时初步熟悉一下NodeRed源码
node-red与mysql的连接ui（学习笔记）
qq_62118666的博客
01-08 2888
node-red与mysql的交互
【鸟哥杂谈】十分钟搭建自己的本地 Node-Red可拖拽图形化物联网
单片机菜鸟哥的博客
10-16 1万+
本文简单介绍了Node-RED工具以及它能给我们开发物联网带来那些功能效果，先搭建好环境，然后去玩转起来，静待后续篇章。
Node-Red图片显示
weixin_43195420的博客
08-18 7354
使用node-red在UI界面中显示图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值