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

BeckhoffChina技術(shù)文檔文檔內(nèi)容可能隨時更新如有改動，恕不事先通知作者：陳志光、馮國城中國上海市靜安區(qū)汶水路299弄9-10號市北智匯園4號樓（200072）TELAX務(wù)：技術(shù)工程師日期：2020-08-28郵箱：gc.feng@TwinCATHMI動態(tài)生成控件摘要：為了提高HMI開發(fā)質(zhì)量和速度，我們需要使用軸控模板、樓層模板、空調(diào)狀態(tài)模板、從站模板等。根據(jù)項目需求改變控制對象的數(shù)量，如果控制對象數(shù)量特別多，用拖控件的方法需要工程師手動加入或刪除控件，以及重新綁定控件對應(yīng)的變量。TwinCATHMI有一個新方法來實現(xiàn)這種需求。TwinCATHMI是基于HTML5和JavaScript的，所以通過靈活的JavaScript，可以實現(xiàn)動態(tài)生成控件，并將控件中的屬性變量直接綁定對應(yīng)PLC中的變量。本文用兩個例程，來介紹TwinCATHMI配合JavaScript，可以實現(xiàn)靈活的生成界面，綁定變量。第一個例程，介紹基礎(chǔ)使用和配置方法。第二個例程，以一個樓宇為主題，動態(tài)生成對應(yīng)樓層數(shù)，隨后動態(tài)生成每層樓中實際的空調(diào)控制面板。關(guān)鍵字：TwinCATHMI，JavaScript，web附件：序號文件名備注Sample1.tnzipSample2.tnzip免責聲明：我們已對本文檔描述的內(nèi)容做測試。但是差錯在所難免，無法保證絕對正確并完全滿足您的使用需求。本文檔的內(nèi)容可能隨時更新，也歡迎您提出改進建議。參考信息：TwinCATHMI動態(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動態(tài)生成控件 92.2.3. 實際效果 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è)需要人員信息錄入動態(tài)顯示，填寫序號，名字，學(xué)號，地址等信息。PLC程序新建一個PLC項目，建立一個結(jié)構(gòu)體ControlStruct，該結(jié)構(gòu)體用于PLC數(shù)據(jù)處理。做一個人員信息錄入，需要序號，名字，學(xué)號，地址等信息。再建立一個結(jié)構(gòu)體HMIStruct，該結(jié)構(gòu)體用于給TwinCATHMI的JavaScript的生成控件代碼綁定PLC參數(shù)。VControlTemple：生成控件基于的模版，需要和你在TwinCATHMI里面建立的usercontrol名字相同VNo,VName,VNum,VLocation：用于usercontrol指向綁定的PLC變量在Main程序中聲明以下內(nèi)容：Counter用于手動計數(shù)TwinCAT控件數(shù)量。在Main程序代碼如下：TwinCATHMI配置界面配置新建TwinCATHMI項目，并創(chuàng)建一個usercontrol模版，命名為Control1。雙擊Control1.usercontrol.json，添加對應(yīng)的Parameters繪制Control1中的界面，放入Textblock控件、Textbox控件、Button控件?？丶傩越榻B。Control1背景四邊用黑實線，方便動態(tài)建立后區(qū)分控件Textblock控制直接寫文字Textbox控件綁定Control1內(nèi)部的ParametersButton控件，預(yù)留使用，作用是刪除控件。回到Desktop.view，放置Container控件、Button控件、Textbox控件在側(cè)邊選擇ShowConfigurationwindow。新建一個類型和PLC的類型HMIStruct相對應(yīng)。設(shè)置數(shù)據(jù)類型為object，取名為ControlInfoType（名字不固定，但后續(xù)用的時候要一致）并新建五個properties新建一個數(shù)據(jù)類型與PLC中的ARRAY[0..200]OFHMIStruct相對應(yīng)，與第6步新建方法相同。設(shè)置成array類型，子項設(shè)置成ControlInfoType新建InternalSymbols，SymbolName為I_ControlArray和Counter（InternalSymbols作用類似為全局變量，這個變量可以在不同的頁面去調(diào)用）綁定PLC變量。進入AllSymbols，右鍵->mapsymbol，即可完成映射。Desktop界面的加號Button控件中，添加如下代碼，作用是去讀PLC的變量，放入HMI中的I_ControlArray和Counter。Control1界面的減號Button控件中，添加如下代碼。JavaScript動態(tài)生成控件新建一個Function（javaScript），命名為CreateUserControl.js介紹其中用到的幾個函數(shù)：TcHmi.Controls.get("TcHmiContainer")獲取到html里控件的對象TcHmi.ControlFactory.createEx根據(jù)參數(shù)提供的typename創(chuàng)建控件對象。注：ControlFactory還有一個函數(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%'這個格式來寫container.addChild(childControl1);在container控件中加入childControl1子控件并顯示UserControl1.destroy();刪除控件最后在加號按鈕和減號按鈕添加CreateUserControl函數(shù)實際效果按了加號，新增控件，按了減號，就會刪除控件。控件中的變量對應(yīng)了PLC數(shù)組中的變量例程二（Sample2）以一個樓宇為主題，動態(tài)生成對應(yīng)樓層數(shù)，隨后動態(tài)生成每層樓中的空調(diào)控制開關(guān)，設(shè)定溫度，實際溫度。PLC程序Main程序中，目前聲明0~20層樓，并編寫邏輯，捕獲每一層的樓層按鈕，可根據(jù)實際需求進行改變最大層數(shù)。HMI子程序中根據(jù)設(shè)定樓層數(shù)計算實際會在TwinCATHMI中顯示的樓層，給樓層屬性賦值方便TwinCATHMI中綁定PLC變量。當i=20的時候firstchange=false，因為這些值的內(nèi)容是相同的，但是如果用聲明變量賦初值的方式又太復(fù)雜繁瑣，所以通過程序for循環(huán)一次來進行賦值。最后為了在TwinCATHMI中顯示每個樓層的空調(diào)數(shù)目，專門拉出一個結(jié)構(gòu)體以便給HMI中的DataGrid進行顯示用。TwinCATHMI配置數(shù)據(jù)類型配置新建四種數(shù)據(jù)類型，新建方法同上一章。AirHMIStruct和Array[0..7]OFAirHMIStructControlInfoType和Array[0..20]OFControlInfoType實例化內(nèi)部變量綁定PLC變量界面配置主界面配置事件如下：Refresh按鈕：PLC變量賦值給HMI的內(nèi)部變量，并調(diào)用生成樓層JS代碼和清除空調(diào)控件JS代碼DataGrid按鈕和ACStatus按鈕：用于切換content界面Clean和CleanALL：刪除控件TotalFlool中的textbox：用于顯示并可修改當前大樓層數(shù)，若改了，則Changeable置為true觸發(fā)PLC邏輯，PLC會重新計算樓層并賦值樓層名，因為之后的JS代碼會以樓層名是否存在來生成控件。content界面content界面在region中進行切換顯示，一共由兩個界面：DataGridofAir.content和UserControlofAir.contentUserControlofAir.content：放了一個container控件，之后會用JS代碼在此之中生成控件DataGridofAir.content：顯示PLC中的datagridstruct，并配置事件允許改變值。usercontrol界面配置一共用到了4個usercontrol界面Floor.usercontrol:用于樓層顯示。內(nèi)部參數(shù)有FloorName、FloorColor和FloorButton，由polygon控件和textblock控件組成。textblock顯示樓層名字。事件配置：雙擊顯示Datagrid列表Enter和Leave事件，當鼠標進入之后改變polygon的顏色Down和up事件，觸發(fā)動態(tài)生成Temperature.control控件的JS代碼。Temperature.control：由Textblock，Textbox，Togglebutton，系統(tǒng)控件和RadialGauge自定義的控件組成。Togglebutton設(shè)置：RadialGauge設(shè)置：RadialGauge.control：由TcHmiRadialGauge系統(tǒng)控件繪制而成，因為系統(tǒng)的是整個圓，實際只需要半圓，所以自定義加工了一下。NullTemperature.control：由textblock組成，當沒有空調(diào)的時候顯示此控件。JavaScript代碼本例程一共寫了4組JS代碼CreateUserControl.js：動態(tài)生成樓層Floor.usercontrol，用FloorName進行判斷樓層是否存在，存在則新建，不存在則用destory刪除。CreateTempDevice.js：生成Temperature.control或者NullTemperature.control控件。根據(jù)畫面大小，可以顯示6個所以超過6個就跳出。通過PLC代碼來識別哪一個樓層按鈕被按下，隨后捕獲對應(yīng)樓層的空調(diào)數(shù)，并生成控件當空調(diào)數(shù)為0的時候，生成NullTemperature.control。CleanTempDevice.js：刪除Temperature.control類控件。CleanALL.js：刪除所有動態(tài)生成的控件（想刪除別的控件也可以）。常見問題及解決方法如果報錯如圖，說明動態(tài)綁定的變量不正確。檢查TwincatHMIconfiguration中的變量有沒有綁定。檢查Reason中變量的名字是不是對應(yīng)PLC變量的名字。比如這個就是變量不小心打錯了，PLC里邊實際是breset另外注意大小寫問題，TwinCATHMI是區(qū)分大小寫的在指定PLC變量綁定的時候，可能不知道這個變量是怎么寫其的地址。比如這個在PLC中的變量引索是MAIN.FloorStruct1[0].Airconditioner[0].ActTemperature在HMI中它的綁定是什么。建議在畫面用拖一個Textbox控件，然后直接綁定一下這個變量，就可以看到這個變量格式了。

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