Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Doing a mockup of a physical panel



  • I'm in a new project that hasn't gotten so far that there's any kind of hardware done yet, but to get a feel of the UX I'm trying to do a mockup of the control panel. The controls will be physical buttons around a display (without touch) that reports back the system status, and I've built my UI on the image of the panel from the UX-designer and made certain areas clickable and so on. Works like a charm.

    What DOESN'T work like a charm is the display. Right now I'm simply drawing icons etc over the scanned image and while this works it means that I can't really simulate the final result but has to cludge around to get things drawn with an offset. What I would like to have would be a QWidget or similar that simply "floated" on top of the picture of the physical panel with the correct offset, something like this:

    0_1551192875070_6e15b187-dd67-4ab4-89b4-651b59df9f1f-image.png

    This so I can develop code that is as close as possible to the end result while the HW-guys are creating the actual hardware.

    Best would be if QWidget was transparent, but I'll settle with a square box on top of the panel too. After all it's just a mockup and we'll just have to live with the rounded corners not being rounded.

    Is this possible to do? How?


  • Lifetime Qt Champion

    Hi
    Do mean if its possible to overlay widgets over some image ?
    Like
    alt text

    If yes, you can just display the image in a QLabel and then place a widget over that.



  • @mrjj Doh. Sometimes things are easier than you think and you're just thick! Thank you, worked like a charm.

    Code included in case someone else has the same problem in the future and is searching for an answer (replace QTextEdit with the widget of your preference):

    class TestWindow : public QMainWindow
    {
      public:
        TestWindow(QWidget *parent = nullptr) : QMainWindow(parent)
        {
            display = new QTextEdit(this);
            display->setText("Testing");
            display->resize(800, 480);
            display->move(955, 97);
        }
    
        virtual void paintEvent(QPaintEvent *)
        {
            QPainter painter(this);
            painter.drawImage(0, 0, QImage(":/mockup/panels/Panel.png"));
        }
    
      private:
        QTextEdit *display;
    };
    
    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);
    
        TestWindow testWindow;
        testWindow.show();
    
        return app.exec();
    }
    
    

Log in to reply