Important: Please read the Qt Code of Conduct -

[Solved]Borderless/Transculent widget updating problem

  • Hello,
    im totaly new to Qt and tried to make an "easy" project just to learn and get used to Qt.
    I basically want to achieve a simple digital clock directly on the screen.
    To make this happen i made a QLabel and used
    setStyleSheet("background-: transculent; color: red;");
    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool | Qt::WindowStaysOnTopHint);

    If i set a text for the label it works just like i want it to.
    However im running into a problem when changing the text of the label via a QTimer signal that calls

    What happens is: The label's text gets changed but the old text still remains underneath it.
    In other words it override its content instead of repainting it.
    To make it easier to understand think of an old typewriter - if u misstyped and go back to the wrong letter and press a new key u just get 2 letters on the same place on the paper (since its not a computer :)).
    I dont know what exactly causes this problem or whats the way to solve it so i had a hard time trying to google for the right terms and hope somebody here can help me out.

    Qt 5.0.1
    OS WinXP
    Complete Code:
    QApplication a(argc, argv);
    ClockLabel c1;
    c1.setStyleSheet("background: transculent; color: red;");
    c1.setWindowFlags(Qt::FramelessWindowHint | Qt::Tool | Qt::WindowStaysOnTopHint);

    return a.exec();@

    class ClockLabel : public QLabel
    explicit ClockLabel(QWidget *parent = 0);

    QSystemTrayIcon *Tray;
    QMenu *Traymenu;
    QAction *actClose;
    QTimer *timer1;


    public slots:
    void tick();


    ClockLabel::ClockLabel(QWidget *parent) :
    actClose = new QAction("Close", this);
    Traymenu = new QMenu(this);
    Traymenu->setStyleSheet("background: white; color: black; selection-background-color: blue; selection-color: white;");
    Tray = new QSystemTrayIcon(this);
    //Traymenu end

    timer1 = new QTimer(this);


    void ClockLabel::tick()
    QString a = QTime::currentTime().toString(QString("hh:mm:ss.zzz"));

    P.S.: Feel free to tell me everything else whats wrong with this code, cause as i said those are my first lines ever written with Qt.

  • Moderators

    There is no such css style as "background: transculent" or even without typo ;) There is "background: transparent", but since you're setting WA_TranslucentBackground attribute it will be ignored anyway, because WA_TranslucentBackground sets WA_NoSystemBackground implicitly.

    WA_NoSystemBackground in turn means that there is no background so it won't be filled with anything automatically in paintEvent. This is the cause of your "smudges". Since the background is not repainted there are leftovers from last paint.

    To fix this you can overload paint event in your ClockLabel class like this:
    void ClockLabel::paintEvent(QPaintEvent * event)
    QPainter p(this);

    //default QPainter mode is CompositionMode_SourceOver
    //which blends whatever is painted over the existing contents
    //since we want to paint with transparency we need to change
    //this to completely replace the background
    //rect() means the client area of our widget
    p.fillRect(rect(), Qt::transparent);
    //we call the base implementation to let it do the rest for us
    //(paint the numbers)


  • This typo... such a shame!
    Im not used to css styles at all and found "translucent" somewhere on the web and never checked on a doc which makes it more of a shame :).

    Thank you very much for helping me out with this, its exactly what i've been looking for.

Log in to reply