I'm trying to build a countdown timer. How do I make this javascript output to a QML text element...?

[Brandon Martin]

So, I'm new to QML, but I'm loving it. I want to send the output variable to a text property in QML, so that I get a live, continuously updated countdown for an event app. The problem here is that if I return the value it terminates the function and thus we don't have a live timer. Any thoughts?

function countdown(startTime) {
    var start = new Date(startTime);
    var now = new Date();
    var timeDiff = start.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearTimeout(timer);
        document.write('Performance Started')
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    var output = days + " days" + "," + hours + " hours, " + minutes + " minutes, " + seconds + " seconds."
    return output;
    var timer = setTimeout('cdtd()', 1000)
}

Thank you in advance

[p3c0]

Hi @Brandon-Martin,
The QML properties will be accessible from JavaScript too.

[Brandon Martin]

Thank you, @p3c0, can you give me a quick example of how I access them from javascript?

[p3c0]

@Brandon-Martin Sure, here you go:

import QtQuick 2.4

Item {
    width: 200
    height: 200

    function setTime(time) {
        myText.text = time //access Text item using id
    }

    Text {
        id: myText
        anchors.centerIn: parent
    }

    Component.onCompleted: {
        setTime("6:00");
    }
}