Background colors not working on value tiles fix

Devices & Integrations
1

Hi there,

I have seen a couple posts wondering why the background colors aren’t working. Particularly in thermostat threads. Some of this lead me to believe it was just us with iOS that couldn’t see them. I’ve gotten a work around for myself but now I can’t find those threads so I figured I’d posit it here for others to find.

I only use iOS so this may only be related to iOS. but it seems if there is a value tile and you specify backgroundColor:"#1e9cbb" it does not work at all, however it always seems to work if you give it a range, so try that.

i.e. backgroundColors: [
[value: 0, color: “#d2ebf1”],
[value: 40, color: “#1e9cbb”],
[value: 70, color: “#34a5c1”],
[value: 96, color: “#0f4e5d”]
]

you can make the colors similar are probably even the same. I guess it wants to look up the value before selecting a color.

Sorry if this has been posted or for those of you who already knew that, but it took me forever to figure out.

I used this on @Dianoga Nest app which works great by the way :slight_smile: , but I was using buttons on iOS and could never remember which was was heat and cool, changing the tiles starting on line 137 worked like magic. below is the change in code I used for my nest.

valueTile(“heatingSetpoint”, “device.heatingSetpoint”) {
state “default”, label:’${currentValue}°’, unit:“Heat”, backgroundColors: [
[value: 0, color: “#eabdbd”],
[value: 40, color: “#e4a7a7”],
[value: 70, color: “#c23838”],
[value: 96, color: “#bc2323”]
]
}

	valueTile("coolingSetpoint", "device.coolingSetpoint") {
		state "default", label:'${currentValue}°', unit:"Cool", backgroundColors: [
			[value: 0, color: "#d2ebf1"],
			[value: 40, color: "#1e9cbb"],
			[value: 70, color: "#34a5c1"],
			[value: 96, color: "#0f4e5d"]
		]
	}

-Ders

2

valueTile(“coolingSetpoint”, “device.coolingSetpoint”, inactiveLabel: false, canChangeIcon: true) {
state “cool”, label:’${currentValue}°\nCool’, backgroundColors: [
[value: 32, color: “#153591”],
[value: 48, color: “#1e9cbb”],
[value: 60, color: “#90d2a7”],
[value: 70, color: “#44b621”],
[value: 81, color: “#f1d801”],
[value: 90, color: “#d04e00”],
[value: 96, color: “#bc2323”]
], icon:“st.appliances.appliances8”
}

Here’s the code I use that does work… It would pretty much have to have something to do with “inactiveLabel: false, canChangeIcon: true” I’m not sure which one it was, but I want to say it was the canChangeIcon: true that did it for me. Been a while since I messed with that code, so I’m not 100% on that.

Hope that helps!

2 Likes
3

thanks, i’ll have to do some testing on these values, would have never thought to check these!