Author Topic: [Added] Variables for easier fine tuning skins  (Read 8079 times)

lnminente

  • Hero Member
  • *****
  • Posts: 1049
Would be very helpful having the hability of defining our own variables for modifying the colors of many elements in only one step. And this could do modifying skins easier for everyone. TIA!

<variables>
var1="255,255,255"
var2="43,43,43"
ground="220,220,220"
clearcontrast="238,238,238"
...
</variables>

<colors>
  <element id="ApplicationBackColour" bg=ground />
 <element id="Panel.Body.Default" bg=ground fg="0,0,0" bdr="175,175,175" />
<element id="Panel.TabSelector.Default" bg=ground bg2=ground fg="0,0,0" bdr=clearcontrast />
...
</colors>
Last Edit: April 29, 2012, 10:50:35 AM by lnminente

lnminente

  • Hero Member
  • *****
  • Posts: 1049
[Up]
I think this is easy to implement, and would help a LOT in the creation and fine tuning of skins.

Also would improve the learning curve for skinning as would be easier starting and getting something done.

Now i have some experience if i would start a new skin i would use unique numbers as a workaround. If want a ground 127,127,127 linked to the scrollbar color too, i would use 127,127,126 and in other places i don't want to link 127,126,127. Anyway a variable would be a lot easier, even more for people which didn't created that skin.

Cheers

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 32353
this is done for the next update except the format differs slightly for the elements
<variables>
var1="255,255,255"
...
</variables>

<colors>
  <element id="ApplicationBackColour" bg="var1" />
...


lnminente

  • Hero Member
  • *****
  • Posts: 1049
Have tested it with dark variations and works very well with skins based on MB default.

Flammeous_(using_vars).xml
Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Crimson">
<variables>
Variation="153,29,44"
Variation_fg=255,255,255
</variables>
<colours id="Default">
<!-- 12-->  <element id="Menu.DropDown.Highlight" bg="Variation" />
<!-- 24-->  <element id="Panel.HeaderControl.Highlight" bg="Variation" fg="240,240,240" bdr="80,80,80" />
<!-- 30-->  <element id="Panel.Body.Highlight" bg="Variation" fg="Variation_fg" />
<!-- 31-->  <element id="Panel.Body.Lowlight" bg="Variation" fg="Variation_fg" />
<!-- 42-->  <element id="Panel.ChildBody.Highlight" bg="Variation" fg="245,245,245" />
<!-- 43-->  <element id="Panel.ChildBody.Lowlight" bg="Variation" fg="245,245,245" />
<!-- 56-->  <element id="Content[AlbumAndTracks]" bg="Variation" fg="Variation_fg" />
<!-- 57-->  <element id="Content[Artwork]" bg="Variation" fg="Variation_fg" />
<!-- 58-->  <element id="Content[Artwork].HeaderControl.Default" bg="140,140,140" bg2="140,140,140" fg="100,100,100" bdr="50,50,50"/>
<!-- 59-->  <element id="Content[Artwork].Body.Default" bg="5,5,5" fg="220,220,220" bdr="0,0,0" />
<!-- 60-->  <element id="Content[ArtistProfile]" bg="5,5,5" />

<!-- 52-->  <element id="Content[TrackDetail].Body.Highlight" bg="Variation" fg="Variation_fg" />
<!-- 53-->  <element id="Content[TrackDetail].Body.Lowlight" bg="Variation" fg="Variation_fg" />
<!-- 65-->  <element id="Panel.StarRating.Highlight" fg="240,240,240" fg2="Variation" />
<!-- 67-->  <element id="Panel.NotLovedIcon.Highlight" fg="226,154,146" fg2="Variation" />
<!-- 78-->  <element id="Player.ProgressBar" bg="40,40,40" bdr="Variation" fg="Variation" />
<!-- 97-->  <element id="PlayerSidebar.ProgressBar" bg="10,10,10" bdr="140,140,140" fg="Variation" />
<!-- 105-->  <element id="Controls.VerticalMenu.Highlight" bg="Variation" fg="Variation_fg" />
<!-- 106-->  <element id="Controls.VerticalMenu.Lowlight" bg="Variation" fg="Variation_fg" />
</colours>
</root>


Later I wanted implement some variables in my dusk.mod skin for making easier to others modifying some colors but i didn't find the way.
1) Tried with Skincreator from 2012/03/18 but it doesn't understand variables and closes
2) Tried linking dusk.lnminente.Vars.xml file to my compiled skin dusk.lnminente.xmlc and copied both to MusicBee\Skins folder. Selected dusk.lnminente.Vars as skin. But at restarting had no luck. It shows a dialog, titled MusicBee startup error, with the message "Value cannot be null. Parameter name: image" and opens an log file showing:
Code
14/04/2012 17:44:36 - 6.1.7601.65536 - 2.0.4484.29016 - System.ArgumentException: The path is not of a legal form.
   at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength)
   at System.IO.Path.GetFullPathInternal(String path)
   at System.IO.DirectoryInfo..ctor(String path)
   at #=qdlsgYhRacMl55JB2EB2OZvSKXR8JuR1fCFa03_dX4eG0JRA090P46KhH1K10CMIO.#=qTAXOboLBXWeUsQVJgLsdjSkShlXGXYPAhKSunZI3pYI=.#=qcceVMDFpvsd7hyGq8SP66OhxKBgguFd9ixNUnVCxuQQ=(List`1 #=qcm520l$sCIVwdo3Hg1kFvQ==, Boolean #=qhlEaCLGQZBLEC_vaohW1IPkrjngRYbeDorbrihu_FJA=, Boolean #=ql_v3gCDA6h0kNntp4FocoQ==, Boolean #=qC5l8r6Z6s2dKO1DAumV3UA==, String[] #=q0iyRjzmLOBM0Vjt7MpBCrrsHkNzproz2EfkSdZZKwFk=, Boolean #=qIgF_TIGl1mT4rh$$E$ZTTDrp$eKhYPRWXgWDhOAae$U=)
   at #=qxRDe9pbcvJLrZDwwYvHsSJIYGH3Wtxjwj5E0RJ1VuCM=.#=qV_3oDdQ1SoC8eHwDHWZqpRbhzeFJsRlj7ZHSneq57dI=(Object #=qqICMYKoz7uKT5Fy1HVivgQ==)

