Skin- and visual errors related to, and skinning requests for MusicBee v3

[hiccup]

The bottom tab divider is obscured for the selected entry:
 

[Bee-liever]

version 3.0.5805.39458

the windows buttons are back 1px too close to the RH edge, but highlight images are in the correct position (1px to the left)



the bg colour of <element id="Player.Wavebar"/> is not being used in 3.0

with Windows 10, the top 1px edge in the compact player doesn't change colour when MB loses focus
(this isn't a biggie in the grand scheme of things, but I thought I should note it, just in case it's linked to something else)

[hiccup]

I am trying to get my Tron Punk skin pixel perfect for v3, but I am getting a little bit frustrated (again) since the outcome is not as I expect.

I have a track info element that is 43 pixels high.
Even with the smallest possible font for the player chosen, in MusicBee v3 it gets stretched to 45 pixels high.
How can that be? Is there something wrong with my skin.xml? :

Code

<?xml version="1.0" encoding="utf-8"?>
<!-- the "parent" attribute is used when pre-rendering elements that have the alpha colour channel set
     eg. parent="TrackInfoPanel" will pre-render the element using the track info panel colours -->
<!-- each images node can have up to 3 images - 1. default (required) 2. highlight (mouseover) 3. disabled. 
     If highlight or disabled are not provided, the default image is used -->
<!-- for some elements, multiple sets of images are required, split into categories eg. the track info panel
     requires left, middle and right side images -->
<!-- MusicBee can resize the player panel depending on the font used, and whether 'enlarge progress bar' is enabled
     and as such MusicBee stretches certain images (panel background, track info panel, progress bar).
  	 The StetchY1 and StretchY2 attributes tell MusicBee which part of the image can be stretched
 	 eg. usually you want the border area of an image to remain "sharp" and not be stretched
	 eg. StretchY1="4" StretchY2="2" means stretch the area starting from 4px and height-2 of the image -->

<root sourceSkin="Tron Punk 3">
<element id="Panel">
  <images stretchY1="2" stretchY2="2"
    default="Images\Background.png"
  />
</element>

<element id="PrevTrackButton" parent="Panel">
  <left relativeTo="EqualiserButton.Left" offset="-116" />
  <top relativeTo="Panel.Bottom" offset="-26" />
  <!-- musicbee draws the |<< icon in the centre of this image. The colours for the musicbee drawn icon are determined from the skin file -->
  <images drawPlayButton="false"
    default="Images\Previous.png"
    highlight="Images\PreviousHighlight.png"
	disabled="Images\PreviousDisabled.png"
  />
</element>

<element id="PlayPauseButton" parent="Panel">
  <left relativeTo="EqualiserButton.Left" offset="-95" />
  <top relativeTo="Panel.Bottom" offset="-50" />
  <!-- musicbee draws the > or || icon in the centre of this image if drawPlayButton="True" -->
  <images category="Play" drawPlayButton="false"
    default="Images\Play.png"
    highlight="Images\PlayHighlight.png"
  />
  <images category="Pause" drawPlayButton="false"
    default="Images\Pause.png"
    highlight="Images\PauseHighlight.png"
  />
</element>

<element id="NextTrackButton" parent="Panel">
  <left relativeTo="EqualiserButton.Left" offset="-46" />
  <top relativeTo="Panel.Bottom" offset="-26" />
  <!-- musicbee draws the >>| icon in the centre of this image if drawPlayButton="True" -->
  <images drawPlayButton="false"
    default="Images\Next.png"
    highlight="Images\NextHighlight.png"
	disabled="Images\NextDisabled.png"
  />
</element>

<element id="StopTrackButton" parent="Panel">
  <left relativeTo="EqualiserButton.Left" offset="-81" />
  <top relativeTo="Panel.Bottom" offset="-26" />
  <!-- musicbee draws the [] icon in the centre of this image if drawPlayButton="True" -->
  <images drawPlayButton="false"
    default="Images\Stop.png"
    highlight="Images\StopHighlight.png"
	disabled="Images\StopDisabled.png"
  />
</element>

<element id="Speaker" parent="Panel">
  <left relativeTo="Panel.Left" offset="204" />
  <top relativeTo="Panel.Bottom" offset="-25" />
  <images category="MuteOff"
    default="Images\VolumeOn.png"
  />
  <images category="MuteOn"
    default="Images\VolumeOff.png"
  />
  </element>

<element id="VolumeSlidebar" parent="Panel">
  <left relativeTo="Panel.Left" offset="200" />
  <top relativeTo="Panel.Bottom" offset="-45" />
  <images category="Slidebar"
    default="Images\VolumeSlidebar.png"
  />
  <images category="Button"
    default="Images\VolumeButton.png"
  />	
  </element>

