在上一节中,我们成功安装了Qt开发环境。在本节,我们就使用Qt Creator来制作基于Qt的数字仪表盘。
因为没有美工设计基础,经过一番查找,最终确定选用github上的开源项目,原地址如下。
https://github.com/yuq/dashboard-modern
开头先放上实现效果。
dashboard.png
总体来说,数字仪表盘的显示原理就是在仪表盘背景图片上,控制指针图片的旋转,以及转向灯、机油等各种提示标志的显示和消隐。
项目的界面使用QML进行编写,这样写出来的代码更加简洁,层次分明且清晰易懂。
首先准备最重要的部件,仪表盘和指针的图片,以及提示标志的图片。
下面把部分主要图片部件列出来:
biao1.png
biao2.png
jiyouyali.png
P.png
dianchi.png
jinguang.png
jiantou.png
接下来使用qrc文件加入图片。
qrc_file.png
在QML文件中,使用一个黑色的Rectangle作为基础背景,随后加载各类图片资源,使用State统一控制图片的显示,使用Transition控制显示的渐变效果。主要代码如下。
states: [
  •     State {
  •         name: "hide"
  •         when: on
  •         PropertyChanges {
  •             target: ground
  •             y: 480
  •         }
  •         PropertyChanges {
  •             target: left_bottom_panel
  •             x: 200
  •         }
  •         ...
  •     },
  •     State {
  •         name: "show"
  •         PropertyChanges {
  •             target: ground
  •             y: 413
  •         }
  •         PropertyChanges {
  •             target: left_bottom_panel
  •             x: 74
  •         }
  •         ...
  •     }
  • ]
  • 复制代码
    mainqml.png
    在C++的main.cpp中主要有两个任务:创建QApplication,加载QML文件。
    maincpp.png
    编译运行,就可以显示了。
    dashboard_with_bg.png
    【英蓓特MaaXBoard】搭建ADAS辅助驾驶系统(三):实现车道线检测