Falscher Syntax, oder Bug in Bubble Card

Dashboard/Cards/Frontend
1

Grüß euch,

ich möchte gerne bei bestimmten Status eines Temperatursensor der in einer BubbleCard eingebunden ist diese färben.

Das heißt die BubbleCard soll sich färben (Hintergrund, Icon usw)

Folgendermaßen tue ich das am Beispiel des Bubble Background:

ha-card {
/* SLANG - Farbe des Buttons */
  --bubble-main-background-color: ${state > '30' ? 'red' : state <= '25' ? 'green' : 'yellow'} !important;
}

Das habe ich bislang mit innenraumtemperaturen gemacht. Das funktioniert (dachte ich) gut.

Jetzt habe ich aber einen Außentemperatursensor ebenfalls eingebunden und dieser zeigt aktuell 5,7°C.

Der Button ist rot.

Entweder ich verstehe den Syntax nicht richtig, mache daher etwas falsch, oder es handelt sich um einen Bug in der BubbleCard.

Ich übersetze mal den Syntax wie ich ihn verstehe:

${state > '30' ? 'red' : state <= '25' ? 'green' : 'yellow'}

Entspricht:

Ist der Status Größer 30 ? dann Farbe Rot : ist der Status kleiner oder Gleich 25? dann Farbe Grün : Alles andere soll Gelb sein.

Das heißt Temperaturen zwischen 26 und 30 °C sind gelb.

Leider funktioniert das so nicht. ich habe mal mit den Entwicklertools gespielt und die Temperaturen von Hand gesetzt. Alle Temperaturen unter 10 °C werden rot markiert. Alle Temperaturen über 80°C werden rot markiert.

Ich verstehs nicht…

Das ist der vollständige Code der Bubble:

type: custom:bubble-card
card_type: button
entity: sensor.gw1100a_outdoor_temperature
scrolling_effect: false
show_icon: true
show_state: false
name: Außentemperatur
tap_action:
  action: more-info
double_tap_action:
  action: none
hold_action:
  action: none
sub_button:
  - entity: sensor.gw1100a_outdoor_temperature
    show_attribute: false
    show_state: true
    show_icon: true
    state_background: false
    tap_action:
      action: none
  - entity: sensor.gw1100a_humidity
    state_background: false
    show_background: true
    show_state: true
button_type: state
styles: |-
  ha-card {
  /* SLANG - Farbe des Buttons */
    --bubble-main-background-color: ${state > '30' ? '#472422' : state <= '25' ? '#263928' : '#a7771b'} !important;
  /* SLANG - Farbe des Icon Kreises */
    --bubble-secondary-background-color: ${state > '30' ? '#f3453c' : state <= '25' ? '#4eaf58' : '#ffbb00'} !important;
  }

  .bubble-sub-button {
    text-shadow: none;
    min-width: 90px;
    background-color: ${state > '30' ? '#f3453c' : state <= '25' ? '#4eaf58' : '#ffbb00'} !important;
    border: none;
  }

  .bubble-sub-button-1 {
    color: ${state > '30' ? '#e1e1e1' : state <= '25' ? '#263928' : '#352906'} !important;
    background-color: ${state > '30' ? '#f3453c' : state <= '25' ? '#4eaf58' : '#ffbb00'} !important;
    border: 1px solid #e1e1e1;
  }

  .bubble-sub-button-2 {
    color: #e1e1e1;
    background-color: #3b65a8 !important;
    border: 1px solid #e1e1e1;
  }
  .bubble-icon {
    color: ${state > '30' ? '#e1e1e1' : state <= '25' ? '#263928' : '#352906'} !important;
    opacity: 1 !important;
  }
card_layout: normal
icon: mdi:home-thermometer

So sieht das derzeit aus:

Bildschirmfoto vom 2025-10-02 07-56-46

2

Hast du das Modul für bubble-card schon mal getestet?

1 „Gefällt mir“
3

Ich habe es bei mir so gelöst. Vielleicht klappt es so auch bei dir. Viel Erfolg!

.bubble-button-background {
  opacity: 1 !important;
  background-color: ${
    hass.states['sensor.wohnzimmer_temperatur'].state < -10 ? 'rgba(200, 0, 175, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < -5 ? 'rgba(120, 0, 170, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 0 ? 'rgba(0, 0, 200, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 5 ? 'rgba(0, 100, 250, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 10 ? 'rgba(0, 150, 210, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 15 ? 'rgba(0, 225, 225, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 20 ? 'rgba(0, 1700, 0, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 25 ? 'rgba(0, 225, 0, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 30 ? 'rgba(235, 210, 0, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 35 ? 'rgba(255, 160, 0, 0.9)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 40 ? 'rgba(255, 0, 0, 0.7)' :
    'rgba(12, 120, 50, 1)' /* Fallback-Hintergrund */
  } !important;
}
.bubble-icon {
  color: ${
    hass.states['sensor.wohnzimmer_temperatur'].state < -10 ? 'rgba(200, 0, 175, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < -5 ? 'rgba(120, 0, 170, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 0 ? 'rgba(0, 0, 200, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 5 ? 'rgba(0, 100, 250, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 10 ? 'rgba(0, 150, 210,1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 15 ? 'rgba(0, 225, 225, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 20 ? 'rgba(0, 200, 0, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 25 ? 'rgba(0, 255, 0, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 30 ? 'rgba(255, 230, 0, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 35 ? 'rgba(255, 160, 0, 1)' :
    hass.states['sensor.wohnzimmer_temperatur'].state < 40 ? 'rgba(255, 0, 0, 1)' :
    'rgba(12, 120, 50, 1)' /* Fallback-Farbe */
  } !important;
}
1 „Gefällt mir“
4

Ich vermute mal (kurz überflogen), dass es am Vergleich als String statt Zahl liegt. (‘25’ statt 25). (Wie gesagt: Vermutung)

1 „Gefällt mir“
5

Hi… Ich glaube das ist gar nicht nötig das so expliziet einzutragen um welche Entität es geht, solange es sich um die ursprünglich eingetragen handelt. Trotzdem vielen Dank!

mein Fehler liegt aber glaube tatsächlich hier:

Jup… genau das isses :slight_smile:

Wie völlig blöd von mir. Und das hab ich über all so gemacht, bei allen eigenen Modulen und stand-alone Styles… arghhh…

VIELEN DANK fürs Augen öffnen! Dann hab ichja nu ordentlich was zu tun das überall zu korrigieren.

Vielen Dank auch Dir!. Das schaue ich mir auf jeden Fall an. Man muss ja nicht alles neu erfinden.

1 „Gefällt mir“