基於Nuvoton NuMaker-M467HJ emWin AppWizard人機介面解決方案

HMI是Human Machine Interface 的英文縮寫，以更美麗的GUI畫面取代傳統的按鈕及七段顯示器等硬體規格，HMI應用範圍觸及了各個領域，舉凡工業控制、家電、IOT設備等等，透過(觸控)LCD讓機器與人的溝通更加簡單方便以及更直覺的操作。

AppWizard是一款支持emWin圖形庫的圖形化人機界面設計工具，透過此工具拖拉式的使用與設定方式，在僅需編寫極少代碼的情況下，便能完成GUI設計與開發。

下面我們實作一個簡單的頁面，來看看強大的AppWizard是如何操作的。

1. 首先點選Screen，創造一個頁面，之後的功能都於這個頁面疊加上去


2. 接著點選Box，選擇白色當作我們的桌面底色


3. 再來我們試著放一張圖片，可以點選Image物件，並於右邊Set Bitmap處點選並import我們想顯示的圖片


4. 下面我們點選了一個QRCode的標示，並於Set text設定QRCode的內容


5. 簡單的做一個拖拉bar與數值的互動，點選slider物件，可自行設定參數的範圍


5. 創造一個Text物件，用於顯示上面slider bar的數值


6. 最後要讓Slider bar與text做連動，可以透過Interactions內的設定來達成，由左而右的意思是"當ID_SLIDER_00的數值改變時，設定數值於ID_TEXT_00"


7. 可於Editor視窗點選右上角的撥放鍵，模擬之後LCD上的行為動作


8. 以上我們的畫面就製作好了，接著下載M467的BSP包以及Nuvoton emWin的相關檔案
M460 BSP link
https://github.com/OpenNuvoton/m460bsp
emWin code(en-us--M467_emWin_Package)可於M467頁面的資源 -> 軟體內找到
https://www.nuvoton.com/resource-download.jsp?tp_GUID=SW152023041001195925&currentFolder=/products/microcontrollers/arm-cortex-m4-mcus/m467-ethernet-crypto-series/

9. 解壓縮en-us--M467_emWin_Package後，將emWin放到BSP的ThirdParty，並且將emWin_SimpleDemoAppWizard sample code放置於m460bsp-master\SampleCode\NuMaker_M467HJ內


10. 將AppWizard project內的Source & Resource複製到emWin_SimpleDemoAppWizard\Application並替代


11. 打開keil的Manage Project items將application舊的檔案都刪除，並加入新的Source & Resource檔案


12. 最後確認編譯沒問題後進行燒錄，即可於EVB上看到實作的成果


PS : AppWizard tool放置於en-us--M467_emWin_Package\M460_emWin_NonOS\emWin\Tool