<element id="TrackInfoPanel" parent="Panel">
  <left relativeTo="Panel.Left" offset="270" />
  <top relativeTo="Panel.Top" offset="18" />
  <right relativeTo="TrackLove.Left" offset="-17" />
  <bottom relativeTo="Panel.Bottom" offset="-2" />
  <images category="Left" stretchY1="5" stretchY2="30"
    default="Images\TrackInfoLeft.png"
  />
  <images category="Middle"
    default="Images\TrackInfoMiddle.png"
  />
  <images category="Right"
    default="Images\TrackInfoRight.png"
  />
</element>

<element id="Spectrum" parent="Panel">
  <left relativeTo="Panel.Right" offset="-40" />
  <top relativeTo="Panel.Bottom" offset="-48" />
  <!-- for now the spectrum area needs to be 32px wide -->
  <right relativeTo="Panel.Right" offset="-72" />
  <bottom relativeTo="Panel.Bottom" offset="-8" />
</element>

<element id="TrackText" parent="Panel">
  <left relativeTo="TrackInfoPanel.Left" offset="22" />
  <top relativeTo="Panel.VerticalCenter" offset="9" />
  <right relativeTo="TrackPosition.Left" offset="0" />
  <!-- bottom will be computed at runtime depending on the font used -->
</element>

<element id="TrackLove" parent="Panel">
  <left relativeTo="TrackRating.Left" offset="-29" />
  <top relativeTo="Panel.Bottom" offset="-32" />
  <images category="NotLoved"
    default="Images\LastFmNotLove.png"
    highlight="Images\LastFmNotLoveBright.png"
  />
  <images category="Loved"
    default="Images\LastFmLove.png"
  />  
</element>

<element id="TrackRating" parent="Panel">
  <left relativeTo="PrevTrackButton.Right" offset="-66" />
  <top relativeTo="Panel.Bottom" offset="-18" />
</element>

<element id="TrackPosition" parent="TrackInfoPanel">
  <left relativeTo="TrackInfoPanel.Right" offset="-12" />
  <top relativeTo="Panel.VerticalCenter" offset="9" />
</element>

<element id="ProgressBar" parent="Panel">
  <left relativeTo="Panel.Left" offset="280" />
  <top relativeTo="Panel.Top" offset="1" />
  <right relativeTo="Panel.Right" offset="-344" />
  <bottom relativeTo="Panel.Top" offset="18" />
  <bufferingMargin top="10" bottom="7" left="12" right="12" />
  <images category="Background" stretchY1="1" stretchY2="1" stretchX1="2" stretchX2="0"
    default="Images\ProgressBar.png"
  />
  <images category="Filler"
    default="Images\ProgressBarFill.png"
  />
  <!-- remove this node if the progress bar will not have a button -->
   <images category="Button"
    default="Images\ProgressBarButton.png"
  /> 
</element>

<element id="EqualiserButton" parent="Panel">
  <left relativeTo="Spectrum.Left" offset="-40" />
  <top relativeTo="Panel.Bottom" offset="-36" />
  <images category="Off"
    default="Images\EqualiserOff.png"
    highlight="Images\EqualiserOffHighlight.png"
  />
  <images category="On"
    default="Images\EqualiserOn.png"
    highlight="Images\EqualiserOnHighlight.png"
  />
</element>

<element id="LastFmButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="20" />
  <top relativeTo="Panel.Bottom" offset="-40" />
  <images category="Off"
    default="Images\LastFmOff.png"
    highlight="Images\LastFmOffHighlight.png"
  />
  <images category="On"
    default="Images\LastFmOn.png"
    highlight="Images\LastFmOnHighlight.png"
  />
  <images category="Error"
    default="Images\LastFmError.png"
    highlight="Images\LastFmErrorHighlight.png"
  />
</element>

<element id="RepeatButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="76" />
  <top relativeTo="Panel.Bottom" offset="-40" />
  <images category="Off"
    default="Images\RepeatOff.png"
    highlight="Images\RepeatOffHighlight.png"
  />
  <images category="On"
    default="Images\RepeatOn.png"
    highlight="Images\RepeatOnHighlight.png"
  />
  <images category="One"
    default="Images\RepeatOne.png"
    highlight="Images\RepeatOneHighlight.png"
  /> 
</element>

<element id="ShuffleButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="134" />
  <top relativeTo="Panel.Bottom" offset="-41" />
  <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>

