先楫HPM6800之HMI软件工具(三) : QD PLUS 快速上手

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_TIME dt, 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 );