Rollläden im Dashboard - Next Level

Allgemein & News
,
1

hier bei uns im Haus haben wir 11 Rollläden, und ich war schon lange auf der Suche nach der optimalen Darstellung im Dashboard, und ich bin mit meiner Lösung per Multi-Enttiy-Row nun recht zufrieden (siehe unten)
die Herausforderung sind im Wesentlichen Übersichtlichkeit/Platzverbrauch und Ein-/Ausschalten der zugehörigen Automation im Dashboard.

Hier erstmal einige Standardkarten (ohne die Automation schalten zu können)

image
image511×233 9.04 KB

image
image511×182 5.31 KB

image
image524×199 5.35 KB

und eine erweiterte Version mit Automations-Toggle

image
image512×213 8.49 KB

Und heute habe ich mich ein wenig mit der Multi-Entity-Row beschäftigt, und habe dort sowohl den Zustand der Rollläden, also auch die zugehörigen Steuerelement und auch den Automations-Toggle untergebracht.
Dies ist übersichtlich, und enthält alles was ich brauche. Ich bin zuversichtlich, dass alle 11 Rollläden darin nicht viel Platz brauchen und ich den Zustand leicht erkennen kann bzw ggf manuell die Rollläden fahren kann oder eben die Automation aus/einschalten kann

image
image512×178 5.53 KB

image
image515×179 5.65 KB

Hier noch einmal im Vergleich die typische HA Entities Karte:

image
image511×182 5.31 KB

image
image524×199 5.35 KB

5 „Gefällt mir“
2

Fehlen nur die Beispiel-Codes. :wink: Die Multiple Entity Row Card ist schon eine feine Sache, nutze ich hier und da auch ganz gerne.
Kennst du die slider-card: GitHub - mattieha/slider-button-card: A button card with integrated slider. Damit könnte man die Position der Rolläden noch innerhalb der Card schön grafisch darstellen. Vielleicht ist das ja was für dich. :slight_smile:

3

@jayjojayson
hast natürlich Recht, der Code fehlte.

Hier also der Code für die M-E-C
und vielleicht kannst du @jayjojayson mir auch noch einen Tipp geben, wie ich die Wiederholung der card_mod Definitionen vermeiden kann.
Alternativ überlege ich mir was mit der Streamline card.

type: entities
entities:
  - entity: cover.rollladen_terrasse
    type: custom:multiple-entity-row
    name: Terrasse
    show_state: false
    state_color: true
    secondary_info:
      attribute: current_position
      unit: "%"
    postfix: "%"
    prefix: "Position "
    card_mod:
      style: |
        div.entity:nth-child(1) state-badge {
          {% if state_attr("cover.rollladen_terrasse", 'current_position') | int(0) < 100 -%}
          --card-mod-icon-color: var(--primary-text-color);
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          {%- endif %}

        }
        div.entity:nth-child(2) state-badge {
          --card-mod-icon-color: var(--primary-text-color);
        }
        div.entity:nth-child(3) state-badge {
          {% if state_attr("cover.rollladen_terrasse", 'current_position') | int(100) > 0 -%}
          --card-mod-icon-color: var(--primary-text-color);
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          {%- endif %}
        }
        div.entity:nth-child(4) state-badge {
          {% if is_state("automation.rollladen_terrasse_cca", 'on') | int(0) > 0 -%}
          --card-mod-icon-color: green;
          --card-mod-icon: mdi:window-shutter-auto;
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          --card-mod-icon: mdi:window-shutter;
          {%- endif %}
        }
    entities:
      - icon: mdi:arrow-up
        color: black
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.rollladen_terrasse
      - icon: mdi:stop
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.rollladen_terrasse
      - icon: mdi:arrow-down
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.rollladen_terrasse
      - entity: automation.rollladen_terrasse_cca
        name: false
        icon: true
        tap_action:
          action: call-service
          service: automation.toggle
          service_data:
            entity_id: automation.rollladen_terrasse_cca
  - entity: cover.rollladen_fenster_souterrain
    type: custom:multiple-entity-row
    name: Souterrain
    show_state: false
    state_color: true
    secondary_info:
      attribute: current_position
      unit: "%"
    postfix: "%"
    prefix: "Position "
    card_mod:
      style: |
        div.entity:nth-child(1) state-badge {
          {% if state_attr("cover.rollladen_fenster_souterrain", 'current_position') | int(0) < 100 -%}
          --card-mod-icon-color: var(--primary-text-color);
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          {%- endif %}

        }
        div.entity:nth-child(2) state-badge {
          --card-mod-icon-color: var(--primary-text-color);
        }
        div.entity:nth-child(3) state-badge {
          {% if state_attr("cover.rollladen_fenster_souterrain", 'current_position') | int(100) > 0 -%}
          --card-mod-icon-color: var(--primary-text-color);
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          {%- endif %}
        }
        div.entity:nth-child(4) state-badge {
          {% if is_state("automation.rollladen_souterrain_links_cca", 'on') | int(0) > 0 -%}
          --card-mod-icon-color: green;
          --card-mod-icon: mdi:window-shutter-auto;
          {%- else -%}
          --card-mod-icon-color: var(--disabled-text-color);
          --card-mod-icon: mdi:window-shutter;
          {%- endif %}
        }
    entities:
      - icon: mdi:arrow-up
        color: black
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.rollladen_fenster_souterrain
      - icon: mdi:stop
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.rollladen_fenster_souterrain
      - icon: mdi:arrow-down
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.rollladen_fenster_souterrain
      - entity: automation.rollladen_souterrain_links_cca
        name: false
        icon: true
        tap_action:
          action: call-service
          service: automation.toggle
          service_data:
            entity_id: automation.rollladen_souterrain_links_cca
