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
-
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
Hi @Brandon-Martin,
The QML properties will be accessible from JavaScript too. -
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?
-
Thank you, @p3c0, can you give me a quick example of how I access them from javascript?
@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"); } }