机房自动化监控手把手分享给你 - 7 监控画面制作

本文章是一个项目系列文章的第八篇，这个系列文章非常详细，真的可以说是手把手拉着你在现场做实际的项目一样。如果你还不了解前面的内容，请参考

机房自动化监控手把手分享给你 - 0 总体说明

机房自动化监控手把手分享给你 - 1 项目前期准备

机房自动化监控手把手分享给你 - 2 温湿度传感器的对接

机房自动化监控手把手分享给你 - 3 漏水传感器的对接 

机房自动化监控手把手分享给你 - 4 空调设备对接

机房自动化监控手把手分享给你 - 5 电流监测模块对接

机房自动化监控手把手分享给你 - 6 UPS设备对接

前面的文章，我们完成所有的设备安装、连接、调试和软件数据接入工作。此时我们在现场，就需要根据实际的样子，给计算机系统制作一个日常永远运行的监控画面。否则，我们没法给用户交代呢！用户看你完成工作的精彩程度都在里面了。你现场的设备接线、协议等等你感觉技术内在牛B的东西，人家不一定懂，也就不一定Care你了。所以，一定要重视展示效果，这个展示最关键的也就是这个监控画面了。

1 我的监控画面效果

我的项目已经做完，所以直接把最终监控画面效果给你看看。事实上，画面的设计千变万化，你可以根据用户或自己的喜好随便折腾都行。

下面我就以IOT-Tree对监控画面的在线编辑功能带领你制作以上的画面过程。在github上你搜索IOT-Tree就可以下载到这个软件包，运行之后，也有自带的文档给你参考。

不过，由我带着你根据这个实际的项目，走一遍过程，你就可以在最短的时间，最少的精力掌握了这个过程，然后在实际使用过程中，根据需要深入去了解软件的潜力。我写这个虽然费劲，但如果你们能从中得到好处，减少有限生命的损耗，那我就高兴了！

下面我就开始以上图为最终目标的监控画面制作过程。

2 详细制作过程

2.1 IOT-Tree中的HMI(UI)节点

我们首先在项目根节点下添加一个HMI节点。鼠标右键点击根节点it_room,选择"New HMI"，在弹出的编辑对话框中，填写Name=mainui，点击OK之后，我们就新增了一个UI节点。

 然后我们，鼠标右键mainui这个节点，选择"Edit UI"，你可以在右边出现mainui的画面编辑选项卡。在里面你就可以开始制作监控画面了。

 2.2 制作画面背景尺寸

IOT-Tree的监控画面，可以无极限缩放，显示时也可以任意移动。但在我们日常监控中，画面几乎是不需要我们去移动的。并且在画面启动展示输出时，一开始会根据画面占据的区域自动适应当前显示窗口。

因此，我们需要根据显示器尺寸比例，预先做个背景方框，然后我们在里面绘制（或放置）其他内容。这样最终的画面在自适应展示时，能够充满屏幕，使得整体很丰满。我的项目那个触摸屏幕显示器分辨率为2160*1440。那么很简单，我们先在绘图区画一个矩形，宽度高度就以这个分辨率。

点击工具箱中的Rectangle矩形图元，移动鼠标到绘图区，你会发现鼠标变成十字，按下左键不松开，往右下方拖拉，就可以看到一个矩形区域出现。并且这个区域是当前选中状态。你在右边图元properties区，修改width=2160 height=1440，然后设置locked=yes。此时你的一个背景区域框就做好了。你可以在绘图区滚动鼠标滚轮，使得这个区域放大缩小。如下图：

这样，我们后续的图元都准备在这里面放置了。 因为这个背景区域被锁定Locked=yes，你选中之后，就算鼠标变成移动样式，你也无法移动它。

2.3 制作机柜组件

接下来我们准备绘制机柜图样，通过工具箱中的基本图元、颜色填充和图元堆叠，我们可以直接在上面的监控画面中绘制机柜。然后复制就行。但我们静下心来仔细想想，这个机柜很明显可以做出成一个图库内容，然后可以在任意项目中使用。在库中绘制这个机柜和在项目UI节点绘制几乎没多少区别。

