Changing attribute text color based on contact sensors status

📝 Dashboards Hubitat Dashboard
1

Hello wonderful Hubitat community! I have been sprawling the community posts looking for a simple solution for this and either I'm missing something extremely basic or it's a lot more complicated than I think. I'd appreciate any help or just pointing me in the right direction!

Basically I have contact sensors for every door and window on a dashboard and I want to add the attribute "lastCheckin" to the bottom of the tile as I had a few sensors that rarely get opened stop working months ago and I didn't notice. Now I don't see an easy way to do that to the contact sensor tile so instead I created an attribute tile for the sensor with the lastCheckin data, removed the background, borders, customized the font to match the contact sensor formatting, and then put that tile over the contact sensor tile where I wanted the text to be. This works and updates as expected and with a little CSS magic it looks like it's natively part of the tile.

The issue I'm facing though that I'm hoping someone can point me in the right direction on is when the state of the contact sensor changes from closed to open, that contact tile changes from green to red which changes the text on the contact tile to white, but since the attribute tile doesn't have a state the text stays black. This is obviously an entirely cosmetic thing, but I was hoping to keep the text color in sync with whatever the contact sensor is set to. Does anyone know how to tie an attribute's tile text color to another tile's state or a way to pass the lastCheckin data and contact sensor state to the attribute tile?

Any help would be great! Thanks.

hubitat

2

Welcome to the community!

By default, all text is white for everything.

You must have color set to black in the template settings for color under contact sensor closed. You must also have black text set in templates for the attribute template.

If you want open to also have black text (as in you want black text), use the template editor and change the color of open to be black as well, just like closed is apparently set to black now.

Edit: I will add, those settings done in the dashboard settings Templates editor get translated into the JSON layout under the "customColors" section near the top. You can also edit the JSON file directly, and change the iconColor with RGB.

This is black text on contact open:

{
  "template": "contact",
  "bgColor": "",
  "iconColor": "rgb(0,0,0)",
  "state": "open"
}

This is white text on contact open:

{
  "template": "contact",
  "bgColor": "",
  "iconColor": "rgb(255,255,255)",
  "state": "open"
}

Generally it is easier to use the color picker in the dashboard template editor, though, unless you want to do something like change colors of a an attribute tile based on its value, which can only be done in the JSON file.

3

Sorry maybe I wasn't clear, I'm specifically asking how to change the attribute tile's text color whenever the contact sensor tile changes. In the screen shot I provided the top "bathroom upstairs" is in a closed state, green with black text, and there is an attribute tile on top of that tile with no background color with black text, the second row is the same tile once the "bathroom upstairs" is in an open state and you can see the attribute tile that is on top of that tile is still black. I'm looking for a solution to tie the attribute tile to the contact sensor tile it is on top of that would change the text color dependent on the contact sensor state.

Two tiles for the single "tile" you see above:
{
"rowSpan": 3,
"template": "contact",
"col": 3,
"colSpan": 2,
"id": 34,
"row": 1,
"device": "623"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 3,
"colSpan": 2,
"id": 35,
"row": 3,
"device": "623",
"templateExtra": "lastCheckin"
},

As you can see above there are two tiles to accomplish the single looking tile. The contact sensor template has the following which changes upon the state change:
{
"template": "contact",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "contact",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},

I want to accomplish that for the attribute tile that sits on top of the contact sensor, but since there is no state passed to the attribute for "lastCheckin" I can't find a way to change the text color depending on the state of the contact sensor.

Is that more clear to what I'm trying to accomplish? Here is a screen shot of the two tiles in case that does make sense where I manually moved them away from each other and changed the text to white in the CSS just so you can still see it, as you can see the attribute tile for lastCheckin the name and background is completely removed, but I want the text to change with the contact sensor state.

image

4

Ok, so you want white text for open, and black text for closed, and then have the attribute tile text match that based on open or closed of the contact sensor.

The original post seems to say you want everything to "match", be it black or white. If you really want to use two text colors for open and close, that decision is causing the issue with the attribute tile text color.

I can't think of any way to do that, personally, since those tiles are not related to each other like a parent child relationship. Not to say it can't be done, since maybe someone else has an idea about that, who is more of a wiz with CSS.

I would just make the text match between both contact states, but apparently you really want them to be different. If you were not using a timestamp as the attribute value, it could be done by attribute value, but your value as a date string is not predictable to be used as a known value that gets a certain color.

5

So you want to just "notice" that the date is outside of a timeframe? I would just make an automation to check the date. Whatever logic you will use yourself by looking at it to determine if there is an issue with that date stamp, just make that logic be an automation, so there is no reason to have that date stamp on there, really. Set a notification alert.

6

Correct, I want them to be the same color depending on the state change of the contact sensor, but not seeing an easy way to accomplish this. The end goal like I mentioned is to be able to see the lastCheckin variable of that contact sensor on the contact sensor tile. That is one of the fields available under the device details of the contact sensor:

image

Unless there is a way to add that attribute to the contact sensor tile itself so I wouldn't have to have them as two separate tiles?

My other option is to just create a list of all the devices and have it populate with the lastCheckin attribute for each contact sensor, but given I have all of this displayed on an iPad I was trying to optimize the space as much as possible without having to move the view at any time. Thanks though, maybe someone else has some other ideas or some fancy CSS ideas I could try.

7

Not a bad idea with a notification alert. I do have about 20 of these sensors, would it be pretty simple to create a notification alert for all devices if the date gets greater than say a week to send a notification that X devices hasn't checked in since Y date? Only reason I was going the dashboard route is it seemed like a neat way to have it visually all there, but in reality I don't think that's a absolutely must.