Ankündigung

Einklappen
Keine Ankündigung bisher.

HACS stack-in-card für Raum-Card

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    #46
    Hab dazu auch mal was eigenes erstellt:
    image.png

    Beispiel für eine Zeile:

    Code:
    - type: custom:stack-in-card
                            cards:
                              - type: custom:layout-card
                                layout_type: custom:grid-layout
                                layout:
                                  grid-template-columns: 70% 10% 10% 10%
                                  grid-template-areas: |
                                    "name card1 card2 light"
                                cards:
                                  - type: custom:decluttering-card
                                    template: room_template
                                    variables:
                                      - name: Essen und Wohnen
                                      - temperatur_sensor: sensor.eg_wohnzimmer_temperatur
                                      - luftfeuchtigkeit_sensor: sensor.eg_wohnzimmer_abs_luftfeuchtigkeit
                                      - navigation_path: eg
                                      - icon: mdi:sofa
                                  - type: custom:decluttering-card
                                    template: conditional_room_template
                                  - type: custom:decluttering-card
                                    template: window_room_template
                                    variables:
                                      - entity: binary_sensor.eg_essen_und_wohnen_fenster
                                  - type: custom:decluttering-card
                                    template: light_template
                                    variables:
                                      - entity: light.eg_essen_und_wohnen_lichter
                                      - layout: card​



    Hab decluttering_templates genutzt um den Code kompakter zu halten und später einfacher Werte anpassen zu können.

    Code:
    decluttering_templates:
      light_template:
        card:
          type: custom:state-switch
          entity: template
          template: '{{ "row" if "[[layout]]" == "row" else "card" }}'
          states:
            row:
              type: custom:template-entity-row
              entity: '[[entity]]'
              name: '[[name]]'
              icon: >
                {% if is_state('[[entity]]', 'on') %} mdi:lightbulb-on {% else %}
                mdi:lightbulb {% endif %}
              toggle: true
              color: |
                {% if is_state('[[entity]]', 'on') %} #FFC107 {% endif %}
              active: '{{ is_state(''[[entity]]'', ''on'') }}'
            card:
              type: custom:mushroom-template-card
              entity: '[[entity]]'
              icon: >
                {% if is_state('[[entity]]', 'on') %} mdi:lightbulb-on {% else %}
                mdi:lightbulb {% endif %}
              icon_color: '{{ ''#FFC107'' if is_state(''[[entity]]'', ''on'') }}'
              tap_action: none
              card_mod:
                style: |
                  ha-card {
                    border: none;
                    height: 35px !important;
                  }
              view_layout:
                grid-area: light
      room_template:
        card:
          type: custom:mushroom-template-card
          primary: '[[name]]'
          secondary: >-
            {% set temp = states('[[temperatur_sensor]]') | float(0) %} {% set
            humidity = states('[[luftfeuchtigkeit_sensor]]') | float(0) %}  {% if
            '[[luftfeuchtigkeit_sensor]]' != '' %}
              🌡️ {{ temp | round(1) }} °C | 💧 {{ humidity | round(1) }} g/m³
            {% elif  '[[temperatur_sensor]]' != '' %}
              🌡️ {{ temp | round(1) }} °C
            {% else %} {% endif %}
          icon: '[[icon]]'
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: '[[navigation_path]]'
          card_mod:
            style: |
              ha-card {
                border: none;
                height: 35px !important;
                margin-top: 5px;
              }
          view_layout:
            grid-area: name
      window_room_template:
        default:
          - grid-area: card2
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: conditional
              conditions:
                - entity: '[[entity]]'
                  state: 'on'
              chip:
                type: template
                icon: mdi:window-open-variant
                icon_color: blue
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      height: 35px !important;
                      --chip-icon-size: 28px;
                    }
          card_mod:
            style: |
              ha-card {
                height: 35px !important;
              }
          view_layout:
            grid-area: '[[grid-area]]'
      conditional_room_template:
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: conditional
              conditions:
                - entity: '[[entity]]'
                  state: 'on'
              chip:
                type: template
                icon: '[[icon]]'
                icon_color: '[[icon_color]]'
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      --chip-icon-size: 28px;
                      height: 35px !important;
                    }
          card_mod:
            style: |
              ha-card {
                height: 35px !important;
              }
          view_layout:
            grid-area: card1​

    Kommentar


      #47
      ich habe zwischenzeitlich viel rumprobiert und nach einer "einfachen" Methode der Darstellung gesucht, da bei mir die verschachtelten Karten immer recht lange zum laden benötigt haben und ich Probleme mit dem transparenten Hintergrund bekam.

      es sieht nun so aus und ist eine Markdown Karte

      grafik.png


      HTML-Code:
      type: custom:stack-in-card
      mode: vertical
      tap_action:
        action: navigate
        navigation_path: /wand-tablet/erdgeschoss
      card_mod:
        style: |
          ha-card {
            --ha-card-border-width: 1px;
            border-radius: 5px !important;
            border: 0.1px outset black !important;
            box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66) !important;
            background-color: rgba(0,0,0,0);
            padding: 0 0 0 0
          }
      cards:
        - type: markdown
          tap_action:
            action: navigate
            navigation_path: /wand-tablet/erdgeschoss
          content: |
            <strong><font size=5px color=black><center>Erdgeschoss</center></font>
            <div class="tg-wrap">
              <table width=100%>
                <tbody>
                  <tr>
                    <td><strong><font size=4px>Wohn/Esszimmer</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Küche</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Schlafzimmer</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Arbeitszimmer</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Master-Bad</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Gäste-WC</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>HWR</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
                  <tr>
                    <td><strong><font size=4px>Flur</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:thermometer></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_temperatur'].state}}°C</td>
                    <td><font color="#00BFFF"><ha-icon icon=mdi:water-percent></ha-icon><font color=000000><font size=2.5px>{{states['sensor.wohnzimmer_luftfeuchte'].state}}%</td>
                    <td><font color={%- if is_state('light.stripes_lowboard', 'on') -%} orange {%- else -%} black {%- endif -%}><ha-icon icon="mdi:lightbulb-outline"></ha-icon></td>
                    <td><font color={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} red {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} orange {%- else -%} green {%- endif -%}><ha-icon icon={%- if is_state('binary_sensor.wohnzimmer_terrasse_sud_kipp', 'on') -%} kuf:fts_window_2w_tilt {%- elif is_state('binary_sensor.wohnzimmer_terrasse_sud_offen', 'on') -%} kuf:fts_window_2w_open_r {%- else -%} kuf:fts_window_2w {%- endif -%}></td>
                    <td></ha-icon><ha-icon icon=mdi:window-shutter-open></td>
                  </tr>
          text_only: true​
      es ist zwar keine Steurung möglich aber das war von mir auch nicht beabsichtigt...

      Kommentar


        #48
        Für Räume, bei denen die Karte nicht arg so viel auf einmal darstellen muss, ist mir gerade diese konfigurierbare Karte über den Weg gelaufen:

        image.png

        Ist zwar noch recht 'frisch', macht aber einen soliden Eindruck. HACS Listing wurde gerade beantragt.

        /tom

        Kommentar


          #49
          Im Schlafzimmer steht ein Auto?
          Punk ist nicht tot, Punk macht jetzt KNX

          Kommentar


            #50
            Da muss das Auto von Inspector Gadget sein!!!
            Oder wars das von Hong Kong Pfui? 🤭
            Katy Perry: Can you here me roar?
            Tatiana Shmailyuk: ... hold my beer!

            Kommentar


              #51
              Zitat von Tom Bombadil Beitrag anzeigen
              ist mir gerade diese konfigurierbare Karte über den Weg gelaufen:
              Die gefällt mir!
              Ich hab jetzt nur das kleine Problem, dass ich nicht mehr wie 4 entities auf der rechten Seite anzeigen lassen kann.
              5 sind vorne gelistet und stehen auch im code. Tausche ich vorne 4 gegen 5, wechselt demnach die Ansicht.
              Katy Perry: Can you here me roar?
              Tatiana Shmailyuk: ... hold my beer!

              Kommentar


                #52
                Ich aute mich jetzt auch mal als HASS-Jünger...
                und frage mich verzweifelt, wie ich im secondary der room card minimalist eine Temperatur angezeigt bekomme.
                Mit ein bißchen Einlesen muß ich states.(sensor eingeben und es werden mir dann die ganzen vorhandenen Sensoren angeboten, in meinem Fall würde ich einen Temperaturwert von einem shelly nehmen, das sieht dann zum Schluß so aus:

                Code:
                {{ states. (sensor.3_shelly1_483fda8269ca_temperature_2) }}
                trotzdem bleibt die Kachel an der Stelle leer. Was mache ich da schon wieder falsch?

                Kommentar


                  #53
                  Anführungszeichen vergessen? Und was macht der '.' hinter states? Aus der readme.md:

                  secondary: '{{states("sensor.living_room_temperature")}} °C'​

                  /tom

                  Kommentar


                    #54
                    Tom Bombadil Danke, funktioniert

                    Kommentar


                      #55
                      Die Room-Card-Minimalist ist wirklich recht gut und hätte sogar einen eigenen Thread hier verdient, ich bleibe trotzdem noch bei meinem Entwurf, für den es diesmal eine etwas größere Überarbeitung gibt.

                      Mich überzeugt die neue Ring-Tile Card derart, dass ich sie auch in meiner Raumcard einsetzen möchte.
                      Sie wird ab jetzt die mushroom-template-card mit ihren per card-mod erstellten Ringen ersetzen.

                      Sie bietet sehr viele (neudeutsch: ganz viele) Möglichkeiten der Darstellung (mit oder ohne Text, Skala, Farbverlauf, ...)
                      und sie wird daher in meinem Dashboard langfristig auch die gauge-card-pro ablösen, das folgt aber erst später.

                      Wer jedoch bei meiner alten Raumcard bleiben möchte, der muss die mushroom-template-card durch die mushroom-legacy-template-card ersetzen, sonst funktionieren die card_mod Befehle nicht mehr wie gewohnt. Ich werde mir diese Umstellung aber ersparen.

                      Hier nun der erste Draft der neuen Raumcard V4 und die Änderungen gebenüber der V3 von Post #41.

                      Raumcard V4.png

                      Das Icon ist wie bei der V1 wieder links oben platziert, rechts davon soll wie geplant statt dem Namen die aktive Szene des Raums angezeigt werden.

                      Die max. 4 Messwerte des Raums werden nicht mehr als Zeile sondern als Spalte angezeigt, das macht die Erfassung auf einen Blick deutlich einfacher.

                      Der Ring um das Icon startet nicht mehr oben, obwohl die Ring-Tile card auch das könnte, aber so ist die Darstellung konsistent zu anderen Gauges.

                      Die Zahl unter dem Ring hab ich entfernt (auch das könnte die Ring-Tile card darstellen). Sie ist nicht wirklich notwendig und die Card wirkt nicht so überladen.
                      Mir war wichtig, die Card so kompakt wie möglich zu gestalten, da am Wand-Tablett alle Räume gleichzeitig (über dem Grundriss) dargestellt werden sollen. Diese Ansicht fehlt aber noch.

                      Ein Feature, das mir besonders gut gefällt, ist der Farbverlauf.
                      Niedrige Werte beginnen bei einem blassen blau "#4472a0" und die Sättigung nimmt mit größeren Werten immer mehr zu.
                      Das Icon übernimmt die aktuelle Farbe des Rings, auch das ist eine tolle Funktion der Card.
                      Leider gibt es hier auch noch einen kleinen Bug, der aber hoffentlich bald behoben wird.
                      Der Wert NULL (also bei ausgeschaltetem Licht) wird nicht als 0 (grey) sondern mit der Default-Farbe dargestellt.

                      Aktuell zeige ich auch 1% (3/255) noch als grau an, das hab ich aber nur wegen des Bugs so eingestellt.

                      HTML-Code:
                              colour:
                                "0": "#6f6f6f"
                                "3": "#6f6f6f"
                                "5": "#4472a0"
                                "255": "#01befd"
                      Die Karte hat noch ein paar weitere Baustellen.

                      HTML-Code:
                            card_mod:
                              style:
                                ha-tile-icon$: |
                                  .container::before {
                                    background: var(--card-background-color) !important;
                                  }
                      ​
                      Damit möchte ich sicherstellen, dass das Icon ohne Kreis (shape) dargestellt wird. Das lässt sich vermutlich auch besser lösen.

                      Die Ring-Tile Card wehrt sich in manchen Kombinationen (z.B. in Verbindung mit der custom:layout-card oder wie hier der custom:button-card) dagegen, dass ihr Rahmen entfernt wird.
                      Die bisher einzige Lösung, die ich dagegen finden konnte, ist die Einbettung in die mod-card. Vermutlich gibt es aber auch elegantere Lösungen.

                      Wie immer sind auch hier alle Sensoren noch fake, aber das muss ja ohnehin jeder selbst anpassen.

                      Wenn jemand Optimierungspotential findet, bitte hier posten, dann haben wir alle was davon.
                      Angehängte Dateien
                      Zuletzt geändert von scw2wi; Gestern, 16:36.

                      Kommentar

                      Lädt...
                      X