Dashboard - changing tile background color based on value (temperature, humidity, etc)

Seems this is not possible but it would be great if hubitat could change certain tile background colours.. I know they can be changed in css individually (rather than templates) but I hoped to change tile colours based on conditions... However I am surprised to not see this being possible.

I want certain tiles to change colour from blue to yellow to orange dependent on a sensor value.

I want another attribute tile to change from one colour to a other dependent on the string variable value that is displayed on it.

1 Like

That option is on the smartly Roadmap.

For now if you wanted a background color, find a png of the color and set it as the background "image", it would not change, but it'll work.

https://pngimage.net/wp-content/uploads/2018/06/purple-png.png

image

1 Like

It certainly is! The mythical 'developer' skin where we have 100% full control of everything on the dash. :nerd_face:

There is a method you could use now though if you wanted to have the color change based on attribute value, but you can only have one palette based on value, and by default it would affect every attribute tile, regardless of what the attribute actually is. This means if you have an attribute tile that shows 20 kw for energy and another attribute tile that has 20 celsius for temperature, they'd both be blue or whatever color you chose for that specific numeric value.

In this case, let's say you had 5 attribute tiles for temperature and 10 for other types of numeric attributes. For the temperature attribute tiles, you'd like it to show red for 90+, orange for 70-89, yellow for 60-69, light blue for 45-59 and blue for 20-44. You can do this, but for each of the non-temperature attribute tiles, you'd have to specifically force a background color for them so they aren't showing red for 90+ kilowatts on an energy-based attribute tile, or yellow for 60% humidity.

So, if you have one single type of attribute tile you'd like to use color-by-value then it's possible. This method cannot be used for multiple ranges of color-by-value.

3 Likes

Yes at the moment I have a few tiles that show if my air conditioning outlets are blowing colder or warmer than the room temp. If they are blowing colder than room temp the attribute is set as "Cooling", if similar to room temp rhe "Ambient", if hotter than room temp then "Heating" and if off/no flow then assigned "off". So the strings are stored in a variable and then a connector used to display on a tile.. Was hoping if they are string value "heating" then make the tile orange, blue for cooling etc.. Each tile is its own zone so independent, but the rules of colouring are the same.

I was hoping to have another lot of tiles coloured based on if the room is below, above, or near the target temperature. So comparing a temperature sensor in the room to the hvac value set for that room.

So yes. All tiles labelled "cooling" would be blue.

The temperature comparison tile colour could also be string based or numerical, I'd compare room temp to hvac temp and the assign a variable a value depending on if it's above, below or close to temp.

The paragraph above I'm good with... The colour change not so.

I'll look more at smartly for this. I was happy with my dashboard otherwise using css to hide or change things