米尔电子
直播中

筑梦者与梦同行

8年用户 172经验值
擅长:嵌入式技术
私信 关注
[技术]

【米尔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系统的界面如下图所示,具有摄像头显示、播放器、音乐、图片、系统信息(网络信息版本信息)、系统设置、文件管理器以及公共服务、卫生医疗、智能家电、等几个板块。
图片39.png

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

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开发工程师。

如下面三个图所示,分别是源码,资源包,编译后软件界面。
图片41.png图片42.png
图片43.png

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这个工程。
图片44.png

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

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

编译过程会可以从底部Table栏 4 Compile Output 中看到,如图所示。
图片47.png

2、编译文件上传

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

1)查看文件位置
图片48.png

2)文件传递

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

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

build-mxapp2-IMX8MMA7-Release 文件是IMX8MMA7开发板上运行的文件。
图片49.png图片50.png

3、IMX8MMA7运行HMI

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

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

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

·黄框是运行软件的指令以及授权命令。
图片51.png

4、软件运行状态

在使用鼠标操作HMI应用时,软件运行状态数据会在此界面返回。
图片52.png图片53.png

5、总结

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

此功能使用过程至此结束,下面上传相关代码和参考文件。
图片54.png

参考文献:

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

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

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

更多回帖

发帖
×
20
完善资料,
赚取积分