本文導(dǎo)讀

上期小編分享了拿到ZMP110x 創(chuàng)新串口屏評(píng)估套件的感受，本期說(shuō)說(shuō)小編如何在2天內(nèi)，從定義新功能開始，做出一個(gè)具備交互功能的UI。

上周小編拿到ZMP1106創(chuàng)新串口屏評(píng)估套件后，前后花了兩天時(shí)間，做了一個(gè)簡(jiǎn)單的小區(qū)門禁UI的演示demo，完事后將UI設(shè)計(jì)過(guò)程整理成文，分享給大家。 小編將UI設(shè)計(jì)分為三步，第一步：定義功能并搜集制作UI素材（主要時(shí)間花在這部分，費(fèi)時(shí)一天半）；第二步：基于AWTK進(jìn)行UI設(shè)計(jì)（只花了2個(gè)小時(shí)）；第三步：進(jìn)行UI升級(jí)驗(yàn)證。下面將詳細(xì)介紹各個(gè)步驟。

定義功能并搜集制作相關(guān)UI素材（準(zhǔn)備工作）

老大讓我自己做個(gè)UI演示demo練練手，但是沒(méi)說(shuō)具體要做什么，需要自己去想。如圖所示，UI界面的設(shè)計(jì)靈感來(lái)自網(wǎng)上某小區(qū)的可視化對(duì)講界面，控件主要包含通話、監(jiān)控、物業(yè)公告、電梯控制，以及靜態(tài)顯示日期、時(shí)間和天氣等，并實(shí)現(xiàn)撥通和掛斷電話的功能。小編從網(wǎng)上收集并繪制了相關(guān)UI素材，做好了UI設(shè)計(jì)前的素材準(zhǔn)備工作。

圖1 可視化對(duì)講界面

基于AWTK進(jìn)行UI設(shè)計(jì)

素材設(shè)計(jì)完成后，小編參照應(yīng)用開發(fā)手冊(cè)，使用AWTK Designer上位機(jī)軟件來(lái)繪制UI界面。從新建UI工程開始到設(shè)計(jì)完成。

UI固件升級(jí)

在UI設(shè)計(jì)完成后，將整個(gè)UI項(xiàng)目拷貝到eclipse工程的”awtk_demo”文件夾中，并配置工程；編譯后生成的bin文件即為UI固件，更名為“awtk.bin”，并將其拷貝到SD卡或U盤；插入到串口屏主控板，并短接R與G，按下復(fù)位按鍵即可完成串口屏UI固件升級(jí)。

圖2 門禁UI界面顯示

至此，串口屏小區(qū)門禁UI設(shè)計(jì)的整個(gè)過(guò)程就結(jié)束了，后續(xù)小編將把本UI的設(shè)計(jì)代碼推送到：

https://gitee.com/zlgmcuopen/hmi_zmp110x_application ，歡迎大家關(guān)注。

審核編輯 ：李倩