1、核心優勢：操作簡便，快速上手

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

2、QD Plus工具界面介紹

（1）主界面介紹

（2）Application界面介紹

（3）Resource界面介紹

（4）Event Action界面介紹

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

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

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

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);/*設置my_img的x坐標 77*/

hmi_engine_set_object_info(HMI_MY_IMG_Y, 99);/*設置my_img的y坐標99。*/

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

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

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

2：例如：觸發QD Plus（QuodiX）中設計好的一個動畫事件。

hmi_engine_set_object_info(HMI_MY_EVENT,HMI_SEND_EVENT_ON);/*my event事件出發后，這個動畫就會持續的運行，直到結束*/

其中：HMI_MY_IMG_X（代表my_img元素的x坐標），HMI_MY_IMG_Y（代表my_img元素的y坐標），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工具生成代碼時，生成的枚舉類型。我們通過這些元素的枚舉類型去操作元素的屬性和樹狀的包含關系。

3：設置顯示多語言。

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

其中HMI_ENGLISH，HMI_CHINESE是在QD Plus中設置的語言生成的對應的枚舉類型。

4：例如：改變一個樹中dyn_con節點的包含不同子樹的關系。例如：用來切換主題

如上圖，兩個名為stc_con，stc1_con（靜態容器，容器中可以放其它元素）都屬于名為dyn_con（動態容器，類似多路開關，某一時刻只能連通子節點中的其中一路或全部關閉）節點的子節點，此時可以通過改變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關閉.HMI_DYN_CONTAINER_IS_NULL是QD Plus定義好的宏*/

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

例如：QD Plus中text元素的名字是my_text_1時。下面設置my_text_1新的字符串內容

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

hmi_engine_edit_text(HMI_MY_TEXT _1,speed);

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

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

操作視頻畫面：

https://www.bilibili.com/video/BV1pm2EY2E6b/?share_source=copy_web&vd_source=7258d8aa5251054c1d4c51d8c4cc2a02（請手動跳轉）

(1)獲取控制圖片的x坐標的ID和對應的API。

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

hmi_engine_set_object_info(HMI_NEW_IMAGE7_X, );

(2)獲取控制圖片的y坐標和對應的API。

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

hmi_engine_set_object_info(HMI_NEW_IMAGE7_Y, );

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

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

hmi_engine_set_object_info(HMI_NEW_IMAGE7_ALPHA, );

(4)獲取控制圖片的旋轉角度和對應的API。

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

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

API的學習成本極低，即使是沒有太多編程經驗的初學者，也能在短短5分鐘內掌握API的使用方式，極大縮短了開發時間。對于需要快速響應的UI設計項目，QD Plus 的API設計無疑提高了效率。看到這里，恭喜你，你已經掌握了QD Plus的全部API。

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

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

所有的操作，都可以歸結為在對應的節點上點擊鼠標右鍵，然后在彈出的菜單里面，選擇想要的操作。熟悉后，可以直接用快捷鍵。

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

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

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

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

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

還有很多添加元素操與上述圖中操作步驟相同，也可直接在根節點添加對應的元素如下圖：

5：QDPlus（QuodiX）動畫模擬播放

如下圖是已經做好了的一個動畫，選中該動畫點擊由下圖紅框中的標記：

點擊Run Action便會彈出下圖，Select Element選擇框，先點擊紅色選擇page（就是一個畫面），便可看到綠框中的所有page,選擇要播放的Page后，點擊ok即可播放。因為一個動畫的可能被多個page包含，所以需要選擇在哪個page里面播放動畫。

模擬播放動畫動作的畫面。例如，一張圖片沿著Bezier曲線運動。

6、更多內容

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

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

其中HMI_TIME dt是上次調用到本次調用經過的多少秒。

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

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

hmi_engine_set_object_info(HMI_LEFT_MOTION_ACTION_ENTRY,HMI_ACTION_RUN );