Color changing temp tiles

bummer

2 Likes

:point_up:

This guy is always raining on my parades.

Whadda ya think HE? can we up the limit? @bravenel @bobbyD @mike.maxwell

2 Likes

what is the issue with this not working as I have an old verison of smarttiles and it works fine there?

it appears not to work because the value on the tile.. temp tiles and others is just free formating text.. They need to change the driver to put out a tag data-value="75" etc
on the tag that has the value.. that is all that is needed then we can change color and other based on the value.. should be an easy change in the source.. Who do we need to contact to do this..

/* Temperature Ranges using NFL Color Values */
.temperature[data-value='110°'] {background-color: #bc2323;}
.temperature[data-value='109°'] {background-color: #bc2323;}
.temperature[data-value='108°'] {background-color: #bc2323;}
.temperature[data-value='107°'] {background-color: #bc2323;}
.temperature[data-value='107°'] {background-color: #bc2323;}
.temperature[data-value='106°'] {background-color: #bc2323;}
.temperature[data-value='104°'] {background-color: #bc2323;}
.temperature[data-value='103°'] {background-color: #bc2323;}
.temperature[data-value='102°'] {background-color: #bc2323;}
.temperature[data-value='101°'] {background-color: #bc2323;}
.temperature[data-value='100°'] {background-color: #bc2323;}
.temperature[data-value='99°'] {background-color: #bc2323;}
.temperature[data-value='98°'] {background-color: #bc2323;}
.temperature[data-value='97°'] {background-color: #bc2323;}
.temperature[data-value='96°'] {background-color: #bc2323;}
.temperature[data-value='95°'] {background-color: #bc2323;}
.temperature[data-value='94°'] {background-color: #bc2323;}
.temperature[data-value='93°'] {background-color: #bc2323;}
.temperature[data-value='92°'] {background-color: #bc2323;}
.temperature[data-value='91°'] {background-color: #bc2323;}
.temperature[data-value='90°'] {background-color: #bc2323;}
.temperature[data-value='89°'] {background-color: #bc2323;}
.temperature[data-value='88°'] {background-color: #bc2323;}
.temperature[data-value='87°'] {background-color: #bc2323;}
.temperature[data-value='86°'] {background-color: #bc2323;}
.temperature[data-value='85°'] {background-color: #bc2323;}
.temperature[data-value='84°'] {background-color: #f1d801;}
.temperature[data-value='83°'] {background-color: #f1d801;}
.temperature[data-value='82°'] {background-color: #f1d801;}
.temperature[data-value='81°'] {background-color: #f1d801;}
.temperature[data-value='80°'] {background-color: #f1d801;}
.temperature[data-value='79°'] {background-color: #f1d801;}
.temperature[data-value='78°'] {background-color: #f1d801;}
.temperature[data-value='77°'] {background-color: #f1d801;}
.temperature[data-value='76°'] {background-color: #f1d801;}
.temperature[data-value='75°'] {background-color: #f1d801;}
.temperature[data-value='74°'] {background-color: #44b621;}
.temperature[data-value='73°'] {background-color: #44b621;}
.temperature[data-value='72°'] {background-color: #44b621;}
.temperature[data-value='71°'] {background-color: #44b621;}
.temperature[data-value='70°'] {background-color: #44b621;}
.temperature[data-value='69°'] {background-color: #44b621;}
.temperature[data-value='68°'] {background-color: #44b621;}
.temperature[data-value='67°'] {background-color: #44b621;}
.temperature[data-value='66°'] {background-color: #44b621;}
.temperature[data-value='65°'] {background-color: #44b621;}
.temperature[data-value='64°'] {background-color: #44b621;}
.temperature[data-value='63°'] {background-color: #44b621;}
.temperature[data-value='62°'] {background-color: #44b621;}
.temperature[data-value='61°'] {background-color: #44b621;}
.temperature[data-value='60°'] {background-color: #44b621;}
.temperature[data-value='59°'] {background-color: #90d2a7;}
.temperature[data-value='58°'] {background-color: #90d2a7;}
.temperature[data-value='57°'] {background-color: #90d2a7;}
.temperature[data-value='56°'] {background-color: #90d2a7;}
.temperature[data-value='55°'] {background-color: #90d2a7;}
.temperature[data-value='54°'] {background-color: #90d2a7;}
.temperature[data-value='53°'] {background-color: #90d2a7;}
.temperature[data-value='52°'] {background-color: #90d2a7;}
.temperature[data-value='51°'] {background-color: #90d2a7;}
.temperature[data-value='50°'] {background-color: #90d2a7;}
.temperature[data-value='49°'] {background-color: #90d2a7;}
.temperature[data-value='48°'] {background-color: #90d2a7;}
.temperature[data-value='47°'] {background-color: #90d2a7;}
.temperature[data-value='46°'] {background-color: #90d2a7;}
.temperature[data-value='45°'] {background-color: #90d2a7;}
.temperature[data-value='44°'] {background-color: #1e9cbb;}
.temperature[data-value='43°'] {background-color: #1e9cbb;}
.temperature[data-value='42°'] {background-color: #1e9cbb;}
.temperature[data-value='41°'] {background-color: #1e9cbb;}
.temperature[data-value='40°'] {background-color: #1e9cbb;}
.temperature[data-value='39°'] {background-color: #1e9cbb;}
.temperature[data-value='38°'] {background-color: #1e9cbb;}
.temperature[data-value='37°'] {background-color: #1e9cbb;}
.temperature[data-value='36°'] {background-color: #1e9cbb;}
.temperature[data-value='35°'] {background-color: #1e9cbb;}
.temperature[data-value='34°'] {background-color: #1e9cbb;}
.temperature[data-value='33°'] {background-color: #1e9cbb;}
.temperature[data-value='32°'] {background-color: #153591;}
.temperature[data-value='31°'] {background-color: #153591;}
.temperature[data-value='30°'] {background-color: #153591;}
.temperature[data-value='29°'] {background-color: #153591;}
.temperature[data-value='28°'] {background-color: #153591;}
.temperature[data-value='27°'] {background-color: #153591;}
.temperature[data-value='26°'] {background-color: #153591;}
.temperature[data-value='25°'] {background-color: #153591;}
.temperature[data-value='24°'] {background-color: #153591;}
.temperature[data-value='23°'] {background-color: #153591;}
.temperature[data-value='22°'] {background-color: #153591;}
.temperature[data-value='21°'] {background-color: #153591;}
.temperature[data-value='20°'] {background-color: #c0d2e4;}
.temperature[data-value='19°'] {background-color: #c0d2e4;}
.temperature[data-value='18°'] {background-color: #c0d2e4;}
.temperature[data-value='17°'] {background-color: #c0d2e4;}
.temperature[data-value='16°'] {background-color: #c0d2e4;}
.temperature[data-value='15°'] {background-color: #c0d2e4;}
.temperature[data-value='14°'] {background-color: #c0d2e4;}
.temperature[data-value='13°'] {background-color: #c0d2e4;}
.temperature[data-value='12°'] {background-color: #c0d2e4;}
.temperature[data-value='11°'] {background-color: #c0d2e4;}
.temperature[data-value='10°'] {background-color: #dbdee2;}
.temperature[data-value='9°'] {background-color: #dbdee2;}
.temperature[data-value='8°'] {background-color: #dbdee2;}
.temperature[data-value='7°'] {background-color: #dbdee2;}
.temperature[data-value='6°'] {background-color: #dbdee2;}
.temperature[data-value='5°'] {background-color: #dbdee2;}
.temperature[data-value='4°'] {background-color: #dbdee2;}
.temperature[data-value='3°'] {background-color: #dbdee2;}
.temperature[data-value='2°'] {background-color: #dbdee2;}
.temperature[data-value='1°'] {background-color: #dbdee2;}
.temperature[data-value='0°'] {background-color: #c8e3f9;}
.temperature[data-value='-1°'] {background-color: #c8e3f9;}
.temperature[data-value='-2°'] {background-color: #c8e3f9;}
.temperature[data-value='-3°'] {background-color: #c8e3f9;}
.temperature[data-value='-4°'] {background-color: #c8e3f9;}
.temperature[data-value='-5°'] {background-color: #c8e3f9;}
.temperature[data-value='-6°'] {background-color: #c8e3f9;}
.temperature[data-value='-7°'] {background-color: #c8e3f9;}
.temperature[data-value='-8°'] {background-color: #c8e3f9;}
.temperature[data-value='-9°'] {background-color: #c8e3f9;}
.temperature[data-value='-10°'] {background-color: #c8e3f9;}
.temperature[data-value='-11°'] {background-color: #c8e3f9;}
.temperature[data-value='-12°'] {background-color: #c8e3f9;}
.temperature[data-value='-13°'] {background-color: #c8e3f9;}
.temperature[data-value='-14°'] {background-color: #c8e3f9;}
.temperature[data-value='-15°'] {background-color: #c8e3f9;}
.temperature[data-value='-16°'] {background-color: #c8e3f9;}
.temperature[data-value='-17°'] {background-color: #c8e3f9;}
.temperature[data-value='-18°'] {background-color: #c8e3f9;}
.temperature[data-value='-19°'] {background-color: #c8e3f9;}
.temperature[data-value='=20°'] {background-color: #c8e3f9;}

/* Change THERMOSTAT tile color for operating-state [idle/heat/cool] */

.thermostatCool.tile[data-operating-state='cooling'] {background-color: #99ccff;}
.thermostatHeat.tile[data-operating-state='heating'] {background-color: #ff6666;}

/* Other THERMOSTAT setting */

.thermostatHeat .icon.up, .thermostatCool .icon.up {margin-top: -2.25em; font-size:1.6em; line-height:1.6em;}
.thermostatHeat .icon.down, .thermostatCool .icon.down {margin-top: 0.25em; font-size:1.6em; line-height:1.6em;}

.thermostatHeat .icon {margin-top: -1.0em; font-size:2em; line-height:1.8em; align: center; color: red; } /* color:#ae0001; /
.thermostatHeat .title {font-size: 0.95em; line-height: 1.0em; text-align: left;}
.thermostatHeat .title2 {color: red; font-size: 1.1em; line-height: 1.1em; text-align: left;} /
#00B800; /
.thermostatHeat .footer .wi-sprinkles {position: relative; left: -7px; top: 4px; font-size: 1.1em; text-align: center;}/
#00B800*/
.thermostatHeat .footer {color:red; position: absolute; left: 1px; font-size: 1.0em; text-align: center; line-height:1.3em;} /*#00B800 */
.thermostatHeat .fa {color: red;}

.thermostatCool .icon {margin-top: -1.0em; font-size:2em; line-height:1.8em; align: center; color: #63ace5;} /* color: #2a4d69;/
.thermostatCool .title {font-size: 0.95em; line-height: 1.0em; text-align: left;}
.thermostatCool .title2 {color: #63ace5; font-size: 1.1em; line-height: 1.1em; text-align: left;} /
#00B800* 2a4d69; /
.thermostatCool .footer .wi-sprinkles {position: relative; left: -7px; top: 4px; font-size: 1.1em; text-align: center;}/#00B800/
.thermostatCool .footer {color: #63ace5; position: absolute; left: 1px; font-size: 1.0em; text-align: center; line-height:1.3em;} /#00B800/
/.thermostatCool .wi {color: #63ace5;}/
.thermostatCool .fa {color: #63ace5;}

tag as i posted in wrong account

That code might work for smarttiles, but not HE dashboard. HE board code looks like this (the change based on 'state' not vaule.

{
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "119.5"
    },
    {
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "119.6"
    },
    {
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "119.7"
    },
    {
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "119.8"
    },
    {
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "119.9"
    },
    {
      "template": "temperature",
      "bgColor": "rgba(211,4,1,0.99)",
      "iconColor": "rgba(255,255,255,0.99)",
      "state": "120.0"
    },

Also your code only goes out the whole numbers (no decimal), temp at whole numbers is pretty vague. Most sensorss go out to .01, but that would be tons of coding, so I did out to the tenths position. "84.6"

The problem is well document on post #1 and the only way to fix it at this time is to have HE increase the cloud limit count.

This is only a HE cloud limitation it works fine via LAN. HE has a character count limit as documented in post #1, if you go over that magic number it will not load (black screen).

thanks .. need an option to set temps to whole numbers and that is good enogh for most of my devices and I belive then I could youse code like yours and maybe not go over the limit?

See this post

If you want the completed code (you'll need to remove unneeded entries) PM me for a link,

more help trying to change color on custom attribute tile.. tried attribute class and it doesnt work
can i chANGE THE color based on the value in the css what would that look like even if i have to hard code the tile # ie can pu put a value in this

#tile-2 {
background-color: #FF0000 !important;
}

Anything based on "values" needs to be in the "custom colors" section of the JSON. Per tile CSS is only going to impose changes all the time, not conditionally.

Your code does look ok, but it is just going to change the BG color all the time. I use RGBA so it looks like. (I just tested your code on my tile and it does change it to red)

#tile-22 {
background-color: rgba(128,128,128,0.0) !important;
}

thanks i got it working with the template not sure why it wouldnt earlier maybe i didnt refersh the dashboard
ie
"template": "attribute",
"bgColor": "#a60000a6",
"state": "z1on"
},
{
"template": "attribute",
"bgColor": "#a60000a6",
"state": "z2on"
},
{
"template": "attribute",
"bgColor": "#a60000a6",
"state": "z3on"
},
{
"template": "attribute",
"bgColor": "#a60000a6",
"state": "z4on"
},

ie

2 Likes

i would of rather just had a virtual switch that both controlled the actual sprinkler zone and also reflected its status. but as I was writing the rules realized it would have gone in an endless loop. lol....
Is there a better way to do this?

I'm not sure you ever gave me a ticket on to your train of thought. What are we trying to do? What device are we working with?

If that is the goal, than make a virtual switch and tie it to you zone controller in Simple Automation Rules. When it's on it will be one color and off it will be another. Another example of why I think they should have a virtual 'valve' but what do I know :wink:

There are also community apps that make virtual devices for sprinkler zones.

If there is something I'm missing please detail what the objective is and I'd be happy to assist. But to be honest you'd be better served detailing your project in another thread where everyone could assist.

ya the controller ap for the sprinkler has switches 1 -16 that show zone#on or zone#off but the switch capability only shows one actual switch.. and that goes on or off based on a program running.
the others are only accessible through attributes switch1 - switch16

so if you want your virtual swiotch to actuall turn on the zone you use a rule.. no problem.
but if you want the reverse say when a zone turns on either manually at the controller or when a program is running you would do another rule to set the switch.. and then you would be in an endless loop. That is why I did a push button and just show the attribute value.

Do you have the RGB or HSL values for the ~50 colors in the temp range you posted? I'm asking because I'd love to use this logic with zigbee bulbs. I'd love to do the same with humidity, but your link in the first post to humidity is a bad link. Can you point the way? TIA....

sorry i dont have it but there are conversion programs out there but you dont want to use rbg at least for this as there is a limit on the number of characters and this format is shorter.
i dont think i have colors for humidity

{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-20"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-19"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-18"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-17"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-16"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-15"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-14"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-13"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-12"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-11"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-10"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-9"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-8"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-7"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-6"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-5"
},
{
"template": "temperature",
"bgColor": "c8e3f9a6",
"state": "-4"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-3"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-2"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-1"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "0"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "1"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "2"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "3"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "4"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "5"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "6"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "7"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "8"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "9"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "10"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "11"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "12"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "13"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "14"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "15"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "16"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "17"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "18"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "19"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "20"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "21"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "22"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "23"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "24"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "25"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "26"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "27"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "28"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "29"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "30"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "31"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "32"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "33"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "34"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "35"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "36"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "37"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "38"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "39"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "40"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "41"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "42"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "43"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "44"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "45"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "46"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "47"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "48"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "49"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "50"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "51"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "52"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "53"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "54"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "55"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "56"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "57"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "58"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "59"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "60"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "61"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "62"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "63"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "64"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "65"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "66"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "67"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "68"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "69"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "70"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "71"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "72"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "73"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "74"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "75"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "76"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "77"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "78"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "79"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "80"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "81"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "82"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "83"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "84"
},
{
"template": "temperature",
"bgColor": "#a6",
"state": "85"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "86"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "87"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "88"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "89"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "90"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "91"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "92"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "93"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "94"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "95"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "96"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "97"
},
{
"template": "temperature",
"bgColor": "#bs2323a6",
"state": "98"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "99"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "100"
},
{
"template": "temperature",
"bgColor": "rgba(86,58,171,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "default"
},

I wrote an application for changing light colors based on temperature. For a groovy app a big lookup chart of temperatures isn't a good way to do it. I just set the color I want at a few temperatures then my code generates the in-between colors automatically.

1 Like

Cool. Open to sharing?

@TechMedX, do you have the RGB or HSL values for the colors-for-Fahrenheit in your OP?

Sure, you just need to delete the "parent" line (line 11) before you save it since you probably don't want the parent app I use.

There are some preset color schemes but you can modify them or add your own pretty easily.

https://raw.githubusercontent.com/pfmiller0/Hubitat/main/Weather%20Light.groovy

I'm interested to know how would you update the driver to include this tag?

Let's say this is what I have at the moment, where do you think I should add this data-value information?

def updateTileWithVals(vals) {
        sendEvent(name: "tile", value: """
        ${vals.currentTemp}""", isStateChange: true)
}

Thanks