Author Topic: Skinning requests/reports for 3.1  (Read 145856 times)

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
Could we get support for SVG icons in the future? They are easier to colorize and they also provide support for Hi-DPI displays.

If they could also be used on "bitmap" skins that would be awesome.
i dont think that format is natively supported in windows and hence i would need to include a bulky library so i am not really willing to do that unless there was a strong reason which i cant see

endeavour1934

  • Full Member
  • ***
  • Posts: 207
Could we get support for SVG icons in the future? They are easier to colorize and they also provide support for Hi-DPI displays.

If they could also be used on "bitmap" skins that would be awesome.
i dont think that format is natively supported in windows and hence i would need to include a bulky library so i am not really willing to do that unless there was a strong reason which i cant see
Which solution do you use/propose for different interface scale sizes? an image for each resolution? It's more work but it's doable.

I already have most of the icons I've made for my skins in 16px, 24px, 32px and 48px and also half of them in vector format (AI/SVG/etc.)
Last Edit: April 14, 2017, 03:35:39 PM by endeavour1934

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
I already have support within musicbee for multiple sizes of the same icon for high DPI resolutions. What is missing is support within bitmap skins to provide multiple versions.
If I added support for that, would that suffice? If so, i will have a look at what would be involved to enhance the bitmap skins

endeavour1934

  • Full Member
  • ***
  • Posts: 207
I already have support within musicbee for multiple sizes of the same icon for high DPI resolutions. What is missing is support within bitmap skins to provide multiple versions.
If I added support for that, would that suffice? If so, i will have a look at what would be involved to enhance the bitmap skins
Should be enough for most people, I guess.

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3830
  • MB Version: 3.6.8830 P
What is missing is support within bitmap skins to provide multiple versions.
Are we talking .ico support here, or would you have to supply separate images in multuple sizes?
MusicBee and my library - Making bee-utiful music together

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i have done some research into this and this is what i think should work ok and maintain backwards compatibility:
- SVG files can be supported for bitmap skins only
- the skin creator tool can be enhanced to convert svg images into 16px, 24px and probably (depending on whether the skin file starts to get too bloated) 32px PNG images
- if a user is using an older MB version, only the 16px version of an image would be loaded (as now) and then upscaled for the screen DPI
- if a user is using the new MB version, the best sized size image will be chosen (and upscaled further if needed for unusual screen DPI settings)

let me know if this is acceptable. Its non-trivial to do and i am only willing to do so if it will be used

edit:
one thing that would be useful to have confirmed - is there a default size that can be specified as information in the SVG file?
edit 2:
i think there is a default according to the API i am using. It will be important to set the default to the same value as the existing bitmap images
Last Edit: April 25, 2017, 09:33:54 PM by Steven

endeavour1934

  • Full Member
  • ***
  • Posts: 207
If it's much work I think adding support for multiple bitmaps for each scale should be enough. Many people won't bother making svgs or even learning how to make them.

Manually adding 16px (100%), 24px (150%) and 32px (200%) bitmaps is easy enough for everyone.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i am actually very comfortable now to add SVG support for the Skin Creator tool

Alumni

  • Sr. Member
  • ****
  • Posts: 1007
Can we expect to see wavebar and/or album thumbnail support with bitmap skins in the near future?

PS: Are you familiar with Roon player's UI? I wish it were possible to achieve a similar look in Musicbee: http://thehbproject.com/files/img/fotos/testen/RoonLabs/Roonlabs%2006.jpg
Last Edit: April 28, 2017, 02:55:12 AM by Alumni

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
Can we expect to see wavebar and/or album thumbnail support with bitmap skins in the near future?
i will look into that. I like the way your screenshot has done the wavebar

assumeddiz

  • Newbie
  • *
  • Posts: 16
could we have a way to set the 4-px border to a custom width? from 0 to 4 pixel maybe

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i have done some research into this and this is what i think should work ok and maintain backwards compatibility:
- SVG files can be supported for bitmap skins only
- the skin creator tool can be enhanced to convert svg images into 16px, 24px and probably (depending on whether the skin file starts to get too bloated) 32px PNG images
- if a user is using an older MB version, only the 16px version of an image would be loaded (as now) and then upscaled for the screen DPI
- if a user is using the new MB version, the best sized size image will be chosen (and upscaled further if needed for unusual screen DPI settings)
this is done now and i will make it available after some testing
@alumni, i will look at your request after that

