creating progress bar woes

2024-02-15 19:39:41

Currently creating a progressbar and i have some issues.

1.)
The bar in the default skin does not reach to the end of the screen. Is this due to a technical/usability limitation or is it an aestetic choice?
Instead of rounding off the corners as in the default bar, im going for protrusions in those corners. these would need to extend to the edge of the screen and
apparently you cannot insert a static image (only uniforly colored rectangles, text lables, buttons and albumart.) So i cannot fake extending the bar with pictures.

2.) the progressing highlighted bar does not stay centerd behind the position marker, instead it slowly crawls from one side of the marker to the other. does that mean the position marker absolutely has to fill the full width of its image?

WIP that shows the issues (protrusions manually cut off; the placeholder marker looks crap, but in its transparent parts you can see the highlighted bar (which needs a lot more contrast to the unhighlighted part, i know) going beyond the part where i thought the transition would occur.

Re: creating progress bar woes

Reply #1 – 2024-02-16 12:44:47

I belive the answer to 1 is it is an aesthetic choice.
Made a full lenght bar and it works:


However i do have another question about the position marker:
As the wiki tells you to make the position bar and marker thick enough to be interactable i have just used the same dimensions as the default skin. However the test marker ive used yesterday was much harder to grab than the default marker. Does that mean opacity is also a factor in this interactability and not only the image size of marker. i assumed that the size of the image determined a grabable box, but now im not sure if transparent pixels do not contribute to this hitbox. ?

Re: creating progress bar woes

Reply #2 – 2024-02-16 15:08:03

Yes.
To make seekbar interactable for user, we need to create images of the seekbar and slider,  paying attention to the size of the area where the tapping is accepted.
From my experience, it seems to be better to set the dimensions of each image as follows:

• seekbar (position)'s width = entire width of seekbar. (e.g., 1000 px)
• seekbar (position)'s height = apparent height of seek bar + extra height in vertical direction for tap detection (transparent area). (e.g., 75 px = 25 px + 50 px)
• slider (position marker)'s width = entire width of slider. (e.g., 45 px)
• slider (position marker)'s height = apparent height of slider + extra height in vertical direction for tap detection (transparent area). The same as the seekbar's height (e.g., 75 px = 45 px + 30 px)

Note that initial and end positions of the slider are aligned with the edge of the seekbar.
For a more natural appearance, the width of the slider should be smaller.
If you want the initial slider to be centered on the edge of the seek bar, make sure that there is an extra horizontal transparent area when creating the seekbar's image.
When defining subskins, adjust the dimensions of the seekbar taking into account the area of the transparent area reserved for the tap detection and better display.

Re: creating progress bar woes

Reply #3 – 2024-02-17 11:10:23

Thats what i thought how it works, but i did further testing:



(also tested: the highlight bar gets drawn over the nonhighlight bar, it doesnt replace it)
Both markers are the same size as far as image dimensions are concerned, yet the transparent marker is slightly harder to grab. so it looks like the actually painted area needs to be big, not the image.
Or am i imagine things???