Solved 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 } }
-
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-areasee also http://doc.qt.io/QtQuickEnterpriseControls/qml-qtquick-enterprise-controls-delaybutton.html
-
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.
thanksimport 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 theTimer
without explicitely telling that it should be accessed frompage
.Previously it worked because
page
was your root object, so it was implicitely accessed. Now you need to dopage.pressDuration
instead of justpressDuration
.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.