Hmi-31- [motion mode] solve the problem of picture display of music module

HMI-31-【 Sports mode 】 Solve the problem of picture display of music module

​ In the previous , We have basically realized the layout display of the music module , But left a small tail , Is the picture display , In this module , The picture is not square , But with perspective , But what? ,Qt Image display of , I haven't studied so deeply , So at present, it can only be like , But it's definitely not true perspective . I use mask to realize , In fact, it is a flat picture , Just use a perspective picture template to cover it .

---

keyword ：HMI、 Perspective graphics 、 Mask 、setMask、Qt

Create a new picture module and realize the irregular display of the window

​ Here in order to achieve this perspective effect , Two parts are needed to realize , The first is the irregular display of the window , One is to mask the image . So you need to create a new QWidget To achieve . On the layout , Use one lable To realize irregular window background , The display of the sum window is realized according to the image of this background .

Code

this->setAttribute(Qt::WA_TranslucentBackground);

Set image mask code ：

	QPixmap pix;
    pix.load(":/Sport/Resources/MeterDisplay/Sport/MDSR/Music/mask.png");
    ui->label_back->setMask(pix.mask());

I want to introduce an interface , You can update the picture , The code is as follows

/**
 * @brief MDS_Right_Music_PicMask::setPicUrl
 * @param url
 *  Set pictures url
 */
void MDS_Right_Music_PicMask::setPicUrl(QString url)
{
    ui->label_back->setStyleSheet(QString("border-image: url(%1);").arg(url));
    ui->label_back->update();
}

Current progress

The first stage of achievement display

​ At present, to complete HUD Interface and interface development , LCD instrument comfort mode development . It's shown as follows ：

The most handsome in the whole network Qt Develop Geely Auto instrument

---

explain ：

The reference prototype used in this project comes from ：[ geely ] borui GE | Meter HMI Design 、 Geely HMI project .

The ownership and interpretation of the design drawings belong to Geely Automobile .

All resource documents of the project have ** The immortal Xiaohai ** Reproduction production .

The code of this project will not be open source for the time being , If you need the source code, please contact me , QR code in the upper left corner plus wechat .

This program is limited to learning and communication 、 Commercial use is prohibited .

---

.

The code of this project will not be open source for the time being , If you need the source code, please contact me , QR code in the upper left corner plus wechat .

This program is limited to learning and communication 、 Commercial use is prohibited .

---