Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


 import QtQuick 2.0

 Rectangle {
   id: timeView

   // this will be the default size, it is same size as the contained text + some padding
   width: text.width+ paddingHorizontal*2
   height: text.height+ paddingVertical*2

   // round edges
   radius: 4

   color: "pink"

   // the horizontal margin from the Text element to the Rectangle at both the left and the right side.
   property int paddingHorizontal: 10
   // the vertical margin from the Text element to the Rectangle at both the top and the bottom side.
   property int paddingVertical: 2

   // access the text of the Text component
   property alias textOverride: text.text

   property double remainingTime: 0

   // text shows the amount of time left for the current turn
   Text {
     id: text
     anchors.centerIn: parent
     anchors.verticalCenterOffset: 1
     font.pixelSize: 14
     color: "black"

   // update the text over with the decreasing time
   onRemainingTimeChanged: {
     var formatAsTime = function (numericTime) {
       var sec_num = parseInt(numericTime, 10); // don't forget the second param
       var minutes = Math.floor(sec_num / 60);
       var seconds = sec_num - (minutes * 60);

       if (minutes < 10) {minutes = "0"+minutes;}
       if (seconds < 10) {seconds = "0"+seconds;}
       var time    = minutes + ':' + seconds;
       return time;
Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded