How to show countdown timer on top of button

Reddy_12

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