¶
¶ 1.前期准备
本示例建立一个热力站的监控系统相关画面，前提是利用MODBUS SLAVE建立一个完整的热力站虚拟控制器，包括01、02、03、04功能码，对应DI、DO、AO、AI的数据，如下图所示：
上述热力站虚拟控制器的Modbus Slve文件示例，下载链接：
云平台变量导入示例数据，下载链接：
建立设备：
新建从机1及变量，或者从文件导入变量，从机地址：1
导入从机变量方法：第一步建立设备，设定Modbus/RTU协议；第二步为该设备建立1#从机、2#从机；第三步分别选中1#从机、2#从机导入对应的变量excel文件。
新建从机2及变量，或者从文件导入变量，从机地址：2
说明：上述虚拟设备中模拟了一个常规热力站系统的数据。设备变量监控画面示意如下：
¶ 2.画布属性设置
点击画布空白处，设置画布属性如下图所示
- 选中”辅助线√”，画布区域会出现背景栅格，以指示画布区域辅助构图；
- 操作区缩放至40%是为了演示整体效果，默认值是100%，一般不需要更改，保持该默认值，可实现“所见即所得”；
- 画布宽和画布宽设置为1920X1080像素，和最终显示装置分辨率有关，软件界面为浏览器加载可以自适应；
- 画布颜色选择深黄色是为了演示整体效果，默认颜色为透明，一般保持透明即可；
- 整体背景选择藏青色是为了演示整体效果，默认颜色为透明，一般保持透明即可；
- 画布背景可选择上传或清除背景，且上传背景图被锁定方便以此背景为基础构建画面，一般可以不进行背景上传；
- 画布操作通过复制和黏贴按钮对编辑画面进行快速操作，此功能暂时需要额外操作，暂不需要使用；
- 大小和位置设定，暂时无需设置。
后续开发中，画布颜色、整体背景均使用透明色，操作区缩放保持100，开启辅助线模式，画布尺寸为1920X1080
¶ 3.设置标题
- 图库→标题背景（第一个元件）→属性基本设置（点击原比例按钮）→放大元件并放置于画布顶部中间；
- 基本→文本→属性基本设置(修改文本为“热力站主画面”；字体高度30；字体颜色为红色)；
- 将文本位置移动至标题背景图片的中间位置（若看不到文字，可能原因是二者放置于画布的顺序问题，可以通过右键菜单更改其图层位置）；
- 同样方式将基本→时间元件放置于标题背景的合适位置，并修改其颜色及字体高度。
- 点击保存按钮后，点击预览，效果如下图：
¶ 4.放置2台换热器并执行对齐操作
从“加热器”图库中选择换热器元件，放置于画布，右键复制粘贴为第二台换热器（或继续从图库中拖拽），用鼠标选择2台换热器后点击鼠标右键，选择菜单中第1项中的箭头类图标实现设备对齐，如下图所示：
¶ 5.放置2台水泵至合适位置并执行对齐操作
从“组件”中选择指示灯元件，放置于画布，默认显示图形如下图：
选中元件点击右键，选择“功能设置”，如下图所示：
从上图可以看出，该元件包含两个图形，满足第一个条件时显示灰色按钮，满足第二个条件时则显示绿色按钮，绑定变量就实现了动画功能，随着数据变化则显示不同的画面，本例中要实现水泵动画，则只需要更改不同条件对应的图形即可，操作图片旁边的绿色按钮则可以从图库中加载对应的图形对象。如下图所示：
上图中，变量为0时显示一个静止的水泵图片，变量为1时对应一个动态的水泵GIF动画，这就可以根据开关量的状态实现水泵停机于启动时的不同状态了。下面只需要绑定对应的设备变量即可，如下图所示：
