Mehrere Zustände platzsparend anzeigen

Christian_SU · 19. Oktober 2024 um 12:00

Ich zeige auf meinem Dashboard die Zustände einiger Türen an (Offen/Geschlossen). Ich habe dazu die Karte “Mushroom Template” 4x genutzt und das funktioniert auch alles (Anzeige, Farb- und Icon- Änderung je nach Zustand).

Allerdings verbrauchen die etwas viel Platz:

Hat jemand eine Idee wie ich die 4 Karten in eine integrieren kann (wie z.B. bei der Entitäts-Karte), damit die unnötigen Ränder wegfallen?

Wahrscheinlich ist es wieder ganz einfach und ich komme einfach nicht drauf…
Z.Zt. benutze ich den “vertical-stack”.

metallmanu · 19. Oktober 2024 um 16:57

Probier mal den horizontal stack oder die Entitäten Karte

anon40834185 · 19. Oktober 2024 um 18:22

so etwa?
Screenshot_185

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Fenster Garage
    secondary: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        geschlossen
      {% else %}
        #FF0000
      {% endif %}
    icon: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        mdi:curtains-closed
      {% else %}
        mdi:curtains
      {% endif %}
    icon_color: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        #00FF00
      {% else %}
        #FF0000
      {% endif %}
    fill_container: false
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    layout_options:
      grid_columns: 2
      grid_rows: 1
    entity: binary_sensor.shelly_b_e271_window
  - type: custom:mushroom-template-card
    primary: Fenster Garage
    secondary: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        geschlossen
      {% else %}
        #FF0000
      {% endif %}
    icon: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        mdi:curtains-closed
      {% else %}
        mdi:curtains
      {% endif %}
    icon_color: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        #00FF00
      {% else %}
        #FF0000
      {% endif %}
    fill_container: false
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    layout_options:
      grid_columns: 2
      grid_rows: 1
    entity: binary_sensor.shelly_b_e271_window
  - type: custom:mushroom-template-card
    primary: Fenster Garage
    secondary: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        geschlossen
      {% else %}
        #FF0000
      {% endif %}
    icon: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        mdi:curtains-closed
      {% else %}
        mdi:curtains
      {% endif %}
    icon_color: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        #00FF00
      {% else %}
        #FF0000
      {% endif %}
    fill_container: false
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    layout_options:
      grid_columns: 2
      grid_rows: 1
    entity: binary_sensor.shelly_b_e271_window
  - type: custom:mushroom-template-card
    primary: Fenster Garage
    secondary: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        geschlossen
      {% else %}
        #FF0000
      {% endif %}
    icon: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        mdi:curtains-closed
      {% else %}
        mdi:curtains
      {% endif %}
    icon_color: |-
      {% if states('binary_sensor.shelly_b_e271_window') == 'off' %}
        #00FF00
      {% else %}
        #FF0000
      {% endif %}
    fill_container: false
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    layout_options:
      grid_columns: 2
      grid_rows: 1
    entity: binary_sensor.shelly_b_e271_window
layout_options:
  grid_columns: 2
  grid_rows: 4

LvS21 · 19. Oktober 2024 um 19:08

Wie wäre es denn mit der custom:mushroom-chips-card…

uh13 · 20. Oktober 2024 um 08:00

Raster und dann mushroom-template-card. Vertikales layout. So z.B.

MelleD · 20. Oktober 2024 um 08:07

Fällt mir spontan für Anfänger ein: Chip Cards & multiple-entity-row

Für erfahrene Button-Cards, Tile Cards und Expander

Ansonsten gibt es hier ganze nette Anregungen:

Alex · 20. Oktober 2024 um 08:25

Nachdem sich die Iconfarbe eh je nach Zustand färbt, wäre mein Vorschlag, auf primäre und sekundäre Information zu verzichten und das Icon entsprechend der Art der Tür zu ändern. So kannst du alle 4 platzsparend in einen horizontalen Stapel legen.

Christian_SU · 20. Oktober 2024 um 09:24

Erstmal vielen Dank an Alle, da waren sehr gute Ideen dabei.

@Alex
Das bringt leider nichts. Die Höhe ohne sekundäre Information bleibt die gleiche wie mit:

@anon40834185 & @uh13
Das gefällt mir schonmal sehr gut. Das werde ich jetzt mal weiter verfolgen.

Die Chip Card finde ich auch ganz interessant. Werde jetzt erstmal ein paar Templates basteln und dann mal schauen was mir am besten gefällt.

LvS21 · 20. Oktober 2024 um 09:34

Dann zeig später mal deine Ergebnisse…

Christian_SU · 20. Oktober 2024 um 10:21

Sodele, ich habe jetzt erstmal “custom:vertical-stack-in-card” benutzt, was dann so aus sieht:

