Led Like buttons/Widgets



  • Hello everyones,
    i'm looking for some buttons/widget to rappresent boolean variables in UI.

    I have found some old widgets but they are incredibily hard to install on QT5 under Windows.
    Can someone point me to some easy to use widgets or give me some hints to reach my objective?

    Thanks


  • Qt Champions 2017

    Hi
    This is how you make your own
    http://www.ics.com/blog/integrating-custom-widget-qt-designer

    However If you do not need to have it visual seen in design mode, you can skip ALL the parts
    with making it a plugin. and simply use the promote feature
    http://doc.qt.io/qt-4.8/designer-using-custom-widgets.html

    That makes it far easier and you can have a simple LED pretty fast.



  • class Led : public QLabel {
      Q_OBJECT
      Led(const Led&) = delete;
      Led& operator=(const Led&) = delete;
     public slots:
      void setOn() {
        onPix.fill(Qt::red);
        setPixmap(onPix);
      }
      void setOff() {
        onPix.fill(Qt::black);
        setPixmap(onPix);
      }
      void setPower(bool val) {
        if(val) setOn();
        else setOff();
      }
     public:
      virtual ~Led() = default;
      explicit Led(QWidget* parent = nullptr)
        : QLabel(parent)
        , onPix(48, 48) {
        onPix.fill(Qt::black);
        setPixmap(onPix);
        setScaledContents(true);
      }
     private:
      QPixmap onPix;
    };
    


  • Hi! You could also use a QPushButton with a LED-like icon on it.



  • My first implementation was quite embarrassing, this is a bit better:

    class Led : public QWidget{
        Q_OBJECT
        Q_PROPERTY(bool power READ power WRITE setPower NOTIFY powerChanged)
        Led(const Led&)=delete;
        Led& operator=(const Led&)=delete;
    public:
        explicit Led(QWidget* parent=nullptr)
            :QWidget(parent)
            , m_power(false)
        {}
        bool power() const
        {
            return m_power;
        }
    public slots:
        void setPower(bool power)
        {
            if(power!=m_power){
                m_power = power;
                emit powerChanged();
                update();
            }
        }
    signals:
        void powerChanged();
    protected:
        virtual void paintEvent(QPaintEvent *event) override{
            Q_UNUSED(event)
            QPainter ledPainter(this);
            ledPainter.setPen(Qt::black);
            if(m_power)
                ledPainter.setBrush(Qt::red);
            else
                ledPainter.setBrush(Qt::NoBrush);
            ledPainter.drawEllipse(rect());
        }
    private:
        bool m_power;
    };
    

    You can change paintEvent to make it look prettier

    Edit:

    Thanks @mrjj for the suggestion about better handling of the update/repaint


  • Qt Champions 2017

    @VRonin
    Np, only discovered it as i made a test project :)
    https://www.dropbox.com/s/you53vbvl5z73ql/myleds.zip?dl=0

    alt text

    To show off the promote thing and the Led.


  • Lifetime Qt Champion

    Hi,

    Just in case, there's QLed that might also be of interest.


  • Qt Champions 2017

    @SGaist
    Funny enough I also found that ;)
    Its Qt4-ish and needed to be updated to new plugin export macros and includes for designer
    interface. the pro file also had old keywords and some more stuff needed.

    Here is version that can compile on Windows Qt5.7.
    https://www.dropbox.com/s/38endyfoexb28nd/QLeds57.zip?dl=0



  • There's also a LED widget in KDE4, KLed Class Reference.



  • Guys thank a lot for all your hints. I will find a solution that better fits in my project for sure. Thumbs up for all your answers!



  • @mrjj
    This is a very interesting plugin , i would like to use it.
    I can build the project i downloaded from your dropbox but i still do not find the plugin into my designer.

    I'm under windows , are there any particular passages i have to do to make it work?
    Thank a lot for your time.

    My QT version is 5.7


  • Qt Champions 2017

    @Bruschetta
    Hi.
    Plugins are Dlls. Creator are compiled with Visual Studio. (2013)
    So to load custom plugin, it must be compiled with visual studio and not mingw.
    Then the dll should be copied to "\bin\plugins\designer"

    Alternative you can use the Qleds by Promotion
    http://doc.qt.io/qt-5/designer-using-custom-widgets.html

    Alternative, you can have my VS DLL
    https://www.dropbox.com/s/1f65fzcew6pjm2z/VSqledplugin.zip?dl=0
    Copy to C:\Qt\Tools\QtCreator\bin\plugins\designer
    Disclaimer: Normally I do not recommend downloading DLLS from forums.



  • @mrjj
    Your answer is very exaustive, thanks for the heads up!


  • Qt Champions 2017

    @Bruschetta
    Np.
    I think its needs a .pri file to be complete
    http://doc.qt.io/qt-5/designer-creating-custom-widgets.html
    section "Splitting up the Plugin"
    To make it easy to use in a clean project.
    Then all you need to do is
    include(QLeds.pri)
    to use in a project. Didn't try that yet.



  • @mrjj
    with the dll now i see the widget in the Designer.
    Anyway if i use it in i have serveral errors.

    In particular i tried to create the PRI file containing:

    INCLUDEPATH += $$PWD
    HEADERS += $$PWD/qled.h
    SOURCES += $$PWD/qled.cpp
    
    
    

    That i added to the plugin and the project file

    Whan i try to compile now i get this error

    mingw32-make[1]: *** No rule to make target '../../QTProjects-New/Alpha2/qled.cpp', needed by 'debug/qled.o'. Stop.:

    What i'm doing wrong with this pri files?
    Is again mingw fault?


  • Qt Champions 2017

    @Bruschetta
    Hi.
    seems fine.
    I have not tried this yet.
    No, should not be mingw fault. :)

    maybe we be need
    QT += QLed

    Sounds like its not linking the plugin but I not sure if that will do it.

    I also really want to know how to do this the right way. as I think its very little needed to fully work but
    not sure what it is.



  • @mrjj
    Unfortunately for me .pri files are not working, neither copying the qled.h and qled.cpp into the project.

    I got those warnings during compile time

    warning: 'virtual const QMetaObject* QLed::metaObject() const' redeclared without dllimport attribute: previous dllimport ignored
     warning: 'void QLed::setOffColor(QLed::ledColor)' redeclared without dllimport attribute: previous dllimport ignored
    .
    .
    

    and errors

    QTProjects\build-Alpha2-Desktop_Qt_5_7_0_MinGW_32bit-Debug/debug/moc_qled.cpp:151: undefined reference to `_imp___ZN4QLed10setOnColorENS_8ledColorE
    QTProjects\build-Alpha2-Desktop_Qt_5_7_0_MinGW_32bit-Debug/debug/moc_qled.cpp:153: undefined reference to `_imp___ZN4QLed8setShapeENS_8ledShapeE
    .
    .
    

    tried to add qledplugin.dll as lib in the .pro file too without success.

    Have you any suggestion ? :)
    Thanks again for the attention and time


  • Qt Champions 2017

    Yes. If you remove the QDESIGNER_WIDGET_EXPORT
    from the qled.h it will link and run
    as in

    class /*QDESIGNER_WIDGET_EXPORT*/ QLed : public QWidget {
    

    You also need the qres in PRI file
    qled.pri

    QT += svg
    INCLUDEPATH += $$PWD
    HEADERS += $$PWD/qled.h
    SOURCES += $$PWD/qled.cpp
    
    RESOURCES += $$PWD/qled.qrc
    

    Note that this is slightly hack-ish as you need QDESIGNER_WIDGET_EXPORT when compiling as plugin.
    But not when using it via .PRI file.



  • @mrjj
    you have been fast as lightning! And it's working! Thahks a lot!


  • Qt Champions 2017

    @Bruschetta
    Super :)



  • @mrjj You have been very helpful to @Bruschetta and I'm wondering if you will go a little further.

    The Qleds57.zip file is no longer in your drop box. Would you mind terribly putting up a copy again? Or a 5.10 version?

    I'm trying to walk through this as a beginner and keep running into roadblocks.


  • Qt Champions 2017

    @BlackDogWhite
    Surely
    Here is similar sample
    https://www.dropbox.com/sh/mnaipp7apodqp0d/AABkpILwRICtBxd-5lK0CcUSa?dl=0

    Make sure to open UseTheLeds.pro
    in the UseTheLeds subfolder.
    It show a led using .pri inclusion. That is it compiles the leds into the project.

    There is also qledplugin.pro that compiles it as a plugin.
    Note that to use it as a plugin, you need the visual studio compiler to make it loadable by
    Creator. (mingw wont work)

    Using .pri inclusion, you dont have a plugin, but can use promotion. ( as UseTheLeds.pro shows)

    While a plugin, offers design time settings of properties, you can access the promoted led in code
    using ui->ledname and hence get almost the same.

    Let me know if you want to create a plugin. I didnt test if that part just works
    but UseTheLeds surely runs on 5.10



  • @mrjj Thank you for sharing those files. I was able to open the UseTheLeds project, run it, modify it and all was cool.

    But then I tried to add another instance of the qLed, both by promotion (drag a Containers->Widget onto the form; rtClk->Promote ) and by coping the already working qLed object. Neither of these worked. Adding to the MainWindow constructor

    ui->qLed_2->setShape(QLed::Circle);  // the "copied" version of qLed
    ui->MyQled->setShape(QLed::Circle); // the promoted container widget
    
    

    would cause the compile to fail because neither qLed_2 nor MyQled were members of Ui::MainWindow.

    Obviously I've skipped an important step. Probably something to do with ui_mainwindow.h. Am I supposed to edit that manually (I don't think so, but it's not getting updated automatically)?

    Hints??



  • @mrjj
    ohhhh, I must not have something set up properly, maybe because this was just a demo. But when I add stuff to the ui, the ui_mainwindow.h file is created up and over in a build-UseTheLeds-Desktop_blah_blah-Debug directory. So that .h file has references to MyQled and qLed_2.

    Must be something screwed up in my environment.


  • Qt Champions 2017

    @BlackDogWhite
    hi, nope something up with usetheleds demo as copying
    the promoted several time didnt show many lights.
    Ill will report back when i have a look at it :)



  • @mrjj well, it may also be my environment, sadly. I'm trying to figure out Qt, both on the PC and on a Raspberry Pi 3, using MS Visual Studio (which I'm pretty familiar with), along with QT VS Tools and VisualGDB.

    • I can get your demo (UseTheLeds) working under Qt Creator (except for the above referenced problem) and displaying on the PC

    • I also have a working GUI program developed on the PC (with VS, Qt VS Tools, and VisualGDB) that runs both on the PC and squirts down to the Pi.

    • But trying to add the Qled code to the working GUI program breaks everything, possibly in part because the cross compiler chain (c:\sysgcc\raspberry...) cannot find QtSvg includes. When I search for QtSvg, I find it but only in a qt4 dir chain (SysGCC\raspberry\arm-linux-gnueabihf\sysroot\usr\include\qt4...)

    Ouch, I'm getting a headache!


  • Qt Champions 2017

    @BlackDogWhite
    Hi
    Do you need it to be very scale able ?
    Else we could use png for the leds if getting the SVG module to the Pi is
    difficult.

    However, there was something odd wiht the sample. i will link a new one here as soon as its weekend :)



  • @mrjj First off, I'm up for any help someone is willing to offer. A revised version would be very useful, if only to study the differences and learn something else about how all this works.

    I'm going to look, hopefully this afternoon, where my cross compiler install went wrong. Maybe I can get that upgraded to Qt5 so the SVG stuff works. But I certainly wouldn't mind seeing how it would work with PNG's!


  • Qt Champions 2017

    @BlackDogWhite

    Hi
    Here is other sample that allows copy paste of promoted widget.
    Im not sure what was up with the other. the ui file seemed stale.

    Anyway, this works. the go button show random shape and color.
    I have included only bare minimum of qled files to work.

    alt text

    https://www.dropbox.com/s/kfti0otv9ez9u28/Myleds.zip?dl=0



  • @mrjj Thanks MrJJ. I was able to copy your code and create a project from scratch using the QLed class to render a button. On the UI I drag in a Widget object and promote it to QLed. It shows up just fine. This is all in Qt Creator 4.5.1, Qt 5.10.1 and Visual Studio 2013 for the compiler.

    I was also able to get it to work on the Raspberry Pi using VS 2013 along with Qt VS Tools and VisualGDB added in.

    Still have quite a bit to learn, never having done Qt or Pi before. But with your help I've made good progress. Maybe I'll get bold and actually try to get the plugin to work as well, but that's pretty low priority.

    Thank you for all your help. You da man!
    Ron


  • Qt Champions 2017

    @BlackDogWhite
    Super :)
    well crosscompiling is not easy. So good work.
    Since you already have visual studio, it might not be huge work to get the plugin running
    but in this case it offer not so much besides seeing the leds in designer and setting type and
    color directly in Designer. ( you could also do that with dynamic properties as they are
    added to the actual widget type also when using promotion)


Log in to reply
 

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