Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. I'm trying to build a countdown timer. How do I make this javascript output to a QML text element...?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 4.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Brandon Martin
    wrote on 19 May 2015, 23:22 last edited by
    #1

    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

    P 1 Reply Last reply 20 May 2015, 05:29
    0
    • B Brandon Martin
      19 May 2015, 23:22

      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

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 20 May 2015, 05:29 last edited by
      #2

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

      157

      B 1 Reply Last reply 20 May 2015, 05:43
      0
      • P p3c0
        20 May 2015, 05:29

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

        B Offline
        B Offline
        Brandon Martin
        wrote on 20 May 2015, 05:43 last edited by
        #3

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

        P 1 Reply Last reply 20 May 2015, 05:52
        0
        • B Brandon Martin
          20 May 2015, 05:43

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

          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 20 May 2015, 05:52 last edited by p3c0
          #4

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

          157

          1 Reply Last reply
          0

          1/4

          19 May 2015, 23:22

          • Login

          • Login or register to search.
          1 out of 4
          • First post
            1/4
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved