Need help changing tile background color


(Betty) #1

Hello… I have a Z-wave lock for which I changed the tile background in the ‘unlocked’ state to red. It shows up red on the Things page for easy identification of an unlocked condition. Now I purchased a SmartSense Multi Sensor (set up for garage door) and want to accomplish the same thing. However, changing the ‘garage-open’ background only changes the font color, and no colored background ever appears.
Here is the line I changed in the Z-Wave Lock device handler (from the stock template):
attributeState “unlocked”, label:‘unlocked’, action:“lock.lock”, icon:“st.locks.lock.unlocked”, backgroundColor:"#fd0421", nextState:“locking”

Any ideas on how I can get the red background to appear for the garage-open state of the SmartSense Multi Sensor?. Thanks.


(cjcharles) #2

I believe this is due to the use of an icon. Try removing the icon and see if that allows the custom background colour.

EDIT: You can always add some text to say Unlocked instead of having the unlocked padlock icon


#3

Are you using ST’s stock DTH for the multisensor?


(Betty) #4

Yes I’m using the stock ‘SmartSense Multi Sensor’ template. I’ve been messing with this more this morning and just haven’t been able to get the background of the tile in the Things view to change.
I have tried adding canChangeIcon: true in the multiAttributeTile and then changing the state icons to different ones. I even tried eliminating the icon specification completely from the multiAttribute Tile.
It’s funny, switch and lock device handlers do show a colored rectangle in the Things view, I just haven’t found a way to make the multi sensor do the same.


#5

Ok, let’s try something?

If I understand correctly, you’re trying to show the state of the door (open or closed) in the Things view. If so, that’s driven by what’s in this line of code:

main(["status", "acceleration", "temperature"])

Try changing “status” in that line to “contact”. How does that look?

BTW, this code use to allow a user to select which attribute ST had for it’s main tile in much older versions of the mobile app. That no longer works except to allow you to tweak what the Things view shows as the main tile (which you can only do via code now).


(Betty) #6

Sorry, I really wasn’t clear about what I’m trying to accomplish here. In the things view, to the right of each device its status is shown in text. On some of my device types I can change the backgroundColor and the text will appear in a rectangle of that color. Example: in the generic Z-wave lock template, the ‘locked’ state box is green. I was able to code #dc243e in the unlocked state for the rectangle to be red when unlocked.
For the life of me I can’t get the SmartSense Multi Sensor device type to show a colored box. I’ve tried changing icons, even substituting in the multiAttributeTile which the Z-wave lock uses. No luck.


#7

Yup, that’s what I thought. Did you change the code like I mentioned above? If that worked, which it should, change the background color for “contact” to what you want and change the text to what you want. I did exactly that for the same device but for acceleration .


(Betty) #8

For the life of me I can’t see what I’m missing. I did as you said, changed the first main tile to “contact”. The icon on the left side of the Things view changed to a contact sensor picture, but the text on the right behaved just as with “status” as the main tile; the font takes the color coded as backgroundColor. I even changed the text to “Shut” instead of "Closed to make sure it was really displaying that line. Getting the surrounding box to show a specified color isn’t do-or-die, but I would like to get to the bottom of this.
By the way, johnconstantelo, all your input is very much appreciated.

edit:
Ok I found something. The tiles that display a colored rectangle around the status on the right side of the Things view (Z-wave lock or Z-wave switch for example) have actions associated with their tiles. I went into the multiAttributeTile for the SmartSense Multi Sensor and arbitrarily added actions as follows:
attributeState “garage-open”, label: ‘Open’, action: “status.open”, icon: “st.doors.garage.garage-open”, backgroundColor: "#dc243e"
attributeState “garage-closed”, label: ‘Closed’, action: “status.closed”, icon: “st.doors.garage.garage-closed”, backgroundColor: "#79b821"
Now the text is surrounded by a green box for closed, red for open. Kinda funky, but it works.

open

closed