【米尔MYD-JX8MMA7开发板-ARM+FPGA架构试用体验】十一、QT-HMI V2.0系统

【MYD-JX8MMA7】 十二、QT-HMI V2.0系统的研究与使用

前言：

个人在之前接触米尔科技的开发板较少，最近的两年时间内，开始接触米尔科技的linux开发板。所以一开始看到QT-HMI V2.0系统还挺蒙的，确实不知道HMI系统到底是什么，使用什么环境开发的，为什么还和QT有关联，接下来带着这几个问题一探究竟。

一、QT-HMI V2.0系统

1、QT-HMI V2.0系统框架

HMI V2.0系统的界面如下图所示，具有摄像头显示、播放器、音乐、图片、系统信息（网络信息版本信息）、系统设置、文件管理器以及公共服务、卫生医疗、智能家电、等几个板块。

根据应用的类型我们将整个UI分为五个大类：多媒体，智能家电，卫生医疗，公共服务，系统。每个类下面又包含不同小类，针对每个小类我们实现了相应的应用。如图所示

2、HMI-V2.0与QT的关系

MEasy HMI 2.0是深圳市米尔科技有限公司开发的一套基于QT5的人机界面框架。也就是说它是使用Qt开发的一个软件，个人来看HMI V2.0其实就是一个很大的软件，包含了很多种功能，系统一词让我一开始陷入了误区，刚开始把它想的很复杂。

以下是我找到的HMI V2.0系统的代码程序，在Ubuntu系统环境下使用QT5.15开发（建议使用QT5.8以上版本），编译后可以正常运行，也可以正常显示摄像头显示画面（目前个人所使用的摄像头可能参数有区别画面有点模糊）。

HMI 2.0应用代码还比较复杂，毕竟代码量还相对较大需要点时间进一步理解，米尔官方资料提示需要有一定开发经验的嵌入式linux开发工程师，QT开发工程师。

如下面三个图所示，分别是源码，资源包，编译后软件界面。

3、QML介绍

在代码的资源包使用了大量的qml尾椎代码，简单的理解些其功能。

QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS（参考后文具体例子），但又支持javascript形式的编程控制。QtDesigner可以设计出·ui界面文件，但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。

QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种声明式编程语言，并且它是Qt框架的一个组成部分。QML的主要功能是让开发人员快速、便捷地开发出用户界面，这些界面包括了桌面应用、移动设备和嵌入式就用的界面。并且，QML还能够与JavaScript无缝整合一起开发使用，即在QML代码中可以直接使用JavaScript文件。

JavaScript在ARM嵌入式开发中几乎使用不到，但是在服务器的界面开发和安卓APP的界面开发上是必不可少的开发语言，包括现在的鸿蒙APP界面开发都是使用JavaScript开发的，简称JS。

（嵌入式开发这么卷呢! JavaScript至少都要达到能看懂的程度。。。。）

二、HMI V2.0开发介绍

在IMX8MMA7提供的资料中没有看到关于HMI V2.0系统明确的资料，本文都是以其他版本开发板的资料做为依据。理论上讲QT是具有通用性的，编译器（aarch64-poky-linux）改变一下，各个平台基本都可以使用。

1、环境搭建

如何构建MEasy HMI2.0的开发编译环境，旨在帮助用户更好更快捷的通过QT5来开发自己的产品。其中包括嵌入式QT5运行环境搭建，qmake编译环境的搭建，QT Creator安装和配置及MEasy HMI应用的编译与运行。

QT5.8版本以上可以支持QML的2DRender,参见：https://doc.qt.io/QtQuick2DRenderer/ ，但是相比OpenGLES渲染，还存在一些局限，具体查阅QT官方说明：https://doc.qt.io/QtQuick2DRenderer/qtquick2drenderer-limitations.html。

我们提供带GPU支持和不带GPU支持两种平台下的代码mxapp2.tar.gz和mxapp2_nogpu.tar.gz. 不带GPU的版本改写了一些用到Shader Effects的界面，将QtMultimedia下的 VideoOutput模块替换为我们自己编写的MVideoOutput模块。

2、编译HMI 2.0应用

以mxapp2.tar工程为本进行二次的开发，将mxapp2.tar.gz拷贝到ubuntu目录工作目录，并解压出来。下面讲述如何将mxapp2这个工程导入到QT Creator中，打开QT Creator，在菜单栏中依次点击 File -> Open File or Project 然后弹出如图 选

择框，进入mxapp2工程目录，点击 mxapp2.pro 并点击 Open 按钮即可打开mxapp2这个工程。

打开工程后进入配置页面，选择编译工具链，这里直接选择前面章配置好的kits，点击 Configure Project 按钮然后进入工程目录。

进入mxapp2工程后即可看到整个工程的目录结构，如图所示。然后可以对工程进行编译了，编译之前可以选择下编译输出的模式，这里我们选择Release模式，然后可以选择右下角小锤子图标进行编译整个工程，或者通过点击菜单栏 Build -> Build Project "mxapp2" ,进行编译整个工程。

编译过程会可以从底部Table栏 4 Compile Output 中看到，如图所示。

2、编译文件上传

环境搭建过程，已经将HMI 应用软件进行了编译，接下来尝试将编译好的文件放到IMX8MMA7系统当中看看 效果是否如逾期一样。

1）查看文件位置

2）文件传递

在这里使用的是MobaXterm软件进行文件传递。

build-mxapp2-Desktop_Qt_5_15_2_GCC_64bit-Release 文件在Ubuntu主机下可运行文件

build-mxapp2-IMX8MMA7-Release 文件是IMX8MMA7开发板上运行的文件。

3、IMX8MMA7运行HMI

1）首先将原系统的HMI 界面关闭掉，因为两个界面是相同的。

2）命令行运行HMI应用程序

·红框是检测文件上传的路径和文件内容。

·黄框是运行软件的指令以及授权命令。

4、软件运行状态

在使用鼠标操作HMI应用时，软件运行状态数据会在此界面返回。

5、总结

使用更改后的HMI V2.0系统，与本机自带的系统基本没有什么差别，多媒体界面、系统界面运行正常且数据显示正确，其余的几个界面显示正常，目前尚未发现其他问题。

此功能使用过程至此结束，下面上传相关代码和参考文件。

参考文献：

http://www.tooool.cn/post/1916.html

https://gitee.com/weidongshan/Qtmxapp-desktop/repository/archive/master.zip

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