dusk.lnminente.Vars.xml
Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="dusk.lnminente">
<variables>
Selected="129,218,18"
</variables>
<colours id="default">
<element id="Panel.Body.Highlight" bg="Selected" fg="255,255,255" />
    <element id="Panel.ChildBody.Highlight" bg="Selected" fg="255,255,255" />
    <element id="Content[TrackDetail].Body.Highlight" bg="Selected" fg="255,255,255" />
</colours>
</root>


Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 32353
this is an updated version of the skin creator to support variables in the source skins
http://musicbee.niblseed.com/Patches/SkinCreator.zip

lnminente

  • Hero Member
  • *****
  • Posts: 1049
Working good here :) Will update the sources of my skin soon. Thanks!

Vinyl Wiper

  • Guest
Like the idea, but I have two minor bits of feedback...

1) The skin creator is in the V2 directory, not the patches directory; and
2) I can't seem to get variables working in V2#4636. Drat!

I'm just playing around at the moment, but my test skin xml file looks like :
Code
<variables>
  Black="0,0,0"
  White="255,255,255"
  Grey240="240,240,240"
  Grey225="225,225,225"
  Grey205="205,205,205"
  Grey180="180,180,180"
  Grey150="150,150,150"
  Grey120="120,120,120"
  Grey100="100,100,100"
  Grey90="90,90,90"
  Grey70="70,70,70"
  Grey50="50,50,50"
  Grey35="35,35,35"
  Grey20="20,20,20"
  Grey10="10,10,10"
  MenuBG="24,44,82"
  DeepRoyalBlue="24,24,82"
  MenuFG="120,205,205"
  DarkGrottoGreen="14,39,14"
  DeepGreen="8,16,8"
  ShadyGladeGreen="15,45,15"
  GladeGreen="16,32,16"
  ForestGreen="24,42,24"
  LightForestGreen="20,90,20"
  MediumGreen="48,96,48"
  MediumGumGreen="80,120,80"
  Goldenrod="195,195,135"
  BrightYellow="235,235,0"
  BrightCyan="0,235,235"
  LichenGreen="200,220,200"
  PineGreen="32,108,32"
  RootBrown="96,48,48"
  LeafGold="236,178,76"
  GoldenHoney="255,172,2"
 
</variables>
...but it all turns out black and white.
FYI, I just did a regexp replace of my colour values into the variable definitions, so when I reverse the procedure and get rid of the variable names, the skin works fine.

Is there maybe a limit on how many variables there are? Or am I missing a horribly obvious syntax issue here?

Cheers,
Pete
PS I'm happy to post this in the main forum if that's preferred...

lnminente

  • Hero Member
  • *****
  • Posts: 1049
That happens when the skin has something misspelled so MB loads the default skin, verify the latest changes you did. For preventing it better verify the skin every few changes.

With notepad++ could be easier to localize the misspelled word, as it colours the different elements, numbers, etc of the xml

Vinyl Wiper

  • Guest
Thanks for the tip, I didn't realise that's what could trigger the default skin!

I actually use Textpad 6.1, which I've set up to specifically syntax-colour the MB XML entities. You're right - I'd hate to try doing that sort of editing in a plain, flat, ascii editor!

I've actually played around with the xml file, and if I remove the variables section and replace the var strings, it works perfectly. It also works if I just add one or two simple vars. But as soon as I start adding more than about 6 vars, it suddenly stops working. It also stops working with fewer vars if I use longer names! So I wonder if it could be a string limitation? I noticed that other people's examples seem to use long strings as well, so that's quite confusing to me.

Of course, my workaround is to revert to the horrible colour triplets...

Interesting side note : I found that the dark theme that I was using as a basis for my skin had a lot of grey values that were only 1 or 2 or a few levels away from one another (e.g. some panels used 24,24,24 as the lowlight, and some used 25,25,25 and 23,23,23 and so on)... So trying out the variables was a good exercise in finding non-standard colour patterns!

redwing

  • Guest
Could you support using other variable names in defining variables?

So in the following example:

<variables>
var1="255,255,255"
var2="var1"
...
</variables>

<colors>
  <element id="ApplicationBackColour" bg="var2" />
...

The bg will get "255,255,255".

This would allow to use meaningful names for each color when defining variables and make skinning a lot easier especially when you're working on a series of skins with a similar scheme.
Last Edit: March 03, 2014, 04:59:04 AM by redwing

The Incredible Boom Boom

  • Hero Member
  • *****
  • Posts: 670
Could you support using other variable names in defining variables?

So in the following example:

<variables>
var1="255,255,255"
var2="var1"
...
</variables>

<colors>
  <element id="ApplicationBackColour" bg="var2" />
...

The bg will get "255,255,255".

This would allow to use meaningful names for each color when defining variables and make skinning a lot easier especially when you're working on a series of skins with a similar scheme.

+1