Bubble Card 3 Hintergrundfarbe mit Bedingungen ändern

Home Assistant
1

Hallo Zusammen,

ich versuche schon eine Weile die Hintergrundfarbe der Bubble Card mit dem Zustand einer Entität anzupassen.

in dem Fall geht es um die Sicherheit der Garage.

        {% if is_state('binary_sensor.garagensicherheit', 'on') %}
          green
        {% else %}
          red
        {% endif %}

Ich habe schon überall gesucht, aber das was ich gefunden habe konnte ich noch nicht verstehen und somit nicht umsetzten.

Hat eventuell jemand ein Beispiel?

Viele Grüße
Ingo

2

Hast du HACS und damit card-mod installiert?

3

Jap

4

warum nutzt du nicht die Module.
passend wäre hier das Modul

image
image1022×706 36 KB

image
image500×826 26.8 KB

1 „Gefällt mir“
5

Hi, hier mal ein zwei Beispiele. Zuerst deine Frage, bei der Bubble-Card müssen direkt die Klassen angesprochen werden, dann klappt die Einfärbung bei on/off über styles der Card direkt, also ohne card_mod.

image

Wichtig ist der letzte Teil im ersten Beispielcode zu .bubble-button-background

background-color: ${state == 'on' ? 'red' : ''} !important;

wenn du einen Sensor hast, der Werte ausgibt könntest du auch so arbeiten:

background-color: ${state > '55' ? 'red' : ''} !important;

type: custom:bubble-card
card_type: button
sub_button: []
button_type: state
entity: fan.starkvind_luftreiniger_ventilator
card_layout: normal
show_icon: true
show_name: true
show_state: true
tap_action:
  action: toggle
hold_action:
  action: more-info
button_action: {}
icon: m3of:air
name: Luftreiniger
styles: |
  * {  
    font-size: 12px !important;
  }
  ha-card {
    --bubble-icon-background-color: rgba(55,55,55,0.2) !important;
    --bubble-icon-color: gray !important;
  }
  .bubble-button-card-container {
    background: rgba(22,22,22,0) !important;
    border-radius: 10px;
  }
  .bubble-button-background {
    background-color: ${state == 'on' ? 'red' : ''} !important;
    border-radius: 10px;
  }

Hier mal meine Version von meinem Hausspeicher im Energiedashboard, da ist der Aufbau etwas komplizierter.

image

type: custom:bubble-card
name: Hausspeicher
card_type: button
button_type: state
entity: sensor.victron_system_battery_soc
tap_action:
  action: navigate
  navigation_path: "#batterie"
modules:
  - progress_bar
progress_bar:
  progress_color: red
  min_value: 0
  max_value: 100
  conditional_colors:
    condition_color_1: orange
    condition_color_2: green
    condition_1:
      - condition: numeric_state
        entity_id: sensor.victron_system_battery_soc
        below: 55
    condition_2:
      - condition: numeric_state
        entity_id: sensor.victron_system_battery_soc
        above: 55
sub_button:
  - entity: sensor.batterie_vr_endladezeit
    show_icon: false
    show_name: false
    show_state: true
    state_background: false
    show_background: false
  - entity: sensor.victron_system_battery_power
    show_state: true
    show_icon: false
    state_background: false
    show_background: false
    name: ""
    show_name: true
  - entity: sensor.victron_system_battery_voltage
    show_icon: false
    show_name: false
    show_state: true
    state_background: false
    show_background: false
styles: |
  .bubble-button-card-container {
    background: linear-gradient(to right, darkorange 15%, orange 25%, yellow 50%, green 100%);
    clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);
    border-radius: 10px !important;   
    border-radius: 3px !important;    
  }
  .bubble-name-container { 
    color: #3a3a3a !important;
  }
  .bubble-sub-button-name-container { 
    color: #3a3a3a !important;
  }
  .bubble-action-enabled { 
    border-radius: 3px !important;
    margin: 0 5px 0 0 !important;
  }
  .bubble-button-background { 
    /* background: linear-gradient(to right, var(--orange-color), #cd101000); */
  }
  .bubble-state {
    font-size: 14px;
    font-weight: bold;
    opacity: 1;
  }
  .bubble-icon {
    color: #3a3a3a !important;
  }
  .type-custom-bubble-card{
    margin: 0px 16px 0px 16px !important;
  }
6

Der Code funktioniert bei mir mit der Mushroom Template Card

{% ifis_state(‚binary_sensor.garagensicherheit‘, ‚on‘) %}
green
{% else %}
red
{% endif %}

7

Hallo @jayjojayson,
sorry für die späte Antwort…

Ich wollte nur kur ein Feedback geben.
Dein Beispiel ist sehr aufschlussreich und hat mir sehr weiter geholfen.

Vielen Dank und viele Grüße
Ingo

1 „Gefällt mir“