An Slider with delayed button property

amir.sanaat

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.

ODБOï

@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 ?

ODБOï

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
    }
}

ODБOï

visibly you can also change 'onPressAndHold ' duration directly c++ side
https://stackoverflow.com/questions/28729729/qml-is-it-possible-to-change-the-long-duration-of-a-mouse-area

see also http://doc.qt.io/QtQuickEnterpriseControls/qml-qtquick-enterprise-controls-delaybutton.html

amir.sanaat

Dear @LeLev
your sugestion worked.
i really approciate it

amir.sanaat

@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
                            }
                            
                        }}}}
        }}
}

ODБOï

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

GrecKo

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

ODБOï

@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"
                                    }
                                }


                            }
                        }
                    }
                }
            }
        }
    }



}

amir.sanaat

Thank you @GrecKo .
your suggestion was very helpful.

amir.sanaat

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.

ODБOï

@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"
                                    }
                                }


                            }
                        }
                    }
                }
            }
        }
    }



}

amir.sanaat

@LeLev
Thanks for your snap reply.