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

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));

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)

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...

VikramSamy

@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...

jazzycamel

@VikramSamy
What version of Qt are you using?

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"))
);

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)

VikramSamy

@mpergand

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

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

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....

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?

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"))
);
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...

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.

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));

VikramSamy

@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

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)

mpergand

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

VikramSamy

@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...