Print Page - Bitmap based skins

Support => Developers' Area => Skins => Topic started by: Steven on June 26, 2011, 08:44:15 PM

Title: Bitmap based skins
Post by: Steven on June 26, 2011, 08:44:15 PM

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

Title: Re: Bitmap based skins
Post by: silasje1 on June 26, 2011, 09:49:21 PM

so this means custom buttons?

Title: Re: Bitmap based skins
Post by: Steven on June 26, 2011, 10:02:35 PM

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

Title: Re: Bitmap based skins
Post by: silasje1 on June 27, 2011, 07:37:09 AM

sounds like an cool thing! would like to do that :)

Title: Re: Bitmap based skins
Post by: Tom on June 27, 2011, 08:56:20 AM

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

(http://img8.imageshack.us/img8/1351/mmplayer.jpg) (http://imageshack.us/photo/my-images/8/mmplayer.jpg/)

Uploaded with ImageShack.us (http://imageshack.us)

Title: Re: Bitmap based skins
Post by: Tom on June 27, 2011, 05:46:06 PM

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.

Title: Re: Bitmap based skins
Post by: Steven on June 27, 2011, 06:22:42 PM

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)

Title: Re: Bitmap based skins
Post by: silasje1 on June 28, 2011, 09:12:56 AM

(http://i350.photobucket.com/albums/q429/Silasje1/Untitled-1.png)
this is what i have done!
like it?

Title: Re: Bitmap based skins
Post by: Tom on June 28, 2011, 09:57:11 AM

Which image editor did you used for the buttons?

Title: Re: Bitmap based skins
Post by: Tom on June 28, 2011, 10:27:57 AM

@ 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!

Title: Re: Bitmap based skins
Post by: Tom on June 28, 2011, 01:44:33 PM

Here is my first attempt...

(http://img402.imageshack.us/img402/7818/mbplayer2.png) (http://imageshack.us/photo/my-images/402/mbplayer2.png/)

Title: Re: Bitmap based skins
Post by: ma_t14 on June 28, 2011, 02:54:03 PM

WOW

I'm speechless...

Title: Re: Bitmap based skins
Post by: Blinghound on June 28, 2011, 03:45:25 PM

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)

Title: Re: Bitmap based skins
Post by: Steven on June 28, 2011, 04:37:24 PM

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

Title: Re: Bitmap based skins
Post by: Tom on June 28, 2011, 05:01:26 PM

@ 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.

Title: Re: Bitmap based skins
Post by: Tom on June 28, 2011, 05:15:31 PM

Oh sorry, I have to correct myself. I saved the wrong file.
It IS the dpi setting which causes the problem. So your guess is absolutely correct, Steven.

I never would have expected that the dpi setting in the file can cause such a behavior. Is it possible to ignore this value on the editor?

Title: Re: Bitmap based skins
Post by: Rotem K. on June 28, 2011, 06:58:33 PM

Quote from: Tom on June 28, 2011, 01:44:33 PM

Here is my first attempt...

(http://img402.imageshack.us/img402/7818/mbplayer2.png)
(http://imageshack.us/photo/my-images/402/mbplayer2.png/)

Love the volume button, nice work.

Title: Re: Bitmap based skins
Post by: Steven on June 28, 2011, 09:15:13 PM

i updated the SkinCreator.exe file so:
- it should adjust the resolution automatically
- added a parameter in the xml file for the left 4 play buttons
<images drawPlayButton="false"

when set to false you need to provide your own arrows on each button, and for the main Play button you need to provide a second image for the pause button
<images category="Play" drawPlayButton="false"
default="Images\PlayButton.png"
highlight="Images\PlayButtonHighlight.png"
/>
<images category="Pause" drawPlayButton="false"
default="Images\PauseButton.png"
highlight="Images\PauseButtonHighlight.png"
/>

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

anyone interested to develop a skin with this needs to contact me as using the above by itself wont work

Title: Re: Bitmap based skins
Post by: silasje1 on June 28, 2011, 09:46:02 PM

Quote from: Tom on June 28, 2011, 09:57:11 AM

Which image editor did you used for the buttons?

adobe photoshop :) you like it?

Title: Re: Bitmap based skins
Post by: Tom on July 01, 2011, 02:03:12 PM

Now I have completed two different versions of the player.
I know, some people like it darker and others lighter. ;)
Hope you like them. Any suggestions and or comments are welcome.

(When hovering over the left buttons, they become orange)

(http://img534.imageshack.us/img534/8191/playerwmg.jpg) (http://imageshack.us/photo/my-images/534/playerwmg.jpg/)

Title: Re: Bitmap based skins
Post by: silasje1 on July 01, 2011, 03:01:07 PM

great ones!

Title: Re: Bitmap based skins
Post by: cartman005 on July 01, 2011, 03:35:39 PM

I prefer the rounded edges of the black one. Both look great though.

Title: Re: Bitmap based skins
Post by: antiPOP on July 01, 2011, 05:29:31 PM

Steven, I can't ran Skincreator, I'm getting message "SkinCreator stopped working". Windows 7 SP1 HP x86.

Title: Re: Bitmap based skins
Post by: Steven on July 02, 2011, 02:11:11 PM

antiPOP - i sent you a PM

Title: Re: Bitmap based skins
Post by: Tom on July 04, 2011, 08:31:34 AM

Quote from: cartman005 on July 01, 2011, 03:35:39 PM

I prefer the rounded edges of the black one.

yes, me to. Maybe it could have been a bit more rounded. I will give this a try.

edit:
Here it is.

(http://img819.imageshack.us/img819/7775/playerzr.jpg)

Title: Re: Bitmap based skins
Post by: Blinghound on July 08, 2011, 06:51:30 PM

It looks like the skincreator is down, and I did not download the updated version with the DPI fixes. Would it be possible to upload again?

Thanks

Title: Re: Bitmap based skins
Post by: Steven on July 09, 2011, 04:59:08 PM

integrated into musicbee now and a new version of skincreator. Contact me by PM if you want to try it out

Title: Re: Bitmap based skins
Post by: cartman005 on July 20, 2011, 02:27:25 AM

Has anyone created a bitmap skin yet? I would love to try one out. The bitmap skins allows the skin creators to put their own picture for any of the buttons correct? Are layout changes allowed as well?

Title: Re: Bitmap based skins
Post by: Steven on July 20, 2011, 06:20:03 AM

Tom is but he is busy with work for a couple of weeks and i know blinghound isnt too far off from one. A few others have been looking at it but not sure if they are going to release anything

Title: Re: Bitmap based skins
Post by: Blinghound on July 20, 2011, 09:18:39 PM

I will have two out tomorrow hopefully, as well as a couple more this week :)

Here's a preview of the Honeycomb replacement. I still have a couple of things to work out, although I'm not sure if they are bugs. When Last.fm is signed in, the 'LastFmOn' picture does not appear in place of the 'LastFmOff'.

(http://i55.tinypic.com/r0co7d.png)

Title: Re: Bitmap based skins
Post by: cooljazz on July 21, 2011, 04:58:34 PM

That is beautiful... :)

Title: Re: Bitmap based skins
Post by: Blinghound on July 23, 2011, 08:49:08 PM

@cooljazz

I have uploaded two versions here: http://getmusicbee.com/forum/index.php?topic=2530.msg12890#msg12890, if you want to have a try :).

Title: Re: Bitmap based skins
Post by: Greb on July 25, 2011, 06:22:00 AM

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

Title: Re: Bitmap based skins
Post by: Greb on July 26, 2011, 06:38:01 AM

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?

Title: Re: Bitmap based skins
Post by: Analien on October 10, 2011, 09:28:25 AM

*bump*

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

Edit: Tom, your skin looks fabulous!

Title: Re: Bitmap based skins
Post by: Jonage on October 13, 2011, 09:32:24 AM

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?

Title: Re: Bitmap based skins
Post by: Steven on October 13, 2011, 10:38:20 AM

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

Title: Re: Bitmap based skins
Post by: Jonage on October 13, 2011, 03:55:53 PM

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... ???

Title: Re: Bitmap based skins
Post by: Steven on October 13, 2011, 06:46:39 PM

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" />

<images category="Play" drawPlayButton="false"
default="Images\Button.png"
highlight="Images\ButtonHighlight.png"
/>

<images category="Pause" drawPlayButton="false"
default="Images\Button.png"
highlight="Images\ButtonHighlight.png"
</element>

Title: Re: Bitmap based skins
Post by: Adson on October 16, 2011, 10:14:45 AM

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. :)

Title: Re: Bitmap based skins
Post by: Steven on October 16, 2011, 10:38:34 AM

i dont think tom has finished and when i last contacted him he was busy with his job

Title: Re: Bitmap based skins
Post by: vpsaxman on October 27, 2011, 02:26:11 AM

Is any coding required to use this tool? If not, I may want to give it a try.

Title: Re: Bitmap based skins
Post by: Steven on October 27, 2011, 06:24:21 AM

no coding is required - just modify an xml definition. See the example in the link from the first post

Title: Re: Bitmap based skins
Post by: vpsaxman on October 27, 2011, 08:28:27 AM

Quote from: Steven on October 27, 2011, 06:24:21 AM

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.

Title: Re: Bitmap based skins
Post by: vpsaxman on October 28, 2011, 03:41:01 AM

Played some more with it: is there a trick to make transparency work? It seems neither bmp or png support transparency...

Title: Re: Bitmap based skins
Post by: Steven on October 28, 2011, 09:40:51 AM

you specify in the xml definition which sub-panel is the background but only the main player panel and the play information panel are supported as backgrounds. I dont have it in front of me but you should be able to see it in use for the example file

Title: Re: Bitmap based skins
Post by: vpsaxman on October 28, 2011, 01:27:04 PM

Thanks, I'll check it out.

Another question: is there any way to resize the player vertically?

Title: Re: Bitmap based skins
Post by: Steven on October 28, 2011, 09:41:50 PM

its based on the height of the first element bitmap (panel)

Title: Re: Bitmap based skins
Post by: vpsaxman on October 28, 2011, 10:23:01 PM

Thanks for the fast reply! I'll see what I can tweak it.

Title: Re: Bitmap based skins
Post by: vpsaxman on October 31, 2011, 07:29:02 AM

I thought I would practice using the tool by trying to do a mockup of the new youtube interface using a template I found online. I still have a few buttons to skin and, well, there are still a few things I need to figure out, like what all the color settings for the buttons do, how to change the color and font of the display text and so on. I'm guessing these have more to do with skinning a whole theme and I'll have to read the tutorials. Anyways, here it is.

(http://i39.tinypic.com/flag7n.jpg)

Title: Re: Bitmap based skins
Post by: Steven on October 31, 2011, 09:07:41 AM

excellent - looks good!
for the button colours, they are derived from the source skin (in the example skin its set to the "dark" skin). I thought i had put in the comments of the example where the colours come from or otherwise they might be mentioned elsewhere on this topic.

Title: Re: Bitmap based skins
Post by: vpsaxman on October 31, 2011, 06:15:59 PM

Thanks for the nice word.

Yeah I figured they were derived from the source skin. I may have skipped reading some of your comments in the xml file. I'll figure out eventually.

Title: Re: Bitmap based skins
Post by: Rotem K. on October 31, 2011, 07:36:21 PM

Quote from: vpsaxman on October 31, 2011, 07:29:02 AM

(http://i39.tinypic.com/flag7n.jpg)

Nice! looking forward for your completed skin.

Title: Re: Bitmap based skins
Post by: vpsaxman on October 31, 2011, 09:35:39 PM

It may take a while before I can finish a whole skin, if at all. We'll see.

Title: Re: Bitmap based skins
Post by: cartman005 on November 23, 2011, 02:06:22 AM

Is it possible to not draw the stop button?

Title: Re: Bitmap based skins
Post by: Steven on November 23, 2011, 06:24:28 AM

yes it is - why do you say that?

Title: Re: Bitmap based skins
Post by: cartman005 on November 23, 2011, 06:36:48 AM

Because I can't figure out how to do it. Can you tell me how?

Title: Re: Bitmap based skins
Post by: Steven on November 23, 2011, 07:00:55 AM

its in the example file:
<element id="StopTrackButton" parent="Panel">
<left relativeTo="Panel.Left" offset="125" />
<top relativeTo="Panel.VerticalCenter" offset="0" />

<images drawPlayButton="true"
default="Images\ButtonSmall.png"
highlight="Images\ButtonSmallHighlight.png"
/>
</element>

set drawPlayButton="false" if you want to have your own icon rather than MB drawing a square in the middle

Title: Re: Bitmap based skins
Post by: cartman005 on November 23, 2011, 07:18:37 AM

No, I meant to not have the stop button at all.

Title: Re: Bitmap based skins
Post by: Steven on November 23, 2011, 08:06:15 AM

you could try positioning it off the panel eg. negative relative to the main panel, or set the picture so its a 1 bit transparent pixel with drawPlayButton set to false

Title: Re: Bitmap based skins
Post by: cartman005 on November 23, 2011, 05:15:00 PM

Ok. That works.

Now my issue is that my play button images keep getting cut off. They look fine in the SkinCreator but when I save them to xmlc and load them in MusicBee, they are enlarged and cut off. I thought it was my images but I even tried it with the included Spooky skin and had the same issue.

(http://img13.mediafire.com/c08e093985e605362c65a8ffccbbf9e4d23addfb790ba06f5de44080113688826g.jpg])

Title: Re: Bitmap based skins
Post by: Steven on November 23, 2011, 06:19:49 PM

i would say the button bitmaps are not set to 96dpi resolution in the tool you are using, or perhaps your screen is set to 120dpi and there is a bug with the skincreator in dealing with that

Title: Re: Bitmap based skins
Post by: cartman005 on November 23, 2011, 07:07:21 PM

Yes, after adjusting my DPI to 100% (it was at 125% by default) it works now.

Title: Re: Bitmap based skins
Post by: lnminente on April 15, 2012, 03:21:19 AM

I copied a bitmap from default.xml edited it with gimp for making it darker and when pasting in the xml it looks bigger. Cant tell you the dpi because explorer tells me 96, and xnview tells me 72 and unknown...

The original from default.xml:
  <element id="MiniPlayerLastFmNotLove">
   iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAABl0RVh0
   U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAACZSURBVDhP7ZJdCsQgDIR7Sn9AUdQHD7j3
   S/kKlljL7vZxYQtlTCczTkK37f8sGyiliLVWUkqiSWrvvdRap++TQWtNYowCInDOiTHmQGrEg19u
   7r2/aKQJA17SaOQMTxL6J5M7g2Gk8aPBnegrA+KQIoRwjnA143b4Jb6eBZIZWZo2oGahb8XaaCQZ
   i6R+/NfnnI/I4GPx7wh2Ba+wj1wnQ9MAAAAASUVORK5CYII=
  </element>

The one i did:
   <element id="MiniPlayerLastFmNotLove">
   iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
   WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AQPAQ0HLsNBuwAAAMhJREFUOMvtUUtqxTAQ03xscpaQ
   BN/j9bjpPUIIvkvisd1FG8N7uNBFV6XaDIxGAmmAf9DrYp7nmlKCquI4jsZP01RzznDOYd936hos
   y1JzzhARlFJgZo1TVTAzbv424fsghLBe1wURAQAwM5xz8N7DOQfmz1MRQUoJIYT1yaCbj+hp9sC/
   WuJXjIeqfiswM3jv37dte+t+IYSwnuf5EJGWG0ArdRiGJu4a3BjHsaoqaq0gIpgZYoz04w5ijFRK
   Qc4ZpZSu+I/gA/b/V7raNt+zAAAAAElFTkSuQmCC
  </element>

Resulting like this: (http://s15.postimage.org/iwy62zk7v/notlove.png)

Title: Re: Bitmap based skins
Post by: lnminente on April 15, 2012, 03:52:01 AM

I saw in the exif of the original bitmap its done with paint .net. I downloaded, installed it and redone the image there. Now the size is good finally :)

BTW: The dark transparent border of the heart is drawn as opaque. (http://s16.postimage.org/6asj05lxt/Untitled.png)

Title: Re: Bitmap based skins
Post by: silasje1 on April 15, 2012, 07:44:50 AM

Paint.net always uses 96 dpi, so that would explain it

I would also like to have mb use png tranparency. This would look very nice with my wmp skin

Title: Re: Bitmap based skins
Post by: cartman005 on April 16, 2012, 06:24:52 AM

Silas, the skin creator does recognize transparency.

Does anyone know if it is possible to center the text in the track info panel? I think that would look really great with my skin.

Title: Re: Bitmap based skins
Post by: silasje1 on April 16, 2012, 03:13:57 PM

Quote from: cartman005 on April 16, 2012, 06:24:52 AM

Silas, the skin creator does recognize transparency.

Does anyone know if it is possible to center the text in the track info panel? I think that would look really great with my skin.

Have the same question!!! +1

yea it recoginses it but i made some wrong image files

Title: Re: Bitmap based skins
Post by: silasje1 on April 18, 2012, 04:29:02 PM

http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/Default.aspx

this is needed for the skin.xml file image includment

Title: Re: Bitmap based skins
Post by: Steven on May 21, 2012, 09:13:33 PM

updated skin creator to support the Auto DJ shuffle mode icon

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

anyone that already has this only needs skincreator.exe
and the shuffle element in your skin file with this added:
<element id="ShuffleButton" parent="Panel">
  <left relativeTo="Panel.Right" offset="-40" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
  <images category="Off"
   default="Images\ShuffleOff.png"
   highlight="Images\ShuffleOffHighlight.png"
  />
  <images category="On"
   default="Images\ShuffleOn.png"
   highlight="Images\ShuffleOnHighlight.png"
  />
<images category="AutoDJ"
   default="Images\ShuffleAutoDj.png"
   highlight="Images\ShuffleAutoDjHighlight.png"
  />

</element>

Title: Re: Bitmap based skins
Post by: Blinghound on May 26, 2012, 07:28:23 PM

Forgive me if this has already been answered - I haven't had time to look at my skins or skinning in ages, but I am designing a skin without the stop button, like others, and I was wondering if the ability to double click the play/pause button could be a good substitute when this was the case? Thank you!

Title: Re: Bitmap based skins
Post by: lnminente on May 26, 2012, 08:14:10 PM

@Blinghound: This is related to your request http://getmusicbee.com/forum/index.php?topic=6078.0 feel free to ask for a double click there if you prefer. Also in my skin i use a hide stop buttom, the sources are available too dusk.mod.lnminente

Title: Re: Bitmap based skins
Post by: beistrich on August 26, 2012, 11:28:58 AM

Hi everybody,

I'm working on a zune-like theme for musicbee (because I like "Metro" :-) )
But I have the problem, when i select my bitmap-edited skin, musicbee does always show the "Windows Skin".
How do I enable the skin?

I'm currently on musicbee version 2.0.4612

Here a preview of my bitmap:

(http://img834.imageshack.us/img834/2026/previewyi.png)
By beistrich (http://profile.imageshack.us/user/beistrich) at 2012-08-26

Title: Re: Bitmap based skins
Post by: Steven on August 26, 2012, 11:58:51 AM

Click the Save button - the default filename is Skin.xmlc but you can rename it while saving or afterwards
Then copy that .xmlc file to the Skins directory in musicbee and it should be selectable from the Skins menu

note that the (i) info button no longer displays in the main MusicBee player panel

Title: Re: Bitmap based skins
Post by: beistrich on August 26, 2012, 12:12:56 PM

ok sorry I haven't recognized the "save" butten sorry, everything fine :-)

Title: Re: Bitmap based skins
Post by: joebanana on September 04, 2012, 03:05:00 PM

I am trying to do my touchscreen-friendly player with a Metro touch.

I don't really know XML but I'm playing with it.

What I am unable to do at the moment is placing the TrackText above the progress bar. I want the progress bar to have the same height (see screenshot) but the text is always below the bar, although it is transparent.

(http://s8.postimage.org/y2d29tcf9/player.gif)

Any idea ?

Title: Re: Bitmap based skins
Post by: joebanana on December 21, 2012, 10:22:18 PM

Any update on this?

Title: Re: Bitmap based skins
Post by: travelsoccerkid1 on August 23, 2014, 04:22:50 PM

I was hoping to modify the colors of the skin I use (SkbeeLite), but I'm not sure how to open the .xmlc file. Looking through the skinning guide and the forum, it appears that xmlc is a bitmap skin? Is there a program available to easily open these files and make quick color edits?

Title: Re: Bitmap based skins
Post by: redwing on August 24, 2014, 06:48:14 AM

Quote from: travelsoccerkid1 on August 23, 2014, 04:22:50 PM

I was hoping to modify the colors of the skin I use (SkbeeLite), but I'm not sure how to open the .xmlc file. Looking through the skinning guide and the forum, it appears that xmlc is a bitmap skin? Is there a program available to easily open these files and make quick color edits?

You will need the source file from the skinner to edit it. Try posting your wish on the skin thread, which might notify to the skinner.

Title: Re: Bitmap based skins
Post by: quisquis on August 28, 2014, 11:37:41 PM

Quote from: travelsoccerkid1 on August 23, 2014, 04:22:50 PM

I was hoping to modify the colors of the skin I use (SkbeeLite), but I'm not sure how to open the .xmlc file. Looking through the skinning guide and the forum, it appears that xmlc is a bitmap skin? Is there a program available to easily open these files and make quick color edits?

Both the colors (seem to be stored as Blue, Green, Red, Transparency instead of as the TRGB they are defined as in the XML files) and the images (PNG and base64, maybe more?) can be extracted from the XMLC with a little bit of effort. You could also capture the colors by taking a screenshot and then pasting it into some graphics program (ie: Photoshop, Imagemart, etc.) and eyedroppering the color info, then placing that info into a basic Musicbee skin. Considering how basic that SkbeeLite skin looks, it seems like it wouldn't take much to replicate. (The Settings elements can also be inferred from inspecting the contents of an XMLC to some degree of certainty, but I don't think those would matter all too much, especially sicn ethat skin is 2yrs old, maybe.)

Title: Re: Bitmap based skins
Post by: Bee-liever on August 29, 2014, 04:41:43 AM

Quote from: travelsoccerkid1 on August 23, 2014, 04:22:50 PM

Is there a program available to easily open these files and make quick color edits?

No. Once they are compiled into a .xmlc skin file by the SkinCreator there is no easy way to open the files and make edits, unlike standard .xml skin files.
But, Alexis has made the source files available for SKBee here (http://www.mediafire.com/?9nhqf2glds7kghk).

Would mean a few more colour edits than originally planned, I guess :)

Title: Re: Bitmap based skins
Post by: travelsoccerkid1 on August 30, 2014, 08:00:11 PM

Thanks for all of your help you guys!

Title: Re: Bitmap based skins
Post by: tracker275 on March 29, 2015, 05:46:10 PM

Is the Skin Editor still available? None of the links from this thread seem to be working.

Title: Re: Bitmap based skins
Post by: redwing on March 29, 2015, 06:08:42 PM

Quote from: tracker275 on March 29, 2015, 05:46:10 PM

Is the Skin Editor still available? None of the links from this thread seem to be working.

You can get it from any bitmap skin source files. For instance, SKBee skin source files just two posts above yours.

Title: Re: Bitmap based skins
Post by: LunarMongoose on June 10, 2020, 06:00:46 AM

Really sorry if I missed something, but I've searched everywhere I can think of - same question as above lol, is a current version of the Skin Creator app available anywhere?

The Alexis/SKBee link that Tracker275 mentioned a couple posts up, is now dead as well.

I DID manage to, eventually, find a working download link in the thread "request for global hotkeys for the skin editor" (Steven's post was dated 20 May 2017), but his zip there is missing the sample "Skin.xml" file he talks about in this sticky's top post, and I'm just starting out here so I'm a little lost. This version of Skin Creator crashes when I try to run it, which I know he said was easy to do, but without the default Skin.xml and/or a current version of the app download, I'm not sure what to do.

Title: Re: Bitmap based skins
Post by: Steven on June 10, 2020, 07:04:45 AM

http://www.mediafire.com/file/9lawezbun0xac76/SkinCreator.zip/file

Title: Re: Bitmap based skins
Post by: LunarMongoose on June 10, 2020, 09:51:21 AM

Umm, thanks! Glad to have a current version! This one has an error on launch about missing "SvgConverter.dll", but seems to then launch successfully anyway, not sure what's going on there. In any case I have that file (as well as "Svg.dll"), from the other download I mentioned from the other thread.

But I'm still missing Skin.xml. :( I guess the next thing will be to try putting in just the 2 tags that are mentioned in the top post ("root sourceSkin" and "bufferingMargin") and hope that's enough. I got the feeling there was more to it than that, but maybe not hehe.

Title: Re: Bitmap based skins
Post by: Steven on June 10, 2020, 10:03:10 AM

i have updated the link with the missing files
http://www.mediafire.com/file/9lawezbun0xac76/SkinCreator.zip/file

The included skin.xml is very basic and you would want to to locate one from another skin that provides the source code

Title: Re: Bitmap based skins
Post by: LunarMongoose on June 10, 2020, 10:29:15 AM

Woot, thank you! I'm still not sure how to set what image files you want it to use, but I will do my best to take it from here. :) To be honest I'm really just trying to put in a custom main-panel volume slider graphic on my own skin I've made, since I can't set the color directly on that, and it's not at all what I want the way it's currently set automatically heh. That one is apparently a whole can of worms with supporting another skin I read somewhere, no worries. :)

There is no "bufferingMargin" tag in your included Skin and MB3 xml's btw, is that no longer required since the top post I guess? Just curious.

I did look around earlier as best I could for another skin with provided source code, given Redwing's post. Will try again later hehe. Thanks again!

Title: Re: Bitmap based skins
Post by: gaiastar on September 09, 2021, 04:51:29 PM

hi
i know it's old
i'm tring to create a skin
but skin creator does always crash
does somebody know if a w10 pro 64bit last update issue ?
in short if it's not compatible with last w10 version ?
thanks

Title: Re: Bitmap based skins
Post by: hiccup on September 09, 2021, 05:09:19 PM

It crashes frequently on me too.
But it's always my fault as a result of me having made a mistake in my skin.xml

So, are you sure the skin.xml you are using is in perfect order?
(all elements in it having correct references and relationships etc.)

For me, when there are mistakes in it, it crashes with a crash report pop-up that leads me in the right direction to fix the issue.
How does it crash for you?

Title: Re: Bitmap based skins
Post by: Mayibongwe on March 11, 2022, 06:03:43 PM

Suppose I wanted to add an image to the player panel that serves no purpose at all (function wise).
How would I go about defining it in the skin.xml? What do I use for the element id?
When I leave the id part blank, the skin creator successfully loads the image when I run the program...but then crashes when I click the save button.

Code

<element id="????????" parent="Panel">
  <left relativeTo="Panel.Left" /> 
  <right relativeTo="Panel.Right" />
  <top relativeTo="Panel.Top" /> 
  <bottom relativeTo="Panel.Bottom" />
  <images category="Background" default="Images\MusicBee.png" />
</element>

Title: Re: Bitmap based skins
Post by: hiccup on March 12, 2022, 04:56:06 PM

Quote from: Mayibongwe on March 11, 2022, 06:03:43 PM

Suppose I wanted to add an image to the player panel that serves no purpose at all (function wise).
How would I go about defining it in the skin.xml? What do I use for the element id?

This is something I have had a desire to do too, but I have never been able to find a way to do it.
It's probably a good candidate for the skinning wishlist…