所以，我们自己应该有自己经常使用的图库，并且还能够随着项目积累越来越多，后面碰到类似项目直接拉出来使用就行了。当然，图库不属于某个具体的项目。

2.3.1 新建自己的图库和分类

请回到IOT-Tree管理主界面，你本地访问http://localhost:9090/admin/即可。在HMI Library区域中，点击列表右边的"+"按钮，填写My UI。如下图：

新增这个库之后，点击进入，点击“+Category”新增一个机房分类

 2.3.2 新建机柜组件

点击新增的"机房“分类，在右边点击"Add Component Item",填写组件名称”机柜“。

确定之后，机房这个分类就会多出一个机柜图元组件。但这个图元没有内容，鼠标移动到上方，点击编辑按钮，可以打开这个图元的编辑窗口。如下图

 

这个绘图和项目中的UI节点绘制很相似，基本上你只需要使用工具箱中的内容，进行绘图即可。

2.3.3 添加照片参考背景

机柜方方正正的，可以看出绘制这个组件，基本只需要矩形图元和多边形图元进行堆叠，然后填充不同的颜色即可。为了能够很快画出效果。我建议先在现场拍一张照片或网上找一张合适的图片。

然后点击工具箱中的"Add Img"按钮，在绘图区绘制一个Image图元矩形区域。此时，这个Image是当前选中状态，如图：

在右边的属性Image Res右边的输入框，点击“...”，弹出了此机柜组件的文件资源管理对话框。然后，你输入这个图片资源的名称（可以随便写，用完之后这个资源需要删除），然后点击Add按钮上传文件。然后，选中你刚上传资源，点击ok。

此时，你刚才添加的Image图元，就显示出你上传的图片资源了。你可以调整好显示图片的尺寸。然后以这个为背景参考，绘制机柜。

2.3.2 绘制组件

这里再推荐一个windows下的屏幕截图软件Snipaste。这个软件启动之后，你随时按F1，就可以对windows屏幕进行截图或取色，这个能很大方便我们绘图然后取色填充。

先把这个背景图片图元Locked=yes，锁定，然后设置z-index值（堆叠高度）=1，这样能保证你新添的图元在这个图片上方。然后，我们开始绘制具体内容：

首先，我们绘制几个如下的矩形图元，从照片取色填写图元的Fill Style中，并且把Line Color也和填充设置通用颜色。请充分利用复制功能，当你选中某个图元时，按Ctrl+C,然后Ctrl+V,就会在你鼠标位置复制出一个新的图元，你只需要移动放置合适位置就行。

把上面的矩形组合堆叠在一起，一个机柜的框架就差不多出来了。

 

接下来我们对门把这个不规则内容进行绘制。请滚动鼠标中间滚轮，放大图片，然后使用工具箱中的不规则绘图项，在图片上的不同颜色区域进行描点（鼠标右键可以使本次绘制结束）：

然后，按F1取色，填写如这个不规则区域的Fill Style。效果如下：

接着我们用同样的方法，描绘剩下的内容，最终如下图：

 

我们用鼠标打框全部选中新画的这些内容，然后在选中区域再次点击整体移动到右边合适的位置：

那么这个机柜也就差不多完成了。你如果还想做的细致一点，不外乎在多加几个矩形或不规则多边形，然后填充合适的颜色即可。

请注意，绘制完成之后，一定要删除我们刚才上传的图片，否则这个组件占用就会比较大。我们刚才绘制的内容都是矢量数据，不仅数据量小，而且还支持任意大小。

1，先选中左边的图片图元，然后点击按Del键。

2，点击绘图窗口右上方的“resources”图标，选中我们上传的图片，点Delete按钮删除

最终，我们制作的机柜组件如下：

 

2.4 制作空调主机组件

空调主机组件制作和机柜非常类似。只要你使用上面的方法，一个漂亮的组件也就10多分钟就可以轻松完成。

最终，我们在My UI/机房分类下，添加了这两个组件。编辑的时候一定要多用复制Ctrl+C 粘贴Ctrl+V，并且如果图元之间需要对齐，可以在右边属性框直接复制X，Y坐标，或Width 和Height等参数。请注意：要及时点击保存按钮进行保存。

