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

VikramSamy

This the H files

#define LED_INDICATOR_H

#include <QWidget>
#include <QBrush>
#include <QRadialGradient>

class LED_Indicator : public QWidget
{
    Q_OBJECT

public:
 LED_Indicator(int diameter, QColor on_color, QColor off_color, QWidget *parent = 0); 
     void Set_Status(int on_off);
     QSize minimumSizeHint() const Q_DECL_OVERRIDE;
     QSize sizeHint() const Q_DECL_OVERRIDE;
private slots:

private:
    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
    int m_diameter;
    int m_on_off;
    QColor m_on_color;
    QColor m_off_color;
};
#endif // LED_INDICATOR_H

this is C file

#include "led_indicator.h"
#include <QPainter>

// draw round button LED indicator
LED_Indicator::LED_Indicator(int diameter, QColor on_color, QColor off_color, QWidget *parent):QWidget(parent)
{
    m_diameter=diameter;
    m_on_color=on_color;
    m_off_color=off_color;
    m_on_off=0;
}

//draw and set round button LED indicator base on on/off state
void LED_Indicator::paintEvent(QPaintEvent *event)
{    
    QPainter painter(this);
    QRectF rectangle(0, 0, m_diameter, m_diameter);
    QBrush brush(Qt::SolidPattern)

if (m_on_off)
    {
        brush.setColor(m_on_color);
    }
    else
    {
        brush.setColor(m_off_color);
    }
    painter.setBrush(brush);
    painter.drawEllipse(rectangle);
    
}

QSize LED_Indicator::minimumSizeHint() const
{
    return QSize(m_diameter+3,m_diameter+3);
}

QSize LED_Indicator::sizeHint() const
{
    return QSize(m_diameter+3,m_diameter+3);
}

void LED_Indicator::Set_Status(int on_off)
{
    m_on_off=on_off;
    update();
}

ok basically by using above class i can create a LED widget which can be turn on and off and also adjust its size as i wanted,

i have used this class to create my user interface, but the LED color is just solid colors, in which i can use the basic color available but for now i want the LED on to be like "glowing/radiantgradial" or some graphicseffects to look it as glowing.

as per that what options do i have so that i can integrate the new glow functions into this class and use into my user interface .

i did find few example codes for doing the glowing but that codes i find difficult to integrate into this class, i just want change the LED_Indicator::paintEvent(QPaintEvent *event) function to have some graphics effects on the LED On , something like filling the drawn circle with glowing colors during ON and can remain the solids colors during off. i want to remain the function call as below but only modifier the paint event code section to have some effects according to the colors provided.

the class is used at mainwindow applications like this:-

 TEST_LED_A = new  LED_Indicator(100,QColor(Qt::yellow),QColor(Qt::red));

and the on off is done like this:-

TEST_LED_A->Set_Status(1);

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