Saturday, May 4, 2013

Qt5: how to design a translucent GUI using an image file

designed a translucent background image on GIMP, loaded the png file on qresource and using some Qt attributes was able to make the original window transparent,
the output result looks like this




//main.cpp
#include "dialog.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();
    
    return a.exec();
}


//dialog.h
#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>
#include <QMediaPlayer>
#include <QPainter>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT
    
public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
protected:
    void paintEvent(QPaintEvent *);
    
private:
    Ui::Dialog *ui;
    QMediaPlayer *player;

};

#endif // DIALOG_H



//dialog.cpp
#include "dialog.h"

#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent, Qt::FramelessWindowHint),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    setAttribute(Qt::WA_TranslucentBackground);


    player = new QMediaPlayer(this);
    player->setMedia(QUrl::fromLocalFile("joke.flv"));
    player->setVolume(50);
    player->play();
}

Dialog::~Dialog()
{
    delete ui;
}

void Dialog::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawImage(QRectF(0, 0, 400, 400), QImage(":/img.png"));
}

//player.pro
QT       += core gui multimedia
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = player
TEMPLATE = app
SOURCES += main.cpp\
        dialog.cpp
HEADERS  += dialog.h
FORMS    += dialog.ui
RESOURCES += \
    images.qrc 




1 comment:

How to create Custom push button in QT5

To be honest this is not my work its an exact copy from this link. http://mcmtechtips.blogspot.com/2012/03/shape-qpushbutton-in-your-own-st...