2.5 在项目中使用组件

现在，我们已经有了这两个组件了，接下来就可以在项目中直接使用了。回到我们之前的项目，鼠标右键打开mainui这个HMI（UI）节点的绘制界面。点击左边的Components图标，则会滑出系统图元库内容，我们找到自己定义的库和分类，可以看到我们添加的两个组件都在里面了。

鼠标选中不松开，拖拉释放到绘图区域，你就可以看到组件图元添加进了绘图区：

 机柜比较多，你只需要多拖拽几次或复制粘贴就行，然后在背景框内调整位置和大小。

很快，一个机房大致的样子就出来了。

此时，千万别忘了点击“保存”按钮：

 

2.6 远端温湿度显示

我们在监控画面右边显示温湿度传感器的数据，这个现实很简单，直接在工具箱中，选择Txt图元，然后点击准备放置文字的位置。如下图：

通过调整文字尺寸，然后直接修改右边text属性，就可以改变文字，我们放置了四个Txt图元，如下：

 

其中温度和湿度右边的两个Txt图元，我们需要绑定显示数据。如上图，点击text右边的bind按钮，弹出绑定对话框，我们在里面选中前面单独配置温湿度传感器数据：

确定之后，可以看到右边两个###的Txt图元的text属性都各自绑定了标签数据。 并且bind按钮也会有所区别：

2.6.1 临时测试运行效果

注意，点击保存按钮才能起作用。此时，如果你现场设备都通电并且运行正常，你可以启动项目。然后在mainui节点鼠标右键，选择“Access"。你会看到弹出一个此UI的运行窗口，上面的URL是此HMI(UI)节点的唯一路径：http://localhost:9090/it_room/mainui

 ​

IOT-Tree这种纯Web的在线编辑，可以随时让你查看运行效果。 

2.7 制作漏水显示状态

接下来我们对漏水监测报警制作稍微复杂一点的效果。我们在右上方放置如下三个图元，

​

其中，右边是Circle图元和是否有漏水文字提示，我们准备显示的效果是，当没有漏水，这个圆形内部填充绿色，如果有漏水报警，那么显示红色。

选择这个圆形图元，在Fill Style右边，点击对应的”Bind"按钮，在弹出的编辑框，选择js express。在里面填写js代码，这段代码根据天花板漏水标签数据，做判断，如果有报警，返回"red"否则返回"green":

​

选中圆圈右边的####图元，对Font Color做和上面同样的bind，这样有报警的时候，这个文字也会会变成红色。同时，对Text属性的bind，使用js代码如下：

return ch1.leak1.alert_st._pv?"监测有漏水":"无";

如此，这个文字会根据是否有漏水变成不同的显示文字提示和颜色改变。

对于地板漏水监测，也做同样的事，只需注意绑定(Bind)时，使用ch1.leak2.alert_st对应的标签数据。 最终如下图：

​

此时，如果你在现场，可以启动项目，然后查看实际运行效果。 这里就不重复了。

2.7 制作机柜电流表

我们对4个机柜，做了电流监测。这次准备使用IOT-Tree自带的仪表盘进行电流显示。

在绘图区左边，点击Components图标，在展开的库Basic/meter下面，找到仪表盘m1,鼠标选中拖拽到绘图区域就行。

​

 把这个图元选中，然后移动到对应的柜子上方，调整尺寸。然后开始设置如下参数：

Dial Min Value=0  Dial Max Value=30    //这是因为电流监测量程0-30A

//设置仪表3段，每一段有起始结束值和颜色

Dial Seg1 Min Value=0  Dial Seg1 Max Value=10 Dial Seg1 Color=green

Dial Seg2 Min Value=10  Dial Seg2 Max Value=20 Dial Seg1 Color=yellow

Dial Seg3 Min Value=20  Dial Seg3 Max Value=30 Dial Seg1 Color=red

设置好之后，这个仪表盘就变成符合我们使用要求的样子了。

 

然后，我们选中这个仪表盘，点击属性Value右边的bind按钮，设置绑定1#电流监测标签数据。

