![](https://www.hongrax.com/wp-content/uploads/2024/01/干货.jpg)
通过之前的教程,我们已经为大家演示了宏集MC-Prime控制器的连接、试运行和CODESYS的安装,并创建了一个计数器项目。在本期教程中,我们将进一步深入,教大家如何使用CODESYS的可视化界面。
(一)两种可视化方式
在CODESYS V3中,可视化界面分为两种类型:目标可视化和网络可视化。二者之间存在着一些本质上的区别。
- 目标可视化:目标可视化(Target visualization)主要是针对一些带有集成屏幕的控制器(如宏集DC系列)。如果是没有屏幕的控制器,则需要通过在控制器上运行VNC服务器来使用目标可视化。目标可视化可以在一个或多个VNC客户端上显示。需要注意的是,目标可视化在所有连接的客户端上都会显示相同的图像,因此无法区分不同的客户端,也无法同时使用多个目标可视化。
- 网络可视化:网络可视化(Web visualization)则会启动一个Web服务器,并提供基于HTML5和JavaScript的网页。通过浏览器或与HTML5兼容的设备,网络可视化得以显示。与目标可视化相比,网络可视化能够区分多个同时使用相同的可视化界面的个人用户,也可以同时运行多个网络可视化。这意味着可以通过一个控制器来控制和评估不同的屏幕。
(二)实现可视化
为了能够在应用程序中使用可视化功能,必须首先添加一个具有“可视化管理器”类型的对象,步骤如下:
01 插入视图管理器:请在设备视图中选择您的“应用程序”对象,然后右键单击以打开上下文菜单。首先选择“添加对象”,然后选择“视图管理器”。
![](https://www.hongrax.com/wp-content/uploads/2024/01/1.png)
![](https://www.hongrax.com/wp-content/uploads/2024/01/2.png)
在插入名为“视图管理器”的对象后,系统会自动创建一个网络可视化和一个目标可视化。需要注意的是,本教程使用的控制器宏集MC-Prime仅支持网络可视化功能。
此外,系统还会创建一个名为“VISU_TASK”的新任务。图形界面始终独立于其他任务运行。默认情况下,“VISU_TASK”的周期时间为100毫秒,优先级为31,意味着可视化任务的优先级最低,这样可以确保界面不会阻碍具有实时优先级的任务的执行。
02 添加对象:插入“可视化管理器”后,现在可以创建“可视化”类型的对象。再次打开应用程序菜单,并添加一个具有“可视化”类型的对象。
![](https://www.hongrax.com/wp-content/uploads/2024/01/3.png)
![](https://www.hongrax.com/wp-content/uploads/2024/01/4.png)
03 进行配置:现在,通过选择设备树中可视化管理器下面的相应对象并双击,打开网络可视化的设置,按如图所示步骤进行配置:
![](https://www.hongrax.com/wp-content/uploads/2024/01/5-1024x632.png)
您可以为每个网络视图指定一个名称。此名称决定了可访问网络视图的URL。网络视图的web服务器运行在控制器的端口8080上。网络视图的默认路径是:http://[IP-redder Steuerung]:8080/webvisu.htm
04 扩展主程序:
下一个目标是创建一个可视化工具以显示我们主程序中的一些变量,并使用框架来实现单个可视化的可重用性,将一个可视化嵌入到另一个可视化中,实现一个灵活且可重用的可视化工具,更方便地监视和控制您的程序的状态和参数。
为了实现这些目标,我们首先必须扩展我们的主程序,即我们的“应用程序”类型的“Main”对象。在“Main”程序中,定义其他变量:
→名称为“cotuner_enabled”的BOOL类型变量,作为第一个计数器变量。
→名称为“counter2”的INT类型,作为计数器变量。
→名称为“counter2_enabled”的BOOL类型变量,作为第二个计数器变量。
→名称为“input”的BOOL类型变量,用于存储数字输入的值。
→名称为“output”的BOOL类型变量,用于设置数字输出的值。
为此,使用IF语句检查变量的当前值,然后执行相应的操作。下图显示了完整的“Main”程序。
![](https://www.hongrax.com/wp-content/uploads/2024/01/6-1024x505.png)
05 定义变量:为了能够为这两个元素提供额外的功能,我们在可视化的界面编辑器中另外定义了两个IN-OUT变量:一个名为“counter”的INT类型变量和一个名称为“enabled”的BOOL类型变量④。
首先,我们将使用“enabled”变量来设置切换开关的状态。在可视化编辑器中选择开关,现在在右侧的“属性”窗口中将属性“variable”设置为“enabled”的值。因此,拨动开关总是与变量“enabled”⑤具有相同的状态。
![](https://www.hongrax.com/wp-content/uploads/2024/01/8-1024x409.png)
(三)可视化集成框架
由于在演示中定义了两个不同的计数器,因此您还需要两个文本框和两个开关来显示计数器读数,并激活或停用计数器。这是通过在另一个可视化中集成两帧-frame来实现的。在框架-frame的帮助下,可以实现多个嵌套,使帧再次嵌入到其他帧中。如此,您可以使用许多简单的元素来开发一个模块化的界面。
01 设置第一个框架:编辑“Visualization”可视化①,并在“工具”窗口中的“基本”类别中插入可视化元素“frame”。然后选择框架②,会自动进入“框架配置”窗口。选择对应的视图,并添加到”Visualization”中③,如图:
![](https://www.hongrax.com/wp-content/uploads/2024/01/10-768x419.png)
编辑“Visualization”可视化①,并在“工具”窗口中的“基本”类别中插入可视化元素“frame”。然后选择框架②,会自动进入“框架配置”窗口。选择对应的视图,并添加到”Visualization”中③,如图:
![](https://www.hongrax.com/wp-content/uploads/2024/01/11-1024x356.png)
02 复制框架:完成了第一个框架的配置后,您现在可以使用键组合“CTRL+C”在编辑器窗口中复制框架,然后用“CTRL+V”粘贴它。插入框架的副本后,用鼠标将框架拖动到正确的位置。请注意,Main函数中的变量“Main.counter2”和“Main.counter2_enabled”必须作为框架的属性输入。如果跳过此步骤,第二个帧也将显示第一个计数器的值。
![](https://www.hongrax.com/wp-content/uploads/2024/01/12-1024x425.png)
02 复制框架:点击登录并下载程序①,编译无误后可以看到界面显示“在线视图正在等待连接,请启动应用程序”,点击启动②
![](https://www.hongrax.com/wp-content/uploads/2024/01/13.png)
可以看到如图所示的可视化界面,点击按钮可以看到计数器的数值变化:
![](https://www.hongrax.com/wp-content/uploads/2024/01/14.png)
此时,打开浏览器,输入对应的路径,同样可以看到配置好的可视化界面:
![](https://www.hongrax.com/wp-content/uploads/2024/01/15-1024x619.png)
结语
就此,我们已在宏集MC-Prime上完成了CODESYS安装、应用程序创建与可视化的全过程。您可以尽情享受使用您的控制器。
订阅邮件
关于宏集
宏集科技(上海)有限公司是广州虹科电子科技有限公司旗下的子公司。依托于总公司在工业领域多年的技术经验和客户积累,宏集科技为国内外数字化和智能化工厂提供面向工业现场控制级、边缘级、过程监控级和云端的解决方案,致力于帮助各行业推动数字化转型升级。我们与全球顶尖工业技术团队开展深度合作,提供包括物联网HMI、网关、工业树莓派、SCADA解决方案、边缘计算解决方案、OPC通信方案、MQTT通信方案、预测性维护方案、传感器方案等在内的多种工业自动化解决方案。我们已为石油、化工、海洋海事、医药、食品、包装、汽车、钢铁等多个行业超过300家用户提供了从硬件到软件的不同方案,广受客户的好评与信任。
选择宏集科技,就是选择专业和可靠。我们将为您提供一站式解决方案、个性化定制服务以及专业可靠的售后技术支持,省时高效,助力企业实现自动化升级与数字化转型。