How to show countdown timer on top of button
Unsolved
QML and Qt Quick
-
Hello,
I am learning qml and i am trying to make an use case to run a count down timer on top of button in qml, the use case the i am trying to achieve in total is
Use Case :
When user presses on button in qml scene the color of the button has to be animated with red color and i have to run a count down timer on top of the button.Let's say when the Cam button is clicked, i want to change the color of Cam button and after color is applied i wanted to display a count down timer with some n value.
Attaching the code i tried, any suggestions on how to achieve would be much appreciated.
Code
main.qml
Window{ width: 640 height: 480 visible: true color: "pink" title: qsTr("Button Panel") Body{ } Guage{ } }
Body.qml
import QtQuick 2.0 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 Item { id:root width: 640 height: 480 property color bgColor signal repeaterbuttonpressed(int index,string buttonname) Rectangle{ width: 250 height: 600 color: "beige" border.color: "black" } ListModel{ id:listModel ListElement{ name:"G" } ListElement{ name:"M" } ListElement{ name:"Mu" } ListElement{ name:"Cam" } ListElement{ name:"Im" } ListElement{ name:"Ph" } } Flickable{ x:scrollBar.x y:250 anchors.fill: parent contentHeight: 2000 Grid{ id:scrollBar rows:8 columns: 2 spacing: 10 Repeater{ model:listModel Button{ id:btn text:name onClicked: { repeaterbuttonpressed(index,name) } } } } ScrollBar.vertical:ScrollBar{ id:vbar; active: true } } }
Gauge.qml
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 Item { Body{ id:bodyId onRepeaterbuttonpressed: { console.log("inside the on repeater button pressed",index,buttonname) /*Among the above listed buttons in the ListElements when ever Cam button is pressed from Here i wanted to implement/execute code to apply color to the specific Cam button at the same time wanted to start the count-down timer on top of the same Cam button */ } function myRepeaterbuttonpressed(index,buttonname) { console.log("myrepeaterbutton "+buttonname) console.log("myrepeaterbutton "+index) } Component.onCompleted: { repeaterbuttonpressed.connect(myRepeaterbuttonpressed) } } }
Attaching my expectation image for better understanding
Thanks in advance,
Regard's,
R_12