首页专栏详情
打赏
Node-RED系列(十):Node-RED面板dashboard节点的配置
易百纳技术社区 不完整教程 2021-02-08 11:42:45

Node-RED系列文章目前已经写了9篇,介绍了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


声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。

23863
10
93
打赏
共1人已赏
完整的教程https://fizzz.blog.csdn.net。该网站都是残缺
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
不完整教程
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

审核成功

发布时间设置
发布时间:
是否关联周任务-专栏模块

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准,专栏需为原创文章且首次在社区发布
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
易百纳技术社区
升级提醒
易百纳技术社区

恭喜您由入门

社区送出礼品一份

请填写您的收件地址,礼品将在3个工作日寄出

易百纳技术社区