Das ist zwar ganz ok, aber noch nicht so ganz was ich will. Ich muss da mal etwas weiter forschen.
Leider sind die “custom:mushroom-chips-card” aus dem Rennen gefallen, weil ich da weder das Icon, noch die Farbe ändern konnte (siehe Beispiel Gartenhaus) oder ich habe da etwas falsch gemacht. Anregungen sind gerne willkommen.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.kellertur_sensor_window
    name: Kellertür
    use_entity_picture: false
    content_info: name
  - type: entity
    entity: binary_sensor.garage_input_100_input
    name: Garagentor
    content_info: name
  - type: entity
    entity: binary_sensor.gartenhaustur_sensor_window
    name: Gartenhaus
    content_info: name
    icon: >-
      {% if is_state('binary_sensor.gartenhaustur_sensor_window', 'on') %}
        mdi:door-open
      {% else %}
        mdi:door-closed
      {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.gartenhaustur_sensor_window', 'on') %}
        red
      {% else %}
        green
      {% endif %}

Auf jeden Fall nochmals vielen Dank an Alle!!!

LvS21 · 20. Oktober 2024 um 10:30

Versuche einmal das Element “Vorlage” (Template):

type: custom:mushroom-chips-card
chips:
  - type: template

Hier ein Beispiel für die visualisierung des Status einer Automation:

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: toggle
    entity: automation.time_sofie_sonne
    icon: |-
      {% if is_state('automation.time_sofie_sonne', 'on') %}
        mdi:weather-sunny
      {% else %}
        mdi:weather-sunny-off
      {% endif %}
    icon_color: |-
      {% if is_state('automation.time_sofie_sonne', 'on') %}
        orange
      {% else %}
        gray
      {% endif %}
    content: |-
      {% if is_state('automation.time_sofie_sonne', 'on') %}
        An
      {% else %}
        Aus
      {% endif %}

Christian_SU · 20. Oktober 2024 um 10:57

Dann funktioniert zwar das Icon, aber die Beschriftung ist dann weg. Das ist blöde, weil ich am Ende ca. 6 Stk. davon haben werde.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.kellertur_sensor_window
    name: Kellertür
    use_entity_picture: false
    content_info: name
  - type: entity
    entity: binary_sensor.garage_input_100_input
    name: Garagentor
    content_info: name
  - type: template
    entity: binary_sensor.gartenhaustur_sensor_window
    name: Gartenhaus
    content_info: name
    icon: >-
      {% if is_state('binary_sensor.gartenhaustur_sensor_window', 'on') %}
        mdi:door-open
      {% else %}
        mdi:door-closed
      {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.gartenhaustur_sensor_window', 'on') %}
        red
      {% else %}
        green
      {% endif %}

LvS21 · 20. Oktober 2024 um 10:58

Ich konnte diese im Abschnitt “content” ergänzen.

    content: |-
      {% if is_state('automation.time_sofie_sonne', 'on') %}
        An
      {% else %}
        Aus
      {% endif %}

Optimizer · 25. November 2024 um 22:21

Hi @LvS21
Kannst du mir mal den Code dazu teilen?
Ist es eigentlich möglich, den Text von einem Schalter auszublenden - oder wenigstens anzupassen - und nur zwei Zustände farblich anzeigen zu lassen?
Danke.

Hier mal mein Code aus der KI, funzt aber nicht wirklich:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: switch.sh_w_f_wsa_switch
    icon: mdi:door-open
    use_entity_picture: true
    name: ""
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          {% if is_state('switch.sh_w_f_wsa_switch', 'on') %}
            --card-mod-icon-color: orange;
          {% elif is_state('switch.sh_w_f_wsa_switch', 'off') %}
            --card-mod-icon-color: cyan;
          {% endif %}
        }
alignment: center

Und das mit dem Wechsel des Icons klappt auch nicht.
Momentan wird mir nun gar keins angezeigt

anon40834185 · 25. November 2024 um 23:35

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |-
      {% if states('switch.sh_w_f_wsa_switch') == 'off' %}
        mdi:door-closed
      {% else %}
        mdi:door-open
      {% endif %}
    icon_color: |-
      {% if states('switch.sh_w_f_wsa_switch') == 'off' %}
        cyan
      {% else %}
        orange
      {% endif %}
    content: ""
    entity: switch.sh_w_f_wsa_switch
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
alignment: center

ist es das, was du willst?

Optimizer · 26. November 2024 um 00:30

Ja, genau so habe ich mir das vorgestellt. Viiielen Dank!
Kannst du mir auch dabei helfen, wie ich die Kacheln alle gleich groß/einheitlich gestalten kann? Können auch die Icons vergrößert werden?

Dobsen · 26. November 2024 um 08:24

Hi,

ich benutze für sowas eine Status Karte.
https://github.com/xBourner/status-card
Da lässt sich eine Menge einstellen und anpassen.

anon40834185 · 26. November 2024 um 10:29

dabei kann ich dir leider nicht helfen
… da ich mir in den “Mushroom-Chips-Card-Vorlagen” teilweise (je nach Zustand) noch andere Werte anzeigen lasse, wobei sich die Größen immer wieder mal verändern.

Würde ich alle Chips (siehe Screen) gleich groß machen, würde dies einen Haufen Platz einnehmen, welchen ich nicht habe.

Screenshot_224

Optimizer · 26. November 2024 um 22:55

Hm nee. Glaube davon kann ich erst mal nichts gebrauchen. Dennoch danke.

OK, verstehe.

Thema		Antworten	Aufrufe
Mushroom Template Card - Codeschnipsel Dashboard/Cards/Frontend templating , yaml	2	209	7. November 2025
Bessere Rolladen Cards? Dashboard/Cards/Frontend rollladen , shelly	1	221	11. November 2025
Anzahl der offenen Fenster in Mushroom Template-Karte Dashboard/Cards/Frontend templating , yaml	5	185	3. November 2025
"Template-Karte" für diverse Entitäten? Dashboard/Cards/Frontend heizung , templating , yaml	7	183	13. Januar 2025
Zwei Werte eines Gerätes auf einer Karte anzeigen (Shelly H&T) Dashboard/Cards/Frontend	23	479	17. September 2025

Mehrere Zustände platzsparend anzeigen

Verwandte Themen