影片：Habr 管理控制台。 讓您調節業力、評級和禁止用戶。
TL; DR： 在本文中，我將嘗試使用 Webaccess/HMI Designer 工業介面開發環境和 WebOP 終端機創建漫畫 Habr 控制面板。
人機介面（HMI）是一組用於人類與受控機器互動的系統。 通常，該術語適用於具有操作員和控制面板的工業系統。
網路操作 — 用於建立人機介面的自主工業終端。 用於建立生產控制面板、監控系統、控制室、智慧家庭控制器等。 支援直接連接工業設備，並可作為 SCADA 系統的一部分運作。
WebOP 終端機 - 硬體
WebOP 終端機是一款基於 ARM 處理器的低功耗計算機，具有監視器和觸控屏，旨在運行具有在 HMI Designer 中創建的圖形介面的程式。 根據型號的不同，終端具有各種板載工業介面：RS-232/422/485、用於連接汽車系統的CAN 總線、用於連接其他週邊設備的USB 主機連接埠、用於將終端連接到電腦的USB 用戶端連接埠、音訊輸入和音訊輸出，用於非揮發性記憶體和設定傳輸的 MicroSD 讀卡機。
這些設備被定位為一體式個人電腦的預算替代品，用於不需要強大處理器和功能齊全的桌上型電腦資源的任務。 WebOP 可以作為控制和資料輸入/輸出的獨立終端，與其他 WebOP 配對，或作為 SCADA 系統的一部分。
WebOP終端可直接連接工業設備
被動冷卻和 IP66 防護等級
由於散熱較低，一些WebOP型號的設計完全沒有主動式風冷。 這使得設備可以安裝在對噪音水平敏感的區域，並減少進入外殼的灰塵量。
前面板無縫隙、無接縫，防護等級為IP66，可在壓力下允許水直接進入。
WOP-3100T 終端機的後面板
非易失性存儲器
為了防止資料遺失，WebOP具有128Kb的非揮發性記憶體，可以像RAM一樣使用它。 它可以儲存儀表讀數和其他關鍵數據。 如果發生斷電，資料將被保存並在重新啟動後恢復。
遠端更新
終端機上運行的程式可以透過乙太網路或RS-232/485串行介面進行遠端更新。 這簡化了維護，因為無需前往所有終端更新軟體。
WebOP 模型
- 基於 HMI RTOS 即時作業系統所建構的最實惠的設備。 該系列以WebOP為代表-///，螢幕對角線尺寸分別為4,3吋、7吋、8吋和10.1吋。
— 基於 Windows CE 作業系統的更進階模型。 它們與2000T系列的不同之處在於硬體介面數量較多，且板載有CAN介面。 此裝置可在寬溫度範圍（-20~60°C）下運行，並具有抗靜電保護（空氣：15KV/接觸：8KV）。 該系列完全滿足 IEC-61000 標準的要求，允許這些裝置用於存在靜電放電問題的半導體製造。 該系列以WebOP為代表-//，螢幕對角線分別為7吋、10.1吋和12.1吋。
WebAccess/HMI Designer 開發環境
WebOP 終端機開箱即用，只是一台低功耗 ARM 計算機，您可以在上面運行任何軟體，但該解決方案的重點是專有的 WebAcess/HMI 工業介面開發環境。 該系統由兩個組件組成：
- 人機介面設計師 — 開發介面和程式邏輯的環境。 在程式設計師電腦上的 Windows 下運作。 最終程式被編譯成一個檔案並傳輸到終端在運行時執行。 該程式有俄語版本。
- 人機介面運轉時 — 在最終終端上執行編譯後的程式的執行時間。 它不僅可以在WebOP終端機上工作，還可以在研華UNO、MIC和普通桌上型電腦上工作。 有適用於 Linux、Windows、Windows CE 的執行階段版本。
你好世界－創建一個項目
讓我們開始為 Habr 控制面板建立一個測試介面。 我將在終端機上運行該程序 運行WinCE。 首先，我們在 HMI Designer 中建立一個新專案。 要在 WebOP 上運行程序，選擇正確的模型非常重要；最終文件的格式將取決於此。 在這一步，您也可以選擇桌面架構，然後最終檔案將為X86執行時間編譯。
建立一個新專案並選擇架構
選擇將編譯後的程式載入到 WebOP 中的通訊協定。 在這一步，您可以選擇串口，或指定終端的IP位址。
專案創建介面。 左側是未來程式組件的樹狀圖。 目前，我們只對「螢幕」項目感興趣，這些直接是將顯示在終端機上的帶有圖形介面元素的螢幕。
首先，讓我們創建兩個帶有文字「Hello World」的螢幕，並能夠使用按鈕在它們之間切換。 為此，我們將添加一個新螢幕，即 Screen #2，並在每個螢幕上添加一個文字元素和兩個用於在螢幕之間切換的按鈕（螢幕按鈕）。 讓我們配置每個按鈕以切換到下一個畫面。
設定螢幕切換按鈕的介面
Hello World 程式已準備就緒，現在您可以編譯並執行它。 在編譯階段，如果變數或位址指定不正確，可能會發生錯誤。 任何錯誤都被認為是致命的；只有在沒有錯誤的情況下才會編譯程式。
該環境提供了模擬終端的能力，以便您可以在本機電腦上偵錯程式。 模擬有兩種類型：
- 線上模擬 — 將使用程式中指定的所有外部資料來源。 這些可以是 USO 或透過序列介面或 Modbus TCP 連線的設備。
- 離線模擬 — 無需使用外部設備即可進行模擬。
雖然我們沒有外部數據，但我們使用離線模擬，並預先編譯了程式。 最終程式將位於專案資料夾中，名稱為 項目名稱_程序名稱.px3
模擬中運行的程式可以使用滑鼠遊標進行控制，就像在 WebOP 終端機的觸控螢幕上進行控制一樣。 我們看到一切都按預期進行。 偉大的。
要將程式下載到實體終端，只需點擊“下載”按鈕。 但由於我沒有配置終端與開發環境的連接，所以可以簡單地使用U盤或MicroSD記憶卡傳輸檔案。
程式介面很直觀，我不會遍歷每個圖形塊。 對於任何使用過類似 Word 的程式的人來說，創建背景、形狀和文字都會很清楚。 要建立圖形介面，不需要任何程式設計技能；所有元素都是透過將滑鼠拖曳到表單上來新增的。
與記憶一起工作
現在我們知道如何建立圖形元素，讓我們學習如何使用動態內容和腳本語言。 讓我們建立一個顯示變數資料的長條圖 U $ 100。 在圖表設定中，選擇資料類型：16位元整數，圖表值的範圍：0到10。
該程式支援以三種語言編寫腳本：VBScript、JavaScript 及其自己的語言。 我將使用第三個選項，因為文件中有相關範例，編輯器中也有自動語法幫助。
讓我們新增一個新的巨集：
讓我們編寫一些簡單的程式碼來增量更改可在圖表上追蹤的變數中的資料。 我們將給變數加 10，當它大於 100 時將其重設為零。
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
若要循環執行腳本，請在常規設定中將其設定為主宏，執行間隔為 250ms。
讓我們在模擬器中編譯並運行該程式：
在這個階段，我們已經學會了操作記憶體中的資料並將其直觀地顯示出來。 這已經足以創建一個簡單的監控系統，從外部設備（感測器、控制器）接收資料並將其記錄在記憶體中。 HMI Designer 中提供了各種資料顯示區塊：以帶有箭頭的圓形刻度盤、各種圖表和圖形的形式。 使用 JavaScript 腳本，您可以透過 HTTP 從外部來源下載資料。
哈布爾控制面板
利用所獲得的技能，我們將為 Habr 管理控制台製作一個漫畫介面。
我們的遙控器應該能夠：
- 切換使用者設定檔
- 儲存業力和評級數據
- 使用滑桿更改業力和評級值
- 當您點擊「禁止」按鈕時，個人資料應被標記為禁止，頭像應變更為劃掉
我們將在單獨的頁面上顯示每個配置文件，因此我們將為每個配置文件建立一個頁面。 我們將 karma 和 rating 儲存在記憶體中的局部變數中，這些變數將在程式啟動時使用設定巨集進行初始化。
圖片可點擊
調整業力和評級
為了調整業力，我們將使用滑桿（滑動開關）。 我們指定在設定巨集中初始化的變數作為記錄位址。 讓我們將滑桿值的範圍限制在 0 到 1500 之間。現在，當滑桿移動時，新資料將寫入記憶體。 在這種情況下，滑桿的初始狀態將對應於記憶體中變數的值。
為了顯示業力和評級的數值，我們將使用數字顯示元素。 其運作原理與範例程式「Hello World」中的圖類似，我們只需在Monitor Address中指明變數的位址即可。
禁止按鈕
「禁止」按鈕是使用切換開關元素實現的。 資料儲存的原理與上面的例子類似。 在設定中，您可以根據按鈕的狀態選擇不同的文字、顏色或圖像。
當按下按鈕時，頭像會被紅色劃掉。 使用圖片顯示區塊很容易實現這一點。 它允許您指定與切換開關按鈕的狀態關聯的多個影像。 為此，該區塊被賦予與帶有按鈕和狀態數的區塊相同的位址。 頭像下方帶有銘牌的圖片也是以類似的方式設定的。
結論
總的來說，我喜歡這個產品。 以前，我有使用 Android 平板電腦執行類似任務的經驗，但為其開發介面要困難得多，而且瀏覽器 API 不允許完全存取週邊設備。 一個WebOP終端可以取代Android平板電腦、電腦和控制器的組合。
HMI Designer 儘管設計陳舊，但相當先進。 無需特殊的程式設計技能，您就可以快速繪製出工作介面。 本文並未討論所有圖形塊，其中有許多：動畫管道、圓柱體、圖形、切換開關。 它開箱即用地支援許多流行的工業控制器，並包含資料庫連接器。
引用
可下載WebAccess/HMI Designer和Runtime開發環境
→
來源： www.habr.com