【Tridium Niagara Vykon N4 物联网平台】 06_完善界面

本次实验是在“灯光控制实验”的基础上,优化了照明控制的界面。实现了增加背景图片、灯光独立控制等功能。

1. 启动平台和站点

首先启动平台,在Application Director界面中启动站点。
图2.1 启动站点

双击站点名,打开站点内容。在左侧导航栏中找到Station -> Light_Control文件夹。
图2.2 打开站点

Light_Control文件夹是之前做的灯光控制实验,本次将在灯光控制实验的基础上添加背景图片,完善界面的显示效果。

2. 添加背景图片

右键单击Light_Control文件夹,选择Views -> Graphic,切换到布局界面。
图2.3 布局界面

布局界面如下图所示。
图2.4 布局界面展示

这是我们之前设计的灯光控制系统界面,手自动切换选项可以选择在手动和自动照明之间进行切换;时间表按钮用来设置自动照明模式下的照明时间;手动开关按钮用来在手动模式下控制灯光的亮灭。当勾选“手自动控制切换”选项时,手动控制有效,不勾选时自动控制有效。
接下来点击软件菜单栏的编辑按钮,切换到布局编辑界面。
图2.5 布局编辑界面

布局编辑界面如下图所示。
图2.6 布局编辑界面

接下来需要下载背景图,我下载了一个房屋平面图,作为整个界面的背景。
下载图片完成后,首先要在Niagara软件的侧边栏中找到该文件。
比如我已经将该图片下载并移动到了桌面上,将其命名为“背景图片.png”。那么就可以在Niagara软件的侧边栏中查找My File System -> C: -> Users -> ZHJ -> Desktop -> 背景图片.png 找到该文件。选中该文件,右键点击复制。(注:路径中的ZHJ是我的用户名)
图2.7 背景图片

之后在Niagara软件的侧边栏中,选中Station -> Files 文件夹并右键单击,选择粘贴。
图2.8 粘贴图片

背景图片就被粘贴到站点中了。
图2.9 背景图片位置

双击编辑界面空白部分的网格,可以更改编辑界面的大小。在弹出来的属性窗口中,点击viewSize并输入数值。我调整的界面大小为1400×800,可以根据自己的显示屏调整。
图2.10 设置布局大小

在编辑界面的上半部分,可以添加一个标题。右键点击空白部分,选择 New -> Label,新建标签。
图2.11 添加标签

双击该标签可以设置其属性。将text属性设置为“照明控制界面展示”background(背景色)设置为银色。点击font(字体)属性,取消勾选Null/Default选项,字体选择微软雅黑,字体大小设置为26,如下图所示。
图2.12 设置字体

总共需要设置三个属性,设置完成后如下图所示。
图2.13 更改属性

现在编辑界面的效果如下:
图2.14 界面展示

接下来设置背景图片。首先在空白部分右键单击,选择New -> Picture
图2.15 新建图片

调整一下Picture组件的大小
图2.16 界面展示

双击Picture组件,设置其属性。点击image属性,设置背景图片资源。
图2.17 查找图片位置

在文件选择器中,选中图片并点击打开。
图2.18 打开图片

图片资源设置完成后,点击OK保存即可。
图2.19 图片属性

现在,图片就已经被添加到编辑界面了。
图2.20 界面展示

在图片上点击右键,选择Reorder -> To Bottom,将图片始终置于界面最下方,防止背景图片覆盖其他组件。
图2.21 背景置于底部

之后可以通过拖拽图片边框,调整一下图片显示的大小。将两个灯泡分别调整到背景图片适合的位置。比如,分别将两个灯泡移动至房屋平面图的卧室位置。
图2.22 灯泡位置

3. 灯光独立控制

为了能够分别控制两个灯泡,可以使用action对灯泡进行独立控制。
选中左侧导航栏中的Station -> Config -> Light_Control文件夹,将灯泡Light01拖动至Graphic编辑界面。
图2.23 添加组件

在弹出的组件界面中,按住Ctrl,选择Actions属性下的ActiveInactiveAuto三类动作,添加到界面中。
图2.24 添加动作

添加完成后,会出现三个对应的按钮。
图2.25 按钮展示

将这三个按钮依次命名为“1号灯点亮”“1号灯熄灭”“自动控制”。双击按钮,修改其text属性。
图2.26 设置文字属性

这样,第一个按钮就更改完成了。其余两个按钮也是同样的修改方式。修改完成后如下图所示。
图2.27 设置文字

接下来设置2号灯的独立控制按钮。将Station ->Config -> Light_Control -> Light02拖动到布局编辑界面。
图2.28 添加组件

与Light01相同,Light02同样是设置Actions下的ActiveInactiveAuto三个动作。
图2.29 设置动作

更改其text属性,分别改为“2号灯点亮”“2号灯熄灭”“自动控制”
图2.30 设置文字

接下来调整一下按钮布局,然后选中所有按钮,右键单击,选择“编辑设置”以设置其字体属性。
图2.31 编辑属性

更改字体选项,将字体更改为微软雅黑,字号为14。
图2.32 字体属性

最终照明控制界面的效果如下图所示。
图2.33 界面展示

点击编辑按钮,从编辑界面切换回布局界面。
图2.34 编辑界面

照明控制界面展示效果如下:
图2.35 界面展示

“手自动控制切换”选项被勾选时,是手动控制模式;不勾选时是自动控制模式。
“总控开关”可以在手动模式下,同时控制两个灯的亮灭,但在自动模式下无效。
“时间表”可以编辑在自动模式下的照明时间,但在手动模式下无效。
“1号灯点亮”按钮可以随时控制1号灯的点亮,在任意模式下都可以使用。
“1号灯熄灭”按钮可以随时控制1号灯的熄灭,也是在任意模式下有效。
“1号灯自动控制”按钮可以将照明模式改为时间表控制。
2号灯的按钮操作与1号灯相同。

4. 功能测试

在手动控制模式下,点击“总控开关”按钮,可以控制两个灯的亮灭。
图2.36 总控开关

自动控制模式下,根据照明时间表计划的照明时间,可以点亮灯泡。
图2.37 自动控制

点击“1号灯熄灭”按钮,测试其功能。
会弹出Inactive窗口,直接点击OK确认使其失能。
图2.38 确认设置
图2.39 强制关灯

可以看到,1号灯已经被强制关闭了,2号灯由于处在时间表控制下,所以还保持着点亮的状态。
同样,点击“1号灯点亮”按钮,激活1号灯的照明。
图2.40 确认设置
图2.41 强制开灯

这样1号灯就被正常点亮了。
接下来测试“自动控制”按钮。先将“2号灯熄灭”按钮按下,使2号灯被强制熄灭。
图2.42 强制关灯

然后点击“2号灯自动控制”按钮。
图2.43 自动控制

可以看到,因为自动控制状态的时间表是开启照明状态,所以2号灯被正常开启了。说明各个按钮的功能都是正常的。

5. 总结

本次实验是在“灯光控制实验”的基础上,优化了照明控制的界面。实现了增加背景图片、灯光独立控制等功能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章