Author Topic: Bitmap based skins  (Read 117620 times)



Greb

  • Guest
Steven, could you link the skin creator? I feel curious about trying.

Greb

  • Guest
Is it possible to choose a background that is more than 1 pixel wide?

If I do so, when I stretch the background breaks. Is there some way to make it works?
Last Edit: July 26, 2011, 01:05:43 PM by Greb

Analien

  • Full Member
  • ***
  • Posts: 219
*bump*

So, how's it going with these bitmap-skins?  :o


Edit:  Tom, your skin looks fabulous!
Last Edit: October 10, 2011, 09:45:22 AM by Analien

Jonage

  • Guest
Is it possible to link here that skin creator? All links are already dead.

I want to make my own skin, is there some tutorial?

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
if you want to adjust skins that use the default musicbee layout check out the skinning guide by RotemK in the "how to section" on this forum - that doesnt require the skin creator and can be done using any text editor.

If you want to change the layout and have your own controls for the main player panel using bitmap images, then you would need the skin creator

for the skin creator:
put this in a separate directory from MB
http://www.mediafire.com/?zvj3jwe248k4qf9

the program will load a file: skin.xml (included with zip) and render it according to the layout and referenced bitmaps. The example skin references Dark.xml for the colours for the following elements
Player.DisplayPanel
Player.Control.Default
Player.Control.Disabled
Player.Control.Highlight
Player.StarRating.Default
Player.StarRating.Lowlight
Player.SpectrumDefault
Player.SpectrumDead
Player.SpectrumLow
Player.SpectrumMedium
Player.SpectrumHigh

a couple of things need setting in skin.xml:
1. you need to reference a colour skin in the root node (and it needs to be in the same folder as skin.xml) eg.
<root sourceSkin="Dark">

2. a new property for the ProgressBar element - when playing web files/ podcasts and the file is buffering, MB displays a buffering graphic. This new attribute tells MB the area the graphic can be displayed - in this example, the top 4/bottom 2 pixels wont be drawn in
<element id="ProgressBar" parent="TrackInfoPanel">
  ..
  <bufferingMargin top="4" bottom="2" left="1" right="1" />
  ..
</element>

when ready, you need to use the Save button to create a compiled skin (make sure you save the compiled skin to the musicbee Skins folder).


I've created an example in the zip to show what can be done.

WARNING: at this point its easy to crash the program if you do something thats invalid eg. set the layout of an element such that the width is zero, or reference a bitmap that doesnt exist. It copies the last loaded skin to skin.bak, so just rename skin.bak to skin.xml if you run into problems or contact me to resolve
Last Edit: October 13, 2011, 10:45:24 AM by Steven

Jonage

  • Guest
Thanks for the quick replay, I had a quick view and my another question is: Is it possible to skin the play/pause/next icons? Ive seen that through the skin creator you can only skin their background...  ???

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
yes, set drawPlayButton to false (there are some comments in the example)

<element id="PlayPauseButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="49" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
  <!-- musicbee draws the > or || icon in the centre of this image if drawPlayButton="True" -->
  <images category="Play" drawPlayButton="false"
    default="Images\Button.png"
    highlight="Images\ButtonHighlight.png"
  />
  <!-- if drawPlayButton="false" then you need to provide an image for Pause -->
  <images category="Pause" drawPlayButton="false"
    default="Images\Button.png"
    highlight="Images\ButtonHighlight.png"
</element>

Adson

  • Full Member
  • ***
  • Posts: 245
Hello, did I miss something or is there no link to download Tom's skins?
I like them very much and would like to install them.

Thanks

A.  :)

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i dont think tom has finished and when i last contacted him he was busy with his job

vpsaxman

  • Full Member
  • ***
  • Posts: 197
Is any coding required to use this tool? If not, I may want to give it a try.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
no coding is required - just modify an xml definition. See the example in the link from the first post

vpsaxman

  • Full Member
  • ***
  • Posts: 197
no coding is required - just modify an xml definition. See the example in the link from the first post

Thanks for your reply!

I gave it a quick try. It doesn't seem too complicated. Hopefully I will have some time to play with it some more this weekend.

vpsaxman

  • Full Member
  • ***
  • Posts: 197
Played some more with it: is there a trick to make transparency work? It seems neither bmp or png support transparency...