Custom progress bar [ Involves both horizontal and vertical movement]

[hkay]

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

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:

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() ?

[GrecKo]

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

[ODБOï]

@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