Color changing temp tiles

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 :laughing:) 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


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.


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!!

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

1 Like

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

1 Like

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 :stuck_out_tongue:

1 Like

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

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

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.

1 Like

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 :sweat_smile:

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. :trophy:

1 Like

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.

1 Like

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





This guy is always raining on my parades.

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