Color changing temp tiles

[TechMedX]

I wrote out, what I think is, some pretty cool code that changes the color of temp tiles on dashboards, depending on the current temp value. This is JSON template coding. As it stands now each numeric value needs to be coded separately (75.0, 75.1, 75.2, and so on, are all separate entries).

The problem - the full finished code is way too big for cloud dash character limit (Fahrenheit 0-120 = 177,744, Celsius slightly smaller). We cannot add it to smartly, or we risk ruining peoples cloud dash access. That is too big of a problem to allow 'accidentally'. For now it's remains a manually added 'unsupported' advanced technique (PM me if interested).

Possible solutions? - I'm just spitballing here. I'm not a dev (just good at c/p ) Excuse me if these are dumb options.

Is there anyway this could be added as a "back-end" option that is not effected by character limit?

Can JSON templates somehow be modified to work as "ranges" and not exact digits (0-5 = rgba x,x,x,x and that would apply for all digits between 0-5)?

Can the cloud limit be increased?

Conclusion - If none of this is possible, c'est la vie. I can chunk the code up and use only 15-20 degrees at a time/have separate dashes for mobile/cloud access. I just wanted to put it out there before retiring it as cloud dash unachievable.

Happy to share the code if any of this would be possible.

I have similar code for humidity/battery see post of details. However we can add those as options via smartly since they are not as massive. I started on Lux/Wind then decide against it, since I knew I would hit the same problem as temps. I'd be happy to do them all, if they could be used.

Thanks for taking the time to read/consider this, even long term. I know everyone is busy.

Coding only goes 1 decimal (for now), which is why the 1st tile does not work. Example.

Full color chart for Fahrenheit

[Evilborg]

Nice!!! I have wanted to do this but never had the time...

What about using css instead ? I wonder if that is possible. If so then you can use the @import and the end user can add that to the file management for the hub.

[TechMedX]

@Evilborg

but never had the time...

I figured out this neat trick to use Excels auto-fill feature for all my values. Then used a macro I found to export everything back to TXT with none of the excel added BS. A few find/replace commands, and the result was a few hundred lines of code in a couple of seconds. Bonus!!

@Evilborg

If so then you can use the @import and the end user can add that to the file management for the hub.

Go on.... what is this @import you speak of?

I think it needs to be JSON to allow the code to change via "templates" CSS would be tile driven, but I could be wrong (hopefully ) . Totally open to trying any options. Can this @import not be used in JSON?

Alas file management would not be accessible via cloud, so would this do us any good? It works fine locally, and looks fantastic I must say lol.

[Evilborg]

https://www.w3schools.com/cssref/pr_import_rule.asp

It should work in the cloud because alll its doing to something like what a VPN would do

[Angus_M]

Cannot just use image hue in CSS to change the colour? I had some limited success with that for my dashboard for lamps but in the end decided to switch out images instead to show the different colours. Same can be done for other sensors. But that's the beauty of a fully flexible html based dashboard

[TechMedX]

@Angus_M

Cannot just use image hue in CSS to change the colour?

Not if you want the colors to dynamically change as the temp goes up/down.

@Evilborg

alll its doing to something like what a VPN would do

However it is just importing into the CSS which would still increase the CSS size and push it over the limit, good idea

[Angus_M]

@TechMedX

colors to dynamically change

Ah I see. I thought the dashboard would receive an input about that like you get from the eventsocket. That's what I'm using to be able to achieve this on a custom dashboard.

[spelcheck]

@Evilborg

What about using css instead ? I wonder if that is possible. If so then you can use the @import and the end user can add that to the file management for the hub.

Sadly as tile values (and statuses) change, instead of HE changing the tile div classes in real time, HE dashboard updates inline CSS for the tile div.. background color & font color. It's archaic and infuriating as it would be low effort to make it right on their end.

That being said, if HE dashboard were built by a web developer, it would be using css classes at the tile div level and we'd be using CSS which would be minimal character count overhead and at that point, most people would be staying under that character limit anyways.

To clarify about bloat, the reason this unsupported feature is soo character-heavy is because it requires a full-blown colorTemplate entry for each value, regardless of whether it's the same color in ranges. Each value needs a minimum of something like 130 characters as colorTemplates in JSON. In CSS, it could be like 15-20 characters per color and ranges would be consolidated. This is why it would be a non-issue if we were class-based. If somebody wanted to go absolutely HAM on their CSS though, they would definitely be using your @import method. I'm looking at you @TechMedX

There is also a (possibly better) option of someone coming up with a JS solution to handle temperature changing tiles, which because of @markus JSinject method, it's a possibility.

[spelcheck]

@Evilborg

It should work in the cloud because alll its doing to something like what a VPN would do

A note about this, @import importing is done within the browser so it's not like a VPN unfortunately. If your browser can't access that @import url directly as it's written, it will not @import. For that reason, when accessing via cloud @import will only work if you are using a remote url for your @import.

[spelcheck]

@TechMedX

Conclusion - If none of this is possible, c'est la vie. I can chunk the code up and use only 15-20 degrees at a time/have separate dashes for mobile/cloud access. I just wanted to put it out there before retiring it as cloud dash unachievable.

It's not achievable via cloud unless cloud JSON character limit is increased by HE.

[Evilborg]

bummer

[TechMedX]

@spelcheck

It's not achievable via cloud unless cloud JSON character limit is increased by HE.

This guy is always raining on my parades.

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

[Kahn]

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;}

[kahn-hubitat]

tag as i posted in wrong account

[TechMedX]

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).

[kahn-hubitat]

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?

[TechMedX]

@kahn-hubitat

need an option to set temps to whole numbers

See this post

@TechMedX

Sensor Reading Note - the coding for this is lengthy, and could only be done out to the tenth of a degree. If your sensors read to the hundredth it will need to be adjusted to work with this mod (see below). We recommend using @Cobra's Average All . This app will allow you to easily create a virtual sensor using only 1 decimal.

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

[kahn-hubitat]

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;
}

[TechMedX]

@kahn-hubitat

can i chANGE THE color based on the value in the css

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;
}

[kahn-hubitat]

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