Author Topic: Bitmap based skins  (Read 117616 times)

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i've created a rendering engine that will eventually enable MB to render bitmap based skins. For now its only for the main player control panel.

for the skin creator:
put this in a separate directory from MB
http://www.mediafire.com/file/9lawezbun0xac76/SkinCreator.zip/file

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: August 19, 2022, 10:31:06 PM by Steven

silasje1

  • Member
  • Sr. Member
  • *****
  • Posts: 652
so this means custom buttons?
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
yes - any element on the main player panel can be repositioned and have any bitmap image displayed, including the background and middle part of the panel panel

silasje1

  • Member
  • Sr. Member
  • *****
  • Posts: 652
sounds like an cool thing! would like to do that :)
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin

Tom

  • Guest
I´m very interested to create my own skin for MB like I did for MM in the past.





Uploaded with ImageShack.us
Last Edit: June 27, 2011, 10:21:24 AM by Tom

Tom

  • Guest
Now after playing a while with the new tool I found one thing to report and have one question so far.


Application crash:
When I drag the right or left side of the SkinCreator window to verticaly compress it, I get following "invalid parameter" message.


************** Ausnahmetext **************
System.ArgumentException: Ungültiger Parameter.
   bei System.Drawing.Bitmap..ctor(Int32 width, Int32 height, PixelFormat format)
   bei SkinCreator.PlayerPanel.PerformElementLayout()
   bei SkinCreator.PlayerPanel.OnResize(EventArgs e)
   bei System.Windows.Forms.Control.OnSizeChanged(EventArgs e)
   bei System.Windows.Forms.Control.UpdateBounds(Int32 x, Int32 y, Int32 width, Int32 height, Int32 clientWidth, Int32 clientHeight)
   bei System.Windows.Forms.Control.UpdateBounds()
   bei System.Windows.Forms.Control.WmWindowPosChanged(Message& m)
   bei System.Windows.Forms.Control.WndProc(Message& m)
   bei System.Windows.Forms.ScrollableControl.WndProc(Message& m)
   bei System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   bei System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   bei System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)


************** Geladene Assemblys **************
mscorlib
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3082 (QFE.050727-3000).
    CodeBase: file:///C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/mscorlib.dll.
----------------------------------------
SkinCreator
    Assembly-Version: 1.0.0.0.
    Win32-Version: 1.0.0.0.
    CodeBase: file:///C:/Programme/MusicBee%20Editor/SkinCreator.exe.
----------------------------------------
Microsoft.VisualBasic
    Assembly-Version: 8.0.0.0.
    Win32-Version: 8.0.50727.3053 (netfxsp.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/Microsoft.VisualBasic/8.0.0.0__b03f5f7f11d50a3a/Microsoft.VisualBasic.dll.
----------------------------------------
System
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3053 (netfxsp.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System/2.0.0.0__b77a5c561934e089/System.dll.
----------------------------------------
System.Windows.Forms
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3053 (netfxsp.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Windows.Forms/2.0.0.0__b77a5c561934e089/System.Windows.Forms.dll.
----------------------------------------
System.Drawing
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3053 (netfxsp.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Drawing/2.0.0.0__b03f5f7f11d50a3a/System.Drawing.dll.
----------------------------------------
System.Runtime.Remoting
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3053 (netfxsp.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Runtime.Remoting/2.0.0.0__b77a5c561934e089/System.Runtime.Remoting.dll.
----------------------------------------
System.Xml
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3082 (QFE.050727-3000).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Xml/2.0.0.0__b77a5c561934e089/System.Xml.dll.
----------------------------------------
System.Drawing.resources
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.1433 (REDBITS.050727-1400).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Drawing.resources/2.0.0.0_de_b03f5f7f11d50a3a/System.Drawing.resources.dll.
----------------------------------------
System.Windows.Forms.resources
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.1433 (REDBITS.050727-1400).
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Windows.Forms.resources/2.0.0.0_de_b77a5c561934e089/System.Windows.Forms.resources.dll.
----------------------------------------
mscorlib.resources
    Assembly-Version: 2.0.0.0.
    Win32-Version: 2.0.50727.3082 (QFE.050727-3000).
    CodeBase: file:///C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/mscorlib.dll.
----------------------------------------




Question:
I could not find any place where I can set the size of the objects. My Buttons are a little bit larger than the default ones, but the visible frame is still smaller so they are getting clipped. Offset positioning is fine so far.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
the panel height is determined from the height in the image in the Panel element.
All elements except TrackPosition, and TrackText (which are calculated from the font size) are sized from the associated default image.
Also keep in mind the player panel and the middle track info panel can he vertically stretched by musicbee depending on the font the user chooses and the windows DPI setting. Make sure you use VerticalCenter if you want elements to remain centered and set the StretchY1,Y2 parameters (see comments in the skin example for an explaination of that)
Last Edit: June 27, 2011, 06:27:34 PM by Steven

silasje1

  • Member
  • Sr. Member
  • *****
  • Posts: 652

this is what i have done!
like it?
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin

Tom

  • Guest
Which image editor did you used for the buttons?

Tom

  • Guest
@ Steven
I think my problem has nothing to do with any of the skin.xml settings.
It´s just the content of the image file itself, which causes a "misinterpretation" of the filesize. (I guess).
I found out that *.png files created with adobe photoshop are blown up in skincreator, where as files from faststone image editor are schrinked. If I load any of your bitmaps with ACDSee, it tells me that this file has a color profile embedded, which will be removed while saving. That said, ACDsee is the only app so far, where I can create bitmaps, which will be shown with the exact size in the skincreator.
With Photoshop I tried several image types like indexed colors, rgb or grayscale, interlaced and non-interlaced. None of them makes any change.

I uploaded such a file from Photoshop. Just replace your existing Bitmap.png with this one. I`m quite sure, you will see the difference.

http://www.mediafire.com/?bxd3n9oa825oytp


edit: Sorry I meant "Button.png" NOT Bitmap.png!
Last Edit: June 28, 2011, 11:36:28 AM by Tom

Tom

  • Guest
Here is my first attempt...

Last Edit: June 28, 2011, 03:16:56 PM by Tom

ma_t14

  • Sr. Member
  • ****
  • Posts: 2493

Blinghound

  • Sr. Member
  • ****
  • Posts: 319
Looking good! Tom, did you find out why some images are stretched in the skin editor? I can't see what I'm doing wrong. (Steven's examples were all indexed .png files, but it did not make a difference for me)

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
can you confirm the DPI resolution that is set for the bitmap. If its not 96 i am guessing thats the problem which i can resolve on the editor side

Tom

  • Guest
@ Blinghound
no I have no idea at all, but at least it`s good to hear that I´m not alone.  ;D


@Steven
The default resolution in photoshop was previously set to 72 dpi. I even changed the screen resolution size to 96 dpi but without any difference.