I’ve been wanting to use the same colour scale as Windguru as it is so familiar and clear. I’ve found a way of doing it, but I’m embarrassed about how kludgy it is. My solution is given below and I’d really appreciate help so I don’t need to manually bodge the text off the website when I reuse it for other colour scales. I’m pretty sure the whole thing can be tidied up too.
I’m using it to get background colors for the wind speed and the wind gusts which I use like this in a picture elements card.
card_mod:
style: |
:host {
color: {{state_attr('sensor.tideq_weather','contrast')}};
}
div {
background: linear-gradient(to right, {{state_attr('sensor.tideq_weather','colour')}},{{state_attr('sensor.tideq_weather','colour_g')}});
border-radius: 50px !important;
}
The attributes contrast, colour, and colour_g are all derived from code like this below. I’d like to make this into a macro to avoind the current method of repeating & tweaking the code.
{%- set this = 10 %} {# this is the value you're colouring #}
{# copy & paste the colour scheme from https://www.windguru.cz/ajax/ajax_colors.php BUT add string marks around each #}
{%- set colours = ['rgba(255,255,255,1) 0%', 'rgba(255,255,255,1) 7%', 'rgba(103,247,241,1) 13%', 'rgba(0,255,0,1) 19%', 'rgba(255,240,0,1) 27%', 'rgba(255,50,44,1) 35%', 'rgba(255,10,200,1) 45%', 'rgba(255,0,255,1) 54%', 'rgba(150,50,255,1) 64%', 'rgba(60,60,255,1) 86%', 'rgba(0,0,255,1) 100%'] %}
{%- set scale_low, scale_high = 0, 70 %} {# get this off their site too #}
{%- set colours = colours|map('replace','rgba(','')|map('replace',')',',')|map('replace',' ','')|map('replace','%','')|list %}
{{ colours }} {# just for testing #}
{%- set ns = namespace(pct=[]) %}
{%- for colour in colours %} {# the last element in each is the percetage on the colour scale #}
{%- set ns.pct=ns.pct+[colour.split(',')[4]|int] %}
{%- endfor %}
{%- set this = min(100, (this - scale_low) * 100 / (scale_high - scale_low))|int %} {# scale what you are seeking #}
{%- set ndx = ns.pct.index(ns.pct|select('le',this)|list|last) %} {# get its position #}
{%- set ndxn = min(ndx+1,colours|count - 1) %} {# and the next unless its the last #}
{% set bita = colours[ndx].split(',')|map('int')|list %} {# the r,g & b bits of the previous element #}
{%- set bitb = colours[ndxn].split(',')|map('int')|list %}
{%- set prop = (this - ns.pct[ndx])/(ns.pct[ndxn]-ns.pct[ndx]) if ndxn != ndx else 1 %} {# where betwenn the elements #}
{%- set ns = namespace(out = 'rgba(') %}
{%- for c in range(3) %} {# for each of r, g & b #}
{%- set ns.out = ns.out ~ (bita[c]+prop*(bitb[c]-bita[c]))|round(0) %}
{%- set ns.out= ns.out ~ ',1)' if loop.last else ns.out ~ ',' %}
{%- endfor %}
{{ ns.out }}
The actual website text I had to tweak was linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 7%, rgba(103,247,241,1) 13%, rgba(0,255,0,1) 19%, rgba(255,240,0,1) 27%, rgba(255,50,44,1) 35%, rgba(255,10,200,1) 45%, rgba(255,0,255,1) 54%, rgba(150,50,255,1) 64%, rgba(60,60,255,1) 86%, rgba(0,0,255,1) 100%);