Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Circular progress bar

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #12124

    Phil

    Hi. I have a timer that counts down during my game and I’d like to add some visuals to go with the timer text. What I want to achieve is something similar to the example here, would this be possible? Thanks, Phil

    #12125

    Alex
    Felgo Team

    Hi Phil,

    you can try this piece of code to achieve a circular progress bar:

    import Felgo 3.0
    import QtQuick 2.0
    
    Rectangle {
      color: "white"
      property real value
      property alias text: timeText.text
      width: 40
      height: 40
    
      Text {
        id: timeText
        font.family: fontLight.name
        color: "#66bcb7"
        font.pixelSize: 10
        anchors.centerIn: parent
      }
    
      Row{
        id: circle
    
        property color circleColor: "transparent"
        property color borderColor: "#66bcb7"
        property int borderWidth: 2
        anchors.centerIn: parent
        width: parent.width-10
        height: width
    
        Item{
          width: parent.width/2
          height: parent.height
          clip: true
    
          Item{
            id: part1
            width: parent.width
            height: parent.height
            clip: true
            rotation: value > 0.5 ? 360 : 180 + 360*value
            transformOrigin: Item.Right
    
            Rectangle{
              width: circle.width-(circle.borderWidth*2)
              height: circle.height-(circle.borderWidth*2)
              radius: width/2
              x:circle.borderWidth
              y:circle.borderWidth
              color: circle.circleColor
              border.color: circle.borderColor
              border.width: circle.borderWidth
              smooth: true
            }
          }
        }
    
        Item{
          width: parent.width/2
          height: parent.height
          clip: true
    
          Item{
            id: part2
            width: parent.width
            height: parent.height
            clip: true
            rotation: value <= 0.5 ? 180 : 360*(value)
            transformOrigin: Item.Left
    
            Rectangle{
              width: circle.width-(circle.borderWidth*2)
              height: circle.height-(circle.borderWidth*2)
              radius: width/2
              x: -width/2
              y: circle.borderWidth
              color: circle.circleColor
              border.color: circle.borderColor
              border.width: circle.borderWidth
              smooth: true
            }
          }
        }
      }
    }
    

    The value property needs to be between 0.0 and 1.0

    Cheers,
    Alex

    #12127

    Phil

    That’s perfect. Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.