「智能家居」自动化平台nodered第三方节点dashboard的使用

自带节点库讲完了，开始说说第三方节点库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 -- -- -- -- -- --

我是小白，智能家居爱好者、一卡通行业从业者、曾经的建筑智能化从业者。致力为开源智能家居平台添砖加瓦。