Bubble-Card - Mehrere Hintergrundfarben darstellen

Automationen
1

Hallo,
ich bin dabei mir eine Anzeige zu basteln, bei der ich farbliche Informationen bekomme. Es handelt sich um einen Luftentfeuchter der bestimmte Angaben zum HA sendet, wenn der Wassertank voll ist usw.

Die gesendeten Werte sind “0-4-8-12”. Ich habe es schon hinbekommen, das wenn die “12” gesendet wird, der Button rot wird.

type: custom:bubble-card
card_type: button
entity: sensor.wassertank_ist_voll
show_state: true
force_icon: false
show_icon: true
button_type: state
show_last_changed: true
visibility:
  - condition: numeric_state
    entity: sensor.wassertank_ist_voll
    above: 0
styles: |-
  .bubble-button-background {
      opacity: 1 !important;
      background-color: ${state === '12' ? 'red' : 'green'} !important;
    }
name: Wassertank
icon: mdi:propane-tank-outline

Ich möchte aber den anderen Werten ebenfalls eine Farbe darstellen und anzeigen lassen. Wie geht das?! Ich schaffe das nicht…

Kann mir einer vvon Euch beibringen wie das funktioniert? Dazu reicht es beim mir noch nicht ganz… :innocent:

Danke und Gruß!

2

Einfach die Stati mit der Farbe in einer Kette hintereinander schreiben und per : trennen

background-color: ${state === '0' ? 'blue' : state === '4' ? 'yellow' : state === '8' ? 'orange' : state === '12' ? 'red' : 'green'} !important;

1 „Gefällt mir“
3

Hallo @Alex,
ich habe das mal so versucht:

.bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === '4' ? 'yellow' : ''} !important;
  }
.bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === '8' ? 'red' : ''} !important;
  }
.bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === '12' ? 'red' : ''} !important;
  }

Würde das auch klappen? Bei mir hat es funktioniert. Scheint aber sehr umständlich zu sein. Die Sequenz von Dir leuchtet mir ein, das werde ich mal einbauen!

Besten Dank für deine Hilfe. Muß dahingehend doch noch viel lernen. :innocent:

Gruß!

5

Eine “Nachfrage” habe ich da noch. Ist es ohne großen Aufwand möglich, zu jedem Status die Schriftfarbe und den Text zu verändern? Damit man die Schrift auch lesen kann und den Teext zum jeweiligen Status erkennt.

Da weiß ich noch nicht wie ich vorgehen soll…

Danke und Gruß!