Questions on skin elements for 3.1

[Tommy]

....... thanks for this one.

I have a question about this line of code as it wasn't necessary in the previous SkinCreator :

Code

<element id="MusicLibrary">Images\MusicLibrary.svg</element>

What kind of image one should use for MusicLibrary.svg ?

Even though I managed to compile a skin without this line of code i would like to see the difference.

Thanks in advance for any input .......

[redwing]

Its use is optional in case you want to support high DPI devices. When magnified, svg images remain sharp while png & jpg images get blurred and fuzzy.
Have a look: https://getmusicbee.com/forum/index.php?topic=18111.msg128610#msg128610

But as MB actually coverts svgs to 100%, 150%, and 200% larger pngs and include them to the compiled skin, there's no differences in image quality if you choose to include 100%, 150%, and 200% larger pngs instead of one svg.  

What kind of image one should use for MusicLibrary.svg ?

Not an image file but a text file with a bit of code.

[Tommy]

....... thanks for the quick reply.

Talking about SkinCreator2 only - As I'm using only SVG's I recon there is no need for the 100%, 150% and 200% image files or am I mistaken ?

Not an image file but a text file with a bit of code.

Could you explain or even better provide an example of such a text file ?

I'm confused - The line of code says MusicLibrary.svg and you say it's a text file.

I guess I'm not very good with the coding like you guys.

Please give me a hand here as I like to understand.

Thanks again .......

[redwing]

As I'm using only SVG's I recon there is no need for the 100%, 150% and 200% image files

Correct.

Could you explain or even better provide an example of such a text file ?

Take a look: https://www.w3schools.com/graphics/svg_intro.asp

I'm confused - The line of code says MusicLibrary.svg and you say it's a text file.

What's confusing? Save a text file in such a filename.

[Bee-liever]

I'm confused - The line of code says MusicLibrary.svg and you say it's a text file.

What's confusing? Save a text file in such a filename.

SVG files are graphics file that are defined by xml text file.
You can view (and write) them as purely text files.
Or, alternatively, you can use an SVG graphics editor such as Illustrator or Inkscape and view and edit them in graphical form.

[Bee-liever]

BTW, the SVG files need to have page size set to the original small png/jpg pixel size (usually 16x16px).
SkinCreator2 will scale the SVG up, but can't scale down.

[Tommy]

....... thanks to both of you for explaining.

I didn't know before that SVG files are based on XML, good to know though.

Still need some fine tuning, but I think I'm getting there.

This is what I got so far : https://i.imgur.com/dFHLDYf.png

One more question though, is it somehow possible to have a customized Player Control Bar with full functionaity like the build in one ?

I mean switch things around like Progress Bar on top, bottom or middle.

Anyway, thanks again for your help .......

[redwing]

Looking great!

One more question though, is it somehow possible to have a customized Player Control Bar with full functionaity like the build in one ?

I mean switch things around like Progress Bar on top, bottom or middle.

No, it's not supported for customized player bar.

[Tommy]

....... one more question about adding the wavebar  .

Do I understand correctly that I must have 2 skin files like the skin.xml and the skin_wavebar.xml were both files are the same only that the skin_wavebar.xml must have this line of code added  ?

Code

<element id="WaveBar" parent="TrackInfoPanel">
  <left relativeTo="Spectrum.Right" offset="25" />
  <right relativeTo="TrackInfoPanel.Right" offset="-8" />
</element>

I tried that, but it doesn't work which means I'm doing it wrong.

It would be great to have a template or example file to work with as I cant figure it out.

 Also I tried changing the font size of the Track Position Timer:

Code

<element id="TrackPosition" parent="TrackInfoPanel" fontSize="8.00">

It makes no difference to whatever value I'm using, the font size won't change .......

[Bee-liever]

It would be great to have a template or example file to work with as I cant figure it out.

Have PM'd you a link to my Bee78 skin files.

[Tommy]

....... thanks a lot, it's very much appreciated.

Going to check out the files right now .......

[Tommy]

....... alright, I've got the WaveBar working now, thanks.

Is it possible to display Track Info under or above the WaveBar centered if possible ?

Still can't control the font size of the Track Position Timer using this code, doesn't matter what value I'm using :

Code

  \\ Track Position Timer
  <element id="TrackPosition" parent="Panel" fontSize="10.00">
    <left relativeTo="Panel.Right" offset="-295" />
    <top relativeTo="Panel.VerticalCenter" offset="3" />
  </element>

Am I doing something wrong ...?...

[redwing]

Is it possible to display Track Info under or above the WaveBar centered if possible ?

Not possible.

Still can't control the font size of the Track Position Timer using this code, doesn't matter what value I'm using :

Do you mean it doesn't work only in the wave bar layout or progress bar layout too? Screenshots for both would be helpful.

[Tommy]

....... it' not working for both layouts.

Here the screenshots :

https://i.imgur.com/Pkx0KsA.png

https://i.imgur.com/qwVgDjV.png

Thanks for helping to work this out .......

[redwing]

Could it be about your language's decimal mark?

i have added a fontSize attribute that is now recognised by the Skin Creator and forces the track position font size in the player controls panel. Note that if your language decimal separator is "," then use ","