Custom progress bar [ Involves both horizontal and vertical movement]



  • Hi All,
    I have been working to bring a new design progress bar for my project . I have a sketch in my hand but am finding it difficult to implement. Please provide any input for how to proceed!
    I have attached a rough image on how I want the progress to be shown : progress bar design
    alt text

    I have limited knowledge in qml and I am asking in the light of a previous project I have done which was a volume bar in which the progress was shown by adjusting the height of an image and using number animation to make it smooth.

    I used an Item class for a window inside which I placed an image and changed it height according to the input value. But such a possibility exists only for a vertical or horizontal progress . If I try to attempt it in this case, the revealing comes out like this:
    alt text

    If such a design is to be implemented using qml, what could be the approaches I could follow? Is there a way in which I can reveal a complete image in parts like I had explained before for the volume bar or should I use the Qpainter() ?



  • If you want to do that in QML, look at the new Shape module in Qt 5.10, or do it with Canvas.



  • @hkay hello,

    I did this simple exemple (QML/JS),i hope It can give you ideas.

    //

    import QtQuick 2.0
    
    Item {
        property int val:1
        property int maxValue:50
        property int minValue:0
    
        Timer{// test timer
            interval: 200
            running: true
            repeat: running
    
            property bool up: true
            onTriggered: {
                if(up&&val<maxValue){
                    val++
                    if(val===maxValue){
                        up=false
                    }
                }else{
                  val--
                    if(val==minValue) up = true
                }
            }
        }
    
        function colorVal(val, ind)   // instead of returning colors you can return image path like "images/01.png"
        {
            if(val === 0) return "gray"
            var temp = maxValue-3
            if(ind <= temp)
            {
                if(ind < temp - 3 )return "green"
                else return "orange"
            }
            else return "red"
        }
    
        function widthVal(val, ind)
        {
            if(val === 0) return 35
            var temp = maxValue - 3
            if(ind <= temp)
            {
                if(ind < temp-3 )return 35
                else return 75
            }
            else return 155
        }
    
    
        Column{
            //anchors.fill: parent
            spacing: 1
            Repeater{
                model : val
                anchors.right: parent.right
    
                Rectangle{ // here you can put an Image instead of Rectangle, and set 'source :  function imgageVal(val, ind) '
                    height: color=="red" ? 3 : 5
                    width: widthVal(val,index)
                    color: colorVal(val,index)
                    x:index
                }
            }
        }
    
    }
    
    

    LA


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.