Custom button card - change color based on sensor

Configuration Frontend
1

I have read documentation and didn’t understand enough of it to make it work, and I have experimented and read the forum, but I guess I’m having a senior moment or something…

User case: In my boat I have a downrigger, which is an electric winch with a metal weight of around 7 kilos in the end of a wire. I attach the line from a fishing rod to that with a clip. That means I can troll consistently at a set depth, instead of the line going much higher up in the water. I can also troll with two rods at the same time, like this:

image
image1536×2048 228 KB

When a fish bites, it rips the fishing line away from the clip, I stop the boat and fight the fish, and I get the weight up to attach it again afterwards.

There’s a display counter on the downrigger where I can see how deep I’m fishing, and I use a brake to stop it at the depth I want to fish and a button to raise it electrically.

On the Hass end I set the depth I troll on with buttons in Hass, and the sonar gives Hass the depth under the boat. So when the difference is less than 5 meters I know that I may hit bottom with the weight, and I pull up. This is what it looks like on the phone that I use, and that I’m going to attach to the boat with a RAM mount:

image
image1571×613 13.7 KB

But I would love for two things:

  1. To have the display of meters (here showing zero) go red when the difference is less than 5 meters for a more visible, visual cue.

  2. To have the buttons for 0-30 change color based on the sensor sensor.dypriggdybde (set depth of downrigger) change color, perhaps invert, based on what’s set. So when 10 meters is set, that button should change color.

This is the code for the 5 meter button:

show_name: true
show_icon: false
type: custom:button-card
styles:
  card:
    - height: 20px
    - border-style: none
    - background-color: |
        [[[ if (sensor.dypriggdybde == 5);
            else return variables.color_background; ]]
tap_action:
  action: perform-action
  data:
    topic: madmax/dypriggdybde
    payload: '5'
  perform_action: mqtt.publish
hold_action:
  action: none
icon: ''
icon_height: 40px
name: '5'

I just don’t get where to get the color_background from. Or even if the code is remotely correct.

2

Hi, I didn’t understand everything you wrote, but I can point out obvious errors in your card.

  1. You’re missing a closing bracket “]”
  2. To use a variable, you need to “declare” it
  3. sensor.dypriggdybde == 5 is wrong; you can read the state of your sensor like this: states['sensor.dypriggdybde']?.state

So, I believe you want to store in the color_background variable the color to be set when the sensor value is different than the one for the given button. You can just name a specific color or use some css function to alter the background color used by HA. For example, a fixed color:

variables:
  color_background: orange

The state of your sensor can be stored in another variable, say: value, and then read as variables.value. Below is a working example of your button (FYI: I use the hsl function to make the default card background color darker by 4).

show_name: true
show_icon: false
type: custom:button-card
variables:
  color_background: hsl(from var(--card-background-color) h s calc(l - 4))
  value: "[[[ return states['sensor.dypriggdybde']?.state; ]]]"
styles:
  card:
    - height: 20px
    - border-style: none
    - background-color: |
        [[[ if (variables.value != 5) return variables.color_background; ]]]
tap_action:
  action: perform-action
  data:
    topic: madmax/dypriggdybde
    payload: '5'
  perform_action: mqtt.publish
hold_action:
  action: none
icon: ''
icon_height: 40px
name: '5'
3

@slimak Thank you for answering! Honestly I don’t need it to be variables, if it’s possible to just use CSS instead that would be perfect for me. I just tried to adapt the code I found on the forum that I thought was closest to my needs, I may have been totally off base. That wouldn’t be the first time… :joy:

So I tried to copy your code into the button, but I didn’t know where to put the first variable, maybe that’s why it doesn’t do anything yet? Sorry if I’m dense, this is a bit above my level, it seems.

Never mind, I actually got it working, like this, with your code:

styles:
  card:
    - height: 20px
    - border-style: none
    - background-color: |
        [[[ if (variables.value == 5) return variables.color_background; ]]]

Thank you very much for your help!

I managed to get text working as well, so it’s white when the background is red:

styles:
  card:
    - height: 20px
    - border-style: none
    - background-color: |
        [[[ if (variables.value == 5) return variables.color_background; ]]]
  name:
    - color: |
        [[[ if (variables.value == 5) return variables.color_text; ]]]