Anpassung Vorlage und Custom Fields (Button Card)

[Michael Röschma]

Hallo zusammen, derzeit arbeite ich an einem einfachen mobile Dashboard für meine Beleuchtung einzelner Räume in meinem Haus. Dabei stosse ich immer wieder auf kleinere Probleme beim Quellcode rsp. YAML Code, die ich nicht verstehe. Ich weiss nicht, wie ich die einzelnen Anzeigebilder (Derzeit Sofas) austauschen kann rsp. wo die hinterlegt sind. Sobald ich beim ersten Icon Rechts draufklicke, wird das Sofa Weiss, klicke ich aber beim zweiten Icon drauf dann passiert nichts. Gerne teile ich ein paar Screenshots und den Code, damit mir ein paar Cracks evtl. bei der Lösung helfen können. Um Jede Hilfe und Erklärung, bin ich euch sehr dankbar

Hier noch mein Code:

type: custom:button-card

icon: |

  [[[

  if (states['light.ikea_tradfri_e27_sz_hinten'].state == 'on')

  return 'mdi:sofa';

  if (states['light.tradfri_e27_sz_vorne'].state == 'on')

  return 'mdi:sofa-outline'; return 'mdi:sofa-outline';

  ]]]

name: Schlaf

tap_action:

  action: navigate

  navigation_path: "#schlafzimmer"

hold_action:

  action: call-service

  service: light.toggle

  target:

    entity_id: light.living_room_lights



custom_fields:

  btn:

    card:

      type: custom:mushroom-chips-card

      chips:

        - type: template

          tap_action:

            action: toggle

          entity: light.ikea_tradfri_e27_sz_hinten

          icon: mdi:lamp-outline

          card_mod:

            style: |

              ha-card {

                --chip-background: {{ 'rgba(248, 255, 177, 0.8)' if is_state('light.ikea_tradfri_e27_sz_hinten','on') else 'rgba(108, 108, 107, 0.8)' }};

                --card-mod-icon-color: {{ '#22262A' if is_state('light.ikea_tradfri_e27_sz_hinten','on') else '#22262A' }};

                padding: 5px!important;

                border-radius: 100px!important;

              }

        - type: template

          tap_action:

            action: toggle

          entity: light.tradfri_e27_sz_vorne

          icon: mdi:lamp-outline

          card_mod:

            style: |

              ha-card {

                --chip-background: {{ 'rgba(248, 255, 177, 0.8)' if is_state('light.tradfri_e27_sz_vorne','on') else 'rgba(108, 108, 107, 0.8)' }};

                --card-mod-icon-color: {{ '#22262A' if is_state('light.tradfri_e27_sz_vorne','on') else '#22262A' }};

                padding: 5px!important;

                border-radius: 100px!important;

              }

        - type: template

          tap_action:

            action: toggle

          entity: PLATZHALTER

          icon: mdi:light-recessed

          card_mod:

            style: |

              ha-card {

                --chip-background: {{ 'rgba(248, 255, 177, 0.8)' if is_state('PLATZHALTER','on') else 'rgba(108, 108, 107, 0.8)' }};

                --card-mod-icon-color: {{ '#22262A' if is_state('PLATZHALTER','on') else '#22262A' }};

                padding: 5px!important;

                border-radius: 100px!important;

              }

styles:

  grid:

    - grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""

    - grid-template-columns: 1fr min-content

    - grid-template-rows: min-content min-content 1fr

  card:

    - padding: 20px 8px 20px 20px

    - height: 200px

  img_cell:

    - justify-content: start

    - position: absolute

    - height: 140px

    - width: 140px

    - left: 0

    - bottom: 0

    - margin: 0 0 -30px -30px

    - background: "#5E81AC"

    - border-radius: 100px

  icon:

    - position: relative

    - width: 60px

    - color: |

        [[[

        if (states['light.ikea_tradfri_e27_sz_hinten'].state == 'on')

        return '#ECEFF4'; return '#2E3440';

        ]]]

    - opacity: 0.7

  name:

    - justify-self: start

    - align-self: start

    - font-size: 18px

    - font-weight: 800

    - color: "#5E81AC"

    - letter-spacing: 0.05em

  state:

    - justify-self: start

    - align-self: start

    - font-size: 14px

    - opacity: 0.7

  custom_fields:

    btn:

      - justify-content: end

      - align-self: start

      - color: "#2E3440"

Hier noch meine Dashboard Ansicht:

Hier bleibt Sofa Icon gleich Hier wird Sofa Weiss (So soll es sein)

 

[Nival]

und den Code

Das wäre auf jeden Fall ein guter Ansatz

Es geht um Home Assistant, richtig?

 

[Michael Röschma]

Ja, genau. Habe den YAML Code nun oben hinzugefügt.

 

[Nival]

Ja, genau.

Dann ist das jetzt mal ins richtige Unterforum verschoben.

Habe den YAML Code nun oben hinzugefügt.

Bitte noch https://forum.heimnetz.de/threads/hinweis-zum-thema-einfuegen-von-yaml-code-in-beitraegen.1019/ berücksichtigen

 

[Michael Röschma]

Oke danke dir, habe ich angepasst.

 

[u5zzug]

Die Bilder sind Icons: return 'mdi:sofa';
Die Button Karte verwendet Javascript, wenn du da eh nicht durchblickst/neu bist, würde ich vielleicht etwas einfacher anfangen.
In einem Bereichedashboard kann man doch auch ganz gut große und kleine Knöpfe nach Belieben anordnen.
In letzter Zeit haben sich die Farbvariablen z.T. geändert, k.A. wie alt dein yaml ist und ob es betroffen ist.

Knöpfe mit Platzhalter werden eher nicht funktionieren ;-)