TwinCAT HMI動(dòng)態(tài)生成控件

BeckhoffChina技術(shù)文檔文檔內(nèi)容可能隨時(shí)更新如有改動(dòng)，恕不事先通知作者：陳志光、馮國城中國上海市靜安區(qū)汶水路299弄9-10號(hào)市北智匯園4號(hào)樓（200072）TELAX務(wù)：技術(shù)工程師日期：2020-08-28郵箱：gc.feng@TwinCATHMI動(dòng)態(tài)生成控件摘要：為了提高HMI開發(fā)質(zhì)量和速度，我們需要使用軸控模板、樓層模板、空調(diào)狀態(tài)模板、從站模板等。根據(jù)項(xiàng)目需求改變控制對象的數(shù)量，如果控制對象數(shù)量特別多，用拖控件的方法需要工程師手動(dòng)加入或刪除控件，以及重新綁定控件對應(yīng)的變量。TwinCATHMI有一個(gè)新方法來實(shí)現(xiàn)這種需求。TwinCATHMI是基于HTML5和JavaScript的，所以通過靈活的JavaScript，可以實(shí)現(xiàn)動(dòng)態(tài)生成控件，并將控件中的屬性變量直接綁定對應(yīng)PLC中的變量。本文用兩個(gè)例程，來介紹TwinCATHMI配合JavaScript，可以實(shí)現(xiàn)靈活的生成界面，綁定變量。第一個(gè)例程，介紹基礎(chǔ)使用和配置方法。第二個(gè)例程，以一個(gè)樓宇為主題，動(dòng)態(tài)生成對應(yīng)樓層數(shù)，隨后動(dòng)態(tài)生成每層樓中實(shí)際的空調(diào)控制面板。關(guān)鍵字：TwinCATHMI，JavaScript，web附件：序號(hào)文件名備注Sample1.tnzipSample2.tnzip免責(zé)聲明：我們已對本文檔描述的內(nèi)容做測試。但是差錯(cuò)在所難免，無法保證絕對正確并完全滿足您的使用需求。本文檔的內(nèi)容可能隨時(shí)更新，也歡迎您提出改進(jìn)建議。參考信息：TwinCATHMI動(dòng)態(tài)生成控件陳志光 BeckhoffChina技術(shù)文檔第PAGE\*Arabic21頁共NUMPAGES\*Arabic28頁倍福官方網(wǎng)站： 在線幫助系統(tǒng)： 目錄1. 控制軟件 32. 例程一（Sample1） 32.1. PLC程序 32.2. TwinCATHMI配置 42.2.1. 界面配置 42.2.2. JavaScript動(dòng)態(tài)生成控件 92.2.3. 實(shí)際效果 133. 例程二（Sample2） 143.1. PLC程序 143.2. TwinCATHMI配置 173.2.1. 數(shù)據(jù)類型配置 173.2.2. 界面配置 193.2.3. JavaScript代碼 264. 常見問題及解決方法 27

