Qt [GC9-13]：HUD-轉向燈、速度表、背景透明處理

先看下目前的運作效果，這篇主要說一下轉向燈、速度表和背景透明的實作。

HUD在車上的使用場景就是投影在汽車前風擋玻璃上面，是以背景一定要做成空的。但是作為顯示器，我先應該是黑色吧，這裡我就模拟了我們眼睛看到的畫面，至于顯示裝置上面的，應該是黑色，或者根據每個玻璃上的參數不同調整下背景顔色，影響不大。代碼就兩行，這裡我做了隐藏标題處理，是以就是三行了，如下

this->setWindowFlag(Qt::FramelessWindowHint);       //隐藏标題欄
    this->setWindowOpacity(1);
    this->setAttribute(Qt::WA_TranslucentBackground);      

轉向燈，屬于汽車燈光組成的一部分，主要就是告訴别人我要怎麼走，左拐還是右拐或者我車怎麼滴了，不能走了，警示後車即雙閃。大緻流程如下圖所示。

這個圖看着有點複雜，其實代碼是不怎麼複雜的。

說先定義三個變量，用來表示左轉、右轉和警告即雙閃。

#define TURN_LEFT 1 //左轉向燈 
#define TURN_RIGHT 2 //右轉向燈 
#define WARNING 3 //雙閃      

其實這個不是必要的，隻是為了後面使用友善。

初始化我們的定時器并吧要幹活的配置設定給它

timer_TurnLeftLight = new QTimer;
    connect(timer_TurnLeftLight,&QTimer::timeout,this,[=](){
        if(ui->label_turnLight_L->isHidden())
        {
            ui->label_turnLight_L->show();
        }
        else
        {
            ui->label_turnLight_L->hide();
        }
    });
    timer_TurnRightLight = new QTimer;
    connect(timer_TurnRightLight,&QTimer::timeout,this,[=](){
        if(ui->label_turnLight_R->isHidden())
        {
            ui->label_turnLight_R->show();
        }
        else
        {
            ui->label_turnLight_R->hide();
        }
    });      

這裡我沒有單獨另寫槽函數，而是用了lambda表達式，詳細可以自行百度這個東東。

下面就是主要的接口了，

void HUD::set_TurnLight(int signalType, bool isOn)
{
    switch (signalType) {
    case TURN_LEFT:
    {
        if(isOn)
        {
            timer_TurnLeftLight->start(1000);
        }
        else
        {
            timer_TurnLeftLight->stop();
            ui->label_turnLight_L->hide();
        }
        break;
    }
    case TURN_RIGHT:
    {
        if(isOn)
        {
            timer_TurnRightLight->start(1000);
        }
        else
        {
            timer_TurnRightLight->stop();
            ui->label_turnLight_R->hide();
        }
        break;
    }
    case WARNING:
    {
        if(isOn)
        {
            timer_TurnLeftLight->start(1000);
            timer_TurnRightLight->start(1000);
        }
        else
        {
            timer_TurnLeftLight->stop();
            ui->label_turnLight_L->hide();
            timer_TurnRightLight->stop();
            ui->label_turnLight_R->hide();
        }
        break;
    }
    default:
        break;
    }
}      

控制定時器的開關和時間就好了。

速度表其實更好實作了，我仔細觀察了我車的HUD上面的速度表，三位數 機關km/h 三位數足夠了，哈哈，看樣子他的樣子和8位數位管顯示的樣子差不多，這裡我就百度了8為數位管的樣子，仿照做了數字。

實作這個東西的大緻想法如下

上圖中布局就是我的數字，就一個QLabel，完了根據資料接口的數字來給這個Lebel配置設定不同的資源。實作代碼如下

void HUD_Number::set_Number(int temp)
{
    switch (temp) {
    case 0:
        ui->label_hudNumber->setGeometry(1,0,85,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/0.png)");
        break;
    case 1:
        ui->label_hudNumber->setGeometry(29,5,57,113);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/1.png)");
        break;
    case 2:
        ui->label_hudNumber->setGeometry(0,0,86,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/2.png)");
        break;
    case 3:
        ui->label_hudNumber->setGeometry(6,0,80,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/3.png)");
        break;
    case 4:
        ui->label_hudNumber->setGeometry(14,4,72,114);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/4.png)");
        break;
    case 5:
        ui->label_hudNumber->setGeometry(6,0,77,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/5.png)");
        break;
    case 6:
        ui->label_hudNumber->setGeometry(0,0,83,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/6.png)");
        break;
    case 7:
        ui->label_hudNumber->setGeometry(31,0,55,121);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/7.png)");
        break;
    case 8:
        ui->label_hudNumber->setGeometry(0,0,86,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/8.png)");
        break;
    case 9:
        ui->label_hudNumber->setGeometry(6,0,79,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/9.png)");
        break;
    default:
        break;
    }
}      

在上面的代碼中，可以看到，我每次給label配置設定資源的時候，都需要重新設定label的位置和大小，這就是因為我開始制作素材是沒有注意這個問題。大家在後面制作素材是可以注意。

那麼我的這一個數字表就做好了，怎麼把呀做成三個了，這就到了真真的設定速度的接口了，我吧這個實作方式寫在了設定速度表的接口中。如下

void HUD::set_Current_Speed(int temp)
{
    if(temp <10)
    {
        number_2->hide();
        number_3->hide();
        number_1->setGeometry(157,70,86,122);
        number_1->set_Number(temp);
        ui->label_Kmh->setGeometry(156,195,88,22);
    }
    else if(temp>=10 && temp<100)
    {
        number_2->show();
        number_3->hide();
        number_1->setGeometry(200,70,86,122);
        number_2->setGeometry(114,70,86,122);
        number_1->set_Number(temp%10);
        number_2->set_Number(temp/10);
        ui->label_Kmh->setGeometry(199,195,88,22);
    }
    else
    {
        number_2->show();
        number_3->show();
        number_1->setGeometry(243,70,86,122);
        number_2->setGeometry(157,70,86,122);
        number_3->setGeometry(71,70,86,122);
        number_1->set_Number(temp%10);
        number_2->set_Number((temp/10)%10);
        number_3->set_Number(temp/100);
        ui->label_Kmh->setGeometry(240,195,88,22);
    }
}      

好了，這邊篇就完事了