Rolladensteuerung minimalistisch?

Hallo, aufgrund Wunsch meiner Frau versuche ich den Bereich für die Rolladensteuerung in meinen Dashboards zu optimieren, wobei die Möglichkeit in Sektionen Breite anzugebene erstmal vielversprechend erschien, dies aber nicht auf die einzelnen Karten anwendbar zu sein schein?

Ich suche eine Möglichkeit die Standardfunktionen Hoch/Stop/Runter zusammen mit dem Namen jeweils komprimiert/platzsparend umzusetzen.

Die normale Variante sieht am Laptop oder Tablet gut aus
HA Rolladensteuerung PC

ist aber mobil praktisch unbenutzbar, weil die sich nicht herunterfahren (bzw. Markise schließen) lassen:

Ich habe nun überlegt, die Rolladensteuerung (Entities-Card) auf 75% Breite zu setzen und daneben einen Schalter (Glance Card?), der über ein Skript auf “Spalt” bzw. bei der Markise auf einen vorher festgesetzten Wert fährt. Leider lässt sich die Kartenbreite im Horizontal Stack nicht einstellen, nur für das gesamte Horizontal Stack.
Ich habe das auf 9 gesetzt, daneben ein Stack mit 3 probiert, aber da passen dann die Höhen nicht. Bei der Höhe kann ich auch mit “precise” keine 1,5 setzen (im YAML “rows” nur mit ganzzahligen Werten.
HA Rolladen Sections

Ich habe auch versucht, den Code 1:1 zu kopieren und lediglich die Entities zu ersetzen, wie man sieht stimmt dann aber die Höhe nicht :exploding_head:
HA Rolladen Sections v2
Abgesehen davon, dass ich da nur das Icon zum Antippen bräuchte um die Aktion auszulösen.

Ich habe zwei Varianten, eine klassische Masonry, eine mit Sections, wobei die Sections auch zu viel Platz zwischen den Sections verbrennt. Und in Sections ist der Pfeil nach Unten nicht mal erahnbar :face_with_peeking_eye:

Gibt es da Ideen, wie ich die Rollläden (bzw. die Markise) kompakter bekomme?
Das Semiclose kann ich auch woanders hin packen, wobei das neben der Steuerung einfach am sinnvollsten wäre.

Vielleicht gibt es ja noch mehr Leute, die den Rolladen gern auf Spalt steuern. “Smart” wäre es aus meiner Sicht, wenn ich links auf Pfeil-runter tippe und er fährt auf die Zwischenposition, nochmal drauf tippen fährt dann ganz aus. Da traue ich mich aber ohne Hilfe erst recht nicht dran.

Danke für Tipps und Ideen!

Code linker Bereich:

type: vertical-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: cover.living_room_blinds
                name: Living Room
            show_header_toggle: false
            state_color: false
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: cover.terrace_blinds_shelly
                name: Terrace
            show_header_toggle: false
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: cover.awning
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: cover.kitchen_blinds
                name: Kitchen Blinds
            show_header_toggle: false
grid_options:
  rows: auto
  columns: 9

Code rechter Bereich (und ja, ich habe erst Mal den Terrassenrollladen mehrfach kopiert, da muss ich dann noch die Skripte anpassen, was aber hier wohl irrelevant für das Layoutproblem ist):

type: vertical-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: script.semi_close_terrace_blinds
                name: Living Room
            show_header_toggle: false
            state_color: false
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: script.semi_close_terrace_blinds
                name: Terrace
            show_header_toggle: false
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: script.awning_30
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: script.semi_close_terrace_blinds
                name: Kitchen Blinds
            show_header_toggle: false
grid_options:
  rows: auto
  columns: 3
1 „Gefällt mir“

Hi,
Versuch mal die Bubble-Card (HACS).
Sieht dann etwa so aus:

Das wäre der Code dazu:

type: custom:bubble-card
card_type: cover
entity: cover.rollo_sud_04
show_state: true
show_attribute: true
attribute: current_position
show_icon: true
grid_options:
  rows: 1
  columns: 12
card_layout: large-2-rows
hold_action:
  action: none
double_tap_action:
  action: none
 

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

1 „Gefällt mir“

Oder mit der Mushroom-Cover-Card

type: custom:mushroom-cover-card
entity: cover.buro_rechts
primary_info: name
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
fill_container: false
secondary_info: none

Die kannst Du mit einem Klick auch für %-AUF/ZU verwenden (s. Küche)

2 „Gefällt mir“

@harryp Die teilweise Öffnung per Slider ist nett, aber da wollte ich eigentlich einen voreingestellten Wert. Aber die Karte lässt sich in der Größe 2-reihig … Korrektur. Ja, gelöst.

Layout in der Card horizontal, dann kann ich Grid Layout auf einzeilig setzen. Daneben eine Entities Card nur mit Icon (Show Name off) greift das Script Semi-Close mit voreingestelltem Wert auf und lässt sich ohne Name auch einzeilig stellen.

Noch nicht perfekt, da die Karten nicht zusammengesetzt werden können (Platzverschwendung), aber Sections wird ja noch weiterentwickelt und das Thema der Abstände wird ja immer wieder thematisiert.


Danke!!

Mein Code:

type: custom:mushroom-cover-card
entity: cover.living_room_blinds
show_position_control: false
show_buttons_control: true
secondary_info: none
grid_options:
  columns: 9
  rows: 1
layout: horizontal
name: L/Wz

Breite 9 geht auch mit 6, da der Platz ja sehr effektiv genutzt wird.

Und

show_name: false
show_icon: true
type: button
entity: script.semi_close_living_room_blinds
grid_options:
  columns: 3
  rows: 1
icon: phu:blind-tilt-open

Öffnen ist ja in der Mushroom Card. Icon etwas groß, aber da fang ich gerade an mich mit card mod zu beschäftigen. Was für ruhige Abende.

P.S. Wir sind übrigens vierköpfiger, dreisprachiger Haushalt und ich komm aus dem Luftverkehr, weshalb ich alles primär erst Mal in englisch umsetze und dann “Namen” in einzelnen Dashboards anpasse. Falls sich jemand wundert, warum nicht deutsch :sunglasses:

1 „Gefällt mir“

ich finde meine Version schick !!

Rademacher Rolladen Integration

type: custom:mod-card
view_layout:
  grid-area: auto / 1 / auto / 4
card_mod:
  style: |
    ha-card{
      --c: 0,160,255;      /* Neon-Blau */
      --bg:#05070c;
      --txt:#eaf2ff;

      background:
        radial-gradient(900px 450px at 10% -10%, #141b28, #05070c 60%),
        radial-gradient(700px 400px at 110% 110%, #0a1220, transparent 65%);
      border-radius: 26px;
      border: 1.5px solid rgba(var(--c), .65);
      box-shadow:
        0 0 14px rgba(var(--c), .28),
        0 0 26px rgba(0,0,0,.85),
        inset 0 0 5px rgba(var(--c), .10);
      padding: 10px;
      position: relative;
      overflow: hidden;
      color: var(--txt);
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulseNeon {
      0%   { box-shadow: 0 0 12px rgba(var(--c), .22), inset 0 0 8px rgba(var(--c), .06); }
      100% { box-shadow: 0 0 20px rgba(var(--c), .45), inset 0 0 12px rgba(var(--c), .10); }
    }

    ha-card::before{
      content:"";
      position:absolute; inset:-6px;
      border-radius: inherit;
      background:
        radial-gradient(240px 110px at 18% 0%, rgba(var(--c), .22), transparent 60%),
        radial-gradient(300px 160px at 82% 100%, rgba(var(--c), .18), transparent 65%);
      filter: blur(14px);
      pointer-events:none;
      opacity: .7;
    }

    ha-card::after{
      content:"";
      position:absolute; inset:-10px; border-radius: 32px;
      background:
        conic-gradient(
          from 0deg,
          rgba(var(--c), .00) 0%,
          rgba(var(--c), .28) 14%,
          rgba(var(--c), .00) 28%,
          rgba(var(--c), .24) 42%,
          rgba(var(--c), .00) 56%,
          rgba(var(--c), .20) 70%,
          rgba(var(--c), .00) 84%,
          rgba(var(--c), .30) 100%);
      filter: blur(1.1px);
      animation: spin 11s linear infinite;
      pointer-events:none;
      opacity: .6;
    }
card:
  type: vertical-stack
  cards:
    - type: custom:mushroom-title-card
      title: Rolläden – Übersicht
      card_mod:
        style: |
          ha-card{
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 6px 8px 10px;
            position: relative;
            border-radius: 20px;
            animation: pulseNeon 4s ease-in-out infinite alternate;
          }
          @keyframes titleGlow {
            0%   { text-shadow: 0 0 6px rgba(0,160,255,.45), 0 0 18px rgba(0,160,255,.25); }
            100% { text-shadow: 0 0 14px rgba(0,160,255,.85), 0 0 30px rgba(0,160,255,.55); }
          }
          @keyframes shimmer {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
          }
          .mushroom-title{
            font-size: clamp(26px, 4vw, 38px);
            font-weight: 900; letter-spacing: .8px; text-align: left; margin: 0;
            background-image: linear-gradient(90deg, #eaf2ff 0%, #c4e9ff 25%, #7cf2dd 50%, #c4e9ff 75%, #eaf2ff 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
            background-size: 220% 100%;
            animation: titleGlow 2.5s ease-in-out infinite alternate, shimmer 9s linear infinite;
          }
          .mushroom-subtitle{
            text-align:left;
            opacity:.78;
            margin-top:2px;
          }
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          name: Alle hoch
          icon: mdi:arrow-up-bold
          tap_action:
            action: call-service
            service: cover.open_cover
            data:
              entity_id: |
                [[[
                  return Object.keys(hass.states)
                    .filter(k => k.startsWith('cover.') && hass.states[k]?.attributes?.device_class === 'shutter')
                    .join(',');
                ]]]
          styles:
            card:
              - border-radius: 16px
              - padding: 10px
              - background: >
                  linear-gradient(135deg, rgba(30,120,180,0.90),
                  rgba(10,20,30,0.95))
              - box-shadow: 0 6px 18px rgba(0,0,0,0.5)
            icon:
              - color: "#7cf2dd"
              - width: 24px
              - height: 24px
              - filter: drop-shadow(0 0 6px rgba(124,242,221,.8))
            name:
              - font-weight: 700
              - color: "#eaf2ff"
              - font-size: 13px
        - type: custom:button-card
          name: Stop
          icon: mdi:stop
          tap_action:
            action: call-service
            service: cover.stop_cover
            data:
              entity_id: |
                [[[
                  return Object.keys(hass.states)
                    .filter(k => k.startsWith('cover.') && hass.states[k]?.attributes?.device_class === 'shutter')
                    .join(',');
                ]]]
          styles:
            card:
              - border-radius: 16px
              - padding: 10px
              - background: >
                  linear-gradient(135deg, rgba(80,80,80,0.90),
                  rgba(20,20,24,0.96))
              - box-shadow: 0 6px 18px rgba(0,0,0,0.5)
            icon:
              - color: "#ffe97a"
              - width: 22px
              - height: 22px
              - filter: drop-shadow(0 0 6px rgba(255,233,122,.8))
            name:
              - font-weight: 700
              - color: "#fdfdfd"
              - font-size: 13px
        - type: custom:button-card
          name: Alle runter
          icon: mdi:arrow-down-bold
          tap_action:
            action: call-service
            service: cover.close_cover
            data:
              entity_id: |
                [[[
                  return Object.keys(hass.states)
                    .filter(k => k.startsWith('cover.') && hass.states[k]?.attributes?.device_class === 'shutter')
                    .join(',');
                ]]]
          styles:
            card:
              - border-radius: 16px
              - padding: 10px
              - background: >
                  linear-gradient(135deg, rgba(18,22,35,0.94),
                  rgba(6,8,12,0.96))
              - box-shadow: 0 6px 18px rgba(0,0,0,0.5)
            icon:
              - color: "#ff7a7a"
              - width: 24px
              - height: 24px
              - filter: drop-shadow(0 0 6px rgba(255,122,122,.85))
            name:
              - font-weight: 700
              - color: "#fdfdfd"
              - font-size: 13px
    - type: grid
      columns: 2
      square: false
      cards:
        - type: custom:enhanced-shutter-card
          name_position: top
          entities:
            - entity: cover.buro
              name: Büro
              top_offset_pct: 13
              button_up_hide_states:
                - open
                - opening
                - closing
              button_stop_hide_states:
                - open
                - closed
                - partial_open
              button_down_hide_states:
                - closed
                - opening
                - closing
        - type: custom:enhanced-shutter-card
          name_position: top
          entities:
            - entity: cover.gastezimmer
              name: Gästezimmer
              top_offset_pct: 13
              button_up_hide_states:
                - open
                - opening
                - closing
              button_stop_hide_states:
                - open
                - closed
                - partial_open
              button_down_hide_states:
                - closed
                - opening
                - closing
        - type: custom:enhanced-shutter-card
          name_position: top
          entities:
            - entity: cover.schlafzimmer
              name: Schlafzimmer
              top_offset_pct: 13
              button_up_hide_states:
                - open
                - opening
                - closing
              button_stop_hide_states:
                - open
                - closed
                - partial_open
              button_down_hide_states:
                - closed
                - opening
                - closing
        - type: custom:enhanced-shutter-card
          name_position: top
          entities:
            - entity: cover.wohnzimmer
              name: Wohnzimmer
              top_offset_pct: 13
              button_up_hide_states:
                - open
                - opening
                - closing
              button_stop_hide_states:
                - open
                - closed
                - partial_open
              button_down_hide_states:
                - closed
                - opening
                - closing

1 „Gefällt mir“

Könnte man hier bei den geöffneten Fenstern das Hintergrundbild ändern?