我想找...

搜尋

函式庫參考

目錄

86HMI Editor使用手冊

2024.08.15, 86HMI Editor 1.2.

你可以下載 86HMI Editor 使用手冊 這裡.

1. 簡介

1.1 說明

86HMI 編輯器是一款強大的人機介面 (HMI) 工具，專為使用 86Duino IDE 的工程師和設計人員而設計。它基於 LVGL 7.11，提供了簡單易用的介面，可輕鬆建立和編輯各種 HMI 介面，以滿足您的應用需求。(更多LVGL資訊請見： https://docs.lvgl.io/7.11/index.html)

使用 86HMI Editor，您可以輕鬆設計用於 86Duino 控制系統的 HMI 界面，包括圖形按鈕、文字標籤、Code Generation、圖片、圖表、開關等元件。這個工具不僅支援基本的界面設計，還提供了豐富的元件庫，以滿足不同應用場景的需求。 此外，86HMI Editor 還具有強大的程式生成功能，可以自動生成相應的程式代碼，無需手動編寫。這使得開發過程更加高效，並降低了錯誤的風險。

無論您是初學者還是有經驗的 HMI 設計師，86HMI Editor 都是一個理想的工具，幫助您快速設計出精美且功能豐富的 HMI 界面，以實現您的控制應用需求。

86hmi-1

此文件將深入介紹如何使用這個強大的工具，讓您能夠更好地掌握它的各種功能和特性，包含以下介紹:

  1. 開發介面的各功能區介紹。包括主題風格色調，存放並調用自定義圖形、音效、字型檔案來源，切換文字語系..等。
  2. 各個元件的使用設置及介紹。如下方元件陳列圖片
  3. 輔助工具的使用。包括多選排版，可事先設定元件事件發生的 Events 事件欄….等

2. 安裝及啟動 86HMI

2.1 安裝 86Duino IDE

從此網址下載 86Duino IDE https://www.qec.tw/zh/software/.

86HMI-2

下載後，請解壓縮下載的 zip 檔案，無需額外安裝軟體，僅雙擊 86duino.exe 即可啟動。

86hmi-3

*注意: 如果 Windows 顯示警告，請按一下 詳細信息，然後按下 繼續執行.

86Duino Coding IDE 500 打開後，如下圖。

86hmi-4

2.2  啟動 86HMI

開啟 86Duino IDE 後，可透過以下按鈕打開 86HMI 工具。

86hmi-5

2.2.1  選擇 QEC 主站

開啟後選擇相對應的 QEC 主站設備型號進行編輯。

  1. QEC-M-043T→搭配 4.3 吋 LCD。
    86hmi-6
  2. QEC-M-070T→搭配 7 吋 LCD。
    86hmi-7
  3. QEC-M-090T→搭配 9 吋 LCD。
    86hmi-8
  4. QEC-M-150T→搭配 15 吋 LCD。
    86hmi-9

2.2.2  Board options

A. Screen rotation:

HMI 顯示方向設定，搭配客戶 HMI LCD 實際使用方向，工作區編輯好專案後再上傳到 QEC 後，會依照所選的方向讓 HMI轉向。

86hmi-10

在之後在 HMI 中編輯時，工作區的畫面也會依照設定的顯示方向變成橫向或直向。

86hmi-1286hmi-13
0° & 180°90° & 270°
B. Default font:

預設字型選項為 CJK font (Chinese，Japanese，Korean) 支持大多數國家語系字型，
LVGL built-in font 為 LVGL 的自帶字型只支持英文。

86hmi-15

2.2.3  進入編輯畫面

點選相對應的機型尺寸後，按下 OK 即進入工作區編輯畫面。

86hmi-16

成功進入 86HMI 編輯頁面 後，您將會看到以下畫面。

86hmi-17

2.2.4  完成編輯

完成編輯後，需要按生成程式碼的按鈕，將會把 86HMI 轉換成 86Duino IDE 程式碼，並將專案儲存並關閉，使用者可以 用 86Duino Coding IDE 或 ArduBlock 來使用 API。86Duino IDE 介面產生該專案的 HMI API，包含原始檔(.cpp)與標頭檔(.h)。

86hmi-18

當 86HMI 專案有外部資源時，則會在生成進度結束後出現提醒視窗，這時可以利用 Open exData 按鈕開啟外部資源的資料夾，再將檔案複製至外部儲存空間。

86hmi-19

補充說明:
86HMI 生成程式碼後，會在主程式 (.ino) 中自動產生以下程式碼，缺一個都會導致 86HMI 不運作。

  1. 引入86HMI的Header檔。
    #include “myhmi.h”
  2. 初始化86HMI功能。
    void setup() { Hmi.begin();}

3. 使用介面

3.1  功能概覽

86hmi-20

86HMI 編輯介面區塊功能主要說明如下:

  • 應用程式按鈕 ( Application Button ):
    專案工具列的快捷選單。
  • 標題 ( Title ):
    86Duino Coding IDE 創建的專案名稱。
  • 視窗功能 ( Window Function ):
    有最小化、最大化/視窗化、關閉等。
  • 專案工具列 ( Project Toolbar ):
    有新增/開啟/儲存/另存專案、圖形/音效/字型資源管理、主題風格/色調配色/字型大小、元件文字等。
  • 工作區 ( WorkArea ):
    元件呈現的工作區，將與上傳至 QEC 主站的 UI 相同。
  • 工作區縮放比例 ( WorkArea Zoom ):
    可選擇工作區的比例。
  • 工具箱 ( Toolbox ):
    可選的元件功能清單。
  • 屬性欄 & 事件欄 ( Property grid & Event grid ):
    元件和 Page 的屬性編輯器和元件和 Page 的事件處理設定。
  • 頁面清單 ( Page List ):
    於 86HMI 中所創建的頁面清單。
  • 頁面工具列 ( Page Toolbar ):
    有新增/移除/複製頁面等。
  • 元件清單 ( Object List ):
    顯示當前頁面中的所有元件。

3.2  功能說明

3.2.1  應用程式按鈕

應用程式按鈕會將「專案工具列」上的功能整理至一個快捷選單中，以避免因視窗大小導致「專案工具列」無法顯示之問題。

86hmi-21

在功能清單中，包含以下功能:

  • 檔案 (File) ： 新建專案 (New project)、開啟專案 (Open project)、儲存專案 (Save project)、另存新檔 (Save as...)、匯入專案 (Import project)。
  • 資源 (Resources)： 資源庫管理。
  • 主題選擇 (Theme Selection)： 主題管理。
  • 主題設定 (Theme Config)： 主題設定工具。
  • 語言識別 (LangID)： 物件語言內容的預設設定。
  • 程式碼產生 (Code Generation)： 產生程式碼，並儲存與關閉專案。
  • 幫助 (Help)： 點擊後開啟 QEC 官方網站上的使用者手冊頁面。
  • 結束 (Quit)： 關閉 86HMI Editor 程式。
匯入專案 (Import Project)

The 匯入專案 (Import Project) ：此功能允許使用者將其他專案中的選定頁面匯入目前專案，以便更輕鬆地使用已設計過的元件與功能。 本章節將說明此功能所具備的能力與可用選項。

86hmi-22
主要功能
  • 自動資源整合
    匯入頁面所使用的圖片與音效資源，會自動整合至目前專案中，無需手動設定。
  • 建立 UI 範本
    透過匯入預先設計的 UI 頁面或參數設定，使用者可大幅縮短相似頁面的開發與設計時間。
  • 適用於不同螢幕解析度或特定設備專案
    可在不同解析度的設備間轉移專案，例如從 QEC-M-070T 轉移至 QEC-M-150T，同時支援具特定功能的設備（如旋轉元件顯示）之專案轉換。
86hmi-23
縮放選項 (Scaling Options)

若在匯入過程中偵測到不同的螢幕配置，使用者可以從以下縮放選項 (Scaling Options) 中進行選擇：

  • 自動適應螢幕 (Auto Adapt to Screen)
    自動將匯入的頁面縮放至符合目前專案的螢幕尺寸，並維持原始長寬比例。
  • 固定縮放 (Fixed Scaling)
    使用者可手動設定匯入元件的縮放比例，並依需求調整其對齊方式。
86hmi-24

注意： 無法調整長寬比例的元件，將不受水平或垂直縮放設定的影響。

事件指令處理 (Event Instructions Handling)

匯入頁面中的事件指令將依下列方式進行處理：

  • 頁面切換 (Page Change)： 會自動調整為匯入專案中的頁面 ID。
  • 播放音效 (Play Sound)： 會自動調整為匯入專案中的音效資源 ID。
  • 自訂指令 (Custom Instruction)： 以原樣匯入，不進行任何調整。
  • 全域程式碼 (Global Code)： 不會被匯入。

注意： 匯入後頁面 ID 可能與原專案不同，這可能導致整個專案中的元件 ID 發生變化。 因此，若在 IDE 中使用了 ArduBlock、自訂指令或 APIs，請務必更新對應的 ID，以確保匯入後的頁面能正常運作。

3.2.2  標題 (Title)

標題主要顯示 86HMI Editor 版本編號及專案名稱 (專案名稱會與 86Duino Coding IDE 創建的專案名稱同步)。

86hmi-25

補充說明:
已編輯標記(*)，當 86HMI 專案編輯過，就會在專案名稱後加上一個 * 號，當專案儲存時會消失。

3.2.3  視窗功能 (Window Function)

可以最小化、最大化/視窗化、關閉 86HMI Editor 視窗。
下圖為最大化／視窗模式的示意畫面：

  • 已經最大化/視窗化。
    86hmi-26
  • 尚未最大化/視窗化，可拖曳 86HMI 邊界調整大小。
    86hmi-27

3.2.4 專案工具列 (Project Toolbar)

86hmi-28
New Project, Open Project, Save Project, and Save As…

功能說明：

  • 新增專案 (New Project) : 開啟一個全新的專案。
  • 開啟專案 (Open Project) : 開啟先前儲存的專案，開啟後儲存專案的路徑將會改寫。
  • 儲存專案 (Save Project) : 將專案儲存，預設會與 86Duino Coding IDE 自動管理專案路徑。
  • 另存專案 (Save As...) : 將專案另外儲存，另存後儲存專案的路徑將會改寫。

補充說明:
一般從 86Duino IDE 專案上開啟 86HMI，其 86HMI 專案名稱會與 86Duino Coding IDE 創建的專案名稱同步，並自動管理專案的儲存路徑 (位置為 86Duino IDE 專案中的 data，副檔名為 .hpj )。

86hmi-29
資源庫管理 (Resource Library Management)

資源庫包含了圖片庫、音效庫、字型庫，提供使用者管理對應資源。
由於資源庫的檔案最終會在 QEC 上使用，所以不建議使用過大的檔案，例如：超出畫面的背景圖片、整首音樂…等
外部儲存空間的資源需要由使用者透過電腦主動上傳檔案。
使用者使用自行設計或自定義的圖形檔案、音效檔案、字型檔案，需要先將所需要的檔案加入至資源庫中才可以使用。 用資源庫加入檔案的機制會將檔案複製到專案中以方便 HMI Editor 管理，能避免編輯時檔案突然被編輯，也會根據檔案資源總容量做檢查及提示(左下角 Total size 反映)。

下方的 3 個按鈕選項分別對應到圖形檔案 (Image) 、音效檔案 (Sound) 、字型檔案 (Font) 的資源管理功能。

86hmi-30
圖形檔案資源

支持 png 及 jpg 圖形檔。

86hmi-31

新增圖片資源的方式: 點擊 86hmi-29 再點擊 “+” 到圖形檔案所在的資料夾位置選擇所需圖形檔案。

86hmi-32

上傳完成後，右側為預覽視窗和檔案資訊。
其中，使用者可以調整描述欄位 (Description)，自行定義圖形檔案名稱方便使用者識別。

86hmi-33

後續，有使用到圖形的屬性，就可以選擇先前匯入的圖形檔案，檔案會呈現資源清單的下拉選單中，如下圖。

86hmi-34

為節省 QEC 主站進行圖形運算的時間，所以需要事先將圖形檔案編輯成在 HMI 呈現的大小再添加到資源庫中。

86hmi-35

圖形檔案也可以做為桌布底圖的，其尺寸大小如果不相等，所選的 LCD 工作區大小則會以重複方式呈現。所以，欲滿版顯示桌布則需要將圖形大小調整成與所選的 LCD 工作區大小的尺寸相同，其中 4.3 吋/7 吋/9 吋的 QEC 主站為 800x480，而15 吋的 QEC 主站則為 1024x768。

86hmi-36
音效檔案資源

支持 wav 及 mp3 音效檔。

86hmi-37

新增音效資源的方式: 點擊 86hmi-36 再點擊 “+” 到音效檔案所在的資料夾位置選擇所需音效檔案 (如特殊警示音、提示音頻… 等)。

86hmi-38

可以於右側預覽播放確認是否為正確的音效。

字型檔案資源

支持 otf、ttf 及 ttc 字型檔。內建以下 2 種字型選項:

  1. microhei: QEC builtin(CJK) - 有支援中文、日文等多國語言字型。
  2. Montserrat_n: LVGL builtin - LVGL 自帶字型只支持英文。
86hmi-39

新增字型資源的方式: 點擊 86hmi-39再點擊 “+” 到字型檔案所在的資料夾位置選擇所需字型檔案。

86hmi-40

在匯入需要的字型檔案，後續可於主題組態器中的 Font 去選擇字型。

86hmi-41

補充說明:
Internal 及 External 的差異
使用者在 Internal 新增自定義的圖形檔案、音效檔案或字型檔後，會把檔案先存在專案路徑中的 data \ Resource \ MyHMI \ Image 資料夾中。在最後主程式上傳時就會自動把檔案燒入到 QEC 主站的 EMMC 中。

86hmi-42

而使用者在 External 新增自定義的圖形檔案、音效檔案或字型檔後，則會把檔案先存在專案路徑中的 exData 資料夾，使用者需要手動複製 exData 資料夾到外部的硬碟中，例如 SD/USB。此功能是為了避免因自定義的檔案過多且容量過大，會讓 QEC 主站 EMMC 容量不足。

86hmi-43
86hmi-44

補充說明:
刪除資源
如果要刪除檔案資源庫中的圖形、音效檔案時，須注意專案中是否有在使用此資源；如果有，則會導致無法在資源庫中移除，需要將使用中的資源檔案元件屬性變更為其他選項，才能從資源庫中移除。字型檔案要到主題組態器去移除使用，才能讓字型資源允許被刪除。
在刪除字型資源前，必須先從主題設定工具 (Theme Configurator) 中移除相應的字型檔案。

86hmi-45
主題管理 (Theme Management)

目前提供兩種主題、共計三種配色供使用者使用，主題組態器可以設定四種主題色與六種字型配置。

86hmi-46

其中，以下是預設的主題及配色

  1. Material 主題中的 Light 配色:
    86hmi-47
  2. Material 主題中的 Dark 配色:
    86hmi-48
  3. Night 主題中的 Black 配色:
    86hmi-49

除了使用預設的主題及配色外，使用者可以點選 “主題組態器” 按鈕調整其配色和字型。

86hmi-50

主題組態器 ( Theme Configurator )可以設定四種主題色與六種字型配置。

  1. Theme Colors Settings:
    86hmi-51
  2. Font Settings:
    86hmi-52

當前所有元件會共用預設的四種主題色及六種字型配置，而使用者可以依據喜好調整預設配色及字型。編輯完成後，使用者只需在該元件的屬性欄中選擇對應的配置及可套用其配置。

使用者可以在元件的屬性欄中的 ObjColor 選項中選擇不同的主題配色。

86hmi-53

使用者也可以在元件的屬性欄中的 TextFont 選項中選擇不同的字型配置

86hmi-54

如果需要對主題配色做修改可以選擇配色選單中的「Customize...」的選項，但因為需要先理解調色盤的相應關係，所以不建議一般使用者修改。

86hmi-55

選擇配色選單中的「Customize...」的選項後，點選主題組態器後就可以依據使用者需求做調整成使用者自定義的主題配色色調。

86hmi-56
86hmi-57

配色部分都可以在色碼欄位直接輸入圖形編輯軟體的色碼。

86hmi-58

補充說明:
輔助色設定中，顏色與元件之間的對應關係，與 LVGL 底層程式碼的設定相關。 如需了解詳細的對應內容，請參考 LVGL 官方網站的說明與 LVGL 原始程式碼。
LVGL 官方網站網址： https://docs.lvgl.io/7.11/.

元件文字內容預設設定 (Object Language Content Default Settings)
86hmi-59

LangID 是一個可以使 86HMI 快速設定為多國語言的功能，只需要透過切換 LangID 來設定個別的文字設定，而後再透過API、ArduBlock 積木或是事件指令來達到切換語言的功能。切換 LangID 後，每個包含文字屬性的元件都需要個別修改為相對應的語言。

目前支援 9 個 LangID，供使用者設定。

86hmi-60

設定 LangID 的方式在新增功能元件後；例如新增 Button 或 Label 元件，先選擇 LangID 1~9 中任一組，再到右側屬性設定視窗中的 Text 欄位，輸入想要的語系文字(可利用複製翻譯軟體翻譯的語系文字再於 Text 欄位中貼上)，再選擇 LangID 1~9 中任一組設定語系文字，輸入想要切換的語系文字，最多可設定 9 種語系文字。

86hmi-61
利用該功能可以做為文字語系的切換

Use 86hmi-70 under 86hmi-71 on the right side of the window, or use it with API and ArduBlock building blocks to execute instructions to switch LangID for language switching events.

86hmi-72
生成程式碼 (Code Generation)
86hmi-73

點擊後會轉換成程式碼，並將專案儲存並關閉，使用者可以用 86Duino Coding IDE 撰寫程式呼叫 API 或是透過 ArduBlock拖曳積木產生程式。86Duino IDE 介面產生該專案的 HMI API，包含原始檔(.cpp)與標頭檔(.h)。

86hmi-74

當 86HMI 專案有外部資源時，則會在生成進度結束後出現提醒視窗，這時可以利用「Open exData」按鈕開啟外部資源的資料夾，再將檔案複製至外部儲存空間。

86hmi-76

補充說明:
86EVA生成程式碼後，會在主程式(.ino)中自動產生以下程式碼，缺一個都會導致86HMI不運作。

3.2.5 工具箱 (Toolbox)

工具箱位於 86HMI 視窗的左側，該區域擺放所有元件並依類別區分，以利使用者選擇。
此區域包含所有物件，並依類別進行分類，方便使用者選擇。

86hmi-77

關於詳細的元件使用及參數說明，請參考到 4. 功能設置。

元件類別
86hmi-4686hmi-4886hmi-49
基本功能元件控制功能元件可視化功能元件
86hmi-5086hmi-51
輸入功能元件目錄功能元件

3.2.6 工作區 (WorkArea)

元件呈現的區塊，此章節將會說明其工作區的相關功能。

86hmi-78
新增元件

工具箱含有許多元件，使用者可以使用「拖曳」或「雙擊」的方式來將元件添加到工作區上

86hmi-79
移動元件位置 (快捷鍵: 方向鍵)

在選取框內按下左鍵拖曳位置。

86hmi-80
縮放大小 (等比例快捷鍵: 按住 shift 鍵)

將選取框四周的方塊按下左鍵拖曳大小。

86hmi-81
工作區縮放比例

可以切換工作區的顯示比例，對不同大小的螢幕較友善。

86hmi-81
元件工具列

可編輯元件功能，包含複製、貼上、刪除、功能元件順序調整、復原&重做

86hmi-82
  • 複製 (快捷鍵：Ctrl+C): 將選取到的元件複製。
  • 貼上 (快捷鍵：Ctrl+V): 將上次複製的元件貼上，貼上的元件將會位移，以辨識新元件已貼上。
  • 刪除 (快捷鍵：Delete): 將選取到的元件刪除。
86hmi-83

注意：
元件的 ID 編號都是唯一的，元件 ID 編號會遞增+1。如果將原編輯好元件刪除，其新增的元件 ID 編號並不會與刪除的相同，例如將 p1b1 (Button)刪除後，再新增 Button 會為 p1b2，如再將 p1b2 刪除再新增 Button 就會變成 p1b3，以此類推。使用者透過程式碼控制元件是依據 ID 編號做識別，因此請注意 ID 編號是否正確。
如果是失誤不小心刪除，或後悔刪除想還原，就可以利用“還原”跟“重做”功能元件是有機會挽回失誤!

  • 上移: 將選取到的元件上移一層。
  • 下移: 將選取到的元件下移一層。
86hmi-84
  • 復原 (快捷鍵：Ctrl+Z) : 將操作回到上一步。
  • 重做 (快捷鍵：Ctrl+Shift+Z / Ctrl+Y) : 將已復原的操作取消。
86hmi-85

補充說明:
復原及重做功能

  1. 在許多元件中的 Text 相關屬性支援 LangID 的功能，由於不同 LangID 中的 Text 屬性是分開儲存的，所以在復原、重做時有可能會修改到不同於當前 LangID 的內 Text屬性，編輯區看起來會沒有任何動作。
  2. 復原、重做不會將事件中的新增刪除修改指令視為一個操作。但當復原、重做的行為影響元件並使其刪除時，會將該元件中的所有事件紀錄下來，並於反向新增時復原其事件內容。
  3. 復原、重做只支援 Page 的屬性設定，不支援新增、刪除、複製 Page 等操作。
  4. 在 86HMI Editor 中有些計數器會限制其刪除功能，包含：Page (Page Change 指令)、圖片庫(ImageSource 屬性…等)、音樂庫 (Play Sound 指令)、字型庫 (主題字型)。
    當該計數器歸零時，即可將其刪除，所以當刪除影響這些計數器的元件後，再將其 Page / 資源刪除，會導致復原的相對應設定變回預設值。例如在 Page1 中 Button p1b1 的 Clicked 事件中 [添加一個 Page Change: p2] 的指令。此時Page2 會因為被使用中，所以無法將其刪除。但若是 [將 Button p1b1 刪除] 使其計數器會歸零，之後再將 Page2 刪除。此時若使用復原功能，反向執行 [將 Button p1b1 刪除] 時 Button p1b1 Page Change 內容將無法再設定為 p2，則該設定會直接變回預設值 (None)。同理，圖片資源刪除時會影響 Image 相關元件中的 ImageSource 屬性；音效資源則會影響 Play Sound 指令。而字型 庫，因為主題功能的操作並不在復原、重做的範疇，所以字型庫不影響復原、重做。

3.2.7 頁面 (Page) 管理

頁面是 86HMI 主要的背景，此章節將會說明頁面管理的相關功能。

86hmi-86
頁面清單 ( Page List )

將「工作區」的顯示切換至 「Page 清單」中選取到的 Page。

86hmi-87
頁面工具列 ( Page Toolbar )
86hmi-88
  • 新增 Page: 新增一個空白的 Page。
  • 刪除選中的 Page: 將選中的 Page (包含該 Page 中的所有元件)刪除。
86hmi-89
  • 複製選中的 Page: 將選中的 Page (包含該 Page 中的所有元件)複製為新的一個 Page。
86hmi-90

注意：
刪除 Page 後又新增 Page，其 Page 編號不會變回原來的 Page 編號，而是會遞增 +1，例如將 Page2 刪除後又新增Page，這時新增的 Page 就會變成 Page3。重新將 86HMI Editor 重新生成程式碼後，將會重新生成 Page3 元件編號的程式 碼，所以在 86Duino IDE 編輯好的程式碼，就需要逐一修改跟 Page2 有關的元件 ID 編號，不然最終程式生成程式碼會出現錯誤訊息，找不到元件編號。

3.2.8 屬性欄 & 事件欄 (Property grid & Event grid)

頁面及元件的屬性參數設定欄和事件設定欄，此章節將會說明屬性欄和事件欄的相關功能。

86hmi-91
屬性欄 (Properties)

將選到的頁面 (Page) 或元件的屬性列出，並可以對其修改屬性達到客製化的效果，例如修改座標、長寬等。

A. 元件的屬性欄:

包括 ID、名稱、內容、擺放座標位置、元件顏色、元件大小、字型及字體大小選擇等屬性參數設定。

86hmi-92

關於詳細的元件使用及參數說明，請參考到 4. 功能設置。

B. 頁面 (Page) 屬性欄:

包括 ID、名稱、內容、事件發生的條件、與執行方式跟計時器參數設定。

86hmi-93

頁面 (Page) 屬性欄說明如下。

  • Wallpaper: 桌面底圖 (有關圖形檔案資源說明，請參考圖形檔案資源)。
  • TimerMode: 計時器的觸發方式。
    86hmi-94
    • One Shot：進入此 Page 後多久時間 TimerInterval (ms) 來執行該事件(只執行一次)。
    • Periodic：進入此 Page 後每隔多少時間 TimerInterval (ms) 重複執行該事件。
  • TimerInterval (ms): 計時器觸發的時間間隔。
  • TimerEnable：是否使用計時器。
事件欄 (Event)

將選到的頁面 (Page) 或元件的事件及指令列出，目前僅支援頁面及少數元件。其作用為讓使用者能使用事先設定元件和頁面要執行的事件，來節省使用者編輯程式碼的時間。

86hmi-95
  • 事件選單 (Event Menu) : 選擇元件和頁面要執行的事件。
  • 新增指令 (Add instruction) : 新增事件指令。
  • 刪除指令 (Delete instruction) : 刪除事件指令。
  • 編輯指令 (Edit instruction) : 編輯事件指令。
  • 上移 (Move Up) : 上移事件指令順序。
  • 下移 (Move Down) : 下移事件指令順序。

補充說明:
指令有執行先後順序的問題，清單中越上面的會先執行，一路執行至最後一個指令。

A. 元件的事件欄:

有支援事件欄的元件: Button、ToggleButton、ImageButton、ImageToggleButton。

  1. Button / ImageButton 元件事件發生的條件: Clicked (點擊)、Pressing (按壓)。
    86hmi-96
  2. ToggleButton / ImageToggleButton 元件事件發生的條件: Checked (打開)、Unchecked (未打開)。
    86hmi-98
B. 頁面 (Page) 事件欄:

頁面事件發生的條件: Enter (進入 Page)、Leave (離開 Page)、TimerEventTriggered (計時器)。

86hmi-99

需搭配頁面的屬性欄參數使用

86hmi-100
  • Enter: 條件為進入當前 Page 觸發事件。
  • Leave: 條件為離開當前 Page 觸發事件。
  • TimerEventTriggered: 使用當前 Page 計時器設定的時間來做觸發事件。

注意：
因為 Page Timer 相關的設定牽扯到 Events，所以僅建議給進階使用者使用，若使用者對事件運作方式不熟悉，可能會導致程式行為不如預期。
例如，使用者可能不小心將兩個頁面的事件互相設定為在進入後立即執行 Page Change（頁面切換） 指令。 當進入 Page1 時，會立刻執行切換至 Page2 的指令； 而進入 Page2 時，又立刻執行切換回 Page1 的指令。 如此一來，系統將陷入不斷循環切換頁面的狀態，無法離開 Page Change 的循環。

C. 事件的指令功能

目前支持的指令包括切換頁面 (Page Change)、設定語言 (Set Language)、播放音效 (Play Sound)、Custom Instruction。

86hmi-101

切換頁面 (Page Change) 使用方式:
選擇有事件欄的元件後

  1. 選取對應的事件 (此範例用 Clicked)
  2. 點選下方+新增功能
  3. 選擇 Page Change 的指令
  4. 選擇要切換的頁面 (此範例用 p1)
86hmi-102

設定語言 (Set Language) 使用方式:
選擇有事件欄的元件後

  1. 選取對應的事件 (此範例用 Clicked)
  2. 點選下方+新增功能
  3. 選擇 Set Language 的指令
  4. 選擇要切換的 LangID (此範例用 LangID 2)。
86hmi-103

Play Sound usage:
選擇有事件欄的元件後

  1. 選取對應的事件 (此範例用 Clicked)
  2. 點選下方+新增功能
  3. 選擇 Play Sound 的指令
  4. 選擇要切換的音效檔案 (此範例用 Isnd0)
86hmi-104

補充說明:
Custom Instruction 功能
其中 Custom Instruction 使用者可利用編輯程式碼來編輯該元件或工作區 Page 要執行的事件，這選項屬於專業進階選項，使用者須熟悉 86Duino 程式再進行編輯。

86hmi-105

3.2.9 元件清單 (Object List)

元件清單列表，此章節將會說明元件清單列表的相關功能。

86hmi-106

每個 Page 與元件都有一個獨立的 ID，用 86HMI Editor 編輯後需要利用此 ID 作為索引，使程式知道你的對象是哪一個Page 或元件。

86hmi-107

元件清單會顯示當前頁面(Page)中的所有元件，次序由最上層到最下層，點選清單中的選項與點選工作區上的元件相同。 在編輯功能元件時，會有該元件的元件 ID 會在右下角的視窗列出，如在編輯過程中發生因輸入座標超出工作區範圍時或被疊加在其他元件下無法看到時，使用者可利用工作區元件清單列表找到需要調整的元件編號(ID)，再調整位置或順 序來進行修正。

86hmi-108

元件清單內的順序即為元件之間的圖層順序，使用者可以利用工具列的上下移動圖層的上移/下移功能，來決定元件顯示的順序。

86hmi-109

如下圖，在元件清單裡能選中被遮蓋住的元件，點擊圖層上移按鈕就能使其上移被看見，此時元件清單內的元件順序也會被同步改變。

86hmi-110

4. 元件功能設置

此章節將會介紹在工具箱中所有的元件設定及使用說明。

4.1 Primitives widgets

86hmi-4-1

Primitives widgets 有的元件如下:

4.2 Control widgets

86hmi-4-2

Control widgets 有的元件如下:

4.3 Visualization widgets

86hmi-4-3

Visualization widgets 有的元件如下:

4.4 Input widgets

86hmi-4-4

Input widgets 有的元件如下:

4.5 Menu widgets

86hmi-4-5

Menu widgets 有的元件如下:

5. 基本操作與進階功能

5.1 介紹

此章節將會介紹 86HMI 所有元件的基本操作與進階功能。
利用 86HMI Editor 中程式碼生成 (Code Generation) 的功能來產生人機介面的 API (應用程式介面)，進而達到不需要寫程式即可製作出人機介面的效果。
程式碼生成後會將專案儲存並關閉，使用者可以用 86Duino Coding IDE 或 ArduBlock 來使用 API。86Duino Coding IDE、86HMI Editor 和 ArduBlock 工具之間的關係如下圖。

86hmi-5-1

86HMI Editor 在 code generation 後，該專案目錄下會生成主程式、myhmi.cpp、myhmi.h 以及 data 資料夾。

86hmi-5-2

data 資料夾中包含了：

  • 86HMI Editor 的專案檔 _project.hpj
  • ArduBlock 專案檔 _ardublock.abp
  • 以及兩個資源庫的目錄。資源庫分別為：提 供給 IDE 上傳的內部資源 Resource 以及需要 由使用者自行複製到外部空間的 exData。
86hmi-5-3

首先說明 86HMI 生成的程式碼及檔案，如下:

代碼描述
Main program (.ino)取決於您的專案名稱
myhmi.cpp86HMI 的 C++程式碼
myhmi.h86HMI 的 Header 檔
86hmi-5-4

5.1.1 Main program (.ino)

為使用者的主程式，可以自定義專案名
86EVA生成程式碼後，會在主程式(.ino)中自動產生以下程式碼，缺一個都會導致86HMI不運作。

86hmi-5-5
  1. 引入86HMI的Header檔。
    include “myhmi.h”
  2. 初始化86HMI功能。
    void setup() {
    Hmi.begin();
    }

5.1.2 Header file (myhmi.h)

為標頭檔，裡面包含了使用者主要要使用的 MyHMI class 以及聲明所有 Page、元件以及資源等變數。 簡易說明如下:

86hmi-5-6

5.1.3 Implementation file (myhmi.cpp)

myhmi.cpp 中包含了 MyHMI 的實作、Pages/Objects 的初始化、資料結構以及 LVGL 的 event_handler 等。在 86HMI Editor 中的 event instructions會將程式及指令置於 event_handler 中。
在 86HMI Editor 1.0.2.7 版加入了 Global code，亦會將該程式碼置於本檔案的最前端，可以添加全域變數、函式等，亦可使用 #include 來使用外部函式庫。

86hmi-5-7

注意：
MyHMI 將資料儲存於 LVGL 元件的 user_data 中，所以在跳過 API直接操控 LVGL 元件時需注意不要覆蓋到 user_data。

5.1.4 Sample of event timeline

在 86HMI 環境中，事件的處理和管理是通過一個精細設計的時間線來協調的。這個時間線使您能夠設定和監控事件觸發和相對應腳本的執行，從而創建一個動態且互動的用戶界面。

在實際應用中，每個事件將對應於一個具體的用戶操作或系統變化，像是按鈕點擊、感測器讀數變化等，例如 event1 是 button click 之類的。

86hmi-5-8
事件處理架構

86HMI 使用基於 LVGL 圖形庫的事件處理系統。此系統允許開發者設定條件觸發事件，並綁定特定的腳本或行為以對這些事件做出響應。

  • HMI 事件區段:
    在這裡定義了若干條件和腳本的對應關係，例如："IF event1 THEN script1"。這樣當特定事件被觸發 時，相對應的腳本將會執行。
  • 任務處理:
    hmi_task_handler() 是一個持續運行的功能，它循環檢查事件區段並更新 LVGL 元件，確保用戶界面反映出最新的數據和狀態。
事件塊與腳本執行

當事件被觸發時，它會被分配到一個事件塊，並且相應的腳本會被執行。這意味著每一個事件都有一個明確的開始（觸發點）和結束（腳本執行完畢），使得事件處理既有序又可追蹤。

5.2 API Functions

此章節將會說明 86HMI 的元件與 API 如何搭配使用。
初始化說明如下:

86hmi-5-9
  • 預先配置物件 Hmi 供使用者使用，亦可以自己配置一個。
  • MyHMI 建構子中並未做任何初始化動作。
  • 呼叫 begin() 後 MyHMI 將進行初始化，並且限制僅有一個 MyHMI 物件能運作。
  • 初始化包含 LVGL、字型、圖片、音效，而 widgetsInit() 會將所有 HMI Pages/Objects 都配置好。
  • 最後會掛載一個 Task 並運行， hmi_task_handler() 中進行 LVGL 與各種狀態的更新。
86hmi-5-10

補充說明: 參數規格

  • Commands、States、Events 的方法皆有多載三種方法，其參數分別為直接用 ID 的 lv_obj_t* id 或用 Name 查詢的char* name。
  • 部分特例為客製元件的方法，其多載會多出類別的參數，並且其 ID 對應之型別也未直接為該類，如 Oscilloscope。

5.2.1 搜尋功能

5.2.2 一般功能

Page

有關頁面說明，請參考頁面 (Page) 管理。

LangID

有關 LangID 說明，請參考元件文字內容預設設定。

Sound

有關音效資源說明，請參考音效檔案資源。

MessageBox
86hmi-5-11
AlarmBanner
86hmi-5-12

5.2.3 元件功能

此章節將說明各元件所對應的 API 指令功能、狀態功能和事件功能。

在事件中，會捕捉當前 HMI 發生的事件，使當中的 Event block 可以判斷該事件是否發生，成立後將會執行腳本。

86hmi-5-13

通常寫法開頭為 BEGIN_HMI_EVENT_PROC ，結尾為 END_HMI_EVENT_PROC，如下圖。

86hmi-5-14
通用功能

可設定於所有元件。

請參考各物件對應的說明頁面以了解其功能。

附錄

A-1 關於 LVGL

86Duino Coding IDE 500 採用 LVGL 7.11.0 版本進行整合。

而 LVGL（輕量級和多功能圖形庫）是一個免費的開源圖形庫，提供創建嵌入式 GUI 所需的一切，具有易於使用的圖形元素、精美的視覺效果和低記憶體佔用。

主要特點

  • 強大的構建塊，如按鈕、圖表、清單、滑塊、圖像等。
  • 具有動畫、抗鋸齒、不透明度、平滑滾動的高級圖形
  • 各種輸入設備，如觸控板、滑鼠、鍵盤、編碼器等。
  • UTF-8 編碼的多語言支援
  • 多顯示器支援，即同時使用更多 TFT、單色顯示器
  • 完全可定製的圖形元素
  • 獨立於硬體，可與任何微控制器或顯示器配合使用
  • 可擴展，只需很少的記憶體（64 kB 快閃記憶體，16 kB RAM）
  • 操作系統、外部記憶體和 GPU 支援但不是必需的
  • 單幀緩衝操作，即使具有高級圖形效果
  • 用 C 語言編寫以實現最大的相容性（相容 C++）
  • 模擬器可在沒有嵌入式硬體的 PC 上啟動嵌入式 GUI 設計
  • 綁定到 MicroPython
  • 用於快速 GUI 設計的教程、範例和主題
  • 文檔以在線和離線形式提供
  • 在 MIT 許可下免費開源

關於更多 LVGL 資訊，請到 LVGL 官網查看: https://docs.lvgl.io/7.11/index.html.

A-2 Custom Instruction

除了在主程式 (.ino) 中使用 HMI 的方法之外亦可以在 custom instruction 客製化指令裡面使用這些方法。

Custom Instruction 使用者可利用編輯程式碼來編輯該元件或工作區 Page 要執行的事件，這選項屬於專業進階選項，使用者須熟悉 86Duino 程式再進行編輯。

86hmi-a-1

在 86HMI Editor 加入了搜尋與快速輸入選單，使編輯更方便。也加入了 Global code，會將該程式碼置於 myhmi.cpp 的最前端，可以添加全域變數、函式等，亦可使用 #include 來使用外部函式庫。

86hmi-a-2

注意：
在 Local Script 中使用 showMessageBox 時，不會 block 在此方法中，並會直接回傳 -1。

86Duino 參考的文本是根據 知識共享署名-相同方式分享 3.0 許可證，部分文本是從 Arduino 參考 修改的。 參考中的代碼示例已發佈到公共領域。

請輸入搜尋關鍵字並按下 Enter 以搜尋

返回頂端