Forums

OverviewV-Play 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
    V-Play Team

    Hi Phil,

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

    import VPlay 2.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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support