1、核心優(yōu)勢：操作簡便，快速上手

QD Plus（QuodiX）工具提供了直觀的界面和便捷的操作流程。UI 設(shè)計(jì)師只需導(dǎo)入設(shè)計(jì)好的圖片（如PNG、JPG 等常見格式），通過拖拽和設(shè)置事件，即可快速完成界面的布局和動(dòng)畫效果。無需復(fù)雜的編程知識(shí)，即使是新手也可通過觀看幫助視頻后，1到2個(gè)小時(shí)內(nèi)掌握基本的用法。

2、QD Plus工具界面介紹

（1）主界面介紹

（2）Application界面介紹

（3）Resource界面介紹

（4）Event Action界面介紹

3. QD Plus（QuodiX）的API使用簡單

QD Plus 是一款非常簡化的HMI工具，專為開發(fā)人員設(shè)計(jì)，使其能夠快速、便捷地操作。該工具只提供2個(gè)API接口且開放C源碼，其中常用的僅1個(gè)——`hmi_engine_set_object_info`，這極大地簡化了操作過程。使用該API，開發(fā)人員可以控制界面上的幾乎所有元素，如按鈕、圖片、動(dòng)畫、事件、多語言切換等。

通過這樣簡潔的API設(shè)計(jì)，開發(fā)者無需編寫冗長復(fù)雜的代碼，便可輕松完成顯示和交互效果。

1：例如，僅需簡單一行代碼，就可以改變元素（例如：QD Plus中圖片元素的名字是my_img）的顯示屬性：

hmi_engine_set_object_info（HMI_NEW_PAGE3, HMI_ACTIVE_PAGE_BIT）;/*顯示new_page3畫面*/

hmi_engine_set_object_info(HMI_MY_IMG_X, 77);/*設(shè)置my_img的x坐標(biāo) 77*/

hmi_engine_set_object_info(HMI_MY_IMG_Y, 99);/*設(shè)置my_img的y坐標(biāo)99。*/

hmi_engine_set_object_info(HMI_MY_IMG_ALPHA, 200);/*設(shè)置my_img的整體Alpha透明度200。*/

例如：QD Plus中text元素的名字是my_text_1時(shí)，設(shè)置text中的字體顏色

hmi_engine_set_object_info（HMI_MY_TEXT _1_COLOR，0xffaabbcc/*argb8888*/);/* 設(shè)置my_text_1字符串的顏色*/

2：例如：觸發(fā)QD Plus（QuodiX）中設(shè)計(jì)好的一個(gè)動(dòng)畫事件。

hmi_engine_set_object_info(HMI_MY_EVENT,HMI_SEND_EVENT_ON);/*my event事件出發(fā)后，這個(gè)動(dòng)畫就會(huì)持續(xù)的運(yùn)行，直到結(jié)束*/

其中：HMI_MY_IMG_X（代表my_img元素的x坐標(biāo)），HMI_MY_IMG_Y（代表my_img元素的y坐標(biāo)），HMI_MY_IMG_ALPHA（代表my_img元素的alpha），HMI_MY_TEXT _1（代表my_text_1元素），

HMI_MY_TEXT _1_COLOR（代表my_text_1元素的顏色）,HMI_MY_EVENT是QD Plus工具生成代碼時(shí)，生成的枚舉類型。我們通過這些元素的枚舉類型去操作元素的屬性和樹狀的包含關(guān)系。

3：設(shè)置顯示多語言。

hmi_engine_set_object_info(HMI_LANGUAGE,HMI_ENGLISH);/*設(shè)置顯示語言english*/
hmi_engine_set_object_info(HMI_LANGUAGE,HMI_CHINESE);/*設(shè)置顯示語言chinese*/

其中HMI_ENGLISH，HMI_CHINESE是在QD Plus中設(shè)置的語言生成的對應(yīng)的枚舉類型。

4：例如：改變一個(gè)樹中dyn_con節(jié)點(diǎn)的包含不同子樹的關(guān)系。例如：用來切換主題

如上圖，兩個(gè)名為stc_con，stc1_con（靜態(tài)容器，容器中可以放其它元素）都屬于名為dyn_con（動(dòng)態(tài)容器，類似多路開關(guān)，某一時(shí)刻只能連通子節(jié)點(diǎn)中的其中一路或全部關(guān)閉）節(jié)點(diǎn)的子節(jié)點(diǎn)，此時(shí)可以通過改變dyn_con容器的值決定dyn_con是連通st_con還是stc1_con.

hmi_engine_set_object_info(HMI_DYN_CON,HMI_STC_CON);/*dyn_con連通stc_con*/
hmi_engine_set_object_info(HMI_DYN_CON,HMI_STC1_CON);/*dyn_con連通stc1_con*/
hmi_engine_set_object_info(HMI_DYN_CON,HMI_DYN_CONTAINER_IS_NULL);/*dyn_con關(guān)閉.HMI_DYN_CONTAINER_IS_NULL是QD Plus定義好的宏*/

5：第二個(gè)API:hmi_engine_edit_text .唯一的用途就是改變text元素的字符串內(nèi)容。

例如：QD Plus中text元素的名字是my_text_1時(shí)。下面設(shè)置my_text_1新的字符串內(nèi)容

HMI_CHAR_STR speed[3]={'1','0',0/*字符串結(jié)束標(biāo)記*/};/*使用GBK漢字編碼*/

hmi_engine_edit_text(HMI_MY_TEXT _1,speed);