控制軟件TwinCAT3.1Build4024.7TwinCATHMI1.10.1336.404例程一（Sample1）假設(shè)需要人員信息錄入動(dòng)態(tài)顯示，填寫序號(hào)，名字，學(xué)號(hào)，地址等信息。PLC程序新建一個(gè)PLC項(xiàng)目，建立一個(gè)結(jié)構(gòu)體ControlStruct，該結(jié)構(gòu)體用于PLC數(shù)據(jù)處理。做一個(gè)人員信息錄入，需要序號(hào)，名字，學(xué)號(hào)，地址等信息。再建立一個(gè)結(jié)構(gòu)體HMIStruct，該結(jié)構(gòu)體用于給TwinCATHMI的JavaScript的生成控件代碼綁定PLC參數(shù)。VControlTemple：生成控件基于的模版，需要和你在TwinCATHMI里面建立的usercontrol名字相同VNo,VName,VNum,VLocation：用于usercontrol指向綁定的PLC變量在Main程序中聲明以下內(nèi)容：Counter用于手動(dòng)計(jì)數(shù)TwinCAT控件數(shù)量。在Main程序代碼如下：TwinCATHMI配置界面配置新建TwinCATHMI項(xiàng)目，并創(chuàng)建一個(gè)usercontrol模版，命名為Control1。雙擊Control1.usercontrol.json，添加對應(yīng)的Parameters繪制Control1中的界面，放入Textblock控件、Textbox控件、Button控件?？丶傩越榻B。Control1背景四邊用黑實(shí)線，方便動(dòng)態(tài)建立后區(qū)分控件Textblock控制直接寫文字Textbox控件綁定Control1內(nèi)部的ParametersButton控件，預(yù)留使用，作用是刪除控件?；氐紻esktop.view，放置Container控件、Button控件、Textbox控件在側(cè)邊選擇ShowConfigurationwindow。新建一個(gè)類型和PLC的類型HMIStruct相對應(yīng)。設(shè)置數(shù)據(jù)類型為object，取名為ControlInfoType（名字不固定，但后續(xù)用的時(shí)候要一致）并新建五個(gè)properties新建一個(gè)數(shù)據(jù)類型與PLC中的ARRAY[0..200]OFHMIStruct相對應(yīng)，與第6步新建方法相同。設(shè)置成array類型，子項(xiàng)設(shè)置成ControlInfoType新建InternalSymbols，SymbolName為I_ControlArray和Counter（InternalSymbols作用類似為全局變量，這個(gè)變量可以在不同的頁面去調(diào)用）綁定PLC變量。進(jìn)入AllSymbols，右鍵->mapsymbol，即可完成映射。Desktop界面的加號(hào)Button控件中，添加如下代碼，作用是去讀PLC的變量，放入HMI中的I_ControlArray和Counter。Control1界面的減號(hào)Button控件中，添加如下代碼。JavaScript動(dòng)態(tài)生成控件新建一個(gè)Function（javaScript），命名為CreateUserControl.js介紹其中用到的幾個(gè)函數(shù)：TcHmi.Controls.get("TcHmiContainer")獲取到html里控件的對象TcHmi.ControlFactory.createEx根據(jù)參數(shù)提供的typename創(chuàng)建控件對象。注：ControlFactory還有一個(gè)函數(shù)接口Create，可以創(chuàng)建簡單的控件，具體可以看幫助'data-tchmi-target-user-control'：創(chuàng)建對象對應(yīng)的模版類型，需要與定義的Usercontrol名稱一致'data-tchmi-No'：傳遞創(chuàng)建對象對應(yīng)的綁定參數(shù)，按照TwinCATHMI的要求，需要按照'%s%[綁定變量]%/s%'這個(gè)格式來寫container.addChild(childControl1);在container控件中加入childControl1子控件并顯示UserControl1.destroy();刪除控件最后在加號(hào)按鈕和減號(hào)按鈕添加CreateUserControl函數(shù)實(shí)際效果按了加號(hào)，新增控件，按了減號(hào)，就會(huì)刪除控件?？丶械淖兞繉?yīng)了PLC數(shù)組中的變量例程二（Sample2）以一個(gè)樓宇為主題，動(dòng)態(tài)生成對應(yīng)樓層數(shù)，隨后動(dòng)態(tài)生成每層樓中的空調(diào)控制開關(guān)，設(shè)定溫度，實(shí)際溫度。PLC程序Main程序中，目前聲明0~20層樓，并編寫邏輯，捕獲每一層的樓層按鈕，可根據(jù)實(shí)際需求進(jìn)行改變最大層數(shù)。HMI子程序中根據(jù)設(shè)定樓層數(shù)計(jì)算實(shí)際會(huì)在TwinCATHMI中顯示的樓層，給樓層屬性賦值方便TwinCATHMI中綁定PLC變量。當(dāng)i=20的時(shí)候firstchange=false，因?yàn)檫@些值的內(nèi)容是相同的，但是如果用聲明變量賦初值的方式又太復(fù)雜繁瑣，所以通過程序for循環(huán)一次來進(jìn)行賦值。最后為了在TwinCATHMI中顯示每個(gè)樓層的空調(diào)數(shù)目，專門拉出一個(gè)結(jié)構(gòu)體以便給HMI中的DataGrid進(jìn)行顯示用。TwinCATHMI配置數(shù)據(jù)類型配置新建四種數(shù)據(jù)類型，新建方法同上一章。AirHMIStruct和Array[0..7]OFAirHMIStructControlInfoType和Array[0..20]OFControlInfoType實(shí)例化內(nèi)部變量綁定PLC變量界面配置主界面配置事件如下：Refresh按鈕：PLC變量賦值給HMI的內(nèi)部變量，并調(diào)用生成樓層JS代碼和清除空調(diào)控件JS代碼DataGrid按鈕和ACStatus按鈕：用于切換content界面Clean和CleanALL：刪除控件TotalFlool中的textbox：用于顯示并可修改當(dāng)前大樓層數(shù)，若改了，則Changeable置為true觸發(fā)PLC邏輯，PLC會(huì)重新計(jì)算樓層并賦值樓層名，因?yàn)橹蟮腏S代碼會(huì)以樓層名是否存在來生成控件。content界面content界面在region中進(jìn)行切換顯示，一共由兩個(gè)界面：DataGridofAir.content和UserControlofAir.contentUserControlofAir.content：放了一個(gè)container控件，之后會(huì)用JS代碼在此之中生成控件DataGridofAir.content：顯示PLC中的datagridstruct，并配置事件允許改變值。usercontrol界面配置一共用到了4個(gè)usercontrol界面Floor.usercontrol:用于樓層顯示。內(nèi)部參數(shù)有FloorName、FloorColor和FloorButton，由polygon控件和textblock控件組成。textblock顯示樓層名字。事件配置：雙擊顯示Datagrid列表Enter和Leave事件，當(dāng)鼠標(biāo)進(jìn)入之后改變polygon的顏色Down和up事件，觸發(fā)動(dòng)態(tài)生成Temperature.control控件的JS代碼。Temperature.control：由Textblock，Textbox，Togglebutton，系統(tǒng)控件和RadialGauge自定義的控件組成。Togglebutton設(shè)置：RadialGauge設(shè)置：RadialGauge.control：由TcHmiRadialGauge系統(tǒng)控件繪制而成，因?yàn)橄到y(tǒng)的是整個(gè)圓，實(shí)際只需要半圓，所以自定義加工了一下。NullTemperature.control：由textblock組成，當(dāng)沒有空調(diào)的時(shí)候顯示此控件。JavaScript代碼本例程一共寫了4組JS代碼CreateUserControl.js：動(dòng)態(tài)生成樓層Floor.usercontrol，用FloorName進(jìn)行判斷樓層是否存在，存在則新建，不存在則用destory刪除。CreateTempDevice.js：生成Temperature.control或者NullTemperature.control控件。根據(jù)畫面大小，可以顯示6個(gè)所以超過6個(gè)就跳出。通過PLC代碼來識(shí)別哪一個(gè)樓層按鈕被按下，隨后捕獲對應(yīng)樓層的空調(diào)數(shù)，并生成控件當(dāng)空調(diào)數(shù)為0的時(shí)候，生成NullTemperature.control。CleanTempDevice.js：刪除Temperature.control類控件。CleanALL.js：刪除所有動(dòng)態(tài)生成的控件（想刪除別的控件也可以）。常見問題及解決方法如果報(bào)錯(cuò)如圖，說明動(dòng)態(tài)綁定的變量不正確。檢查TwincatHMIconfiguration中的變量有沒有綁定。檢查Reason中變量的名字是不是對應(yīng)PLC變量的名字。比如這個(gè)就是變量不小心打錯(cuò)了，PLC里邊實(shí)際是breset另外注意大小寫問題，TwinCATHMI是區(qū)分大小寫的在指定PLC變量綁定的時(shí)候，可能不知道這個(gè)變量是怎么寫其的地址。比如這個(gè)在PLC中的變量引索是MAIN.FloorStruct1[0].Airconditioner[0].ActTemperature在HMI中它的綁定是什么。建議在畫面用拖一個(gè)Textbox控件，然后直接綁定一下這個(gè)變量，就可以看到這個(gè)變量格式了。

上海（中國區(qū)總部）中國上海市靜安區(qū)汶水路299弄9號(hào)（市北智匯園）電話 傳真 郵編：200072北京分公司北京市西城區(qū)新街口北大街3號(hào)新街高和大廈407室電話 傳真:010