这样，这个Value的变化时，指针也会随着电流值做不同角度的指向。

剩下的几个电流仪表，你一定要使用复制Ctrl+C粘贴Ctrl+V功能，把上面那个仪表在剩下的柜子上复制出来，因为复制同时也就把刚才设置那么多参数都拷贝了。复制之后，你只需要对Value的绑定数据做一下调整即可。当然，也建议在仪表下方，放置Txt图元，然后对text属性绑定电流值。这样的显示就更完美了。最终效果如下：

2.8 制作UPS显示状态

我们先参考漏水制作过程，制作4个状态指示，思路也即是左边那个小方块作为指示等，对Fill Style属性做bind，状态false时显示灰色，如果true则显示黄绿色。这里就不重复了。

接下来，我们用两个水柱效果，显示电池充电0-100百分比，另外是电池当前功率下，能够支撑的分钟数：

 

还是在组件库中，找到Basic/liquid level下面的这个水柱图元。选中，设定参数如下：

Level Total Height=100

然后，对属性Leval Value进行bind对应的标签数据：upseth.apc9631.battery_soc._pv

当然，在上方我们也加了两个Txt图元显示具体数字。制作方法同上就省略了。最终效果如下 ：

 

用同样的方式，我们增加另外一个和相关Txt图元，并设定绑定数据标签upseth.apc9631.rt_remain._pv，效果如下：

2.9 制作空调运行状态和控制按钮

接下来，我们给空调弄个动画运行状态，然后放置一个启动和停止开关，并且设置控制动作。从图元库Basic/rotation/下面找到这个旋转图元，放置到空调上方。然后增加两个Circle图元，并分别填充绿色和红色。如下图：

2.9.1 空调运行动画

选中旋转图元，在On or Off属性绑定标签数据 ch2.air.run_b._pv。这样就完成了空调运行动画啦。

2.9.2 空调启停控制

我们设计点击启动的那个圆，就给空调下达启动指令，点击停止那个红色圆，则给空调下达停止指令。我们回顾一下之前对接空调的文章，对标签数据ch2.air.start_stop，写入16则是启动，写入31这是停止，他们分别对应server端js代码：

ch2.air.start_stop._pv=16; //启动空调
ch2.air.start_stop._pv=31; //停止空调

选中启动上方的绿色圆，在右边点击Events选项卡，在on_mouse_clk事件右边点击打开事件处理窗口。填写如下Client JS脚本和Server JS脚本。

注意：IOT-Tree的UI运行在Client端，所以即需要Client端运行JS动作，也需要服务端动作：

其中，Client端弹出操作员密码验证，如果验证通过，则触发服务器端（也即是IOT-Tree Server端） 运行JS。而server js，就一行，对数据标签写入16。

对于红色的停止按钮，也类似，你只是把Client提示和Server端写入的值调整一下即可。

2.9.3 设置操作员和密码

操作员和密码可以在项目根节点的属性Operators设置，可以有多行，每行代表一个操作员：账号=密码.

这样配置之后，你启动项目，然后“Access”访问mainui运行画面，点击启动或停止按钮，会弹出操作员用户和密码验证输入——这样可以避免误操作（详细内容可以参考IOT-Tree自带的文档）。 只有验证通过了，指令才能真正下达。同时在一定时间之内，下一次下达指令是不需要验证的。

2.10 最终整体装饰

我们在画面中心上方，放置项目名称，整体调整美化，就完成监控画面了。

3 运行监控画面并测试

启动项目。在mainui鼠标右键，选择“Access”，就可以查看此监控画面的URL。这个上面已经提到过。

我们在后面的部署文章会讲到，如何使用IOT-Tree的客户端显示这个画面，并且随着监控计算机的启动自动启动。

4 总结

总算写完这篇文章了，说实在我突然体会到，这篇文章如果录制一个视频可能效果更好，我讲解也会轻松一些，并且你们学习也更直观，短时间内可能掌握的东西更多。当然，你们如果觉得上面内容也够了那就算了。如果你们希望看相关的视频，请在评论区留言，给我打打鸡血。