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



  • 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


  • Moderators

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



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


  • Moderators

    @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");
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.