Dynamically change the values in QML-CodePudding

I'm gonna make vehicle speedometer by QT. I have to get data from my arduino speed sensor, and it's is dynamic data. So I have to test my QML file to check if i can display the dynamic data.

KPH and RPM must represent current second, but it doesn't change.

How can I change it?


import QtQuick 2.2
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
//! [0]
Item {


    id: valueSource
    property real kph: 0
    property real rpm: 1
    property real fuel: 0.5 
    property date curentTime: new Date()
    //property second curentTime: getSeconds()
    property string gear: {
        var g;
        if (kph == 0) {
            return "P";
        }
        if (kph < 30) {
            return "1";
        }
        if (kph < 50) {
            return "2";
        }
        if (kph < 80) {
            return "3";
        }
        if (kph < 120) {
            return "4";
        }
        if (kph < 160) {
            return "5";
        }
    }
    property int turnSignal: gear == "P" && !start ? randomDirection() : -1
    property real temperature: 0.6
    property bool start: true
//! [0]

    function randomDirection() {
        return Math.random() > 0.5 ? Qt.LeftArrow : Qt.RightArrow;
    }

    SequentialAnimation {
        running: true
        loops: 1

        // We want a small pause at the beginning, but we only want it to happen once.
        PauseAnimation {
            duration: 1000
        }


        PropertyAction {
            target: valueSource
            property: "start"
            value: false
        }

        SequentialAnimation {
            loops: Animation.Infinite

            ParallelAnimation{
                NumberAnimation {
                    target: valueSource
                    property : "kph"
                    easing.type: Easing.InOutSine
                    from: 0
                    to: seconds;
                    duration: 1000
                }

                NumberAnimation {
                    target: valueSource
                    property : "rpm"
                    easing.type: Easing.InOutSine
                    from: seconds;
                    to: 0
                    duration: 1000
                }
             }
             ParallelAnimation{
                NumberAnimation {
                    target: valueSource
                    property : "kph"
                    easing.type: Easing.InOutSine
                    from: seconds
                    to: 0;
                    duration: 1000
                }

                NumberAnimation {
                    target: valueSource
                    property : "rpm"
                    easing.type: Easing.InOutSine
                    from: 0;
                    to: seconds
                    duration: 1000
                }
             }
        }
    }
}

It's an example code in QT, and I changed it a little. I just want to make RPM and KPH instrument panel represents current second.

CodePudding user response：

There's no clock object that you can bind to that will provide the current seconds. You just need to query the current time every second. For that, you will want to use a Timer object.

property int currentSeconds: (new Date()).getSeconds()

Timer {
    running: true
    repeat: true
    interval: 1000
    onTriggered: {
        var now = new Date();
        currentSeconds = now.getSeconds()
    }
}

CodePudding user response：

I couldn't find any visual element in your example, so, I added a ColumnLayout with some Text components to display kph, rpm and gear. Also, there was a compilation error due to there being no seconds property, so, I declared one.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
//! [0]
Page {
    id: valueSource
    anchors.fill: parent
    property real kph: 0
    property real rpm: 1
    property real fuel: 0.5
    property date curentTime: new Date()
    //property second curentTime: getSeconds()
    property real seconds: 50
    property string gear: {
        var g;
        if (kph == 0) {
            return "P";
        }
        if (kph < 30) {
            return "1";
        }
        if (kph < 50) {
            return "2";
        }
        if (kph < 80) {
            return "3";
        }
        if (kph < 120) {
            return "4";
        }
        if (kph < 160) {
            return "5";
        }
    }
    property int turnSignal: gear == "P" && !start ? randomDirection() : -1
    property real temperature: 0.6
    property bool start: true
    //! [0]

    function randomDirection() {
        return Math.random() > 0.5 ? Qt.LeftArrow : Qt.RightArrow;
    }

    ColumnLayout {
        Frame {
            Text {
                text: qsTr("%1 kph").arg(kph)
            }
        }
        Frame {
            Text {
                text: qsTr("%1 rpm").arg(rpm)
            }
        }
        Frame {
            Text {
                text: qsTr("Gear: %1").arg(gear)
            }
        }
        Frame {
            Text {
                text: qsTr("Seconds: %1").arg(seconds)
            }
        }
    }

    SequentialAnimation {
        running: true
        loops: 1

        // We want a small pause at the beginning, but we only want it to happen once.
        PauseAnimation {
            duration: 1000
        }


        PropertyAction {
            target: valueSource
            property: "start"
            value: false
        }

        SequentialAnimation {
            loops: Animation.Infinite

            ParallelAnimation {
                NumberAnimation {
                    target: valueSource
                    property : "kph"
                    easing.type: Easing.InOutSine
                    from: 0
                    to: seconds;
                    duration: 1000
                }

                NumberAnimation {
                    target: valueSource
                    property : "rpm"
                    easing.type: Easing.InOutSine
                    from: seconds;
                    to: 0
                    duration: 1000
                }
            }
            ParallelAnimation {
                NumberAnimation {
                    target: valueSource
                    property : "kph"
                    easing.type: Easing.InOutSine
                    from: seconds
                    to: 0;
                    duration: 1000
                }

                NumberAnimation {
                    target: valueSource
                    property : "rpm"
                    easing.type: Easing.InOutSine
                    from: 0;
                    to: seconds
                    duration: 1000
                }
            }
        }
    }
}

You can Try it Online!