Important: Please read the 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:


    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

    Do mean if its possible to overlay widgets over some image ?
    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
        TestWindow(QWidget *parent = nullptr) : QMainWindow(parent)
            display = new QTextEdit(this);
            display->resize(800, 480);
            display->move(955, 97);
        virtual void paintEvent(QPaintEvent *)
            QPainter painter(this);
            painter.drawImage(0, 0, QImage(":/mockup/panels/Panel.png"));
        QTextEdit *display;
    int main(int argc, char *argv[])
        QApplication app(argc, argv);
        TestWindow testWindow;;
        return app.exec();

Log in to reply