【贝加莱PLC基础教学】4.AutiomationStudio界面交互与仿真-CSDN博客

本文章主要延续2.5章节中基础编程和仿真的功能继续完成HMI人机交互界面控件的学习，其中涉及到的重点为MappView和MappService以及OPC-Ua通讯等配置。在2.5章节中，我们利用触控屏和CPU完成了基本的组态进行仿真，还编写了一小段代码，并且在仿真中监视到了变量的数值，这是本次教学的基础，如果该部分尚有问题的读者，先去学习贝加莱PLC基础教学1 和 2.5 的文章，然后再来学习本文章。

一、MappView基础

1.1 mappView配置

第一步，同添加Program代码块一样，我们在LogicalView中空白处点击，然后在右侧ToolBox中选择mappView文件夹中的控件。但是，可能很多读者会遇到mappView文件夹空白的问题（如果没有遇请跳转下面第三步）：

第二步，在上述问题中，我们可以先去贝加莱官网中下载对应的MappView和MappService插件补丁。具体操作如下：（一般的插件和缺少的补丁也可使用该方法！如果是缺少硬件请使用右上方的搜索来检索）

在贝加莱官网上右上角选择下载，选择Software、Automation Studio、Automation Studio4.12等，然后选择全文检索mappView（mappService同理），mappView和mappService应保证版本相同。

下滑找到贝加莱mapp技术和技术包，选择对应版本。本次教学使用的为5.21版本。

下载完成后，在AS软件的tool栏中Upgrades，

选择local，找到下载地址后，勾选mappService和mappView进行下载。

下载完成后，在菜单栏Project--Change Runtime Versions中修改mappView和mappService版本：

选择5.21版本（或者其他版本也可，保证两者相同最好）。然后Apply和Ok即可。

1.2 页面和布局配置

（这里我们强烈建议！先执行第十二步再进行第三步操作，这样就免去了对visualization.xml的后续配置和编写，会自动生成和关联配置操作）

第十二步，我们打开左侧的ConfigurationView，然后在选择其中的mapView文件夹，再选择右侧的mappViewConfiguration和Visualization。

