Bubble Card - State Funktion

Guten Tag,

ich bin derzeit dabei, mir ein HomeAssistant zu erstellen und fange grad erst an. Ich bin derzeit auf ein kleines Problem gestoßen, wo ich leider nicht weiter komme und hoffe mir kann hier jemand behilflich sein.

Ich möchte gerne über eine Bubble Card, einen Schalter erstellen, der mein Wohnzimmer Licht Ein und Ausschaltet.

Ich möchte auch, dass wenn das Licht an ist, der Button Text zu „Licht ausschalten“ geändert wird und wenn das Licht aus ist, der Text geändert wird zu „Licht einschalten“.

Ich habe es bisher hiermit versucht:

type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.wohnzimmer_licht
name: Licht einschalten
icon: mdi:lightbulb
show_state: false
state:
  - value: "on"
    name: Licht ausschalten
    icon: mdi:lightbulb-on
    styles:
      card:
        - background-color: rgba(255, 223, 70, 0.9)
        - color: black
  - value: "off"
    name: Licht einschalten
    icon: mdi:lightbulb
    styles:
      card:
        - background-color: rgba(60, 60, 60, 0.3)
        - color: white

Leiter ändert sich der Text überhaupt nicht. Die Funktion soweit allerdings schon. Also Licht geht an und aus. Und es ändert sich das Icon. Aber der Text halt leider nicht.

Hat jemand eine Idee, wie ich dies Behebe?

Ich würde mich über eine Antwort freuen.

Mit freundlichen Grüßen
Marvin

Hi, mit der Bubble-Card kann man den Text nicht dynamisch verändern. Mir jedenfalls keine Methode bekannt. Über die Button-Card könnte man mit Templates arbeiten. Optisch könnte man die wie die bubble-card anpassen.

type: custom:button-card
entity: light.pc_led_pv_led
show_state: false
icon: mdi:lightbulb
name: >
  [[[
    return entity.state === 'on' ? 'Licht ausschalten' : 'Licht einschalten';
  ]]]
styles:
  card:
    - border-radius: 12px
    - padding: 10px
  icon:
    - color: >
        [[[ return entity.state === 'on' ? 'gold' : 'grey'; ]]]
tap_action:
  action: toggle

Danke für die Antwort.
Das ist Schade, dass man den Text nicht ändern kann.

Ich wollte das ganze nämlich im Bubble Card Style halten.

Wie gesagt, die optische Anpassung an die bubble-card wäre kein Problem. Wie sieht denn dein Bubble-Card aktuell optisch aus? Dann kann ich dir button-card entsprechend anpassen.

Aktuell sieht sie so aus, wie ich sie haben möchte.
Das einzige was mir gefehlt hätte, wäre der unterschiedliche Name der anzeigt wird, je nachdem welchen Status die Lampe hat.

Hab jetzt einfach „Show State“ aktiviert, somit zeigt er wenigstens „Ein“ und „Aus“ an.

Tut mir leid.
Ich habe mir das jetzt noch einmal durchgelesen.

Habe deine Nachricht leider falsch verstanden:

Aktuell sieht meine Bubble Card optisch so aus:

Card

So habe mal herumgebastelt und hier meine Lösung. Die restlichen Anpassungen an deine Layout zwecks Höhe und Farben der Card kannst du selber noch anpassen.

type: custom:button-card
entity: light.pc_led_pv_led
show_state: false
tap_action:
  action: toggle
layout: icon_name
styles:
  card:
    - border-radius: 55px
    - background-color: >
        [[[ return entity.state === 'on' ? 'rgba(255, 200, 20, 0.9)' :
        'rgba(200,200,200,0.3)'; ]]]
    - transition: all 0.8s ease
    - padding: 8px 0px 8px 10px
  grid:
    - grid-template-columns: 35px 1fr
    - column-gap: 10px
    - justify-content: start
    - justify-items: start
  icon:
    - background: white
    - border-radius: 55px
    - padding: 2px 5px 2px 5px
    - width: 30px
    - height: 30px
    - color: |
        [[[ return entity.state === 'on' ? 'green' : 'grey'; ]]]
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: bold
name: >
  [[[ return entity.state === 'on' ? 'Licht ausschalten' : 'Licht einschalten';
  ]]]

Licht eingeschaltet:
image

Licht ausgeschaltet:
image

1 „Gefällt mir“

Funktioniert wunderbar.
Vielen lieben dank :slight_smile:

1 „Gefällt mir“