ProgressBar - Segmented Progress Bar Gradient & Image

[husnain]

Thanks for your contribution.

[Joejsanz]

Thank you so much @husnain

[Gabriel_Egea]

Thanks for sharing this extension, I'm going to try it!

[Joejsanz]

Thank you very much @Gabriel_Egea , I have some extra features for the next update, I hope you like this extension, any questions, let me know.

[Joejsanz]

Update
Version 1.1

[TIMAI2]

Very good

Can it be done with a background image? See here

[Joejsanz]

Thank you so much @TIMAI2
I don't know how to do it yet, but I'll look into it.

[Joejsanz]

Update...

@Joejsanz

Update, version 1.2

You can set radius to the bar segments
(Does not apply to the 1-segment bar).

---

Set an image as progress in the selected index.
You can select the image from gallery or the best option, upload it to the app assets and select it from there.

screenshots

[Gabriel_Egea]

Great update, thanks a lot for this extension. It's great.

[Gabriel_Egea]

Do you think it is also possible to configure a gradient in the block that configures the .SetSegmentColor? Thanks again

[Joejsanz]

Thank you so much @Gabriel_Egea

I think so, as soon as I have that done I will upload the update.

[Joejsanz]

Update
Version 1.3

@Joejsanz

Update Version 1.3

The SetSegmentColor function now accepts a list of colors and applies a gradient if useGradient is set to true.

screenshots

@Gabriel_Egea

[Gabriel_Egea]

Wow super fast, thanks a lot for this change!

[Gabriel_Egea]

I was trying the extension there and it seems that there is an error, the segmentIndex value stopped accepting the lists, it would not let me make a list with the segments. Is this the case now? Should I make a block for each segment? Thanks

[Joejsanz]

It's true, it's a single index, in a few more hours I will solve that detail, I was doing tests and I missed it.

[Gabriel_Egea]

Thank you very much, it is not a serious problem because you can use one block for each segment, it is more uncomfortable but it could be used that way. Thanks again for your work.

[Joejsanz]

@Gabriel_Egea

I have updated the Version 1.3 extension so that the SetSegmentColor function accepts a list of indices.

@Joejsanz

Update Version 1.3

[Gabriel_Egea]

@Joejsanz, again thank you very much

[Gabriel_Egea]

@Joejsanz Query, how are you getting the gradient to pass through the segments?

In my case, the gradients are generated within the segment individually. What configuration should I use for the gradient to be generated as in the attached gif?

This is how my gradient looks with the following configuration

But if you look at the gradient it is generated in each segment individually

[Joejsanz]

The segments where you want the gradient transition to make is, for example, like this:

segmentIndices lLst (0, 1, 2, 3, 4, 5, 6)
Green

segmentIndices List (7)
Green
Yellow

segmentIndices List (8)
Yellow
Red