Node-RED教程(十):Node-RED面板dashboard节点的配置

Node-RED系列文章目前已经写了16篇,介绍了Node-RED的安装以及默认安装的一些基本节点的使用,作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

上一期我给大家介绍了dashboard的安装以及一个按钮的配置,这一期我们来更加系统地学习一下dashboard的节点配置。

上一期我们已经知道 dashboard的库一共有16个节点,分别是

  • button 按钮节点
  • dropdown 下拉选择节点
  • switch 开关节点
  • slider 轮播图
  • numeric 数字滑块
  • text input 文本输入
  • date picker 日期选择
  • colour picker 颜色选择器
  • form 表单
  • text 文本显示
  • gauge 仪表板
  • chart 图表,折线图
  • audio out 音频输出
  • notification 通知
  • ui control ui控制
  • template 模板

本篇文章我就给大家多讲解几个节点的使用与配置。

首先我们要了解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](https://jossef.github.io/material-design-icons-iconfont/) ![](https://img-blog.csdnimg.cn/img_convert/0520296d1c9be2cca7b02720e56a003d.png)
拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
<p> <span style="color:#313d54;font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;font-size:16px;background-color:#ffffff;">Node-RED是工业网物联网的重要组成部分,我最开始接触Node-RED,也算是一个偶然的机会吧,上班后领导安排我的第一个任务就是调研一下Node-RED,我之后上网查了一下,那个时候网上相对于Node-RED的资料也比较少,只知道它是IBM公司的一个开源项目。直到最近,发现许多大公司的产品都支持Node-RED,比如西门子公司的IoT2000,研华公司的WISE PaaS 网关,美国OPTO 22等设备中都安装了Node-RED,表明它在工业物联网和控制中已经广泛应用了。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010200935441926.png" alt="" width="1316" height="524" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 那么工业物联网为什么要用它?它又处于工业物联网那个层次?它具有哪些特性?它帮助物联网解决了什么问题?为什么说它是柔性动态可重构的解决方案呢? </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 本门课程,老师将带领你从Node-RED的发展,工业物联网定位开始讲解,并带领着大家进行手把手安装Node-RED,实际操作演练Node-RED,并搭建一个物联网小平台,给大家带来更好的学习效果。 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936289051.png" alt="" width="1841" height="948" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936561564.png" alt="" width="1920" height="977" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 为了能够让小伙伴们快速了解本门课程的结构,本门课程从以下几个方面展开: </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED入门 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED安装与配置 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED教学实战 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED的优势与不足 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED能为我们带来什么 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED总结与展望 </p>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页