在appViewConfiguration这个中加入vis_0(其实是Visualizat.vis文件自动生成的内容），如下操作，点击ConfigurationView--mappView--Visualist.vis，复制这个vis号，再点击Config.mappviewcfg，将vis号复制到ID of default visualization中，点击保存：

第三步，同第一步一样，在toolbox栏中选中mappView，将mappView文件夹拖到左侧的LogicalView中，如下所示：

第四步，继续将mappView文件夹下的Visualization拖到刚刚的mappView下，效果如图2：

第五步，配置Pages，Pages就是你所需要的窗口，比如在此处我们需要两个窗口，就在Pages下从右侧toolbox拖入两个Page到Pages下，并且立刻进行重命名和在Properties窗口（Properties窗口默认在AS软件最下方的窗口栏中）中更改PageId，这是一个好习惯，容易避免混淆：

第六步，以上我们就添加了两个Page，但是我们发现有个提示No Layout Referenced，本步骤需要向mappView文件夹的Layout文件夹中加入Layout。选择LogicalView中的Layout文件夹后，右侧会出现如下所示layout，选择最简单的layou添加即可，其他layout读者也可以自行探索和使用，并不难。

第七步，回到Pages的page的.page文件来将layoutId绑定layout（在properties窗口中，如果点击.page文件没用可以多尝试切换着点几次），这里我们将两个page都绑定同样的布局并保存：

第八步，我们在logicalView中点击Firstpage这个文件然后将右侧的PageContent加入到Firstpage文件下，另一个Page同理。

第九步，我们发现Content.content文件夹重名了，这让我很不舒服，但是右键却没有Rename选项，也无法双击它然后在properties窗口中更改，这时候我们可以右键点击Content.content然后选择--Open--OpenAsText，并在其中更改。这里我们更改为Content_first和Content_second来对应不同page和layout，记得随手保存（后面当点击content依然为文本时，可以关闭，在重新打开即为可视化图形界面）：可直接双击在properties窗口中更改name和high和weight（这里high和weight注意和区域大小保持一致，这里因为这个layout只有一个区域所以只需要和layout一致即可）

第十步，我们点击Page中的.page文件，比如这里的PageFirst.page，然后点击黑白格区域（点击黑白格区域和点击外围的灰框框区域是不一样的对象！黑白格是layout的区间对象，可以用于绑定Content；外围的灰框框区域是page，用于绑定layout对象。点击这两个部分导致了properties窗口中展示的信息不同！请务必注意！）然后我们依次绑定content即可，content是会被消耗的，一个区域只能绑定一个content，一个content也只能被一个区域绑定；一个layout可以有多个区域；一个page只能有一个layout。

在绑定的地方，另外我们还可以将两个窗口设置不同的颜色（在Properties窗口的Appearance--backColor中），这里我们就设置一个白一个绿吧，然后保存。

此时我们开启仿真并保证仿真已经开启和连接（标志为AS软件右下角出现绿色的RUN图标），然后点击Ctrl+F5或者直接找到Transfer按钮下载。（如果这里不会的同学请看本系列文章的第2.5篇教学）。

第十一步，下载完成后，我们去浏览器然后输入127.0.0.1:81再按回车进入；这里127.0.0.1的意思是仿真器的地址，81是通讯端口。但是看到的结果是却是no visuld specified。这是因为我们没有配置mapView相关文件。

第十二步，我们打开左侧的ConfigurationView，然后在选择其中的mapView文件夹，再选择右侧的mappViewConfiguration和Visualization。

然后保存编译，发现会出现报错Start page is missing。这是因为在visualization文件中没有编写相关设置导致的。在visualization.xml文件中以xml格式补全即可(补全StratPage和Pages这一段即可，其中的Page refid都是pageid，可以通过点击page控件然后点外部灰框框，点击属性页看到），补全代码如下所示，然后保存编译就没问题了。

<?xml version="1.0" encoding="utf-8"?>
<vdef:Visualization id="vis_1" autoUpdate="true" xmlns:vdef="http://www.br-automation.com/iat2015/visualizationDefinition/v2">
  <StartPage pageRefId="PageFirst" />
  <Pages>
    <Page refId="PageFirst" />
    <Page refId="pageSecond" />
  </Pages>
  <Navigations>
    <!--<Navigation refId="" />-->
  </Navigations>

1.3 基础控件配置

【控件变量绑定前置步骤】

首先我们需要打开OPC-UA协议，让CPU支持这个协议通讯。在PhysicalView视图中，选中CPU就是5PPC3100_KBU1_000右键选择Configuration，打开OPC-UA System，将Activate OPC-UA System从off改成on。

我们目前声明的变量在Program中，即使是在全局变量也是Global.var变量表中，而MappView怎么监控这些变量，需要一个OPC-UA的协议。具体的操作为：首先我们打开ConfigurationView，点击CPU项目文件夹下的Connectivity文件夹：

然后点击OpcUA文件夹选中，这时再去右侧打开toolbox，可以找到一个OPC UA Default View File，如下图，我们将该File拖动到左侧OpcUA文件夹下，会生成一个OpcUaMap.uad文件。

打开OpcUaMap.uad文件，对需要和展示控件绑定的变量选中，然后右键点击Enable Tag，这时，会发现对应的变量从灰色变为了黑色，然后保存即可（如果有同学发现Enable Tag以后，在控件的属性界面还是没有该变量可以绑定，可以关闭对应的Content重新打开再选择变量即可）。

1.3.1 文本输入输出

第十三步，我们点击content，比如第一个page下的contentfirst，然后在右侧选择toolbox，在其中查找numeric，找到NumericInput和NumericOutput两个控件，将其拖入到中间的幕布中。仔细观察，其中右侧带一点点黑边的为输入控件，而四周大小均匀的为输出控件。

第十四步，我们在画布中点击这个NumericInput或者NumericOutput控件选中，然后在打开Properties窗口找到Data下的value，然后选择变量绑定，记住一定要绑定到iNum的最底层value上，不要绑定iNum的节点。同理，我们将另一个控件也绑定iNum的value上，然后开启仿真下载。

第十五步，打开浏览器输入127.0.0.1:81，查看画面是否正常：

1.3.2 按钮控件

按钮控制主要介绍两种，一种是用于界面切换的按钮NavigationButton，另一种是开关toggleButton。

界面切换的按钮NavigationButton：

第十六步，在右侧toolbox中将NavigationButton拖入到两个Content中（如果找不到NavigationButton，可以直接在toolbox上方的搜索框中搜索）。

第十七步，点击选中NavigationButton后，在右侧Properties中将text进行修改，修改为功能清晰的文本，比如ToSecondPage；另外关键的在于将Data下的pageId绑定，这里我们需要从界面一跳转到界面二，所以绑定pageSecond（需要注意的是，如果绑定后，又对在page属性中对pageId进行了修改，其他控件需要重新绑定pageId的变量）。

第十八步，对另一个Page添加一个同样的NavigationButton，也按第十七步进行同样的操作和配置。

第十九步，在仿真下进行下载并且通过浏览器127.0.0.1:81查看效果（可以做到来回切换的功能）

开关toggleButton：

第二十步，我们再向ContentSecond中加入另一种button，叫ToggleButton。点击选中contentsecond，然后点击右侧toolbox，将其中的ToggleButton拖入到content中。

第二十一步，我们再向content中加入一个普通button，并且设置backColor为绿色、disabledBackColor为红色，cornerRadius为100px，再将下面的text删除按回车。并且在画布中将该button向内拉成一个圆。即可得到下图所示的圆。

第二十二步，继续设置这个圆形button和ToggleButton的属性。我们将ToggleButton的value绑定为下面bLight的value，如下图所示；再选中那个圆形button将它Bahavior下enable的值也绑定为bLight的value，如下面第二张图所示。

第二十三步，效果验证，打开仿真将其下载，然后在127.0.0.1:81去测试效果。

1.3.3 媒体插入

第二十四步，选择LogicalView，点击mappView中的Media，然后在右侧toolbox中选择ExistingFile，并选择合适的图片加入即可。

第二十五步，选择当前需要添加图片的Page下的content，在右侧toolbox中加入控件image。

第二十六步，打开image控件的属性栏，选择image栏，点击default，选择刚刚加入的图片即可。再将该图片拉伸到合适的大小。

第二十七步，仿真验证，可以看到仿真127.0.0.1：81地址中已经加入了该图片。

1.3.4 进度条

为了动态模拟水箱的液位状态，讲解一种控件ProgressBar。该控件会随着其绑定数值而动态显示。

第二十八步，同样的点击content，然后在右侧toolbox中搜索progressbar：

第二十九步：我们发现该进度条为横式，并且颜色为橙色，和水箱状态预期不太符合。接下来在progressbar的Properties界面中进行属性修改，使之变得合理一点：

然后将其value绑定到iNum的value：

效果如下：

依然可进行仿真下载验证效果：

1.3.5 曲线控件

曲线控件可以非常直观的展示液位等信息变化情况。

第三十步，选择合适的content，并且点击右侧的toolbox加入OnlineChartHDA：

点击该控件的属性栏，点击Collections下的graph，将其中的Binding绑定到iNum上。（还有很多其他功能，比如多曲线显示、显示离散还是连续，显示颜色等等请自行探索）

最后仍然是进行仿真验证：

总结

作为工业控制软件的HMI界面，首先主要的原则就是功能齐全，能考虑到各种情况，控件功能不冲突，其次作为HMI界面，需要考虑到用户的体验，界面制作尽可能整洁、美观，并且尽量使用直观的表达以及常见单位，必要时也可加入文本进行叙述说明。希望各位读者能从本文中学习到贝加莱MappingView的基础知识，熟练应用加以创新，创造出更现代化更智能化的工业系统。