TwinCAT HMI基于JS实现文本列表显示以及语言切换

第6页TwinCAT_HMITwinCAT_HMI基于js实现文本列表显示以及语言切换作者：孙烨职务：华东区技术工程师公司：BECKHOFF中国邮箱：ye.sun@日期：2024-05-08摘要：在文本列表中，文本被分配给变量的值。例如，在组态中将文本列表分配给符号I/O字段。这样将为对象提供要显示的文本。在TwinCATHMI中并没有文本列表功能，本次我将通过控件“TextBlock”以及结合JavaScript来实现文本列表的功能附件：序号文件名备注1、TcHmiTextListLocaleLanguageSwitch例程历史版本：免责声明：我们已对本文档描述的内容做测试。但是差错在所难免，无法保证绝对正确并完全满足您的使用需求。本文档的内容可能随时更新，如有改动，恕不事先通知，也欢迎您提出改进建议。参考信息：TE2000_TC3_HMI_EN.PDF中TE2000|HMIEngineeringScriptlanguagesintheHMIProject目录1. 软硬件版本 31.1. 倍福Beckhoff 31.1.1. 控制器硬件 31.1.2. 控制软件 31.1.3. WinCC中文本列表以及中英文切换功能 32. TwinCATHMI新建Localization以及相关控件 43. 新建JavaScript功能脚本并编写函数 44. 实现运行效果展示 7

软硬件版本倍福Beckhoff控制器硬件TwinCAT控制制器，PC或者EPC，包括：嵌入式控制器：CX5020-0125（IMG版本：CX1800-0411-0007v3.92）工控机：C6xxx、CP2xxx、CP6xxx等控制软件笔记本和控制器都是基于TwinCAT3.1Build4024.47版本，TwinCATHMI1.12.760.59版本。WinCC中文本列表以及中英文切换功能在此处编辑好后，在空间中就能使用这个文本，既能做到根据变量的值显示文本信息也能实现中英文的切换。TwinCATHMI新建Localization以及相关控件右击新建中文的Localization和英文的Localization如下图：并在列表中添加key的内容，这里Key1在中文环境下显示世界您好！，在英文环境下显示helloworld！（后面所有的文本都可以在在此文件中添加文本内容）在desktop.view添加文本控件和按钮新建JavaScript功能脚本并编写函数要实现的功能如下：上图中TcHmiTextblock的控件要显示Localization中的文本信息<世界您好！|倍福>，<helloworld!|Beckhoff>控件显示需要根据PLC的变量进行变化，当关联的PLC变量的值为0时，在中文状态下显示<世界您好！>,英文状态下则显示<倍福>，当关联的PLC变量的值为1时，在中文状态下显示<helloworld!>,英文状态下则显示<Beckhoff>。按钮时用来切换语言显示的方式。根据上述需求，新建JavaScript并编写如下代码：设置两个输入参数，par1：控制器中的关联变量，在这我定义为int； lan：按钮触发的信号，我使用了内部变量也为int型。 注：新建变量这块我就直接省略了 这里使用switchcase语句当par1（控制器中关联变量）的中值对应输出Localization中的文本 0对应键值Key1中文为<世界您好！>，英文为<helloworld!>。 1对应键值Key2中文为<倍福>，英文为<Beckhoff>编写好之后，在TcHmiTextblock中Common的Text中进行设置如下：编写按钮的功能如下：也是通过javaScript实现中文按钮的：当<中文>这个按钮触发事件执行将语言文本显示为中文字体，并且将触发信号赋值给内部变量length。英文按钮：到此，此功能就全部完成！实现运行效果展示先通过关联的控制器中变量的值来改变文本控制中显示的Localization的不同文本<Key>内容。然后通过按钮切换语言状态，且切换后，控制器中值发生改变时，会显示对应语言模式下文本切换控制中变量的值后显示

上海（中国区总部）中国上海市静安区汶水路299弄9号（市北智汇园）电话 北京分公司北京市西城区新街口北大街3号新街高和大厦407室电话 邮箱:beijing@ 广州分公司广州市天河区珠江新城珠江东路32号利通广场1303室电话1/2 邮箱:guangzhou@ 成都分公司成都市锦江区东御街18号百扬大厦2305室电话邮箱:cheng