Tour my app - overlay widgets

vivian

Hello all,
I am trying to see if there is a way to use in-application guided tours to help new users, highlight features in the software, show a demo, or as a substitute for initial steps to learn the absolute basics of the software.
Something like it usually is taken care with Android/iOS applications.

Not sure where to start. So any suggestions or if there are libraries to look at.
Thank you.

ambershark

@vivian Is your gui in QML or using QtWidgets? It would be possible with either, but super easy with QML. With widgets you'd probably need a custom QWidget that would have a transparent background, then you could draw say a rectangle border and put some text on top of it or something. Then you could position and show that widget to "highlight" the features you wanted to show.

It would be pretty easy to implement if you had some decent experience with Qt. Maybe not so easy if it was your first custom widget with custom painting though. Still doable but expect to spend some time on it.

The QML side would be really easy since drawing and positioning things easily is what it's good at. ;)

vivian

Thanks, @ambershark , yeah I use widgets and this would be my first custom widgets. Thanks for the advice... May I be a little cheeky and ask for an example?

ambershark

@vivian Sure if I can get some time this week I will see if I can write one up. The custom widget is definitely harder than the QML side so it might take me a bit of drawing trial and error which I don't have time for today. Maybe this weekend.

ambershark

@vivian I lied, I had time tonight.. Here is a quick/dirty example of a widget that can highlight other widgets for use in a tour. In addition to this highlight I would then have a popup window of some sort explaining the feature or widget. Then put a next and skip button on that popup window to proceed with the tour or cancel it.

I also hard coded the geometry of the tour widget. In your implementation you would want to have settings to adjust color, size, and "attach" it to the widget you want so you don't have to hand do the geometry.

You can of course do it by hand if you like, but it wouldn't be as fun. ;)

mainwindow.cpp:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    auto layout = new QHBoxLayout();
    layout->addWidget(new QLabel("Name"));
    layout->addWidget(new QLineEdit());
    auto cw = new QWidget(this);
    cw->setLayout(layout);
    setCentralWidget(cw);
    resize(600, 400);
    
    auto tw = new TourWidget(this);
    tw->setGeometry(4, 185, 52, 30);
}

tourwidget.h:

#pragma once

#include <QWidget>

class TourWidget : public QWidget
{
    Q_OBJECT

public:
    TourWidget(QWidget *parent = 0);
    
protected:
    void paintEvent(QPaintEvent *event) override;
};

tourwidget.cpp:

#include "tourwidget.h"
#include <QPainter>

TourWidget::TourWidget(QWidget *parent)
    : QWidget(parent)
{
}

void TourWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    
    QPainter painter(this);
    
    QPen pen;
    pen.setColor(QColor(200, 0 ,0));
    pen.setWidth(4);
    painter.setPen(pen);
    
    painter.drawRect(QRect(0, 0, width()-1, height()-1));
}

Here is what it would look like:

And then like I said above a window open next to that highlighted widget explaining it.

Hope that helps.

vivian

@ambershark This is wonderful, Cannot thank you enough. I used the above to help me out with the tour application. I will send a few screenshots after adjusting the whole tour.
Thank you. Also, I understood the custom widgets better.

tham

Why not just use css to customize QLabel?

pseudo codes:

label->setStyleSheet("QLabel {border: 2px solid gray;border-radius: 2px;background-color: white;padding: 0px 5px 10px 15px;}")

You can consider embed qml into your QWidget application by QQuickWidget too.

ambershark

@tham Well it's not just QLabel, it's any widget. But yea you could use a stylesheet. I just didn't think about doing it that way.

The custom paint was easy enough and it lends to being able to customize and make a TourWidget properly. With a stylesheet you have to modify the actual widgets during the tour. That isn't necessarily what was desired.

As for QQuickWidget, I didn't realize that even existed. That is awesome to be able to use QML in a widget! Great to know for the future.

ambershark

@vivian said in Tour my app - overlay widgets:

@ambershark This is wonderful, Cannot thank you enough. I used the above to help me out with the tour application. I will send a few screenshots after adjusting the whole tour.
Thank you. Also, I understood the custom widgets better.

Awesome! Happy to help. I'd love to see the result. :)