Node-RED Dashboard 低码大屏实践

Node-RED Dashboard 低码大屏实践

Node-RED 是一个基于 Node.js 平台的可视化编程工具,是一个功能强大、易于使用、可扩展的可视化编程工具,适用于各种应用场景,如物联网、数据处理、自动化控制等。它的优势包括:

可视化编程:Node-RED 提供了一个可视化的编程界面,使得用户可以通过拖拽和连接节点的方式来构建应用程序,而不需要编写大量的代码。

易于使用:Node-RED 的编程界面非常直观和易于使用,即使是没有编程经验的用户也可以很快上手。

丰富的节点库:Node-RED 提供了一个丰富的节点库,包括了各种常用的节点,如 HTTP 请求、MQTT、WebSocket、数据库等,用户可以直接使用这些节点来构建应用程序。

可扩展性:Node-RED 的节点库是可扩展的,用户可以通过编写自定义节点来扩展节点库,以满足特定的需求。

支持多种协议:Node-RED 支持多种协议,如 HTTP、MQTT、WebSocket 等,使得用户可以轻松地构建跨平台的应用程序。

开源免费:Node-RED 是一个开源免费的工具,用户可以自由地使用、修改和分发它。

Node-RED Dashboard 是一个基于 Node-RED 的可视化面板,它可以帮助用户快速构建 Web 应用程序。Node-RED Dashboard 提供了一组可重用的 UI 组件,如图表、表格、按钮等,用户可以使用这些组件来构建自定义的 Web 应用程序。

案例1:定制小红书多账号统计面板

数据处理:Node-RED 可以用于数据处理和转换,如数据清洗、数据分析、数据可视化等

创建子流程

流程里抓取数据和消息推送、数据处理逻辑都是复用的,所以可以抽离成子流程

image

自定义样式

为了方便,将Antd 的表格样式复制出来粘贴直接使用。将来实践可以考虑将 Tailwind CSS 放进去,就可以更方便自定义组件样式效果了。

image

多Tab 菜单

将不同的流分为两个大屏页面,启用Tab导航,就可以渲染为多页面菜单。这里可以将小红书的不同账号作为一个tab

image

最终流的效果

image

最终效果图 image

案例2:定制股票推送消息

自动化控制:Node-RED 可以用于自动化控制,如自动化测试、自动化部署、自动化运维等。

定制股票推送消息,拖拖拖,写点js就可以了

image

image

案例3:在Node-RED中监控太阳能光伏系统

此案例是Node-RED 在物流网领域的应用:Node-RED 可以与各种传感器和设备进行集成,从而构建物联网应用程序,如智能家居、智能工厂等。以下是监控您的太阳能光伏系统的例子:

image

image

Demo:

  • Node-RED UI: http://ha.iammeter.com:11880/ui
  • Node-RED flow: http://ha.iammeter.com:11880/#flow/5fb9966c8a33b771

相关阅读推荐:


本人自动发布于:https://github.com/giscafer/blog/issues/69

相关文章