自带节点库讲完了,开始说说第三方节点库dashboard,该库提供另一个可配置的UI页面,可以配置一些表单元素,以及图表。 先来看一下别人使用dashboard制作的面板吧,是不是很漂亮。
接下来我们一起来安装一下这个节点库,并且体验一下他的一些节点。
首先我们要安装一下这个库 点击设置
打开设置面板
搜索dashboard 节点库
完整的名字叫做node-red-dashboard 搜索出来后,点击安装即可,
安装需要一点时间,稍等一会。安装完成后,刷新一下页面.就可以在节点列表的左侧看到相应的节点
一共有16个节点,分别是
button 按钮节点
dropdown 下拉选择节点
switch 开关节点
slider 轮播图
numeric 数字滑块
text input 文本输入
date picker 日期选择
colour picker 颜色选择器
form 表单
text 文本显示
gauge 仪表板
chart 图表,折线图
audio out 音频输出
notification 通知
ui control ui控制
template 模板
安装之后,我们就可以使用了,首先我们将一个button的节点拖放到Flow中 双击button节点,进行编辑详情。 首先Group的输入框是红色的,意味着我们首先要把Group属性完善一下。
点击右侧的笔
点击之后进入了一个Group的配置页面
但表单项Tab也是红色的,所以继续下潜,完善更底层的配置, 点击之后
是一个配置Tab的页面,配置Tab的名称,以及图标。图标可用的在 https://klarsys.github.io/angular-material-icons/
都配置完成后
点击完成。 点击部署
这样我们就部署了一个按钮节点到Dashboard中, 部署后我们到哪里去看配好的页面那。 默认是到这个地址访问UI。 http:// ip+port/ui
以我的为例,Node-RED的访问地址是http://192.168.199.251:1880/#
那么ui的访问地址就是 http://192.168.199.251:1880/ui/
首先我们要了解dashboard这个库, 库的介绍,https://flows.nodered.org/node/node-red-dashboard 库的github源码 https://github.com/node-red/node-red-dashboard 目前899个star,还是挺不错的。 dashboard的布局可以看做是一个网格布局,每一个group(组),都有一个默认的宽度,6个单位(每个单位48px,并且6px的间隔) 每一个部件都必须存在于一个group中,这里的部件其实就是指一个UI元素,像按钮,输入框,选择框,数字滑块。每一个部件的宽度默认是auto.这意味着它将布满整个group,并且会自适应单位。
给定一个宽度为6的组,如果你添加六个小部件,每个小部件的宽度为2,则它们将分两行布置-每行三个小部件。
如果你添加两组宽度6,只要你的浏览器窗口足够宽,它们就会并排放置。如果缩小浏览器,则某一列中的第二组有时会移到第一组之下。
建议尽可能使用多个组,而不是一个大组,以便页面可以在较小的屏幕上动态调整大小。
在布局中,最大的布局单位是tab,以下是group,然后是部件 widget 你可以在右上角点击 一个柱形图的图表来查看dashboard的操作面板
site配置
主题色配置
可以对主题进行自定义
Style选中Custom,就可以选择自定义的颜色。
关于图标,dashboard内置了四套图标。 分别是
Angular Material icons : angular图标 如send
Font Awesome 4.7 : 字体图标 如fa-fire fa-2x
Weather Icons Lite : 天气图标 如wi-wu-sunny
Material Design Iconfont ; Material设计图标 如mi-alarm_on
如图配置了所有的UI组件到流中,
UI组件只要不涉及到数据的流转,那就可以不用连线,依然可以显示到页面上。 上面的流配置 显示的页面是这样子的
由于group的默认是6个单位,所以会有点小。我们可以点击这里进行调整宽度
调整后的效果图
没有那么小了,会稍微好看很多。
最后再给大家看一下dashboard支持的图标库吧。
angular-material-icons
Font Awesome 4.7
Weather Icons Lite
Material Design Iconfont
PS:nodered的教程太长了,后边慢慢讲了。
-- -- -- -- -- -- END -- -- -- -- -- --
我是小白,智能家居爱好者、一卡通行业从业者、曾经的建筑智能化从业者。致力为开源智能家居平台添砖加瓦。
页面更新:2024-04-14
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号