家居行业网站模板源码分享,家居网页

大家好,今天来为大家分享家居行业网站模板源码分享的一些知识点,和家居网页的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!

自带节点库讲完了,开始说说第三方节点库dashboard,该库提供另一个可配置的UI页面,可以配置一些表单元素,以及图表。先来看一下别人使用dashboard制作的面板吧,是不是很漂亮。

接下来我们一起来安装一下这个节点库,并且体验一下他的一些节点。

首先我们要安装一下这个库点击设置

打开设置面板

搜索dashboard节点库

完整的名字叫做node-red-dashboard搜索出来后,点击安装即可,

安装需要一点时间,稍等一会。安装完成后,刷新一下页面.就可以在节点列表的左侧看到相应的节点

一共有16个节点,分别是

button按钮节点

dropdown下拉选择节点

switch开关节点

slider轮播图

numeric数字滑块

textinput文本输入

datepicker日期选择

colourpicker颜色选择器

form表单

text文本显示

gauge仪表板

chart图表,折线图

audioout音频输出

notification通知

uicontrolui控制

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内置了四套图标。分别是

AngularMaterialicons:angular图标如send

FontAwesome4.7:字体图标如fa-firefa-2x

WeatherIconsLite:天气图标如wi-wu-sunny

MaterialDesignIconfont;Material设计图标如mi-alarm_on

如图配置了所有的UI组件到流中,

UI组件只要不涉及到数据的流转,那就可以不用连线,依然可以显示到页面上。上面的流配置显示的页面是这样子的

由于group的默认是6个单位,所以会有点小。我们可以点击这里进行调整宽度

调整后的效果图

没有那么小了,会稍微好看很多。

最后再给大家看一下dashboard支持的图标库吧。

angular-material-icons

FontAwesome4.7

WeatherIconsLite

MaterialDesignIconfont

PS:nodered的教程太长了,后边慢慢讲了。

————END————

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

OK,本文到此结束,希望对大家有所帮助。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平