state_color: true

Die Slider-Button Card brauch dann leider wieder einiges an Platz, oder?

Das Icon des Rollladens gibt immerhin einen kleinen visuellen Hinweis auf den Zustand.

image
image505×133 3.83 KB

habe noch das icon für den Automatisierungs-Toggle geändert

1 „Gefällt mir“
4

Kennst Du die Kachel Card

Screenshot_20250624_201539_Home Assistant
Screenshot_20250624_201539_Home Assistant1779×386 107 KB

2 „Gefällt mir“
5

Danke @Wolfi, ja ich kenne die Kachel (Tile) Karte. :slight_smile:

Mir kommt es auf eine übersichtliche und kompakte Darstellung inklusive Anzeige des Status meiner Automation jedes Rollladens. Der Balken (Bar) ist mir nicht so wichtig.
Die Listenübersicht in der Multi-Entity-Card hilft uns hier, eine schnelle Übersicht zu bekommen. Und einige Automationen mal schnell auszuschalten z.b für den Mittagsschlaf :wink:

mit den neuen custom-features der Kachelkarte hab ich mich noch nicht beschäftigt - sollte ich vielleicht mal :sweat_smile:

6

Vielleicht geht das mit Auslagerung in eine yaml-Datei. Bin mir aber nicht sicher und einen anderen Weg würde ich auch nicht wissen. Schreibe/kopiere den card_mod Teil selber oft auf die nächste Card.

So könnte man das vielleicht testen:

card_mod:
  style: !include local/styles/rollo_style.yaml

|
  div.entity:nth-child(1) state-badge {
    {% if state_attr(config.entity, 'current_position') | int(0) < 100 %}
    --card-mod-icon-color: var(--primary-text-color);
    {% else %}
    --card-mod-icon-color: var(--disabled-text-color);
    {% endif %}
  }
  div.entity:nth-child(2) state-badge {
    --card-mod-icon-color: var(--primary-text-color);
  }
  div.entity:nth-child(3) state-badge {
    {% if state_attr(config.entity, 'current_position') | int(100) > 0 %}
    --card-mod-icon-color: var(--primary-text-color);
    {% else %}
    --card-mod-icon-color: var(--disabled-text-color);
    {% endif %}
  }
  div.entity:nth-child(4) state-badge {
    {% if is_state('automation.rollladen_terrasse_cca', 'on') %}
    --card-mod-icon-color: green;
    --card-mod-icon: mdi:window-shutter-auto;
    {% else %}
    --card-mod-icon-color: var(--disabled-text-color);
    --card-mod-icon: mdi:window-shutter;
    {% endif %}
  }

Könnte man ja über card-mod schmaller machen. Aber man müsste das auch wieder verschachteln, weil die Multi-Entity-Card das leider nicht mit aufnehmen kann, gerade mal versucht.

7

@jayjojayson vielen vielen Dank fürs drüber nachdenken und für den Hinweis auf !include :pray:
Das werde ich mal probieren und hoffe, dass es innerhalb von card_mod funktioniert

1 „Gefällt mir“
8

@Wolfi
Heute Morgen war ich neugierig und habe die custom features installiert, und dann die Kachelkarte mit den custom features auf Rollläden angewendet:

image
image436×192 7.69 KB

bislang ohne card_mod :wink:
Ist meiner home-made vertical-stack Lösung schon sehr ähnlich, und viel pflegeleichter.

die custom features sind schon sehr mächtig, mal schauen, wo sich die noch verwenden lassen.
Danke für den Tipp :pray:

und so sieht der Code für einen Rollladen aus:

features:
  - type: cover-open-close
  - type: custom:service-call
    entries:
      - type: toggle
        entity_id: automation.rollladen_terrasse_cca
        tap_action:
          action: toggle
          target:
            entity_id:
              - automation.rollladen_terrasse_cca
          data: {}
        allow_list: false
        check_numeric: false
        thumb: default
        label: Automation
        icon: ""
        unchecked_icon: mdi:window-shutter
        checked_icon: mdi:window-shutter-auto
        autofill_entity_id: true
type: tile
entity: cover.rollladen_terrasse
features_position: bottom
vertical: false
name: Terrasse
show_entity_picture: false
hide_state: false
state_content:
  - current_position
  - state