反应罐(填充动画型)转化成亚控商城精灵图

一、目标


组态工程师，基于生成器快速开发出具有填充动画的反应罐精灵图，在云组态王中可实现：开发态拖拽到画面中，配置连接实时变量、填充量程，运行态根据实时变量值实时填充液位状态的效果。


二、实现效果


运行态：
反应罐填充

开发态：
点击配置，打开配置页，可配置变量、量程参数信息。

三、前置准备

        
图片素材：

3D效果的反应罐体

填充动画类配置页模板：

四、开发流程

五、开发步骤



1、2D模型中开发反应罐


1、进入开发工具，新建2D模型

2、创建图片图素容器

3、添加反应罐图素

5、按图片大小设置位置、尺寸

6、设置2D画面的锁定宽高比策略

7、创建填充动画，新建变量

2、2D反应罐配置填充动画


1、双击矩形

点击画刷，类型选择线性填充

               


2、进入时事件脚本配置

进入时：

1. debugger
   
2. let pageName = "反应罐_配置页";
   
3. ShowChild(pageName, {
   
4.     styleOptions: {
   
5.         width: 454,
   
6.         height: 272,
   
7.         top:200,
   
8.         header: true,
   
9.         closable: true,
   
10.         title: "配置",
    
11.     },
    
12.     variables: [{ //将变量名传递给子配置页
    
13.         name: "tagname", //子配置页变量名
    
14.         value: $Variable.name //本页变量名
    
15.     },
    
16.     {
    
17.         name: "MAX_VALUE",
    
18.         value: $Variable.MAX_VALUE
    
19.     },
    
20.     {
    
21.         name: "MIN_VALUE",
    
22.         value: $Variable.MIN_VALUE
    
23.     }]
    
24. }, (res) => {
    
25.     debugger
    
26.     let eventParam = res.eventParam;
    
27.     if (res.eventName === "cancel") {
    
28.         CloseChild(pageName)
    
29.     } else {
    
30.         if (eventParam[0] != "") { //判断是否直接点击确认按钮
    
31.             let data = JSON.parse(eventParam[0]);
    
32.         
    
33.             // let int_w = {
    
34.             //     linkDataObjInfo: {
    
35.             //         id: data.WID,
    
36.             //         type: 2802,
    
37.             //         valueType: data.tagDataType
    
38.             //     }
    
39.             // }
    
40.             let int_R = {
    
41.                 linkDataObjInfo: {
    
42.                     id: data.DATAID,
    
43.                     type: 2802,
    
44.                 }
    
45.             }
    
46. 
    
47.             $ClientProject.SetVariable({
    
48.                 name: "液位值",
    
49.                 value: int_R
    
50.             }, (res) => {
    
51.                 debugger
    
52.                 console.log(res)
    
53.             })
    
54.             // $ClientProject.SetVariable({
    
55.             //     name: "变量_写",
    
56.             //     value: int_w
    
57.             // }, (res) => {
    
58.             //     debugger
    
59.             //     console.log(res)
    
60.             // })
    
61. 
    
62.             $ClientProject.SetVariable({ //变量名持久化
    
63.                 name: "name",
    
64.                 value: data.name
    
65.             }, (res) => {
    
66.                 debugger
    
67.                 console.log(res)
    
68.             })
    
69.             
    
70.         }
    
71.         //参数处理
    
72.         $Variable.MAX_VALUE = eventParam[1];
    
73.         $ClientProject.SetVariable({ //变量名持久化
    
74.                 name: "MAX_VALUE",
    
75.                 value: eventParam[1]
    
76.         }, (res) => {
    
77.             debugger
    
78.             console.log(res)
    
79.         })
    
80.         
    
81.         $Variable.MIN_VALUE = eventParam[2];
    
82.         $ClientProject.SetVariable({ //变量名持久化
    
83.                 name: "MIN_VALUE",
    
84.                 value: eventParam[2]
    
85.         }, (res) => {
    
86.             debugger
    
87.             console.log(res)
    
88.         })
    
89.         
    
90.         CloseChild(pageName);
    
91.     }
    
92. })

复制代码

全部制作完后点击保存



3、页面模型中开发反应罐配置页面




1、新建配置页面

2、使用配置页模板直接导入现成的配置文件（JSON格式）

3、或者使用左侧的布局容器，自定义配置所需的配置页面字段

4、配置页创建所需的变量

5、编写配置页【请选择】按钮脚本（触发打开变量选择器）

1. ShowDataLinkPage(function(res){
   
2.     debugger
   
3.     if(res.eventName === "submit"){
   
4.         
   
5.         let data = {
   
6.             DATAID:  res.eventParam[0].DATAID,
   
7.             WID: res.eventParam[0].WID,
   
8.             name: res.eventParam[0].name,
   
9.             tagDataType: res.eventParam[0].tagDataType
   
10.         }
    
11.         $Variable.data = JSON.stringify(data);
    
12.         
    
13.         ElementInput1.value = res.eventParam[0].name;
    
14.     }
    
15.     //直接关闭变量选择器
    
16.     CloseChild();
    
17. })

复制代码

6、编写确定按钮点击事件脚本（同请选择按钮）

1. debugger;
   
2. let tagTrue = 0;
   
3. 
   
4. 
   
5. if (ElementInput1.value == "") {
   
6.     ShowMessage({
   
7.         message: '变量名不能为空！',
   
8.         type: 'warning'
   
9.     })
   
10. } else if (ElementInput1.value == $Variable.tagname) { //变量未重新选择，允许确认
    
11.     tagTrue = 1;
    
12. } else {
    
13.     if ($Variable.data != "") { //变量已选择
    
14.         let data = JSON.parse($Variable.data);
    
15.         let dataType = data.tagDataType;
    
16.         if ((dataType == "bool") && (dataType == "string")) { //数据类型检验
    
17.             ShowMessage({
    
18.                 message: '变量类型不匹配！',
    
19.                 type: 'error'
    
20.             })
    
21.         } else {
    
22.             tagTrue = 1;
    
23.         }
    
24.     } else {
    
25.         $Event.cancel();
    
26.     }
    
27. }
    
28. 
    
29. 
    
30. let check = tagTrue && ElementInput2.ValidateCheck() && ElementInput3.ValidateCheck();
    
31. if (check) {
    
32.     $Variable.MAX_VALUE = Number(ElementInput2.value);
    
33.     $Variable.MIN_VALUE = Number(ElementInput3.value);
    
34.     $Event.submit($Variable.data, $Variable.MAX_VALUE, $Variable.MIN_VALUE);
    
35. }

复制代码

7、编写取消按钮点击事件脚本

1. $Event.cancel();

复制代码

8、创建时事件脚本

1. debugger;
   
2. //数据加载至配置页组件；
   
3. ElementInput1.value = $Variable.tagname;
   
4. ElementInput2.value = $Variable.MAX_VALUE;
   
5. ElementInput3.value = $Variable.MIN_VALUE;

复制代码

9、自定义公共事件创建，默认创建submit、canel

通过以上步骤完成精灵图配置页面的开发。

4、精灵图绑定子配置页


1、再次打开2D反应罐精灵图页面

名称填写为配置页名称。

通过以上步骤完成精灵图的所有开发工作。

5、扩展


         云组态王精灵图除填充效果外，还可实现旋转、移动、显隐等效果，应用面十分广阔，可运用于许多工业设备，如电机、阀门、传感器、仪表、风机、信号灯、按钮等工业元件，不仅可以的实现一个动态效果，还更加简洁美观，操作更加简便。