node-red ui

Node-RED的UI是通过Dashboard节点来构建的，它提供了一个简约好看的图形化界面，但是无法自定义界面，只能使用现有的节点组件。为了满足特殊界面的需求，Node-RED社区推出了uibuilder。uibuilder是一个可以使用HTML/JS/CSS等自定义构建页面的工具，同时也可以引入其他框架和组件库，如Vue、React和Vue-Bootstrap等。在通讯层面，uibuilder使用封装的socket.io与Node-RED进行通讯。安装uibuilder可以通过在Node-RED的节点管理页面搜索并安装uibuilder节点。在使用uibuilder时，可以在index.js中找到核心函数fnSendToNR和window.onload。fnSendToNR函数用于向Node-RED发送数据，而window.onload函数是页面加载完成后的回调函数，用于建立socket.io通信并监听来自Node-RED的数据。在页面样式方面，可以通过引入uib-styles.css文件来设置页面的样式。在使用Dashboard控件时，可以通过设置节点的Tab和Group属性来布局UI界面，Tab可以理解为页面，Group是分组，Tab可以包含Group。通过设置节点的Tab和Group名称，可以在UI界面上查看相应的Tab和Group。
#### 引用[.reference_title]
- *1* *2* [Node-RED与uibuilder构建自定义UI](https://blog.csdn.net/z924219829/article/details/127475029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Node-Red UI界面基础设计](https://blog.csdn.net/weixin_43195420/article/details/126481650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]