Bubble Card - Template

Allgemein
,
1

Hallo, ich versuche mich gerade mit der BubbleCard aus. Die Optik ist toll und auch die Möglichkeit eigene Templates zu verwenden ist super, bringt mich jedoch an Grenzen.
Konkret: Ich möchte in der Bubble Card mein Fenster (binary.sensor mit drei Stati [geschlossen, kipp, offen] anzeigen lassen wobei jeder Status ein anderes Icon bzw. Farbe bekommen soll.
In “normalen” Templates wie bspw. der Mushroom-Template-Card krieg ich das mit if-else ganz gut hin.
Die Bubble Card scheint da etwas anderes zu wünschen was ich, mit einem binären Status bzw. einem Status der entweder erreicht oder nicht wird habe, auch ganz gut geschafft habe, nicht jedoch mit mehr als zwei Stati.
Vielleicht hat hat da jemand eine Idee. Vielen Dank. J

2

Hi,
du musst nicht die Karten von Bubble card nehmen.
Es reicht wenn du das Popup erstellst und dort kannst du deine „alten“ Karten (Mushroom-Template-Card) anzeigen.

3

Naja aber er möchte ja die bubble Card nehmen. Und kein Popup wo ihn die mushroom Card drin angezeigt wird. Dann kann er ja gleich bei mushroom bleiben :stuck_out_tongue:

@JBBL ich kann später mal gucken wie das da aussieht. Hast du schon mal ein Beispiel Code was du bisher geschafft hast?

4

@djeeens, tatsächlich möchte ich gern die Optik der Bubble Cards weiter nutze. Danke trotzdem für den Tip :slight_smile:
@ciddi89, das gibt z.B. aus dass ich für “kipp” ein anderes icon nutzen kann als sonst. Mir fehlt da sozusagen nur noch die elif Funktion

 ${icon.setAttribute("icon", hass.states['input_select.fenster_schlafzimmer_kombiniert'].state === 'Kipp' ? 'mdi:window-open' : 'mdi:window-closed-variant')}

das einfärben des icons funktioniert auch, aber auch hier weiß ich nicht wie ich drei Argumente berücksichtigen kann

.bubble-icon {
    color: ${hass.states['input_select.fenster_schlafzimmer_kombiniert'].state === 'Kipp' ? 'green' : 'red'} !important;
  }
5

Bin gerade unterwegs daher nur ein Versuch. Open muss du natürlich ersetzen mit den natürlichen Wert und das Icon auch nach deinen Wünschen anpassen.

${icon.setAttribute("icon", 
  hass.states['input_select.fenster_schlafzimmer_kombiniert'].state === 'Kipp' 
    ? 'mdi:window-open' 
    : hass.states['input_select.fenster_schlafzimmer_kombiniert'].state === 'Open' 
      ? 'mdi:window-open-variant' 
      : 'mdi:window-closed-variant')}
1 „Gefällt mir“
6

das funktioniert wie es soll. Ich mach mich jetzt mal ran zu verstehen warum es funktioniert wie es soll :smiley: Vielen Dank

7

Naja das ist eine Kette in Ternary Operator also mit einer Abfrage mehr drin. Diese werden oft zb in Javascript genutzt damit es ein bisschen Übersichtlicher aussieht. Wenn du mehr darüber wissen willst:

1 „Gefällt mir“