[widgetsTemplates]Guide coloring/adding dynamic color to macro

[Ress 21]

Many xvm experts probably already know how to dynamically color stats (those stats that "officially" don't have/use dynamic coloring like {{mystat.hip}} for example).
Since it took me few hours to figure out how {{py:xvm.dynamic_color_rating(r, v)}} and {{py:xvm.color_rating(r, v)}} actually works, i wanna share quick guide for someone who doesn't know and need to colorize some widget/carousel stats.

lets take {{mystat.hip}} widget macro for example:

STEP 1: Open colors.xc and add value/color range for your new dynamic color inside  "colors": { definition (best at the bottom for simplicity)
example: added color range for "hip" at the bottom of the config (bellow "hitsRatio" color):

    // Dynamic color by hit ratio (percents of hits)
    "hitsRatio": [
      { "value": 47.4, "color": ${"def.colorRating.very_bad" } },
      { "value": 60.4, "color": ${"def.colorRating.bad"      } },
      { "value": 68.4, "color": ${"def.colorRating.normal"   } },
      { "value": 74.4, "color": ${"def.colorRating.good"     } },
      { "value": 78.4, "color": ${"def.colorRating.very_good"} },
      { "value": 100,  "color": ${"def.colorRating.unique"   } }
    ],
    // Dynamic color by hit percent (total average hit percent)
    "hip": [
      { "value": 44.49, "color": ${"def.colorRating.very_bad" } },
      { "value": 54.49, "color": ${"def.colorRating.bad"      } },
      { "value": 64.49, "color": ${"def.colorRating.normal"   } },
      { "value": 74.49, "color": ${"def.colorRating.good"     } },
      { "value": 84.49, "color": ${"def.colorRating.very_good"} },
      { "value": 94.49, "color": ${"def.colorRating.unique"   } }
    ]
  }
}

In this case only 6 value range reading default 6 colors from "colorRating": { 
but you can add more/less values and link it with 10 colors, however you prefer.

Usually if you wanna use dynamic color inside "format":"" you will use <font color'{{mystat.c_winrate}}'>{{mystat.winrate%.2f~%}}</font> for example
But in this case we can't do that with {{mystat.hip}} because there is no {{mystat.c_mystat.hip}} macro or dynamic color for it.

STEP 2: Open widgetsTemplates.xc (or carouselNormal.xc / carouselSmall.xc) and using {{py:xvm.color_rating(r, v)}} macro as your hexcolor colorize macro/stat you wanna get colored.
example: colored {{mystat.hip}} using {{py:xvm.color_rating(r, v)}} to read "hip" hex color

<font color='#{{py:xvm.color_rating('hip', {{mystat.hip}})}}'>{{mystat.hip%.2f~%}}</font>

Instead of using single/static hex color like <font color'#000000'>{{mystat.hip%.2f~%}}</font> you can use {{py:xvm.color_rating(r, v)}}
to read current hex color value for {{mystat.hip}} from "hip" inside colors.xc

In THEORY you can do this with any stat for widget or carousel (...mystat.frg, mystat.dmg, mystat.spo, v.level, v.xpToElite, v.camouflageWinter, v.xpToEliteLeft)
As long as you:
A) add new values inside color.xc (or you use existing/same values if that works for you, also you can use only 2 colors for on/off scenarios)
B)link to correct value with {{py:xvm.color_rating('value', macro)}} as your hex color (and don't forget to add # in front of it when using <font color'#000000'> format)

So if for some reason you need to color {{v.level}} macro you will first add 10 new colors then add values "level" (for example),
and then you will use <font color='#{{py:xvm.color_rating('level', {{v.level}})}}'></font> as your color.....anyway



Hopefully this all wasn't big confusion and someone can actually find this useful, cheers.

Edited May 11, 2018 by Ress