How to create simply virtual LED indicator?



  • Hi,

    I want to create something like led lamp as a part of main window (it should to be built in), with two-three colors depending on the conditions. I should to create maybe a circle object with styles change?



  • @YtreioJ Hi,

    Here is one possible solution using stylesheet:

    .h

    #ifndef QLEDLABEL_H
    #define QLEDLABEL_H
    
    #include <QLabel>
    
    class QLedLabel : public QLabel
    {
        Q_OBJECT
    public:
        explicit QLedLabel(QWidget *parent = 0);
    
        enum State{
            StateOk,
            StateOkBlue,
            StateWarning,
            StateError
        };
    
        
    signals:
        
    public slots:
        void setState(State state);
        void setState(bool state);
    };
    
    #endif // QLEDLABEL_H
    
    

    .cpp

    #include "qledlabel.h"
    #include <QDebug>
    
    static const int SIZE = 20;
    static const QString greenSS = QString("color: white;border-radius: %1;background-color: qlineargradient(spread:pad, x1:0.145, y1:0.16, x2:1, y2:1, stop:0 rgba(20, 252, 7, 255), stop:1 rgba(25, 134, 5, 255));").arg(SIZE/2);
    static const QString redSS = QString("color: white;border-radius: %1;background-color: qlineargradient(spread:pad, x1:0.145, y1:0.16, x2:0.92, y2:0.988636, stop:0 rgba(255, 12, 12, 255), stop:0.869347 rgba(103, 0, 0, 255));").arg(SIZE/2);
    static const QString orangeSS = QString("color: white;border-radius: %1;background-color: qlineargradient(spread:pad, x1:0.232, y1:0.272, x2:0.98, y2:0.959773, stop:0 rgba(255, 113, 4, 255), stop:1 rgba(91, 41, 7, 255))").arg(SIZE/2);
    static const QString blueSS = QString("color: white;border-radius: %1;background-color: qlineargradient(spread:pad, x1:0.04, y1:0.0565909, x2:0.799, y2:0.795, stop:0 rgba(203, 220, 255, 255), stop:0.41206 rgba(0, 115, 255, 255), stop:1 rgba(0, 49, 109, 255));").arg(SIZE/2);
    
    QLedLabel::QLedLabel(QWidget *parent) :
        QLabel(parent)
    {
        //Set to ok by default
        setState(StateOkBlue);
        setFixedSize(SIZE, SIZE);
    }
    
    void QLedLabel::setState(State state)
    {
        qDebug() << "setState" << state;
        switch(state){
            case StateOk:
                setStyleSheet(greenSS);
            break;
            case StateWarning:
                setStyleSheet(orangeSS);
            break;
            case StateError:
                setStyleSheet(redSS);
            break;
            case StateOkBlue:
            default:
                setStyleSheet(blueSS);
            break;
        }
    }
    
    void QLedLabel::setState(bool state)
    {
        setState(state ? StateOk : StateError);
    }
    
    
    


  • @YtreioJ Another example using paintEvent(): https://github.com/melanholly/qt5-led-indicator-widget. But be care with this version, it uses QWidget::repaint(). So if you take inspiration from this one, I recommend to change all of them to QWidget::update() instead.

    You could also use an image.



  • This post is deleted!


  • @Gojir4 And how to add this as a custom widget in mainwindow or in qtdesigner?


  • Lifetime Qt Champion

    Hi
    The easiest way is to use the promotion feature.
    https://doc.qt.io/qt-5/designer-using-custom-widgets.html
    So you place a QLabel where you want the Led.
    Then right click it and select Promote.
    Then give class name (QLedLabel)
    and the .h file. ( most likely QLedLabel.h)
    Press Add, then press promote.
    Then Designer will use your QLedLabel.

    alt text



  • @mrjj thank you


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.