Bubble Card: State-abhängige Icons der SubButtons

Dashboards
1

Hallo zusammen,

ich habe da mal eine sehr konkrete Frage zu den Bubble Cards, zu der ich leider bisher keine Antwort gefunden habe.

Man kann ja den Style der SubButtons in Abhängigkeit der Entität ändern, indem man im Style das Icon setzt:

      ${subButtonIcon[1].setAttribute("icon",
        hass.states['sensor.bewegungradarkuche_state'].state === 'move' ?
        'mdi:motion-sensor-off' : 'mdi:motion-sensor')}

Das funktioniert auch soweit. Was aber, wenn man mehr als nur 2 Status hat, die man erfassen möchte. Es funktioniert zwar, dass man das ganze schachtelt:


      ${subButtonIcon[1].setAttribute("icon",
        hass.states['sensor.bewegungradarkuche_state'].state === 'move' ?
        'mdi:motion-outline' : hass.states['sensor.bewegungradarkuche_state'].state === 'Presence' ?
        'mdi:motion-sensor-off' : 'mdi:motion-sensor')}

Allerdings finde ich das etwas unschön. Schöner wäre doch, wenn man mit einem If…ElseIf…Else arbeiten könnte, oder sogar per „select“.

Hat da jemand eine Idee?

1 „Gefällt mir“
2

Man kann das etwas übersichtlicher und besser lesbar gestalten, wenn man die Einträge wie bei If-Anweisungen einrückt.

${subButtonIcon[1].setAttribute("icon",
  hass.states['sensor.bewegungradarkuche_state'].state === 'move' ?
    'mdi:motion-outline' :
  hass.states['sensor.bewegungradarkuche_state'].state === 'Presence' ?
    'mdi:motion-sensor-off' :
    'mdi:motion-sensor')
 }
3

Die states musst du dann noch mit deinen anpassen.

${subButtonIcon[1].setAttribute(
  "icon",
  hass.states['sensor.bewegungradarkuche_state'].state === 'move'
    ? 'mdi:motion-sensor-off'
    : hass.states['sensor.bewegungradarkuche_state'].state === 'car'
    ? 'mdi:car'
    : hass.states['sensor.bewegungradarkuche_state'].state === 'bike'
    ? 'mdi:bike'
    : 'mdi:motion-sensor'
)}
4

Danke schonmal für die schnellen Antworten.

Ich dachte, es gibt da vielleicht eine elegantere Lösung ohne Schachtelung, die ich noch nicht kenne :slight_smile:

Ich habe es jetzt auch mit der Einrückung umgesetzt.

5

Hallo @jayjojayson,

ich versuche auch gerade die Icons der Subbuttons dynamisch anzupassen, bekomme es aber nicht ganz hin.

Ich habe zum Beispiel ein Türschloss und das Icon der Bubble Card zeigt das Icon immer als geschlossen an, obwohl sich das Icon mit dem Zustand ändert.

Deshalb versuche ich das gerade mit deinem Code.
Ich habe den für mich angepasst, aber wo muss ich den einfügen?
Im Bereich styles: geht es nicht

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

Viele Grüße

6

Hi,

Du musst den Teil unter „Styles“ der Bubblecard eintragen.

Hier ein Beispiel:

styles: |
  ${subButtonIcon[0].setAttribute("icon",
    hass.states['binary_sensor.alle_turen_fenster_kinderzimmer'].state === 'off' ?
      'phu:double-window-closed' : 'phu:double-window-open')}
  ${subButtonIcon[0].setAttribute("style", 
    hass.states['binary_sensor.alle_turen_fenster_kinderzimmer'].state === 'off'
       ? 'color: var(--icon-primary-color);' 
       :  'color: var(--orange-color);')}

Viele Grüße
Patrick

1 „Gefällt mir“
7

Hallo Patrik,

hat funktioniert.

Vielen Dank und Viele Grüße Ingo