Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. modifying painter event in a LED class from solid color to Glowing color
Forum Update on Monday, May 27th 2025

modifying painter event in a LED class from solid color to Glowing color

Scheduled Pinned Locked Moved Solved General and Desktop
glow effectledradialgradientgraphic effects
14 Posts 4 Posters 2.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • jazzycamelJ jazzycamel

    You just need to leave some space around the solid colour part of the widget and then use a radial gradient with a shade the same as your 'on' colour, but with alpha (opacity) decreasing from the center to the edge. I designed an LED widget a while ago that does exactly that:

    LED

    The code for this widget is as follows:

    led.h

    #ifndef LED_H
    #define LED_H
    
    #include <QWidget>
    
    class LED : public QWidget
    {
        Q_OBJECT
        Q_PROPERTY(bool status READ status WRITE setStatus)
        Q_PROPERTY(QColor onColor READ onColor WRITE setOnColor)
        Q_PROPERTY(QColor offColor READ offColor WRITE setOffColor)
    public:
        explicit LED(int diameter=100, QColor on=Qt::red, QColor off=Qt::gray, QWidget *parent=nullptr);
    
        QSize minimumSizeHint() const override;
        QSize sizeHint() const override;
    
        bool status(){ return _status; }
        QColor onColor(){ return _onColor; }
        QColor offColor(){ return _offColor; }
    
    signals:
    
    public slots:
        void setStatus(bool status);
        void setOnColor(QColor color);
        void setOffColor(QColor color);
    
    private:
        void paintEvent(QPaintEvent *event) override;
    
        int _diameter;
        QColor _onColor;
        QColor _offColor;
        bool _status;
    };
    
    #endif // LED_H
    

    led.cpp

    #include "led.h"
    
    #include <QPainter>
    #include <QPaintEvent>
    #include <QGradient>
    #include <QLinearGradient>
    #include <QRadialGradient>
    
    LED::LED(int diameter, QColor on, QColor off, QWidget *parent)
        : QWidget(parent), _diameter(diameter), _onColor(on), _offColor(off), _status(false)
    {}
    
    QSize LED::minimumSizeHint() const {
        return QSize(_diameter, _diameter);
    }
    
    QSize LED::sizeHint() const {
        return minimumSizeHint();
    }
    
    void LED::paintEvent(QPaintEvent *event){
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);
        painter.setPen(Qt::NoPen);
    
        QRect fullRect=event->rect();
        int size=qMin(fullRect.height(), fullRect.width());
        fullRect.setSize(QSize(size,size));
    
        int r=size*.1;
        QRect rect=fullRect.adjusted(r,r,-r,-r);
    
        // Outer Bezel
        QLinearGradient outerBezelGrad(rect.topLeft(), rect.bottomLeft());
        outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
        painter.setBrush(outerBezelGrad);
        painter.drawEllipse(rect);
    
        // Inner Bezel
        rect.adjust(r,r,-r,-r);
        QLinearGradient innerBezelGrad(rect.bottomLeft(), rect.topLeft());
        innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
        painter.setBrush(innerBezelGrad);
        painter.drawEllipse(rect);
    
        // Main Color
        QColor mainColor((_status)?_onColor:_offColor);
        rect.adjust(r/2,r/2,-r/2,-r/2);
        QLinearGradient mainColorGrad(rect.bottomLeft(), rect.topLeft());
        mainColorGrad.setStops(
            QGradientStops() << QGradientStop(0, mainColor.light())
                             << QGradientStop(1, mainColor.dark())
        );
        painter.setBrush(mainColorGrad);
        painter.drawEllipse(rect);
    
        // HighLight
        rect.adjust(rect.width()/6, r/4, -rect.width()/6, -rect.height()*2/5.);
        QLinearGradient highlightGrad(rect.topLeft(), rect.bottomLeft());
        highlightGrad.setStops(
            QGradientStops() << QGradientStop(0, QColor(255,255,255,192))
                             << QGradientStop(1, QColor(255,255,255,0))
        );
        painter.setBrush(highlightGrad);
        painter.drawEllipse(rect);
    
        if(!_status) return;
    
        // Glow
        QRadialGradient glowGrad(fullRect.center(), fullRect.width()/2);
    
        QColor faint(_onColor);
        faint.setAlphaF(.5);
    
        QColor faintest(_onColor);
        faintest.setAlphaF(0);
    
        glowGrad.setStops(
            QGradientStops() << QGradientStop(0, faint)
                             << QGradientStop(1, faintest)
        );
        painter.setBrush(glowGrad);
        painter.drawEllipse(fullRect);
    }
    
    void LED::setStatus(bool status){
        if(status==_status) return;
        _status=status;
        repaint();
    }
    
    void LED::setOnColor(QColor color){
        if(color==_onColor) return;
        _onColor=color;
        repaint();
    }
    
    void LED::setOffColor(QColor color){
        if(color==_offColor) return;
        _offColor=color;
        repaint();
    }
    

    Usage is pretty much the same as your own widget:

    ...
    QVBoxLayout *l=new QVBoxLayout(this);
    
    LED *led1=new LED;
    l->addWidget(led1);
    
    LED *led2=new LED;
    led2->setStatus(true);
    l->addWidget(led2);
    
    LED *led3=new LED;
    led3->setOnColor(Qt::green);
    led3->setStatus(true);
    l->addWidget(led3);
    ...
    

    Hope this helps :o)

    VikramSamyV Offline
    VikramSamyV Offline
    VikramSamy
    wrote on last edited by VikramSamy
    #4

    @jazzycamel your code can be directly used by any QT version, coz when i try to use it i can compile it, i get the below errors:-

    S:\QTProjects\led_glow_v1\ledglow.cpp:42: error: 'RichMetal' is not a member of 'QGradient'
    innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
    ^
    S:\QTProjects\led_glow_v1\ledglow.cpp:35: error: 'RiskyConcrete' is not a member of 'QGradient'
    outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
    ^

    and i get few of this warning:-
    S:\QTProjects\led_glow_v1\ledglow.h:15: warning: override controls (override/final) only available with -std=c++11 or -std=gnu++11
    QSize minimumSizeHint() const override;
    ^
    anyway i just trying it... see hopefully i can make it compile...

    jazzycamelJ 1 Reply Last reply
    0
    • M mpergand

      Have a look at QPainterPath and QRadialgradient:

      QPainterPath path;
      path.addEllipse(rectangle);
      QRadialGradient gradient(rectangle.center(), m_diameter, rectangle.center());
      gradient.setColorAt(0, m_on_color);
      gradient.setColorAt(1, Qt::transparent);
      painter.fillPath(path,QBrush(gradient));
      
      VikramSamyV Offline
      VikramSamyV Offline
      VikramSamy
      wrote on last edited by VikramSamy
      #5

      @mpergand said in modifying painter event in a LED class from solid color to Glowing color:

      Have a look at QPainterPath and QRadialgradient:

      QPainterPath path;
      path.addEllipse(rectangle);
      QRadialGradient gradient(rectangle.center(), m_diameter, rectangle.center());
      gradient.setColorAt(0, m_on_color);
      gradient.setColorAt(1, Qt::transparent);
      painter.fillPath(path,QBrush(gradient));
      

      hi can help give some tips on how can i can integrate this into my code previously which i shared here, meaning i still use the rectangle which i built and this code suppose will add another layer on my rectangle..i try few ways to add your code but finally i just get the same solid colors which is used in my code... can u give some simple explanation on how use it and integrate it in my code... anyway timebeing il still on the process of trying it...

      1 Reply Last reply
      0
      • VikramSamyV VikramSamy

        @jazzycamel your code can be directly used by any QT version, coz when i try to use it i can compile it, i get the below errors:-

        S:\QTProjects\led_glow_v1\ledglow.cpp:42: error: 'RichMetal' is not a member of 'QGradient'
        innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
        ^
        S:\QTProjects\led_glow_v1\ledglow.cpp:35: error: 'RiskyConcrete' is not a member of 'QGradient'
        outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
        ^

        and i get few of this warning:-
        S:\QTProjects\led_glow_v1\ledglow.h:15: warning: override controls (override/final) only available with -std=c++11 or -std=gnu++11
        QSize minimumSizeHint() const override;
        ^
        anyway i just trying it... see hopefully i can make it compile...

        jazzycamelJ Offline
        jazzycamelJ Offline
        jazzycamel
        wrote on last edited by
        #6

        @VikramSamy
        What version of Qt are you using?

        1. If the named gradients aren't available in your Qt version then you can construct your own in the same way I do for the main colour as follows:
        //outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
        outerBezelGrad.setStops(
            QGradientStops() << QGradientStop(0, QColor("#c4c5c7"))
                             << QGradientStop(0.52, QColor("#dcdddf"))
                             << QGradientStop(1, QColor("#ebebeb"))
        );
        ...
        //innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
        innerBezelGrad.setStops(
            QGradientStops() << QGradientStop(0, QColor("#d7d2cc"))
                             << QGradientStop(1, QColor("#304352"))
        );
        
        1. You can either add CONFIG += c++11 to your project (.pro) file or remove the word override from the header files to get rid of the warning.

        Hope this helps ;o)

        For the avoidance of doubt:

        1. All my code samples (C++ or Python) are tested before posting
        2. As of 23/03/20, my Python code is formatted to PEP-8 standards using black from the PSF (https://github.com/psf/black)
        VikramSamyV 1 Reply Last reply
        2
        • M mpergand

          Have a look at QPainterPath and QRadialgradient:

          QPainterPath path;
          path.addEllipse(rectangle);
          QRadialGradient gradient(rectangle.center(), m_diameter, rectangle.center());
          gradient.setColorAt(0, m_on_color);
          gradient.setColorAt(1, Qt::transparent);
          painter.fillPath(path,QBrush(gradient));
          
          VikramSamyV Offline
          VikramSamyV Offline
          VikramSamy
          wrote on last edited by VikramSamy
          #7

          @mpergand

          ok thanks, i managed to use the code u shared and integrated into my code...
          the output is as follows:-0_1554111160138_led_on.jpg

          and im wana continue to have a ring like smudge effect around the led as in this pic:-

          0_1554111384505_led_on_outside.jpg

          i did find another code from google and trying to use it currently, but if u know any easier modifications to be made in your code that u shared to have this similar effects, hopefully u can modify it....

          1 Reply Last reply
          0
          • jazzycamelJ jazzycamel

            @VikramSamy
            What version of Qt are you using?

            1. If the named gradients aren't available in your Qt version then you can construct your own in the same way I do for the main colour as follows:
            //outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
            outerBezelGrad.setStops(
                QGradientStops() << QGradientStop(0, QColor("#c4c5c7"))
                                 << QGradientStop(0.52, QColor("#dcdddf"))
                                 << QGradientStop(1, QColor("#ebebeb"))
            );
            ...
            //innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
            innerBezelGrad.setStops(
                QGradientStops() << QGradientStop(0, QColor("#d7d2cc"))
                                 << QGradientStop(1, QColor("#304352"))
            );
            
            1. You can either add CONFIG += c++11 to your project (.pro) file or remove the word override from the header files to get rid of the warning.

            Hope this helps ;o)

            VikramSamyV Offline
            VikramSamyV Offline
            VikramSamy
            wrote on last edited by
            #8

            @jazzycamel said in modifying painter event in a LED class from solid color to Glowing color:

            @VikramSamy
            What version of Qt are you using?

            1. If the named gradients aren't available in your Qt version then you can construct your own in the same way I do for the main colour as follows:
            //outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
            outerBezelGrad.setStops(
                QGradientStops() << QGradientStop(0, QColor("#c4c5c7"))
                                 << QGradientStop(0.52, QColor("#dcdddf"))
                                 << QGradientStop(1, QColor("#ebebeb"))
            );
            ...
            //innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
            innerBezelGrad.setStops(
                QGradientStops() << QGradientStop(0, QColor("#d7d2cc"))
                                 << QGradientStop(1, QColor("#304352"))
            );
            
            1. You can either add CONFIG += c++11 to your project (.pro) file or remove the word override from the header files to get rid of the warning.

            Hope this helps ;o)

            im using this version:-

            Qt Creator 3.5.1 (opensource)
            Based on Qt 5.5.1 (MSVC 2013, 32 bit)

            ok thank you and il try to compile again...

            jsulmJ 1 Reply Last reply
            0
            • VikramSamyV VikramSamy

              @jazzycamel said in modifying painter event in a LED class from solid color to Glowing color:

              @VikramSamy
              What version of Qt are you using?

              1. If the named gradients aren't available in your Qt version then you can construct your own in the same way I do for the main colour as follows:
              //outerBezelGrad.setStops(QGradient(QGradient::RiskyConcrete).stops());
              outerBezelGrad.setStops(
                  QGradientStops() << QGradientStop(0, QColor("#c4c5c7"))
                                   << QGradientStop(0.52, QColor("#dcdddf"))
                                   << QGradientStop(1, QColor("#ebebeb"))
              );
              ...
              //innerBezelGrad.setStops(QGradient(QGradient::RichMetal).stops());
              innerBezelGrad.setStops(
                  QGradientStops() << QGradientStop(0, QColor("#d7d2cc"))
                                   << QGradientStop(1, QColor("#304352"))
              );
              
              1. You can either add CONFIG += c++11 to your project (.pro) file or remove the word override from the header files to get rid of the warning.

              Hope this helps ;o)

              im using this version:-

              Qt Creator 3.5.1 (opensource)
              Based on Qt 5.5.1 (MSVC 2013, 32 bit)

              ok thank you and il try to compile again...

              jsulmJ Offline
              jsulmJ Offline
              jsulm
              Lifetime Qt Champion
              wrote on last edited by
              #9

              @VikramSamy said in modifying painter event in a LED class from solid color to Glowing color:

              Qt Creator 3.5.1 (opensource)
              Based on Qt 5.5.1 (MSVC 2013, 32 bit)

              This is the Qt version used to build QtCreator. Check your Kit to see which Qt version you're really using.

              https://forum.qt.io/topic/113070/qt-code-of-conduct

              VikramSamyV 1 Reply Last reply
              0
              • M Offline
                M Offline
                mpergand
                wrote on last edited by mpergand
                #10

                I think there's something wrong whith QRadialGradient.
                alt text

                With radial, the end stop color is wrong. (should be transparent like with Linear)
                Code for Radial:

                QRadialGradient gradient1(rec.center(), rec.width());
                gradient1.setColorAt(.0,Qt::red);
                gradient1.setColorAt(.9, Qt::transparent);
                painter.fillPath(path1,QBrush(gradient1));
                

                Code for Linear:

                QLinearGradient gradient2(rec.topRight(),rec.bottomRight());
                gradient2.setColorAt(0, Qt::red);
                gradient2.setColorAt(.9,  Qt::transparent);
                painter.fillPath(path1,QBrush(gradient2));
                
                jazzycamelJ 1 Reply Last reply
                0
                • jsulmJ jsulm

                  @VikramSamy said in modifying painter event in a LED class from solid color to Glowing color:

                  Qt Creator 3.5.1 (opensource)
                  Based on Qt 5.5.1 (MSVC 2013, 32 bit)

                  This is the Qt version used to build QtCreator. Check your Kit to see which Qt version you're really using.

                  VikramSamyV Offline
                  VikramSamyV Offline
                  VikramSamy
                  wrote on last edited by
                  #11

                  @jsulm said in modifying painter event in a LED class from solid color to Glowing color:

                  @VikramSamy said in modifying painter event in a LED class from solid color to Glowing color:

                  Qt Creator 3.5.1 (opensource)
                  Based on Qt 5.5.1 (MSVC 2013, 32 bit)

                  This is the Qt version used to build QtCreator. Check your Kit to see which Qt version you're really using.

                  @jazzycamel

                  the kit version is Desktop Qt 5.5.1 MinGw 32bits

                  1 Reply Last reply
                  0
                  • M mpergand

                    I think there's something wrong whith QRadialGradient.
                    alt text

                    With radial, the end stop color is wrong. (should be transparent like with Linear)
                    Code for Radial:

                    QRadialGradient gradient1(rec.center(), rec.width());
                    gradient1.setColorAt(.0,Qt::red);
                    gradient1.setColorAt(.9, Qt::transparent);
                    painter.fillPath(path1,QBrush(gradient1));
                    

                    Code for Linear:

                    QLinearGradient gradient2(rec.topRight(),rec.bottomRight());
                    gradient2.setColorAt(0, Qt::red);
                    gradient2.setColorAt(.9,  Qt::transparent);
                    painter.fillPath(path1,QBrush(gradient2));
                    
                    jazzycamelJ Offline
                    jazzycamelJ Offline
                    jazzycamel
                    wrote on last edited by
                    #12

                    @mpergand said in modifying painter event in a LED class from solid color to Glowing color:

                    QRadialGradient gradient1(rec.center(), rec.width());
                    gradient1.setColorAt(.0,Qt::red);
                    gradient1.setColorAt(.9, Qt::transparent);
                    painter.fillPath(path1,QBrush(gradient1));

                    There is nothing wrong with QRadialGradient, just the way you are using it. When you construct the QRadialGradient, the first argument is the center point and the second argument is the radius not the diameter you want. If you change your first line to the following you will get the effect you expect:

                    ...
                    QRadialGradient gradient1(rec.center(), rec.width()/2);
                    ...
                    

                    Hope this clears things up ;o)

                    For the avoidance of doubt:

                    1. All my code samples (C++ or Python) are tested before posting
                    2. As of 23/03/20, my Python code is formatted to PEP-8 standards using black from the PSF (https://github.com/psf/black)
                    M VikramSamyV 2 Replies Last reply
                    4
                    • jazzycamelJ jazzycamel

                      @mpergand said in modifying painter event in a LED class from solid color to Glowing color:

                      QRadialGradient gradient1(rec.center(), rec.width());
                      gradient1.setColorAt(.0,Qt::red);
                      gradient1.setColorAt(.9, Qt::transparent);
                      painter.fillPath(path1,QBrush(gradient1));

                      There is nothing wrong with QRadialGradient, just the way you are using it. When you construct the QRadialGradient, the first argument is the center point and the second argument is the radius not the diameter you want. If you change your first line to the following you will get the effect you expect:

                      ...
                      QRadialGradient gradient1(rec.center(), rec.width()/2);
                      ...
                      

                      Hope this clears things up ;o)

                      M Offline
                      M Offline
                      mpergand
                      wrote on last edited by
                      #13

                      @jazzycamel
                      I was convinced there's something obvious i missed :)
                      Thanks !

                      1 Reply Last reply
                      0
                      • jazzycamelJ jazzycamel

                        @mpergand said in modifying painter event in a LED class from solid color to Glowing color:

                        QRadialGradient gradient1(rec.center(), rec.width());
                        gradient1.setColorAt(.0,Qt::red);
                        gradient1.setColorAt(.9, Qt::transparent);
                        painter.fillPath(path1,QBrush(gradient1));

                        There is nothing wrong with QRadialGradient, just the way you are using it. When you construct the QRadialGradient, the first argument is the center point and the second argument is the radius not the diameter you want. If you change your first line to the following you will get the effect you expect:

                        ...
                        QRadialGradient gradient1(rec.center(), rec.width()/2);
                        ...
                        

                        Hope this clears things up ;o)

                        VikramSamyV Offline
                        VikramSamyV Offline
                        VikramSamy
                        wrote on last edited by
                        #14

                        @jazzycamel said in modifying painter event in a LED class from solid color to Glowing color:

                        @mpergand said in modifying painter event in a LED class from solid color to Glowing color:

                        QRadialGradient gradient1(rec.center(), rec.width());
                        gradient1.setColorAt(.0,Qt::red);
                        gradient1.setColorAt(.9, Qt::transparent);
                        painter.fillPath(path1,QBrush(gradient1));

                        There is nothing wrong with QRadialGradient, just the way you are using it. When you construct the QRadialGradient, the first argument is the center point and the second argument is the radius not the diameter you want. If you change your first line to the following you will get the effect you expect:

                        ...
                        QRadialGradient gradient1(rec.center(), rec.width()/2);
                        ...
                        

                        Hope this clears things up ;o)

                        yup got the effects....thanks...

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved