An Slider with delayed button property



  • hey guys
    I wanna to create a slider which has a delayed button property.
    I want it works as a simple slider, and when the user takes his/her finger on it for a while ( one second), it opens a popup page.

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Styles 1.2
    import QtQuick.Window 2.0
    Page {
        id: page
        width: 600
        height: 400
        Slider {
            id: slider
            x: 200
            y: 193
            value: 0.5
        }
    
        MouseArea {
            id: mouseArea
            x: 200
            y: 193
            width: 200
            height: 40
            onClicked: popup.open()
        }
        Popup{
            id: popup
            x: 200
            y: 100
            width: 200
            height: 200
            dim : true
            modal: true
            focus: true
            closePolicy: Popup.Popup.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    }
    

    what changes i should consider in the code?
    thanks.



  • @amir.sanaat hi,
    you can open your popup onPressAndHold
    //onClicked: popup.open()
    onPressAndHold: popup.open()

    how the user will change the value of the slider if you this ?



  • import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Styles 1.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("QFH")
        property real pressDuration : 0 //sec
        property real maxPress : 1 //sec after this we open popup
        signal pop() // to open
        onPop: {
            pressTimer.stop()
            pressDuration=0
    
            popup.open()
        }
        Timer{
            id:pressTimer
            running:false
            repeat:running
            interval: 100
            onTriggered: {
                console.log("pressing time : " + pressDuration+ "s")
                pressDuration+=0.1
                if(pressDuration>maxPress)pop()
    
            }
        }
    
        function re(){
            pressTimer.stop()
            pressDuration=0
        }
    
        Slider {
            id: slider
            x: 200
            y: 193
            value: 0.5
            onPressedChanged: pressed ? pressTimer.start() : re()
        }
    
        Popup{
            id: popup
            x: 200
            y: 100
            width: 200
            height: 200
            dim : true
            modal: true
            focus: true
            closePolicy: Popup.Popup.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    }
    
    




  • Dear @LeLev
    your sugestion worked.
    i really approciate it



  • @LeLev
    Hello dear experts.
    I used my delayed slider on a grid view, and I expect by pushing each slider for a while different dialogs or popups with different contents open. In the following code, the value of each slider change but by pushing it for a while, the popup page doesn't come up.
    Any help would be appropriate.
    thanks

    import QtQuick 2.9
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.3
    import QtQuick.Controls.Material 2.1
    import QtQuick.Controls.Universal 2.1
    import Qt.labs.settings 1.0
    
    Rectangle{
        
        StackView {
            id: stackView
            anchors.fill: parent
            initialItem: Pane {
                id: pane
                Text {
                    id:tex
                    
                    text: "sssssssssssssssssssssssssssssssssss؟؟"
                    font.family: "Arial"
                    font.bold: true
                    font.pixelSize: parent.width/20
                    anchors.margins: 20
                    color:"white"
                    anchors.top: pane.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: bottom.top
                    horizontalAlignment: Label.AlignHCenter
                    verticalAlignment: Label.AlignVCenter
                    wrapMode: Label.Wrap
                }
                GridView {
                    clip:true
                    id: gridView
                    width: parent.width
                    height: parent.height
                    // anchors.horizontalCenter: parent.horizontalCenter
                    
                    cellWidth: width/2
                    cellHeight:  width/1.5
                    
                    anchors{
                        left:parent.left
                        leftMargin: 30
                        right:parent.right
                        rightMargin: 0
                        top: tex.top
                        topMargin: 40
                    }
                    model: ListModel {
                        ListElement {
                            name: "Gray "
                            colorCode: "grey"
                        }
                        
                        ListElement {
                            name: "Red"
                            colorCode: "red";
                        }
                        
                        ListElement {
                            name: "Blue"
                            colorCode: "blue"
                        }
                        
                        ListElement {
                            name: "Green"
                            colorCode: "green"
                        }
                        ListElement {
                            name: "Red"
                            colorCode: "red"
                        }
                        
                        ListElement {
                            name: "Blue"
                            colorCode: "blue"
                        }
                        
                        ListElement {
                            name: "Green"
                            colorCode: "green"
                        }
                        ListElement {
                            name: "Red"
                            colorCode: "red"
                        }
                        
                        ListElement {
                            name: "Blue"
                            colorCode: "blue"
                        }
                        
                        ListElement {
                            name: "Green"
                            colorCode: "green"
                            source1: "qrc:/pages/Graph1.qml"
                        }
                    }
                    delegate: Item {
                        Column {
                            Item {
                                id: page
                                width: 80
                                height: 100
                                opacity: 1
                                property real pressDuration: 0 //sec
                                property real maxPress: 1 //sec after this we open popup
                                signal pop
                                // to open
                                onPop: {
                                    pressTimer.stop()
                                    pressDuration = 0
                                    
                                    popup.open()
                                }
                                Timer {
                                    id: pressTimer
                                    running: false
                                    repeat: running
                                    interval: 100
                                    onTriggered: {
                                        console.log("pressing time : " + pressDuration + "s")
                                        pressDuration += 0.1
                                        if (pressDuration > maxPress)
                                            pop()
                                    }
                                }
                                function re() {
                                    pressTimer.stop()
                                    pressDuration = 0
                                }
                                Slider {
                                    id: control
                                    anchors.verticalCenterOffset: 0
                                    anchors.horizontalCenterOffset: 0
                                    onPressedChanged: pressed ? pressTimer.start() : re()
                                    to: 10
                                    rotation: 270
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    value: 5
                                    
                                    background: Rectangle {
                                        id: backgra
                                        x: control.leftPadding
                                        y: control.topPadding + control.availableHeight / 2 - height / 2
                                        implicitWidth: 200
                                        implicitHeight: 80
                                        width: control.availableWidth
                                        height: implicitHeight
                                        radius: 15
                                        color: colorCode
                                        
                                        Text {
                                            x: 73
                                            y: -21
                                            
                                            text: Math.floor(control.value)
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            anchors.verticalCenter: parent.verticalCenter
                                            lineHeight: 1.5
                                            font.bold: true
                                            font.pointSize: parent.height / 1.6
                                            opacity: 0.1
                                            verticalAlignment: Text.AlignVCenter
                                            horizontalAlignment: Text.AlignHCenter
                                            rotation: 90
                                            z: 2
                                        }
                                        
                                        Rectangle {
                                            id: rectangle
                                            width: control.visualPosition * parent.width
                                            height: parent.height
                                            color: "#fbfbfb"
                                            opacity: control.value / 10
                                            radius: 15
                                        }
                                    }
                                    
                                    handle: Rectangle {
                                        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                                        y: control.topPadding + control.availableHeight / 2 - height / 2
                                        color: "#00000000"
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        anchors.verticalCenter: parent.verticalCenter
                                        implicitWidth: 50
                                        implicitHeight: backgra.height
                                        
                                        border.color: "#00000000"
                                    }
                                }
                                Popup {
                                    id: popup
                                    width: parent.width / 1.2
                                    height: parent.height / 1.2
                                    x: (parent.width - width) / 2
                                    y: (parent.height - height) / 2
                                    dim: true
                                    modal: true
                                    focus: true
                                    closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
                                }
                                
                                Popup {
                                    id: popup2
                                    width: parent.width / 1.2
                                    height: parent.height / 1.2
                                    x: (parent.width - width) / 2
                                    y: (parent.height - height) / 2
                                    dim: true
                                    modal: true
                                    focus: true
                                    closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
                                }
                                
                            }}}}
            }}
    }
    


  • hi @amir-sanaat ,
    what error or output do you have ?



  • Did you look at the console output ?

    You are trying to access the properties of your Item page in the Timer without explicitely telling that it should be accessed from page.

    Previously it worked because page was your root object, so it was implicitely accessed. Now you need to do page.pressDuration instead of just pressDuration.

    I also feel that the Timer code is needlessly complicated.

    Item {
        id: page
        property real pressDuration: 0 //sec
        property real maxPress: 1 //sec after this we open popup
        signal pop
        // to open
        onPop: {
            pressTimer.stop()
            pressDuration = 0
            
            popup.open()
        }
        Timer {
            id: pressTimer
            running: false
            repeat: running
            interval: 100
            onTriggered: {
                console.log("pressing time : " + page.pressDuration + "s")
                page.pressDuration += 0.1
                if (page.pressDuration > page.maxPress)
                    page.pop()
            }
        }
        function re() {
            pressTimer.stop()
            pressDuration = 0
        }
        Slider {
            id: control
            onPressedChanged: pressed ? pressTimer.start() : re()
    

    I would instead do:

    Item {
        id: page
        Timer {
            running: control.pressed
            interval: 1000
            onTriggered: popup.open()
        }
        Slider {
            id: control


  • @LeLev if you have ReferenceError, move the timer, function re(),popups,properties, signal at the top of your qml page.
    this is working :

    import QtQuick 2.10
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtCharts 2.2
    import Qt.labs.settings 1.0
    Window {
        visible: true
        width: 720
        height: 480
        title: qsTr("udp inspector")
    
        id:root
    
        function re() {
            pressTimer.stop()
            pressDuration = 0
        }
        property real pressDuration: 0 //sec
        property real maxPress: 1 //sec after this we open popup
        signal pop
        // to open
        onPop: {
            pressTimer.stop()
            pressDuration = 0
    
            popup.open()
        }
    
        Timer {
            id: pressTimer
            running: false
            repeat: running
            interval: 100
            onTriggered: {
                console.log("pressing time : " + pressDuration + "s")
                pressDuration += 0.1
                if (pressDuration > maxPress)
                    pop()
            }
        }
    
        Popup {
            id: popup
            width: parent.width / 1.2
            height: parent.height / 1.2
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            dim: true
            modal: true
            focus: true
            closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    
        Popup {
            id: popup2
            width: parent.width / 1.2
            height: parent.height / 1.2
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            dim: true
            modal: true
            focus: true
            closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    
    
        Rectangle{
            anchors.fill:parent
    
            StackView {
                id: stackView
                anchors.fill: parent
                initialItem: Pane {
                    id: pane
                    Text {
                        id:tex
    
                        text: "sssssssssssssssssssssssssssssssssss؟؟"
                        font.family: "Arial"
                        font.bold: true
                        font.pixelSize: parent.width/20
                        anchors.margins: 20
                        color:"white"
                        anchors.top: pane.bottom
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: bottom.top
                        horizontalAlignment: Label.AlignHCenter
                        verticalAlignment: Label.AlignVCenter
                        wrapMode: Label.Wrap
                    }
                    GridView {
                        clip:true
                        id: gridView
                        width: parent.width
                        height: parent.height
                        // anchors.horizontalCenter: parent.horizontalCenter
    
                        cellWidth: width/2
                        cellHeight:  width/1.5
    
                        anchors{
                            left:parent.left
                            leftMargin: 30
                            right:parent.right
                            rightMargin: 0
                            top: tex.top
                            topMargin: 40
                        }
                        model: ListModel {
                            ListElement {
                                name: "Gray "
                                colorCode: "grey"
                            }
    
                            ListElement {
                                name: "Red"
                                colorCode: "red";
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                            }
                            ListElement {
                                name: "Red"
                                colorCode: "red"
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                            }
                            ListElement {
                                name: "Red"
                                colorCode: "red"
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                                source1: "qrc:/pages/Graph1.qml"
                            }
                        }
                        delegate: Item {
                            Column {
                                Item {
                                    id: page
                                    width: 80
                                    height: 100
                                    opacity: 1
    
    
                                    Slider {
                                        id: control
                                        anchors.verticalCenterOffset: 0
                                        anchors.horizontalCenterOffset: 0
                                        onPressedChanged: pressed ? pressTimer.start() : re()
                                        to: 10
                                        rotation: 270
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        value: 5
    
                                        background: Rectangle {
                                            id: backgra
                                            x: control.leftPadding
                                            y: control.topPadding + control.availableHeight / 2 - height / 2
                                            implicitWidth: 200
                                            implicitHeight: 80
                                            width: control.availableWidth
                                            height: implicitHeight
                                            radius: 15
                                            color: colorCode
    
                                            Text {
                                                x: 73
                                                y: -21
    
                                                text: Math.floor(control.value)
                                                anchors.horizontalCenter: parent.horizontalCenter
                                                anchors.verticalCenter: parent.verticalCenter
                                                lineHeight: 1.5
                                                font.bold: true
                                                font.pointSize: parent.height / 1.6
                                                opacity: 0.1
                                                verticalAlignment: Text.AlignVCenter
                                                horizontalAlignment: Text.AlignHCenter
                                                rotation: 90
                                                z: 2
                                            }
    
                                            Rectangle {
                                                id: rectangle
                                                width: control.visualPosition * parent.width
                                                height: parent.height
                                                color: "#fbfbfb"
                                                opacity: control.value / 10
                                                radius: 15
                                            }
                                        }
    
                                        handle: Rectangle {
                                            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                                            y: control.topPadding + control.availableHeight / 2 - height / 2
                                            color: "#00000000"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            anchors.verticalCenter: parent.verticalCenter
                                            implicitWidth: 50
                                            implicitHeight: backgra.height
    
                                            border.color: "#00000000"
                                        }
                                    }
    
    
                                }
                            }
                        }
                    }
                }
            }
        }
    
    
    
    }
    
    


  • Thank you @GrecKo .
    your suggestion was very helpful.



  • Dear @LeLev like always your help was very valuable.
    To tell you the truth I wanted by pushing each slider in gridview a unique popup (which contains diffrent contents) open.
    For example, if I have ten sliders and popups, each slider opens its popup page.



  • @amir.sanaat as @GrecKo suggested timer code can be simplified like this

    import QtQuick 2.10
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtCharts 2.2
    import Qt.labs.settings 1.0
    Window {
        visible: true
        width: 720
        height: 480
        title: qsTr("udp inspector")
    
        id:root
    
    //    function re() {
    //        pressTimer.stop()
    //        pressDuration = 0
    //    }
        //property real pressDuration: 0 //sec
       // property real maxPress: 1 //sec after this we open popup
        signal pop
        // to open
    
    
        property int selectedSlider :0
        property variant pops:[popup,popup2] // all popups
        property bool ctrlPressed: false
    
        onPop: {
          //  pressTimer.stop()
          //  pressDuration = 0
    
            pops[selectedSlider].open()
        }
    
        Timer {
            id: pressTimer
            running: ctrlPressed
            repeat: running
            interval: 1000 //  ms after this we open popup
            onTriggered: {
    //            console.log("pressing time : " + pressDuration + "s")
    //            pressDuration += 0.1
    //            if (pressDuration > maxPress)
                    pop()
            }
        }
    
        Popup {
            id: popup
            width: parent.width / 1.2
            height: parent.height / 1.2
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            dim: true
            modal: true
            focus: true
            contentData: Text{
                anchors.centerIn: parent
                text: "pop"
            }
    
            closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    
        Popup {
            id: popup2
            width: parent.width / 1.2
            height: parent.height / 1.2
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            dim: true
            modal: true
            focus: true
            contentData: Text{
                anchors.centerIn: parent
                text: "pop1"
            }
            closePolicy: Popup.Popup1.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
        }
    
    
        Rectangle{
            anchors.fill:parent
    
            StackView {
                id: stackView
                anchors.fill: parent
                initialItem: Pane {
                    id: pane
                    Text {
                        id:tex
    
                        text: "sssssssssssssssssssssssssssssssssss؟؟"
                        font.family: "Arial"
                        font.bold: true
                        font.pixelSize: parent.width/20
                        anchors.margins: 20
                        color:"white"
                       // anchors.top: pane.bottom
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: bottom.top
                        horizontalAlignment: Label.AlignHCenter
                        verticalAlignment: Label.AlignVCenter
                        wrapMode: Label.Wrap
                    }
                    GridView {
                        clip:true
                        id: gridView
                        width: parent.width
                        height: parent.height
                        // anchors.horizontalCenter: parent.horizontalCenter
    
                        cellWidth: width/2
                        cellHeight:  width/1.5
    
                        anchors{
                            left:parent.left
                            leftMargin: 30
                            right:parent.right
                            rightMargin: 0
                            top: tex.top
                            topMargin: 40
                        }
                        model: ListModel {
                            ListElement {
                                name: "Gray "
                                colorCode: "grey"
                            }
    
                            ListElement {
                                name: "Red"
                                colorCode: "red";
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                            }
                            ListElement {
                                name: "Red"
                                colorCode: "red"
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                            }
                            ListElement {
                                name: "Red"
                                colorCode: "red"
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                                source1: "qrc:/pages/Graph1.qml"
                            }
                        }
                        delegate: Item {
                            Column {
                                Item {
                                    id: page
                                    width: 80
                                    height: 100
                                    opacity: 1
    
    
                                    Slider {
                                        id: control
                                        anchors.verticalCenterOffset: 0
                                        anchors.horizontalCenterOffset: 0
                                        onPressedChanged:{
    
                                            pressed ? ctrlPressed=true : ctrlPressed=false
                                           selectedSlider = index
                                        }
                                        to: 10
                                        rotation: 270
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        value: 5
    
                                        background: Rectangle {
                                            id: backgra
                                            x: control.leftPadding
                                            y: control.topPadding + control.availableHeight / 2 - height / 2
                                            implicitWidth: 200
                                            implicitHeight: 80
                                            width: control.availableWidth
                                            height: implicitHeight
                                            radius: 15
                                            color: colorCode
    
                                            Text {
                                                x: 73
                                                y: -21
    
                                                text: Math.floor(control.value)
                                                anchors.horizontalCenter: parent.horizontalCenter
                                                anchors.verticalCenter: parent.verticalCenter
                                                lineHeight: 1.5
                                                font.bold: true
                                                font.pointSize: parent.height / 1.6
                                                opacity: 0.1
                                                verticalAlignment: Text.AlignVCenter
                                                horizontalAlignment: Text.AlignHCenter
                                                rotation: 90
                                                z: 2
                                            }
    
                                            Rectangle {
                                                id: rectangle
                                                width: control.visualPosition * parent.width
                                                height: parent.height
                                                color: "#fbfbfb"
                                                opacity: control.value / 10
                                                radius: 15
                                            }
                                        }
    
                                        handle: Rectangle {
                                            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                                            y: control.topPadding + control.availableHeight / 2 - height / 2
                                            color: "#00000000"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            anchors.verticalCenter: parent.verticalCenter
                                            implicitWidth: 50
                                            implicitHeight: backgra.height
    
                                            border.color: "#00000000"
                                        }
                                    }
    
    
                                }
                            }
                        }
                    }
                }
            }
        }
    
    
    
    }
    
    
    


  • @LeLev
    Thanks for your snap reply.


Log in to reply
 

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