Author Topic: Progress bar stretching?  (Read 6802 times)

Alumni

  • Sr. Member
  • ****
  • Posts: 1007
To follow up this thread;
getmusicbee.com/forum/index.php?topic=16944.0

I'm trying to work out if it's possible to display the progress bar by repeating the image rather than stretching it. I tried setting the Y axis to -1 but it didn't seem to help.
My intent is to show a dotted line instead of the usual straight line.

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34418
if you still want to do this, would you mind posting a quick mockup so i can better understand what you want to achieve

Alumni

  • Sr. Member
  • ****
  • Posts: 1007
if you still want to do this, would you mind posting a quick mockup so i can better understand what you want to achieve

Sure, I was using a foobar skin as inspiration - see this screenshot and zoom in: http://orig00.deviantart.net/a31e/f/2017/053/1/3/eole_by_alibalicou-da2dav8.png
Notice how the unfilled progress bar is a dotted line rather than a solid line. I tried to achieve the same effect with skin creator, but no matter what I did it always came out as a solid line.
Last Edit: May 04, 2017, 05:50:38 AM by Alumni

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34418
this supports repeating of the progress bar background image:
https://www.dropbox.com/s/zpcatzggo6bmtgz/SkinCreator2.zip?dl=1
http://musicbee.niblseed.com/V3_1/MusicBee31_Patched.zip


add the attribute named "repeat" to the images element and set it to true.
The repeating image width can be set as wide as you want but make sure the height is the same as the filler image
Code
<element id="ProgressBar" parent="TrackInfoPanel">
...
  <images category="Background" stretchY1="5" stretchY2="5" repeat="true"
    default="Images\ProgressBar.png"
  />
  <images category="Filler"
    default="Images\ProgressBarFill.png"
  />
</element>
Last Edit: December 02, 2018, 09:20:52 PM by Steven


Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
this supports repeating of the progress bar background image:
Steven...would it be possible to get this effect working with the progress bar filler image too?
This is what I had in mind for the skin that I'm working on...
At the moment, I can't accomplish something like this without the filler image (bold circle) taking on a repetitive pattern too.
The source code to any of my contributions is available on the same download link as the add-ons

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34418
can you send me a link to what you have so far and i can make an assessment of what would be involved

Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
PM with link sent.
The source code to any of my contributions is available on the same download link as the add-ons

hiccup

  • Hero Member
  • *****
  • Posts: 8016

That looks nice.
This would provide for having a much less 'nervous' constantly moving progress bar.

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34418
PM with link sent.
thanks. I see what you mean now. I want to avoid enhancing the skin creator tool/ xmlc format but will have a look as whats involved with adding support in the skin xml file

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34418
https://getmusicbee.com/patches/MusicBee35_Patched.zip

to implement, create a single bitmap that contains images for each step in the progress bar. So if the repeated progress bar fill image is 10px in width then you need to create a single image 100px wide containing 10 images, one for each step. For example:

this image needs to as a base64 string to the skin file itself using element id=ProgressBarCustomFill
Code
  <element id="ProgressBarCustomFill">
iVBORw0KGgoAAAANSUhEUgAAAGQAAAAPCAYAAAAS0WrNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADr8AAA6/ATgFUyQAAACqSURBVFhHYxgFo2AUjIJRMApGwfAAjFAaDGRii/5DmQxPFvehyCGDgVKn0bTo/5fbF8BsQupANEgtMepA4EZd3KBQB+eAAgXZ8eh8GKC2OpDjkB2FTx2IhqklpA4EQGqJUQcCuCIPXR0IYAtsaqljgtKjYJCA0QgZZAAlS4GyN5RJlTKf2upA2X241yGjYBSMglEwCkYBVQC/jg0jCEO5OMGoOuyAcnUMDAAgCqhoReDS/wAAAABJRU5ErkJggg==
  </element>

by the way, i suggest you disable auto-colouring for the player panel: PlayerAutoColor
Last Edit: March 27, 2022, 06:20:26 AM by Steven

Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
Steven, you're the man! It's working just as I'd imagined. Thanks a lot.
I'll be releasing the skin in the coming days. Just gotta polish a few things. (End result)
Last Edit: April 05, 2022, 02:08:53 PM by Mayibongwe
The source code to any of my contributions is available on the same download link as the add-ons