<!-- spectrum, love and rating can be hidden by user preference
   - when an element is located relative to one of these (hidden) elements,
     the following rules specify which element should be used instead for the relative reference -->
<!-- the offsetAdjustment attribute enables you to tweak the offset of the dependee element
     eg. if TrackInfoButton depends of Spectrum with an offset of 15,
	 when Spectrum is hidden TrackInfoButton is placed relative to TrackInfoPanel.
	 Left with offset 8 (15-7)  using the rule below -->
<replacementElement id="Spectrum" replaceWith="Panel.Right" offsetAdjustment="0" />
<replacementElement id="TrackLove" replaceWith="TrackRating.Left" offsetAdjustment="0" />
<replacementElement id="TrackRating" replaceWith="PrevTrackButton.Left" offsetAdjustment="-15" />
</root>

[Steven]

the panel height is adjusted for large fonts - the effect would probably start happening around 11pt

[hiccup]

It occurs already with segui light 9pt., so there's probably something going on.

I am sure you know best what is a wise font size value to have stretching initiated, but to me 11pt seems a bit low.
Wouldn't something like 14pt be doable? Or would that give problems with specific sort of fonts?
I could do some testing with that if you would like me to.

edit:

This what an un-stretched 43 px high info panel with Segui regular 20pt would look like in Tron Punk:
(not saying this is aesthetically desirable, but just showing it could be done)

[hiccup]

It occurs already with segui light 9pt., so there's probably something going on.

Ok, hold your horses, I think I know what is happening.
I have the bottom of the info panel relative to the bottom to the main panel, and the top of that same panel relative to the top of the main panel. I believe the values I have set there stretches the info panel to begin with.
I'll see if I can get it to work with both being relative to the bottom.
Or maybe better, I'll see if it works when I completely remove "<top relativeTo="Panel.Top"
To my understanding that entry serves no purpose here, just the starting point from the bottom should be enough.

[Steven]

fixes for the above

http://www.mediafire.com/download/hwh28nm8k6ahp2s/MusicBeeDemo.zip
unzip into the musicbee application folder and run MusicBee3.exe

[hiccup]

This seems to be going quite well now.
I learned to do some fixes in my Tron Punk skin, and it is looking quite good now.
(I updated the tron punk skin topic with this new version b.t.w.)
Using all sorts of fonts and sizes now seem to work quite well. (this was a disaster in the past)

And I also noticed and enjoyed that restarts after changing fonts is not necessary anymore. Great!

[Bee-liever]

This seems to be going quite well now.

I agree. Everything is looking great with the latest update  

One thing I miss from 2.5 is the icons in the tabs, but think it would look too crowded with 3.0 design to have icon and text.
With the toolbar buttons you can have icon or text.
Maybe that could be done for the tabs.
  Not necessarily right now - something that could be kept in mind for later.

[hiccup]

I agree. Everything is looking great with the latest update  
One thing I miss from 2.5 is the icons in the tabs, but think it would look too crowded with 3.0 design to have icon and text. Maybe that could be done for the tabs.

I fully agree on the icons for the tabs.
It makes it very intuitive to pick the tab you want fast, without having to read the whole text.

They are also essential (exageration mode on) in such cases:




Maybe if we are good boys, for Christmas you get your icons in the tabs, and I get my tabs in the right side panel.

[hiccup]

I noticed the vertical dividers in the column browser are not visible anymore.
Especially now that the columns are resizable, they can be very useful.

[hiccup]

I am assuming this panel shouldn't be resizable to begin with, but when I do, I get this:

[Bee-liever]

I noticed the vertical dividers in the column browser are not visible anymore.

from the colour-finder skin:

Code

<element id="Panel.Body.Default" bg="16,19,16" fg="127,132,133" bdr="0,200,251"/>
    <!--? 'bdr' can be used if 'MainPanelTopBorder' is true-->

it adds a border to the RH side (except the last RH one) of all panels in 3.0

EDIT:
also, if you don't want the top border to match the panel border, you can override it with:

<element id="MainPanelTopBorderColour" bdr="54,62,69" />

[hiccup]

For Tron Punk, in 2.5 I had a nice bright border surrounding the panel.
In v3 only a line at the top remains?

[hiccup]

from the colour-finder skin:

Code

<element id="Panel.Body.Default" bg="16,19,16" fg="127,132,133" bdr="0,200,251"/>
    <!--? 'bdr' can be used if 'MainPanelTopBorder' is true-->

it adds a border to the RH side (except the last RH one) of all panels in 3.0

That entry is present and enabled.
(Otherwise it also wouldn't show up in 2.5 would it?)