先楫HPM6800之HMI软件工具(一) : QD Plus (QuodiX)和Kanzi的对比

1. 软件控制模块可以在不同的操作系统中使用。

QD Plus：提供API源码 ，源码是C语言 ，移植简单 ，方便适配各种OS。

2. Kanzi Studio 可以导入二维、三维和动画素材，并为它们赋予各种控制属性。

QD Plus：可以导入3d模型和2d图像 ，提供控制属性还提供控制关系 ，但不支持导入flash动画文件（QD自带动画工具）。

3. 创建一些可用于屏幕切换控制的触发器。

QD Plus：event功能可以设计好动画 ，软件工程师通过API接口触发event即可。

1. UI 设计工程师需要创建大量的 UI 素材，这一步与基于传统 HMI 工具所需的操作相同。

2. 根据客户的需求，UI 设计工程师需要构建显示场景，包括 UI 布局和显示屏幕切换。因此，UI 设计工程师需要相应地设置参数和触发器。例如，警告图标有一个开/关参数，菜单切换需要一个由事件或某些条件触发的触发器。

QD Plus：只需UI布局，不需要设置参数，使用更简单。 比如icon的on、  off ， QD Plus可以使用imagelist ，切换imagelist的index（ 0,1,2...)值就能实现，更加灵活。

3. 将最终的项目文件和 UI 路径布局数据导出给软件工程师。

QD Plus：生成C代码 ，方便移植 ，生成代码中包括了每个元素的ID ，方便API   控制每个元素（不需要输入元素路径） 。QD Plus的API接口也仅有两个， 方便软件工程师使用。

1.  首先，软件工程师需要使用 Kanzi 公司提供的一些特殊方法导入 .kzb 格式的 Kanzi 项目。

QDPlus：生成的C文件 ，可以直接生成到工程目录 ，编译简单方便。

2.   当软件工程师想要控制某些 UI 素材时，例如一个警告图标，首先需要找到该图标的路径，通常应为“root/warning/icon_XXX”，该路径应在 UI 布局数据中定义，由 UI 设计工程师准备。接下来，软件工程师需要控制图标的显示和消失，找到控制参数后，将其设置为“1”以显示图标，设置为“0”以关闭显示。

QD Plus(QuodiX)中，每个元素都有一个身份ID（根本不在需要用户记录元素路径 ，甚至通过QD工具的快捷键shift + i,就会把要操作的ID和API函数复制到粘贴板中） ，软件工程师可以轻松使用CTRL+V, 就可以动态修改或者获取到元素状态、关系、触发动画。

3.  尽管这个示例非常简单，但它展示了软件控制方法与传统 HMI 工具有很大不同。它使软件设计工作变得简单快捷。同时，在某些情况下，我们可以修改 UI 设计而无需对软件进行任何修改。

一些简单的布局调整 ， QD Plus(QuodiX)可以在工具中调整,重新生成代码编译即可（最后烧写生成的BIN文件） ，应用软件不需要修改代 码。QD Plus在生成代码时会根据使用的情况 ，生成一些宏定义 ，这些宏定义在编译时 ，能让API代码更加省空间。

1.  基于操作系统的兼容性，UI 设计工程师可以通过 Windows 操作系统向客户展示一些 UI 设计概念。这在需求讨论环节非常有帮助，能够快速促使 UI 设计工程师和客户达成共识。

在项目初期 ，没有开发板的情况或者跟客户讨论需求的情况下 ，可以使用QD Plus的opengl windows版本 设计布局（可以在PC上编码、运行最终效果） ，设计好的项目可以转换到对应的芯片中使用。

2. 在开发阶段，UI 设计工程师和软件工程师可以基于相同的 UI 设计布局和逻辑并行工作。这能够减少开发时间。

QDPlus需要先设计好UI ，再做逻辑控制。

3. 此外，有时当 UI 设计需要修改时，例如位置需要微调，软件工程师不需要做任何操作。

简单的UI布局调整 ， QD Plus只需要工具修改 ，不需要修改逻辑。

4. 由于 Kanzi Studio 内置了许多 UI 显示场景，软件工程师不需要使用源代码来构建它们。这种方法可以减少软件开发时间和复杂性

QD Plus有多种自定义插件（方便客户扩展功能） ，可以实现常见的动画场景。

如上所示，UI 设计工程师需要在 UI 项目中进行一些逻辑触发，因此，UI 设计工程师需要具备一定的软件开发知识，否则将影响 UI 显示的稳定性和效率。

QD Plus在设计中已经把和GPU ， CPU相关的部分 ，放到API宏定义里面。这样就降低了开发人员的门槛。 使用QD Plus工具的软件工程师 ，一般懂C语言的应届生大专生即可胜任。QD Plus在设计中甚至考虑到软 件工程师和美工的沟通的常见问题（一般双方的问题 ，就是相互不能太理解） ，也体现在QD Plus工具设计中。

使用QD Plus作图工具展示效果如下：

QD Plus（QuodiX） 电脑模拟显示

https://www.bilibili.com/video/BV1UzxCexEVH/

QD Plus(QuodiX)，分辨率1920*720，非圆形4指针

https://www.bilibili.com/video/BV1PaxWe8EMe/

QD Plus(QuodiX)。2.5D，可以收缩的指针拖尾。分辨率1920X720

https://www.bilibili.com/video/BV1tLgVeiEah/

QD Plus（QuodiX），分辨率1920*720，多主体多语言

https://www.bilibili.com/video/BV1JwxxeZEUQ/

QD Plus(QuodiX)一张图片沿bezier曲线运动

https://www.bilibili.com/video/BV1cX2EYVEL3/

QD Plus(QuodiX)图片的透明度，沿着Bezier的Y轴值变化

https://www.bilibili.com/video/BV1Mr2nYbELL/

QD Plus(QuodiX) 与先楫半导体HPM6880 MCU，分辨率1920*720

https://www.bilibili.com/video/BV1ebxpekEE7/

QD Plus(QuodiX)_800X480.2.5D导航罗盘 

https://pan.baidu.com/s/1QDRvNRmsqpRL7Mp1QRg6kw

QD Plus（QuodiX） 3D车模显示

https://www.bilibili.com/video/BV1T6xCedEdc/

QD Plus(QuodiX)+先楫半导体HPM6880MCU 2.5D效果

https://www.bilibili.com/video/BV1T6xCedEoo/

QD Plus(QuodiX)+先楫半导体HPM6880MCU 800*480分辨率 类梯形warping，适用于HUD

https://www.bilibili.com/video/BV1SixCetEpd/

QD Plus（QuodiX）分辨率1920*720

https://www.bilibili.com/video/BV1po21YsEFh/

操作视频:QD Plus(QuodiX)添加基本的元素

https://www.bilibili.com/video/BV1rs24YeEAf/

教学视频下载链接：

• QD Plus培训教程

https://www.bilibili.com/video/BV15pWJeAEYn/

• QD Plus插件培训

https://www.bilibili.com/video/BV19WWJeaESC/

帮助文档下载链接：

http://www.qd-plus.cn/wp-content/uploads/2024/05/QD-Plus-版详细介绍_2024_1_04.docx

http://www.qd-plus.cn/wp-content/uploads/2024/05/custom_lib_2024_0408.docx 

未完待续