6：再寫API時(shí)，我們不需要記憶每個(gè)元素的ID（例如：上面出現(xiàn)過的HMI_MY_IMG_X等），而是直接在QD Plus中，把要操作的元素的ID和對應(yīng)的API復(fù)制到黏貼版中。然后再黏貼到代碼里面。如下圖。

下面是QD Plus API操作界面示例：

操作視頻畫面：

https://www.bilibili.com/video/BV1pm2EY2E6b/?share_source=copy_web&vd_source=7258d8aa5251054c1d4c51d8c4cc2a02（請手動(dòng)跳轉(zhuǎn)）

(1)獲取控制圖片的x坐標(biāo)的ID和對應(yīng)的API。

然后在編寫代碼的地方CTRL+V，黏貼如下（我們僅僅需要填入下面API的第二個(gè)參數(shù)）：

hmi_engine_set_object_info(HMI_NEW_IMAGE7_X, );

(2)獲取控制圖片的y坐標(biāo)和對應(yīng)的API。

然后在編寫代碼的地方CTRL+V，黏貼如下（我們僅僅需要填入下面API的第二個(gè)參數(shù)）：

hmi_engine_set_object_info(HMI_NEW_IMAGE7_Y, );

(3)獲取控制圖片的透明度值和對應(yīng)的API。

然后在編寫代碼的地方CTRL+V:黏貼如下（我們僅僅需要填入下面API的第二個(gè)參數(shù)）：

hmi_engine_set_object_info(HMI_NEW_IMAGE7_ALPHA, );

(4)獲取控制圖片的旋轉(zhuǎn)角度和對應(yīng)的API。

然后在編寫代碼的地方CTRL+V:黏貼如下（我們僅僅需要填入下面API的第二個(gè)參數(shù)）：

hmi_engine_set_object_info(HMI_NEW_IMAGE7_ANGEL,HMI_F32_TO_U32(0/*angle*/) );

API的學(xué)習(xí)成本極低，即使是沒有太多編程經(jīng)驗(yàn)的初學(xué)者，也能在短短5分鐘內(nèi)掌握API的使用方式，極大縮短了開發(fā)時(shí)間。對于需要快速響應(yīng)的UI設(shè)計(jì)項(xiàng)目，QD Plus 的API設(shè)計(jì)無疑提高了效率。看到這里，恭喜你，你已經(jīng)掌握了QD Plus的全部API。

觀看QD Plus的顯示效果，微信視頻號(hào)搜索：QD做圖工具

4：QD Plus（QuodiX）工具的操作

所有的操作，都可以歸結(jié)為在對應(yīng)的節(jié)點(diǎn)上點(diǎn)擊鼠標(biāo)右鍵，然后在彈出的菜單里面，選擇想要的操作。熟悉后，可以直接用快捷鍵。

(1)新建一張page(快捷鍵為F9)。page就是一個(gè)畫面，可以包含很多子節(jié)點(diǎn)。

(2)在該page下新建一個(gè)container(快捷鍵為F5)

(3)新添加一張圖片(快捷鍵為F7)

(4)新添加一個(gè)fill(快捷鍵為F8)

(5)添加一個(gè)spline(快捷鍵為F12)

還有很多添加元素操與上述圖中操作步驟相同，也可直接在根節(jié)點(diǎn)添加對應(yīng)的元素如下圖：

5：QDPlus（QuodiX）動(dòng)畫模擬播放

如下圖是已經(jīng)做好了的一個(gè)動(dòng)畫，選中該動(dòng)畫點(diǎn)擊由下圖紅框中的標(biāo)記：

點(diǎn)擊Run Action便會(huì)彈出下圖，Select Element選擇框，先點(diǎn)擊紅色選擇page（就是一個(gè)畫面），便可看到綠框中的所有page,選擇要播放的Page后，點(diǎn)擊ok即可播放。因?yàn)橐粋€(gè)動(dòng)畫的可能被多個(gè)page包含，所以需要選擇在哪個(gè)page里面播放動(dòng)畫。

模擬播放動(dòng)畫動(dòng)作的畫面。例如，一張圖片沿著Bezier曲線運(yùn)動(dòng)。

6、更多內(nèi)容

提供VS 2015的模擬項(xiàng)目，可以讓客戶沒有硬件的情況下，在這個(gè)里面編寫代碼，QD Plus的資源也生成到指定的目錄下，調(diào)試。后期可以無縫復(fù)制到有硬件的項(xiàng)目里面。

QD Plus的API框架是一個(gè)HMI線程，周期性的運(yùn)行（一般情況下60次/秒），每調(diào)用一次就會(huì)自動(dòng)調(diào)用hmi_user_process(HMI_TIMEdt, TOUCH_BUTTON_STR*pbutton)函數(shù)，用戶可以在這里調(diào)用控制顯示API.

其中HMI_TIME dt是上次調(diào)用到本次調(diào)用經(jīng)過的多少秒。

TOUCH_BUTTON_STR *pbutton是返回的觸摸屏消息。pbutton有2個(gè)元素在hmi_user_interface.c文件中的void hmi_user_process(HMI_TIME dt, TOUCH_BUTTON_STR *pbutton)函數(shù)里添加以下UI控制代碼，即可實(shí)現(xiàn)播放。

橙色字體為該動(dòng)畫動(dòng)作的ID，直接在QD Plus工具中可以獲取，選中動(dòng)畫，操作和獲取圖片ID步驟一致也可使用快捷鍵(shift+i)。然后再黏貼到 hmi_user_process（）里面。

hmi_engine_set_object_info(HMI_LEFT_MOTION_ACTION_ENTRY,HMI_ACTION_RUN );