Flashing tile when switch ON

📝 Dashboards Hubitat Dashboard
1

Hi, I am trying to program one of my switches in the standard Hubitat Dashboard to flash RED when the state is on and to be solid GREEN when the state is off. On this occasion, the tile ID is 335, and what I have done below is my attempt and is loaded in the CSS on the advanced tab of Dashboard. This does nothing, so I am definitely doing something wrong.

@keyframes flashRed {
0% { background-color: rgb(242,0,0); }
50% { background-color: rgb(255,80,80); }
100% { background-color: rgb(242,0,0); }
}

/* Tile 335 - ON = Flashing Red */
.tile[data-id="335"].switch.on {
animation: flashRed 1s infinite !important;
color: white !important;
}

/* Tile 335 - OFF = Solid Green */
.tile[data-id="335"].switch.off {
background-color: rgb(7,255,7) !important;
color: rgb(17,17,17) !important;
animation: none !important;
}

2

That will just change the tile-primary box inside the tile, but I did get it working with this:

#tile-335 .tile-primary.on {transform-origin: center; animation-name: flashRed; animation: flashRed 1s infinite ease-in-out alternate; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear;} @keyframes flashRed {from { background-color: rgb(54, 51, 51); }to {background-color: rgb(242,0,0); }}

Though you may want to use animations instead, like pulse:

#tile-335 .tile-primary.on {transform-origin: center; animation-name: pulse; animation: pulse 1s infinite ease-in-out alternate; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear;} @keyframes pulse {from { transform: scale(0.8); }to {transform: scale(1.0); }}

Or use any of these other animations (the css for all of the examples is in the editor on the page), and they can be adapted for the dashboard like the ones above.

3

User 257, thanks for your prompt reply and I hugely appreciate your help.

The Pulse for osme reason didnt work but the FLash does. is there a way of making the FLash the same size as the main tile?

Again thanks.

Nick.

4

No, the main tile background is set with a style, and it is out of reach to change with CSS.

5

Use the :has pseudo class to access the parent of the tile-primary.on element

6

Kevin, this is double-dutch to me. Can you explain? Again, thanks for the effort.

7

Sorry, I talk to myself too much and thought you were in the room on a similar topic before.

https://community.hubitat.com/t/custom-colors-for-specific-device-tile/155140/7

Most browsers today support the pseudo class :has which lets you define a selector based on relative elements. In the example I linked above, I was needing to change the background tile of specific tiles--not all of the devices using the same template which is what the JSON customization "customColors" option does for us.

So in your specific need, change the selector to something like:

#tile-335:has(.tile-primary.on)  {
    transform-origin: center;
    animation-name: pulse;
    animation: pulse 1s infinite ease-in-out alternate;
    animation-duration:  1000ms; animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes pulse {from { transform: scale(0.8); }to {transform: scale(1.0); }}

Note: I assume from your previous example the the tile ID is 335

1 Like
8

Got it, mate, and thanks. However, don't feel special about talking to yourself - I am pretty good at it.

1 Like
9

It’s when I argue with myself and lose the argument that gets frustrating :-/

1 Like