昆仑通态触摸屏开发实战:日期显示与透明按钮技巧解析

发布时间:2026/10/6 11:59:25
昆仑通态触摸屏开发实战:日期显示与透明按钮技巧解析 搞工控的现场绕不开昆仑通态这块屏。国产触摸屏里它的出货量一直很猛价格亲民、组态软件上手快中小型自动化项目里几乎成了标配。但真到开发HMI界面的时候很多人还是老一套思维放几个按钮、绑几个变量、下载完事。等你做到那种带产品图片、带工艺流程图、带日期时间戳的精致界面时才发现按钮把画面挡住了、日期格式不对、U盘下载老是失败。这篇文章我就拿一个完整的昆仑通态触摸屏开发项目当例子从新建工程讲到下载运行重点拆解日期显示和透明按钮这两个经常被新手卡住的技术点。内容偏实战适合正在做自动化项目、需要自己搞定触摸屏画面的电气工程师和调试人员。1. 开发前的认知摸清设备选型与软件环境做任何触摸屏项目我习惯先确认两件事手里这块屏的硬件型号以及电脑上装的是哪个版本的组态软件。这两个问题不搞清楚后面编译下载时会出现各种莫名其妙的问题比如“工程类型不匹配”“组件版本过低”之类的报错实际全是版本不配套导致的。1.1 硬件平台与软件版本怎么配昆仑通态主流的是TPC系列也就是McgsTpc嵌入式一体化触摸屏。常见的有TPC7062K、TPC1061Ti、TPC1262H等型号尺寸覆盖7寸到12寸。不同型号的分辨率差异很大比如TPC7062K是800×480TPC1061Ti是1024×600。设计界面之前一定要在组态软件里把工程的分辨率设置成和硬件一致否则画面会出现拉伸变形甚至显示不全。软件方面昆仑通态对应的是Mcgs嵌入版组态软件也就是我们常说的MCGS嵌入版。注意它和MCGS通用版是两套软件不能混用。嵌入版目前常见的有7.7、7.8等版本安装包在官网能下载到安装的时候最好用管理员权限运行否则后面打开历史数据库或者做U盘下载包时容易报权限错误。我这里用的是7.7版本整体以这个版本为例讲解旧版本界面稍有差异但逻辑相同。1.2 新建工程的几个关键设置打开MCGS嵌入版后第一步是新建工程。点击“文件—新建工程”它会弹出一个工程向导让你选择触摸屏型号。我建议你直接选和目标屏对应的型号比如TPC1061Ti。如果列表里找不到就选一个分辨率相同的相近型号问题也不大但后续做U盘下载时可能需要手动指定设备类型。工程建完后第一件事是设置“工程属性”。右键左侧“工程管理”里的工程名进入属性页重点检查三个地方分辨率、启动窗口、运行策略周期。分辨率必须和屏一致启动窗口就是你开机后默认显示的那一页画面运行策略周期保持默认的100ms即可这不是越小越好太小了反而增加CPU负担。等这几项设置完再统一规划整个工程的画面结构。我通常的习惯是第一页做主页面放按钮和状态指示第二页放工艺参数设置第三页放报警信息第四页放历史趋势曲线。这样把画面分好区后面组态时思路清晰不会出现变量到处乱放、窗口互相跳转混乱的情况。2. 界面搭建的整体设计思路很多新手一上手就直接拖控件拖完再绑定变量结果做到一半发现窗口结构乱套、变量名也不规范改起来极其痛苦。这一步我先讲讲整个项目的逻辑骨架等骨架清楚了后面填内容就快得多。2.1 用户窗口体系怎么规划MCGS里画面叫做“用户窗口”每个窗口对应一页显示画面。窗口和窗口之间可以通过按钮的“打开窗口”功能互相跳转。我建议在工程里规划一个主窗口和若干子窗口主窗口放总览信息和导航按钮子窗口放具体的操作页面。这样做的好处是现场操作工只需要点主页面上的导航按钮就能快速进入对应功能页不用来回翻页。窗口之间的切换有两种方式一种是通过按钮的“抬起动作”关联“打开窗口”策略另一种是在运行策略里用脚本设置“!OpenWindow(窗口名)”。前者适合初学者鼠标点点就行后者适合需要带参数跳转或者做权限判断的场景。我用的最多的是按钮关联方式因为直观、好维护。每个子窗口右上角放一个“返回主页面”按钮动作就是打开主窗口这个习惯从第一个项目保持到现在现场操作工反馈说特别好用。2.2 数据对象触摸屏与PLC沟通的桥梁在MCGS里变量不叫变量叫“数据对象”。这个理解起来很简单数据对象就是触摸屏内部存数据的地方你的按钮改的是数据对象的值PLC读的也是数据对象的值两边一匹配控制逻辑就通了。打开工程左侧的“实时数据库”你会看到里面已经自带了一些系统变量比如$Date、$Time、$Year等这些是系统自动维护的不能删除。我们开发时要新建自己的数据对象命名建议用“前缀_功能名”的格式比如启动按钮关联的变量叫“M_Start”温度显示对应的数值变量叫“AI_Temp”。这样变量多了以后程序查起来一目了然不会出现一堆“数据001”“数据002”这种看了就头大的名字。数据对象主要分四种类型开关型对应BOOL0或1、数值型对应整数或浮点数、字符型存文本、对象型一般用不到。做按钮控制电机启停用开关型显示温度、压力、流量用数值型显示日期、报警文本用字符型。类型选错是新手最容易犯的错比如把启动信号建成了数值型导致PLC那边死活收不到正确的BOOL值。2.3 设备窗口把变量和PLC寄存器连起来光在触摸屏内部建了变量还不够还要把变量映射到PLC的寄存器地址上。这一步在“设备窗口”里完成。双击设备窗口添加一个通用串口父设备再挂上对应的PLC驱动子设备比如西门子S7-200、三菱FX系列、Modbus RTU设备等。设备窗口里最核心的是“通道连接”设置。比如你建了一个叫M_Start的开关型数据对象想让它对应PLC的M0.0地址就在设备编辑界面找到对应的通道把M_Start填到该通道的“连接变量”栏。这一步相当于接线把触摸屏内部的变量“焊”到了PLC的寄存器上。这里有几个我踩过很多次的坑一是设备通信参数必须和PLC侧完全一致比如Modbus RTU的波特率、数据位、停止位、校验位任何一项不一致触摸屏上就会显示“设备连接失败”或者“采集数据错误”二是地址映射关系一定要清楚不要想当然地认为M0.0就是通道1同一个PLC的驱动类型、Address换算逻辑可能跟手册上的不同三是多个通道的采集周期不要全设成0那会导致通信压力过大尤其是带了很多模拟量点的时候建议把快速变化的通道采集周期设为100ms慢速的设为500ms或1s。3. 日期显示的无痛实现方法标题点名的第一个核心功能日期显示。别看这个功能小几乎所有项目都会用到——现场操作工需要知道当前时间报警记录也要带时间戳。而昆仑通态实现日期显示的方式有好几种我一个个讲各有适用场景。3.1 最省事的方式直接关联系统时间变量MCGS嵌入版内置了一组系统时间变量$Date日期字符串、$Time时间字符串、$Year、$Month、$Day、$Hour、$Minute、$Second。这些变量每秒钟自动刷新不需要你写任何脚本来维护。最简单的做法是在用户窗口里放一个“标签”控件也就是字符串显示控件在它的属性里把“显示输出”关联到$Date变量运行时它就会显示类似“2025/01/15”这样的日期。再加一个标签关联$Time就能显示“14:30:25”格式的时间。但注意$Date的显示格式是固定的直接拿来用虽然能用但不少项目里客户要求显示“2025年01月15日”或“2025-01-15”这种格式这时候直接用$Date就不满足了。我一般在项目现场会先问一句“日期格式有没有要求”如果客户说“随意”那就直接用$Date如果客户提了具体的格式要求就用下面两种方式处理。3.2 自定义日期格式的两种组合方案第一种方法是把标签关联到$Year、$Month、$Day这三个数值型系统变量然后在标签的“显示输出”属性里设置格式。注意MCGS标签的显示输出支持“字符串连接”功能但操作起来不太直观很多人容易漏掉。更稳妥的做法是在运行策略里用脚本拼接字符串然后把拼接结果赋给一个字符型数据对象。写一个循环策略执行周期设为1000ms内容大致是strDate !StrCat(!StrCat(!StrCat(!StrCat(!StrCat(!StrCat(!Str(!Year(0)), -), 函数转换月份), -), 函数转换日期), ), $Time)这里的!Str是系统函数用来把数值转换成字符串!StrCat是字符串连接函数。不过说实话MCGS的脚本函数签名在不同版本里略有差异写这种组合脚本容易在编译时报“函数参数个数不对”的错误。我自己实际用得最多的方法是“数值型变量显示格式模板”的路子不写脚本。具体是这样的在实时数据库里新建三个数值型数据对象分别叫Disp_Year、Disp_Month、Disp_Day。在设备窗口里不关联这三个变量而是用“循环策略”脚本定时把$Year、$Month、$Day的值赋给它们。然后画面上放三个标签分别关联Disp_Year、Disp_Month、Disp_Day每个标签的显示输出里设置不同的文本前缀和后缀比如“年”“月”“日”中间再用静态分隔线或者静态文本“-”隔开。这样做出来的日期就是“2025年01月15日”这种漂亮格式而且不用写复杂的字符串拼接函数。3.3 和PLC时钟同步的日期显示方案有些项目对时间精度要求很高或者触摸屏断电时间长了怕系统时间跑偏这时候就要考虑和PLC时钟同步。做法是在PLC里把实时时钟放到特定的寄存器区域触摸屏用设备窗口的通道读取这些寄存器再把读到的数值映射到日期显示变量上。举个实际例子用西门子S7-1200的PLC把系统时钟读取出来存到DB块里然后触摸屏通过S7协议或Modbus TCP读取DB块中的年、月、日数据。触摸屏端不需要任何脚本只要在设备窗口里把DB块的对应地址映射到Disp_Year、Disp_Month、Disp_Day这三个数据对象上就行。画面上的标签显示和上面第二种方案一样。这种方式的好处是日期显示的时钟源是PLC的硬件时钟即使触摸屏断电或者系统时间乱了画面上的日期依然准确。缺点是要占PLC的程序空间和通信资源小项目没必要这么折腾。我一般是客户明确要求时间精度到秒级、或者有多台触摸屏需要统一时间基准时才用这种方案。4. 透明按钮的两种实现路径与实战玩法透明按钮是我最想展开讲的部分因为它太容易被忽略了。做HMI界面时大家都想把画面做得漂亮、有产品图、有背景图但标准按钮一放上去就是一个白底灰框的方块跟整体画面严重违和。透明按钮解决的就是这个痛点——按钮看不见但点击区域还在可以实现“点击图片上的某个区域就触发动作”的效果。4.1 透明按钮的本质原理透明按钮不是什么魔法本质就是一把按钮的填充色和边线颜色全部设为“无”让它在画面上看起来“隐身”但它作为控件的那块矩形区域依然存在照常响应触摸点击。运行时用户看到的是一张完整的背景图片或者工艺流程图点到指定区域就触发控制逻辑感觉就像图片本身可以点击。要注意的是“透明”和“无填充色”在MCGS里是两个概念。透明按钮是让按钮本身看不见但它底下的内容能透上来普通按钮如果只是不设边线填充色是灰色的照样挡画面。所以做透明按钮时填充色和边线色的选择很关键。4.2 方法一普通按钮配合填充色和边线设置这个方法最直观适合新手。在用户窗口里拖入一个“按钮”控件选中它后进入属性设置。在“基本属性”选项卡里把“按钮标题”里默认的“按钮”两个字删掉让它变成空白。然后切到“填充属性”选项卡把填充颜色选成“无”也就是取消背景色填充。再切到“边线属性”选项卡把边线类型选成“无边框”。这么操作完后按钮在组态环境里看着像透明了但还有一圈虚线轮廓。这个虚线是设计时的选中框不影响运行运行时不显示。实际运行时效果就是完全透明的按钮。不过有两点要提醒一是这种透明按钮在MCGS的不同版本里显示效果略有差异有的版本即使设置了“无”填充运行后还会残留一点淡淡的灰色这时候就需要用下面第二种方法二是透明按钮没有实际可视化边界现场调试时自己都分不清点哪里建议在界面上加一行很小的说明文字作为视觉提示。4.3 方法二图片按钮与透明背景的配合如果你手头有透明背景的PNG图片那第二种方法是把按钮做成图片按钮或者在普通按钮上贴一张透明PNG图。这样出来的效果更可控因为PNG图片自带的Alpha通道能保证透明区域完全不显示即使用“打开图片”功能覆盖在按钮上也不会挡住背景画面。具体操作在按钮的“基本属性”里找到“图片”设置点击“选择图片”导入一个透明背景的PNG图。如果没有现成的透明图可以用画图工具把一张纯色图片的背景抠成透明再导出。图片内容可以是圆形、异形甚至是一个小图标。这样按钮的显示外观变成图片本身而点击区域仍然是按钮的矩形区域。换句话说如果你想实现一个圆形按钮但点击区域是外接矩形那也没关系实际点圆形以外的矩形区域也能触发这在现场通常不影响使用只是偶尔会误触介意的话就把PNG的透明区域尽量充满整个矩形。我个人的实践证明这种方式做出来的透明按钮效果比方法一更稳定因为图片覆盖了按钮控件本身彻底避免了版本差异带来的灰色残留问题。需要特别注意的是PNG图片的尺寸要和按钮控件大小匹配否则图片会拉伸变形。MCGS的按钮图片是拉伸显示的最好先量好按钮在画面上的实际像素尺寸再用图片工具生成对应尺寸的图片。4.4 透明按钮在真实项目里的三个高频场景透明按钮做出来不是放着好看的它在几个典型场景里能帮大忙。第一个场景是工艺流程图上的启停控制。很多项目需要在流程图上直接点击某个阀门或者泵来启停设备而不是在旁边的按钮列表里找半天。这时把透明按钮覆盖到流程图上的泵图标上点击它就能启动或停止操作效率直接翻倍。第二个场景是产品图片上的区域点击。比如客户需要在产品展示图上点击不同部位查看参数你就可以在产品图的各个部位分别放置透明按钮每个按钮关联不同的窗口跳转或参数显示。这样界面看起来就是一张完整的图片但每个部位都能响应点击科技感和体验感都很强。第三个场景是背景大图上的导航。做主页面时放一张整体效果图图上画好各个区域的文字和图标然后把导航按钮做成透明的覆盖在对应区域上。这样主页面不会有任何按钮方框的痕迹整个画面浑然一体。透明按钮也有缺点最明显的是没有视觉反馈按下去看不到按钮变化。如果项目里要求操作人员必须看到“按下成功”的反馈建议在透明按钮的“按下”动作里同时做一个全局变量指示让指示灯或文字变色弥补透明按钮没有按下去状态的缺憾。5. 编译、下载与在线调试的全流程实操界面做好了变量也绑定了下一步就是把工程烧到触摸屏里。这一步如果没做好前面所有工作可能都白费。MCGS的下载分为模拟调试和真机下载两种方式我个人建议先模拟、后真机这样能省下大量现场排查时间。5.1 模拟运行怎么用才能更快发现错误在MCGS嵌入版主界面上点“模拟运行”按钮或者按F5系统会启动一个模拟器在电脑上直接运行当前的工程画面。模拟运行时数据对象的值可以在“实时数据库”窗口里手动修改你可以在界面上看到变量变化带来的显示效果变化。模拟运行最大的价值不是看画面好不好看而是验证逻辑对不对。比如你设置了透明按钮但在模拟运行时发现按钮区域点不到那就要检查是不是有别的控件压在它上面再比如按钮关联了“打开窗口”动作模拟时点了没反应那多半是窗口名写错了或者该窗口在工程里不存在。我一般在模拟运行时会专门测试这些场景窗口跳转是否正常、数据对象绑定是否正确、脚本有没有语法错误、日期显示是否按预想格式刷新。如果模拟运行里一切正常再上真机。务必别跳过这一步直接往触摸屏里下载否则现场出了问题定位很麻烦。5.2 U盘下载与以太网下载的操作要点昆仑通态的触摸屏支持U盘下载和以太网下载。U盘下载适合现场没有电脑网络的情况但坑比较多我单独讲。U盘下载的操作流程是在MCGS软件中点击“工具—U盘下载”选择要生成的下载文件也就是生成一个类似于工程文件的镜像把它保存到U盘里。然后将U盘插入触摸屏的USB口在触摸屏的启动界面选择“U盘下载”或者“工程升级”模式按提示操作即可。这里有几个注意点一是U盘最好用FAT32格式容量别太大16G以下比较稳妥格式不正确或者容量太大容易识别不了二是下载文件名称不能有中文和特殊符号下载包文件名里如果带了中文触摸屏在加载工程时会报“文件不存在”或者“工程损坏”三是下载完成后要等系统提示“下载完成”再拔U盘否则容易把工程文件写坏导致触摸屏开机黑屏。以太网下载相对简单前提是电脑和触摸屏在同一个局域网内。在MCGS软件里选择“工具—下载配置”设置触摸屏的IP地址然后上传或者下载工程。需要注意的是触摸屏的IP地址和电脑的IP地址必须在同一个网段比如电脑是192.168.1.10触摸屏就要设成192.168.1.20网关和子网掩码保持一致。5.3 在线调试的三个核心面板工程下载到触摸屏并运行后在线调试阶段我一般用三个面板。第一个是“实时数据库监视”面板。在MCGS开发环境里通过在线联机功能可以看到触摸屏上每个数据对象的实时值包括PLC采集上来的数值。如果某个模拟量的值一直显示为0或者一个固定值优先检查设备通道的地址映射对不对、通信是否正常。第二个是“设备调试”面板。选择设备窗口里的对应设备打开设备调试可以看到通信状态、通道采集的值和错误信息。通信失败时这个面板会给出错误码排查起来比在画面层面瞎猜快得多。第三个是“运行日志”面板。MCGS嵌入版在运行时会在触摸屏内部保存运行日志里面记录了工程启动时间、错误信息、脚本运行异常等。如果触摸屏运行一段时间后出现白屏或者死机查看运行日志往往能找到根本原因。6. 常见问题排查与经验速查写到这里我把这几年做昆仑通态项目过程中遇到最多的问题整理成了一张速查表里面有现象、排查思路和解决办法。这张表基本覆盖了从组态到上电运行的绝大多数坑。现象可能原因解决办法按钮点击无反应透明按钮被其他控件覆盖把透明按钮移到最上层选中后按“置顶”日期显示不变系统时间变量被误删或关联错误检查标签关联的变量是否为$Date等系统变量透明按钮有灰色背景填充色未设为“无”或版本兼容问题改用PNG透明图片覆盖法下载时报“工程类型不匹配”组态软件和触摸屏型号不对应打开工程属性调整型号为目标屏型号模拟运行正常真机通信失败IP网段不一致或串口参数不匹配检查IP地址、串口参数是否一致数据对象值为0通道地址映射错误或PLC未运行检查设备窗口通道地址和PLC程序用设备调试面板确认通信报警记录无时间显示报警数据里未定义时间字段在报警显示控件属性里把时间列关联到系统时间变量再多说两个我在现场积累的经验法则。第一个是关于透明按钮的层级问题。MCGS的控件是有层级的后添加的控件默认显示在更上层。透明按钮如果要“盖”在图片或者别的控件上面一定要记得把它设置为顶层否则图片区域会挡在按钮上面导致点击不了。具体操作是选中透明按钮右键菜单里选择“置于顶层”。第二个是关于日期显示的刷新时间。MCGS系统时间变量理论上每秒自动刷新但如果你把它通过脚本赋值给普通数据对象一定要把脚本的执行周期设置为1000ms而且脚本要在“循环策略”里建不是在“启动策略”里建。启动策略只在工程启动时执行一次用在那里的时间赋值脚本后面日期就不会变化了。另外还有一个容易忽视的点MCGS嵌入版在窗口切换时自动保存画面数据。如果你在某个窗口里改了数据对象的值切换到其他窗口再回来值还会保持不会重置。这其实是好事但也意味着如果按钮的动作写得不严谨会存在“上一个画面启动的电机到了下一个画面还在运行”的情况。做项目时建议在进入画面或者离开画面时用窗口的“打开窗口”和“关闭窗口”策略统一处理变量的初始化和复位。7. 一个更容易被忽略的细节画面刷新与动画效果其实开发做到后期很多人会发现真正影响用户感知的不是功能多复杂而是画面跟不跟手、刷不刷得干净。MCGS嵌入版的画面刷新机制和PC上不一样它底层是用内部轮询刷新机制刷新周期默认在100ms到200ms之间。如果你在画面上放了很多动态变化控件比如实时曲线、多个数值刷新框CPU占用率很容易上去画面就会卡。我自己的习惯是能少放动态刷新控件就少放尤其是透明按钮搭配图片动画的场景。昆仑通态的MCGS嵌入版支持“构件”和“动画”功能可以实现简单的图标旋转、闪烁、位置移动等效果。比如用“旋转动画构件”做一个风扇叶片转动用“用户窗口属性—闪烁”实现故障状态呼吸灯的效果。这些动画效果看着唬人其实实现逻辑都不复杂——把动画构件和开关型数据对象或数值型数据对象关联数据值变化就驱动动画。但动画构件用多了CPU负担也上来了。我有个原则单页面上动态构件不超过5个超过就拆分页面。尤其是透明按钮和动画构件叠加使用时要特别留意刷新顺序我踩过一次坑一页画面上放了一个旋转动画构件和一个透明按钮结果模拟运行正常下到真机上按钮前几次点击没反应要等动画刷新完才能响应。排查后确认是动画占用了太多的CPU刷新周期把动画构件的刷新周期从50ms调到了200ms之后问题就解决了。所以做精致界面的同时一定要兼顾触摸屏的硬件性能。还有个小技巧是关于矢量字体的。MCGS嵌入版的标签和按钮默认字体是系统字体如果画面分辨率高、文字缩放后发虚建议使用“TFT字体”选项。MCGS支持TFT字体分配在“工具—字体管理”里把需要用到的字体统一分配然后标签属性里选择TFT字体。这样在不同分辨率的屏上显示效果更稳定不会出现文字跑到控件外面或者大小不一致的情况。8. 扩展一点结合物联网模块做远程监控现在很多项目已经不止是本地HMI了客户会要求把数据传到云端或者手机端查看。昆仑通态触摸屏本身带有网口可以用它做物联网网关。最常见的方式是触摸屏通过Modbus TCP采集PLC数据然后使用MCGS的物联网功能或者第三方网关模块把数据上传到云平台。这个过程在触摸屏端不需要写什么额外代码主要是配置。对多数人来说不用一上来就搞那么复杂。先把本地HMI交互做得可靠再把透明按钮、日期时间这些细节打磨好就已经能解决现场90%的问题了。远程监控是锦上添花而且方案五花八门不同平台有不同接入方式等本地界面稳定了再去研究不迟。我个人在实际项目中最大的体会是做触摸屏开发最重要的不是学会某个单独的功能而是建立起一套“工程思维”——从硬件选型、画面规划、变量定义、通信配置到下载调试每个环节都考虑清楚再动手。透明按钮和日期显示只是这套思维里两个很好的切入点学会了它们你就能举一反三处理其他界面上遇到的细节问题了。希望这篇文章能帮你在做昆仑通态HMI开发时少走几步弯路。

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询