app/main.qml

import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 540
    height: 960
    title: qsTr("Speedclimbing stw")
    property date currentTime: new Date()
    property int millis: 0


    Page {
        id:root
        anchors.fill: parent

        property double startTime: 0
        property double stoppedTime: 0
        property double currTime: new Date().getTime()

        Timer {
            running: true
            repeat: true
            interval: 1
            onTriggered: {
                root.currTime = new Date().getTime()
            }
        }

        Item {
            id: time_container
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
            }
            height: parent.height * 0.15

            Label {
                id: time
                text: "Click start to start"

                anchors.centerIn: parent
                font.pixelSize: parent.height * 0.3
            }
        }


        Rectangle {
            width: parent.width
            height: 1
            color: "grey"
            anchors.left: parent.left
            anchors.top: time_container.bottom
        }

        SoundEffect {
            id: startSound
            source: "OFFICAL_IFSC_STARTIGNAL.wav"
            onPlayingChanged: {
                if(!playing){
                    root.startTime = new Date().getTime()
                    root.currTime = new Date().getTime()
                    time.text = ( ( root.currTime - root.startTime ) / 1000 ).toFixed(3) + " sec"
                    root.state = "RUNNING"
                }
            }
        }

        Rectangle {
            id: startButt

            property string text: "start"
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                bottomMargin: parent.height * 0.5 - height * 0.5
            }

            height: parent.height - (parent.height * 0.5)
            width: height > parent.width ? parent.width * 0.8:height
            color: "white"
            border.color: "grey"
            border.width: 1
            radius: width / 2

            Label {
                id: startButt_text
                text: parent.text
                anchors.centerIn: parent
                font.pixelSize: parent.height * 0.16
                font.family: "Helvetica"
            }
            MouseArea {
                enabled: startButt.enabled
                anchors.fill: parent
                onPressed: parent.color = "lightgrey"
                onReleased: parent.color = "white"
                onClicked: {
                    switch(root.state) {
                        case "":
                            root.state = "IDLE"
                        case "IDLE":
                            root.state = "STARTING"
                            startSound.play()
                            break
                        case "RUNNING":
                            root.stoppedTime = new Date().getTime() - root.startTime
                            time.text = ( root.stoppedTime / 1000 ).toFixed(3) + " sec"
                            root.state = "STOPPED"
                            break
                        case "STOPPED":
                            root.state = "IDLE"
                            break
                    }

                }
            }
        }
        states: [
                State {
                    name: "IDLE"
                    //state for the start page
                    PropertyChanges { target: time; text: "Click start to start"; font.pixelSize: parent.height * 0.3 }
                    PropertyChanges { target: time_container; height: parent.height * 0.15 }
                    PropertyChanges { target: startButt; enabled: true; text: "start"; height: parent.height - (parent.height * 0.5); anchors.bottomMargin: parent.height * 0.5 - startButt.height * 0.5 }
                },
                State {
                    name: "STARTING"
                    //state for the start sequence
                    PropertyChanges { target: startButt; enabled: false; text: "starting..." }
                    PropertyChanges { target: time; text: "0.000 sec" }
                },
                State {
                    name: "RUNNING"
                    //state when the timer is running
                    PropertyChanges { target: time; text: ( ( root.currTime - root.startTime ) / 1000 ).toFixed(3) + " sec" }
                    PropertyChanges { target: startButt; enabled: true; text: "stop" }

                },

                State {
                    name: "STOPPED"
                    //state when the meassuring is over
                    PropertyChanges { target: time; text: ( root.stoppedTime / 1000 ).toFixed(3) + " sec"; font.pixelSize: parent.height * 0.1 }
                    PropertyChanges { target: startButt; enabled: true; text: "reset"; height: parent.height - (parent.height * 0.8); anchors.bottomMargin: parent.height * 0.2 - startButt.height * 0.5 }
                    PropertyChanges { target: time_container; height: parent.height * 0.8 }
                }
            ]
        transitions: [
            Transition {
                NumberAnimation { properties: "height,width,bottomMargin,font.pixelSize"; easing.type: Easing.InOutQuad; duration: 700 }
                FadeAnimation { target: time; fadeDuration_in: 0; fadeDuration_out: 0 }
            },
            Transition {
                to: "STOPPED"
                NumberAnimation { properties: "height,width,bottomMargin,font.pixelSize"; easing.type: Easing.InOutQuad; duration: 700 }
            },
            Transition {
                to: "IDLE"
                NumberAnimation { properties: "height,width,bottomMargin,font.pixelSize"; easing.type: Easing.InOutQuad; duration: 700 }
                FadeAnimation { target: time; fadeDuration_out:  1000; fadeDuration_in: 0}
            },

            Transition {
                to: "RUNNING"
                //disable transitions for the RUNNING state
            }
        ]
    }
}