From 10:00 CET Friday 22nd November we will adjust how the server works to deal with some recently reported problems. Therefore there may be a load problem, if you experience more problems than usual trying to access the forum then please PM AndyS or any of the moderators so they can inform me.


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



  • @Gojir4 How would you take this and add it to a project?


  • Lifetime Qt Champion

    Hi @KarazQ a quick and easy way with Qt Creator is to add a new widget to your project and replace the content of the generated files with the code @Gojir4 provided.


Log in to reply