本文章是一个项目系列文章的第八篇，这个系列文章非常详细，真的可以说是手把手拉着你在现场做实际的项目一样。如果你还不了解前面的内容，请参考
前面的文章，我们完成所有的设备安装、连接、调试和软件数据接入工作。此时我们在现场，就需要根据实际的样子，给计算机系统制作一个日常永远运行的监控画面。否则，我们没法给用户交代呢！用户看你完成工作的精彩程度都在里面了。你现场的设备接线、协议等等你感觉技术内在牛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?"监测有漏水":"无"; class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">
评论记录：
回复评论：