Bubble Card Icon nach Status ändern

Allgemein
1

In der Suche habe ich dazu nichts gefunden. Für mein Nuki Schloss nutze ich eine Bubble Card als Switch / State. Jetzt hätte ich gerne dass das Icon sich je nach auf- bzw abgeschlossen mit Icon und Farbe wie bei der Tile Card ändert.

In der Doku auf Github und auch bei der Suche mit englischen Suchbegriffen auf google konnte ich nichts dazu finden.

Wäre sehr dankbar für Unterstützung :blush:

2

Status:

${icon.setAttribute("icon", hass.states[entity].state === 'on' ? 'mdi:door-open' :  'mdi:door-closed')}

Attribut abc:

${icon.setAttribute("icon", hass.states[entity].attributes.abc === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}

Farbe:

.bubble-icon {
  color: ${hass.states[entity] === 'on' ? 'red' : 'blue'} !important;

Falls die Parent-Entität in der Bubble-Karte eine andere ist, musst du statt [entity] die Entität angeben, z-Bsp: [‘sensor.XYZ’]

Hier stehts: GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.

1 „Gefällt mir“
3

Danke für deine Hilfe. Mit etwas Abänderung habe ich schon einen Teilerfolg.

Das hier funktioniert bereits:

  ${icon.setAttribute("icon", hass.states[entity].state === 'open' ?
  'mdi:lock-open-variant-outline' :  'mdi:lock-outline')}

  ${icon.setAttribute("icon", hass.states[entity].state === 'locked' ?
  'mdi:lock-outline' :  'mdi:lock-open-variant-outline')}

Wenn ich das folgende noch einfüge kommt es wieder völlig durcheinander und mir wird immer “Schloss zu” angezeigt.

  ${icon.setAttribute("icon", hass.states[entity].state === 'unlocking' ?
  'mdi:lock-clock' :  'mdi:lock-open-variant-outline')} 

  ${icon.setAttribute("icon", hass.states[entity].state === 'locking' ?
  'mdi:lock-clock' :  'mdi:lock-outline')}

Das mit .bubble-icon funktioniert und den Farben funktioniert leider auch noch nicht.

Die ganzen Zustände der Lock Entität sieht man hier.

4

Wenn es mehrere verschiedene Stati annehmen kann, musst du diese - immer durch ein Doppelpunkt getrennt - aneinander hängen.

zB:

${icon.setAttribute("icon", 
  hass.states[entity].state === 'open' ? 'mdi:lock-open-variant-outline' : 
  hass.states[entity].state === 'locked' ?  'mdi:lock-outline' :  
  hass.states[entity].state === 'unlocking' ?  'mdi:lock-clock' : 
  hass.states[entity].state === 'locking' ?  'mdi:lock-clock' : 
  'mdi:lock-outline')}

Bei .bubble-icon ebenso

1 „Gefällt mir“
5

So langsam verstehe ich. Danke dir :blush: Musste allerdings bei locking es von mdi:lock.outline auf mdi:lock-open-variant-outline ändern. Warum auch immer :confounded:

An die Farben mache ich mich jetzt mal dran und hoffe das ich es voll selbst hinberkomme :see_no_evil:

Nachtrag:

Farbe lasse ich nun doch. Das ganze dashboard ist einfarbig, daher sieht das doch nicht so gut aus wie gehofft.

Jetzt bin ich aber gerade dabei das für die Garage und der Tür zum Treppenhaus zu ändern. Leider funktinoiert das ganze als Sub Button überhaupt nicht.

type: custom:bubble-card
card_type: button
entity: binary_sensor.bthome_sensor_fc02_window
button_type: state
show_state: false
sub_button:
  - entity: lock.treppenhaus
    show_background: false
  - entity: sensor.treppenhaus_battery
    show_background: false
    show_last_changed: false
    show_state: true
style: >
  ${subButtonIcon[0].setAttribute("icon",  hass.states[entity].state === 'open' ?
  'mdi:lock-open-variant-outline' :  hass.states[entity].state === 'locked' ? 
  'mdi:lock-outline' :   hass.states[entity].state === 'unlocking' ? 
  'mdi:lock-clock' :  hass.states[entity].state === 'locking' ? 
  'mdi:lock-clock' :  'mdi:lock-open-variant-outline')}
1 „Gefällt mir“
6

funktioniert bei mir allerdings. Versuche es mal mit nur einem Status/Icon, vielleicht ist irgendwo ein Fehler.
Vermutlich nimmt er bei [entity] den binary_sensor.bthome_sensor_fc02_window und nicht den lock.treppenhaus. Versuch mal stattdessen hass.states[‘lock.treppenhaus’].state

1 „Gefällt mir“
8

Moin zusammen,

eine Frage zum Thema.

Ich habe den Sensor nächste Abholung. Dieser hat den Status “Schwarze Tonne in 3 Tagen”, “Gelbe Tonne Morgen” etc…

Nun möchte ich über ein template filtern, und entsprechend das Icon der Bubble Card einfärben.

Wenn “Gelb” als Text im Status der Entität vorkommt, entsprechend gelbes Icon usw…

Hat da jemand nen Tipp?

Hab schon gegoogelt und ne Stunde mit ChatGPT rum gefummelt. Leider ohne Erfolg.

Danke und Gruß

Paul