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

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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded