基于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