本文已参与「新人创作礼」活动，一起开启掘金创作之路。

HMI-46-【多媒体】Title界面实现 1

今天我将尝试实现以下多媒体部的Title部分，主要是时间、左右空调温度。

当前进度

---

HMI-46-【多媒体】Title界面实现 1当前进度显示时间样式表控制面板代码多媒体代码Title 代码空调温度显示界面设置实现代码主控制台代码控制台代码第三阶段成果展示第二阶段成果展示第一阶段成果展示

关键字： HMI、Multifunction、Qt、light、title

显示时间

在UI文件中使用一个Label来显示时间，并给他设置样式表，如下图所示

样式表

 font: 350 32pt "Microsoft YaHei UI";
 color: rgb(255, 255, 255);

在逻辑控制中，在控制面板中调用多媒体的设置时间函数，多媒体在调用Title 的设置时间函数。如下图所示。

控制面板代码

 void ControlPanel::slot_getCurrentTime(QTime m_time)
 {
     ui->pushButton_closeTime->setText(m_time.toString("hh:mm"));
     if(m_meterDisplay)                                                          // 设置液晶仪表时间
     {
         m_meterDisplay->setTime(m_time.toString("hh:mm"));
     }
     if(m_multifunction)                                                         // 设置多媒体时间
     {
 //        m_multifunction->setTime(m_time.toString("hh:mm ap"));              // 12小时制
         m_multifunction->setTime(m_time.toString("hh:mm"));                 // 24小时
     }
 }
 ​

多媒体代码

 void MultifunctionDisplay::setTime(QString time)
 {
     if(m_title)
         m_title->setTime(time);
 }

Title 代码

 void MFD_Title::setTime(QString time)
 {
     ui->label_time->setText(time);
 }

空调温度显示

界面设置

使用三个Label搭起来，一个用来显示主要温度，一个显示温度单位℃,一个用来显示小数。

实现代码

 void MFD_Title::setAirConditionerTemperature(double value, int index)
 {
 ​
     int point = int(value*10) %10;
     int one = value;
     switch (index) {
     case 0:
     {
         ui->label_airConditionerLeft_one->setText(QString::number(one));
         ui->label_airConditionerRight_one->setText(QString::number(one));
         ui->label_airConditionerLeft_point->setText("." + QString::number(abs(point)));
         ui->label_airConditionerRight_point->setText("." + QString::number(abs(point)));
         break;
     }
     case 1:
     {
         ui->label_airConditionerLeft_one->setText(QString::number(one));
         ui->label_airConditionerLeft_point->setText("." + QString::number(abs(point)));
         break;
     }
     case 2:
     {
         ui->label_airConditionerRight_one->setText(QString::number(one));
         ui->label_airConditionerRight_point->setText("." + QString::number(abs(point)));
         break;
     }
     }
 }

主控制台代码

 void MainControl::on_verticalSlider_AirConditionerTemperature_left_valueChanged(int value)
 {
     emit signal_AirConditionerTemperature(1,value/10.0);
     if(ui->checkBox_AirConditionerTemperature->isChecked())
         ui->verticalSlider_AirConditionerTemperature_Right->setValue(value);
 }
 ​
 ​
 void MainControl::on_verticalSlider_AirConditionerTemperature_Right_valueChanged(int value)
 {
     emit signal_AirConditionerTemperature(2,value/10.0);
     if(ui->checkBox_AirConditionerTemperature->isChecked())
         ui->verticalSlider_AirConditionerTemperature_left->setValue(value);
 }
 ​

控制台代码

     connect(m_maincontrol,&MainControl::signal_AirConditionerTemperature,[=](int index,double value){
             if(m_multifunction)
                 m_multifunction->setAirConditionerTemperature(value,index);
     });

第三阶段成果展示

目前已完成液晶仪表三种模式的初步显示，小模块后期根据精力更新了，主要还得找美术来搞资源，自己能力不够。暂未跟新计划。展示如下：

[video(video-yznBr6e3-1648369267384)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 3.0)]

第二阶段成果展示

目前以完成HUD界面及接口开发，液晶仪表舒适模式和运动模式的开发。展示如下：

[video(video-2AqJ88TY-1645273728489)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 2.0)]

第一阶段成果展示

目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：

[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…基于Qt的汽车仪表模拟 1.0))]

---

说明：

本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。

多媒体部分是来自吉利博瑞2017旗舰版界面所有权和解释权都归吉利汽车所有。

设计图的所有权和解释权都归吉利汽车所有。

本项目所有资源文件均由**打不死的小海**复刻制作。

本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。

本项目仅限学习交流、禁止商业使用。

---