Button with state of other entity (colour)

Configuration Frontend
1

I want to have a toggle switch that shows the current power usage and has a different colour when the device is on or off.

I can do one or the other. How can I do both without custom cards?

This is how my card looks now, showing power usage:

afbeelding

You can see the current usage but the icon is not yellow. I want a yellow icon when the machine is on and a blue icon when it’s off. Tapping the button should toggle the switch and the grey text should show the current usage.

This is the yaml:

show_name: true
show_icon: true
type: button
tap_action:
  action: call-service
  service: switch.toggle
  target:
    entity_id: switch.fritz_dect_200_koffiemachine
entity: sensor.fritz_dect_200_koffiemachine_power_consumption
name: 'Koffiemachine '
icon: mdi:coffee-maker
show_state: true
2

Maybe this should help you:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - entity: sensor.power_consume
        type: entity

  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.light_name
    icon: mdi:alarm-light

Looks like this:

LIGHT OFF:

image
image924×692 14.4 KB

LIGHT ON:

image
image920×692 14.9 KB

You also need this: GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Group multiple cards into a single sleek card.

3

So,

  1. The card displays a sensor.
  2. Tapping → toggling some switch.
  3. You need to colorize the card’s icon dependently on this switch.

Since

  • the icon is for entity which is not a switch,
  • and you need to use a standard “button” card,

then your only possible option is card-mod:

  - type: button
    entity: sensor.xxx
    ...
    card_mod:
      style: |
        {% if is_state('switch.xxx','on') -%}
        ha-state-icon {
          color: var(--state-active-color) !important;
        } 
        {%- endif %}

Suggest to ask all card-mod related questions in the huge card-mod thread.

Or consider using other cards/solutions (like one posted above).

1 Like
4

Thank you both for the tips. I had hoped it would be possible without extra plugins, the first option (stack in cards) has no gui configuration. The latter one is also without a UI but simpler to add to an existing button.

5

Most of customization is available in yaml only.