some points on this:
- this is only done for bitmap skins, and everything stated on the following points only applies to bitmap skins
- however, if you have a standard skin with a bunch of your own icons that you want to add high dpi support for, then you can easily convert a standard skin to a bitmap skin by using an empty skin.xml file with the skin creator tool. The other advantage is MB loads .xmlc skins a bit faster
Code
<?xml version="1.0" encoding="utf-8"?>
<root sourceSkin="MusicBee3">
</root>
- in the source skin, for all the icon elements you should now directly reference the .png filename. You dont have to but the skin creator tool wont apply 150% or 200% scaling if you just supply a base 64 string
Code
    <element id="UpcomingConcertsIcon">Images\UpcomingConcertsIcon.png</element>
- you can create 150% and 200% variations by appending _150 or _200 to the filename. Make sure the image size is 150% or 200% bigger. So a 16px icon would be 24px or 32px
Code
    <element id="UpcomingConcertsIcon">Images\UpcomingConcertsIcon_150.png</element>
- if the referenced file is a .svg file, you only need a single file and the skin creator tool will scale the image automatically
- the same applies to any player panel images referenced in the skin.xml file
- the following images ignore the 150% and 200% variations in order to stop the skin bloating:
  "SplashScreen", "WaitIndicatorArtwork", "NoArtwork", "UnknownArtist", "RssFeed"
  and also high dpi variations of the panel background image are ignored because of other complications
Last Edit: May 01, 2017, 08:38:23 PM by Steven

Alumni

  • Sr. Member
  • ****
  • Posts: 1007
On the subject of high DPI icons, I'm of the opinion that MusicBee's icons could be made bigger.
I like the way Groove Music handles icons and the padding of menu items (particularly in the left sidebar), such as in this screenshot: https://ucarecdn.com/b506436d-486b-4670-b6f0-d53d36ae3ebd/
There are a few benefits to this approach; more touchscreen friendly, more use of screen space on 4K monitors, and a more modern appearance. Just an idea.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
I have added support for wavebars. Because the layout would likely change quite substantially, the wavebar layout has its own layout definition file:
skin_wavebar.xml

its exactly the same format as the skin.xml file, except when the final compiled skin is generated, only the layout fields are used and any image files ignored ie. only the images from the skin.xml file are actually used.
The wavebar element itself is defined as:
Code
<element id="WaveBar" parent="TrackInfoPanel">
  <left relativeTo="Spectrum.Right" offset="25" />
  <right relativeTo="TrackInfoPanel.Right" offset="-8" />
</element>
You cant control its height - just the X location and width

For backwards compatability reasons you cant use or reference the wavebar element in the skin.xml file

For the album cover, i am struggling to come up with a solution that is backwards compatable that works well for all types of layout (I wont compromise on the backwards compatability aspect because I know if it breaks older MB versions it will generate too many forum support requests). I think I could do something where the album cover location is expressed as being flush to the left or right edge of the player panel ie. when the user enables the album cover, MB lays out the panel as though it was a smaller panel for the other elements. If that works for you then let me know
Last Edit: May 03, 2017, 06:42:01 PM by Steven

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
updated Skin Creator tool as described above without album cover support:
http://musicbee.niblseed.com/SkinCreator/SkinCreator2.zip
unzip and replace the existing skin creator files


you need the latest MB version for MB to "notice" the new features
http://musicbee.niblseed.com/V3_1/MusicBee31_Patched.zip



For whenever you get to it.  :)
I cant believe its been over a year!

given i have been enhancing the skin creator tool, i am going to look at the skin requests now. Because there are so many requests anyone feel free to bump the important ones you care about


some suggestions for the SkinCreator:
  • ability to put button elements (eg: volume, equaliser) in the TrackInfoPanel, and still have them work;
  • ability to have a second track info panel (TrackInfoPanel2) to allow TrackText/TrackPosition and TrackRating/Spectrum and other elements to be in separate panels on the background;
  • support for vertical volume bar;
  • completion of the Image element implementation so that it can be used for backgrounds to any element.
given i am enhancing the skin creator, it makes sense to do this now but i am not understand the first 2 points. Can you do a quick mockup?
Last Edit: May 06, 2017, 07:51:13 PM by Steven