WinCC Unified跑马灯报警实现攻略:轻松三步,让信息滚动起来!

yumo6662周前 (04-22)技术文章14

引言

在工业自动化领域,HMI(人机界面)触摸屏是操作员与生产设备之间沟通的重要桥梁。然而,在生产现场空间受限的环境下,如何在小尺寸触摸屏上高效展示关键报警信息,成为了一个不小的挑战。

报警信息那么多,小屏幕怎么装得下?跑马灯报警来救场!跑马灯显示不仅节省空间,还能确保所有激活的报警信息都能以循环播放的形式及时呈现给操作员,助力快速故障排查与响应。

对于在在小尺寸触摸屏上, WinCC Unified自带的报警控件报警行置顶报警显示显然无法满足实际需求。为此,我们结合了WinCC Unified强大的图形运行系统与灵活易用的JavaScript脚本语言,实现了报警消息的跑马灯显示功能。

这一实现过程不仅考验了对WinCC Unified系统特性的深入理解,更需要对HMI设计原则与用户体验的精准把握。通过精心设计与优化,我们成功地将跑马灯报警显示功能融入小尺寸触摸屏,让重要信息在有限的空间内无限传递。

想要了解跑马灯报警显示的具体实现步骤与效果吗?跟随我们的专业指南,一起解锁WinCC Unified小尺寸HMI触摸屏的报警显示新境界吧!

1. 技术分析

跑马灯报警的核心,在于实时获取激活的报警文本。消息到达状态和消息恢复正常状态,是两个关键节点。WinCC Unified 计划任务提供的报警触发器,就像一个“守门员”,能够精准捕捉这两个节点的变化。♂从而在报警触发器的更新事件脚本中,我们能够轻松获取到激活的报警文本。然后通过在画面中的文本对象做简单的逻辑处理,就能在小屏幕上实现跑马灯般的报警信息显示。


2. 试试获取报警文本的方法

  • Step 1:报警状态作为计划任务的触发器
  • Step 2:事先创建2个内部变量
    • WString 数据类型的内部变量”alarm_text”用于显示所有激活的报警文本
    • Int 数据类型的内部变量”active_alarm”用于显示激活的报警数量
  • Step3 报警触发的更新中添加 JS脚本
    • 脚本中调用“GetActiveAlarms”方法返回调用时所有激活的中文报警文本。
    • “GetActiveAlarms” 方法返回调用时所有激活的报警,在函数调用之后不会出现状态变化或新报警。
    • “GetActiveAlarms” 方法的具体使用请参见https://support.industry.siemens.com/cs/mdm/109896132?c=155460766859&lc=zh-CN
    • 脚本中将获得的“AlarmResult [ ]”中的报警文本赋值给事先创建的字符串变量” alarm_text”

图1 报警到达状态的更新事件

export async function Task_A_come_Update(errorCode, systemName, alarmResultArray) {
HMIRuntime.Alarming.GetActiveAlarms(2052,"AlarmClassName != 'SystemNotification'").then(
function(allAlarms){
 let a="";
//将激活的报警数量赋值给变量"active_alarm"
 Tags("active_alarm").Write(allAlarms.length);
 //获取所有报警文本
 for (let i=0;i< allAlarms.length;i++)
  {
   a=a+allAlarms[i].EventText  + "         " ;  
  }
// 将报警文本赋值给变量"alarm_text"
 Tags("alarm_text").Write(a);
}).catch(function(errorCode){
})
}      

图2 报警恢复正常状态的更新事件

export async function Task_A_out_Update(errorCode, systemName, alarmResultArray) {
HMIRuntime.Alarming.GetActiveAlarms(2052, "AlarmClassName != 'SystemNotification'").then(
function(allAlarms){
//将激活的报警数量赋值给变量"active_alarm"
  Tags("active_alarm").Write(allAlarms.length);
//读取报警文本的字符长度
  let len=Tags("active_alarm").Read();
  let b="";
 //若激活的报警数量大于0则获取所有的报警文本并将其赋值给内部变量"alarm_text"
if (allAlarms.length >0) {
for (let j=0;j<allalarms.length;j++) {<="" span="">
  b=b+allAlarms[j].EventText + "         ";
  }
  Tags("alarm_text").Write(b);
}
//若激活的报警数量为0则将内部变量"alarm_text"的值清空
 else{
Tags("alarm_text").Write("");
}
}).catch(function(errorCode){
 
  Tags("active_alarm").Write(0);
})
}

3. 跑马灯文本显示

  • 画面中添加文本对象,通过文本对象进行跑马灯报警文本显示
  • 通过文本对象的文本属性的动态化脚本,每隔1秒(周期可以按需进行定义,刷新周期过快会影响运行性能)步进截取所有报警文本的3个字符(可根据实际内容定义截取的字符个数)并与所有报警文本内容拼接,动态调整跑马灯显示的字符长度为所有报警文本的字符总长,从而实现跑马灯的效果。

图3 文本对象动态化脚本跑马灯显示

export function show_alarm_Text_Trigger(item) {
var value; 
let aa_v= Tags("alarm_text").Read().toString();
   //当激活报警个数为0时,跑马灯文本显示为空
    if (Tags("alarm_text").Read()=="") {
       value="";
    } else {
      let len=aa_v.length;
//判断字符移位是否到字符末尾
      if ((len-n*3)>3) {
      let showalarm=aa_v.slice(n*3)+ "       " + aa_v;
      value=showalarm.slice(0,len);
      n=n+1;
      } else {
         n=0;
}
    }    
    return value;
}

更多关于Unified JS 脚本的内容可关注 1847 相关话题:

WinCC Unified JS 菜鸟课程-系列课程-西门子1847工业学习平台官网

系统概述-WinCC Unified Java Script 脚本系统浅谈-系列课程-西门子1847工业学习平台官网

JavaScript语言基础学习-系列课程-西门子1847工业学习平台官网

以及即将推出的《WinCCUnified脚本高级应用及调试方法》系列视频。


长按识别下方二维码

关注西门子工业支持中心电子杂志

每月为您推荐超多工控资讯

相关文章

html中滚动字体的设置

<!DOCTYPE html><html><head><meta charset="utf-8"><title>滚动字体的设...

两句css代码实现全屏滚动效果-demo案例

效果两句css代码实现全屏滚动效果html代码<body> <div class="container"> <section>...

css3中的transform属性应用-向上滚动动画

css3中的transition和transform配合可以做出许多好玩的东西来,下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走,不谢!这个应用在展示网站模板或者图册显示应用很广...

如何给别人网页上增加内容通过Chrome扩展为网页添加快速滚动功能

Content Scripts来看开发网站的介绍,Content Scripts 是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口,实现读取浏览器访问的网页的详细信息,比如网页的DOM结构...

七爪源码:纯 CSS 和 JS 的原生平滑滚动

纯 CSS 和 JS 的原生平滑滚动你想要一个平滑的滚动吗? 忘记 JQuery,我们已经过去了。 让我向您介绍我们的原生平滑滚动工具。CSS 滚动行为CSS scroll-behavior 属性接受...

如何使用css完成视差滚动效果?

视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层使用css形式实现视觉差滚动效果的方...