Hi, i have battery progress bar image like a long rectangular . i need help in making the progress bar goes up or down filling in color based on the actual battery level. anyone can help me lead the way on this?
Look here are some examples
It seems you can’t do this.
You need all different images for a 0-100 percentage battery level to achieve your design.
Hello, I assume you are talking about watch battery, not the phone battery here. Sorry, but you are not very clear how you imagine this. Should the progress bar change color based on battery level like:
a) have multiple colors on it permanently like a gradient, or
b) step trough color phases like for example red for 0-10%, orange for 11-20%, yellow for 21-50% green for 51-100%, or
c) fluently going from one color to another ?
For each there could be more approaches, but I will try to describe those most convenient for me:
a) most simple, you can use masking and project a gradient image onto the progress bar
b) you can add multiple copies of same progress bar in same place, color them the way you like and let them show according battery charge using tag expressions in opacity field or on a conditional line.
c) you can use similar masking gradient image as in case A, but this time you will project it so, that only a small range of the gradient will cover the bar at time and move this mask perpendicular to the bar using tag expression for its placement.
Unzip the attached file so you can check it in your WFS, it contains example with each 3 cases…
BatteryBarColor.zip (177.4 KB)
1 Like
I struggle to work out how the Time Line changes the colours . Is there a simple explanation for someone who is confused .
Alright, I hope this still relates, because I am using rather old version on this PC
First do this to open the right conditional line for battery, not time:
Then some not very intuitive things have to be done.
First you have to remove all the pre-filled cells on layers that you are about to edit. Double click any of the related lines.
Then you can click - fill the cells you want to have on one by one, or by dragging on edge to stretch it over wider block.
Note, the whole 100% range does not fit to the window and at leastin my version there is no zooming feature, so it has to be scrolled by the bottom bar.
1 Like
OK . Thanks Peter . I was looking on the new WFS 1.8.7 . I only see bars going all the way across the timeline window . I think this IDE is not seeing the conditional but it is working perfectly .
Thanks Peter for the various options. if i am looking to fill up just the image? when the battery progression batter slowly fill up to 100% it will fill up the just the line instead of the full progression bar instead. I will attached the image for example. Will it be possible?
1 Like
Of course it is possible. Make a progress bar to cover the tick marks, place its layer above tick marks layer. select both layers, right click the selection and pick mask. reduce the opacity of progress bar background as you like.
1 Like
Hi, would something like this work?
[brotherken.wfs.zip|attachment]
brotherken.wfs.zip (354.7 KB)
1 Like
Thanks Mayalona, thanks for the file as well, make it much easier to understand. For linear progress bar is easier to match my image, but for circular progress bar, what if my partial curve image is somewhere place randomly. is there a way or easier way to match my progress bar to the curve image?
basically if i want to add a progress bar and shape it and layer over the exact curve shape. is there a simpler way to do it?
Thanks Peter, am still new to this. still learning from it. Seems like easy work for you guys
Hi, maybe it’s easier to do than to explain…
brotherken Copia.wfs.zip (370.6 KB)
Let me know if it works
The best way is to use the two examples I put in the file. The first one overlays the progress bar to an index image. The second one duplicates the same “index” of the bar but colors it white. (see hidden index). By playing with the sizes you can place them wherever you want.
1 Like