GUI產(chǎn)品的定位，對(duì)于一位產(chǎn)品開(kāi)發(fā)人員來(lái)講都希望自己開(kāi)發(fā)的產(chǎn)品引領(lǐng)潮流，吸引消費(fèi)者買單。

怎樣才能做出具有競(jìng)爭(zhēng)力的產(chǎn)品呢？如圖一，圖二，圖三所示。

圖一

圖二

圖三

從產(chǎn)品本身來(lái)講，在控制硬件成本的同時(shí)，產(chǎn)品的功能豐富且人機(jī)交互方式炫酷，產(chǎn)品視覺(jué)的沖擊性較強(qiáng)，成為現(xiàn)在具有競(jìng)爭(zhēng)力產(chǎn)品的先決條件。不管您做的產(chǎn)品是屬于哪個(gè)行業(yè)，現(xiàn)在附加值高的產(chǎn)品都與顯示屏有著不可分割的關(guān)系。有些產(chǎn)品架構(gòu)師都已經(jīng)把顯示部分與產(chǎn)品本身分離開(kāi)發(fā)，對(duì)顯示屏部分的開(kāi)發(fā)十分重視，因?yàn)檫@直接關(guān)乎產(chǎn)品的銷量，最終影響公司的效益。可見(jiàn)GUI對(duì)我們產(chǎn)品的重要性。如圖4所示。

圖四

我們常見(jiàn)的行業(yè)有醫(yī)療電子，工業(yè)控制，汽車電子，智能家居等。

大家都面臨同樣一個(gè)問(wèn)題：GUI如何選擇？

產(chǎn)品總監(jiān)：“我希望產(chǎn)品的交互界面對(duì)消費(fèi)者有吸引力，所以界面要炫酷！”

產(chǎn)品經(jīng)理：“我希望我的工程師能夠快速開(kāi)發(fā)產(chǎn)品，效率一定要高且方便！”

UI設(shè)計(jì)師：“做的界面炫酷些，圖片對(duì)視覺(jué)要有沖擊……,這個(gè)界面友好些，這個(gè)界面切換要有動(dòng)畫……”

產(chǎn)品工程師：“又來(lái)活了！?。。?！啊，這個(gè)界面我該怎么辦?。。。。?！”

從產(chǎn)品的角度上看，管理者都希望每個(gè)產(chǎn)品是爆款。UI設(shè)計(jì)師僅僅負(fù)責(zé)做好布局，提供炫酷的界面，剩下的就到實(shí)際開(kāi)發(fā)的工程師那里。GUI選擇的好，產(chǎn)品實(shí)現(xiàn)起來(lái)就會(huì)容易滿足需求。

嵌入式行業(yè)提到GUI大家可能都會(huì)說(shuō)上那么一兩個(gè)，如：emWin、Qt、TouchGFX等。

總結(jié)大家的整體需求：對(duì)于大部分產(chǎn)品來(lái)講，大家都希望做一款顯示終端，終端可以通過(guò)通訊接口與下行設(shè)備進(jìn)行數(shù)據(jù)交互實(shí)現(xiàn)控制，類似串口屏但是要比串口屏界面靈活且交互性體驗(yàn)良好。這樣將顯示部分的開(kāi)發(fā)與產(chǎn)品本身分離出來(lái)，顯示部分硬件不改變的同時(shí)，軟件架構(gòu)不改變，只需每個(gè)產(chǎn)品對(duì)應(yīng)一個(gè)顯示的APP。

AWTK，一款真正意義上的跨平臺(tái)GUI

AWTK平臺(tái)是一套基于C語(yǔ)言的跨平臺(tái)GUI開(kāi)發(fā)框架，可用于開(kāi)發(fā)物聯(lián)網(wǎng)、消費(fèi)電子、工業(yè)控制、汽車電子、智能家居等領(lǐng)域的應(yīng)用產(chǎn)品，旨在為用戶提供一個(gè)功能強(qiáng)大、高效可靠、簡(jiǎn)單易用、可輕松做出炫酷效果的GUI開(kāi)發(fā)解決方案，使用戶開(kāi)發(fā)GUI應(yīng)用就像開(kāi)發(fā)串口應(yīng)用一樣簡(jiǎn)單。開(kāi)發(fā)流程如圖5所示。

圖五

優(yōu)勢(shì)，讓懂的人一眼就明白。

1、支持純C語(yǔ)言編程

2、支持跨多種操作系統(tǒng)，跨多種硬件平臺(tái)，小巧高效

3、擁有完善的動(dòng)畫系統(tǒng)，豐富的GUI控件，支持硬件加速

4、支持位圖字體和矢量字體

5、內(nèi)置中英文輸入法，并支持智能詞組輸入

6、支持視網(wǎng)膜高清分辨率技術(shù)

7、支持組態(tài)方式開(kāi)發(fā)界面，所見(jiàn)即所得

8、支持界面與邏輯分離技術(shù)，用腳本直接編寫邏輯

9、支持云端模板和組件市場(chǎng)，構(gòu)建開(kāi)發(fā)生態(tài)圈

技術(shù)技巧分享：

1、醫(yī)療電子GUI需求：圖表曲線描繪

app.main.c中要對(duì)line_series 控件進(jìn)行創(chuàng)建，如圖六所示。

圖六

使用XML將界面描繪出來(lái)，如圖七所示。

圖七

使用如下函數(shù)界面用打出原始的12個(gè)點(diǎn)

使用定時(shí)生成數(shù)據(jù)會(huì)3000ms增加一個(gè)新的點(diǎn)

細(xì)節(jié)如圖八，圖九，圖十，圖十一，所示。

圖八

圖九

圖十

圖十一

這樣就實(shí)現(xiàn)了在現(xiàn)有的曲線上添加了一個(gè)新的數(shù)據(jù)并繪制。效果如下圖十二所示

圖十二

2、工業(yè)儀表指針、汽車電子指針需求：

首先對(duì)需要的指針進(jìn)行資源打包處理，此步驟參考《AWTK開(kāi)發(fā)實(shí)踐》。

我們要將指針使用XML描繪出來(lái)如下圖十四所示：

圖十四

這里講一下動(dòng)畫參數(shù)，可以參考《AWTK開(kāi)發(fā)實(shí)踐》。如圖十五，圖十六所示。

定義一個(gè)旋轉(zhuǎn)指針，初始化value=-128，動(dòng)畫參數(shù)是從-128到+128，無(wú)線循環(huán)，周期是3000ms，啟動(dòng)延時(shí)1000ms。

圖十五

圖十六

如圖十七，圖十八，所示，調(diào)用開(kāi)始按鈕啟動(dòng)動(dòng)畫。

圖十七

圖十八

實(shí)現(xiàn)效果如下圖十九：

圖十九

我們使用同樣的方法可以實(shí)現(xiàn)如下類型的指針，只不過(guò)是指針的樣子換了圖片資源而已。

如圖二十，圖二十一，圖二十二所示。

圖二十

圖二十一

圖二十二

新功能預(yù)告：

為滿足廣大嵌入式開(kāi)發(fā)者的需求，我們拖拽式開(kāi)發(fā)界面即將發(fā)布，滿足各式各樣的控件拖拽。似乎在嵌入式開(kāi)發(fā)過(guò)程中找到了自己的另一半， AWTK會(huì)不舍不棄與您同行。開(kāi)發(fā)界面如圖二十三所示。

圖二十三