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

create Qml in app user walkthrough



  • Hello all,
    Hope you are doing well,
    im trying to create and design a user walkthrough for my app to introduce some new functions and help the user understand the basics of my application.

    Do you have any suggestion and advice for how and where do i start ?
    is there a qml type that can highlight one button to be notices by the user to click it when the guide tells them to click somewhere ?

    Thanks for your help
    have a great day.





  • Hello ,
    Thanks for your replay.

    I think your asnwer does not relate to any of my questions
    i dont need to highlight item in a list view ( i want to highlight a QtQuickControl when the guide asks to press that button.
    and foucus on one area in the screen so the user notices that spot.

    Thanks



  • Maybe you could use a Button?

    It has a highlight property.

    See https://doc.qt.io/qt-5/qml-qtquick-controls2-button.html#details



  • This is a basic framework to highlight a series of buttons. It uses each button's clicked signal to transfer to the next button. If something other than buttons are involved, you might need to define a common signal. You might also want to disable the non-highlighted controls to enforce the demo's order.

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.0
    
    Window {
        width: 640
        height: 480
        visible: true
    
        Grid {
            id: grid
            anchors.centerIn: parent
            columns: 2
            rows: 2
            spacing: 10
            ToolButton {
                id: b1
                text: "1"
            }
            ToolButton {
                id: b2
                text: "this is the second button"
            }
            ToolButton {
                id: b3
                text: "3"
            }
            ToolButton {
                id: b4
                text: "four"
            }
        }
    
        Text {
            id: done
            anchors {
                top: grid.bottom
                horizontalCenter: parent.horizontalCenter
            }
            text: "All Done!"
            font.pixelSize: 30
            visible: children.length !== 0
            onVisibleChanged: {
                if (visible) {
                    for (var child in children) {
                        children[child].visible = false;
                    }
                }
            }
        }
    
        Rectangle {
            id: tracer
            anchors.centerIn: parent
            width: parent.width + 10
            height: parent.height + 10
            border {
                color: "red"
                width: 5
            }
            color: "transparent"
            parent: order[index]
    
            property var order: [b1, b2, b3, b4, done]
            property int index: 0
    
            Text {
                anchors {
                    top: parent.bottom
                    horizontalCenter: parent.horizontalCenter
                }
                text: "Click here!"
                color: "blue"
            }
    
            Connections {
                target: tracer.parent
                ignoreUnknownSignals: true
                function onClicked() {
                    tracer.parent = tracer.order[++tracer.index];
                }
            }
        }
    }
    

Log in to reply