Custom Button Card Variablen

Dashboard/Cards/Frontend
,
3

Ich denke, die Syntax ist verkehrt. Schau Dir mal dieses kleine Beispiel an wo ich eine Variable übergebe.

Ich habe Deinen Code schnell mal durch ChatGPT geschleust und er hat einige Korrekturen vorgenommen, sieht auf den ersten Blick gut aus. Vielleicht reicht ja die eine Iteration.

Gutes Gelingen

type: custom:button-card
entity: binary_sensor.fenster_gastezimmer
variables:
  geraet_name: |-
    [[[ return `${entity.attributes.friendly_name.replace("Fenster","")}` ]]]
  geraet_entity_name: |-
    [[[ return entity.entity_id.replace("binary_sensor.fenster_", "") ]]]
  device_power_entity: |-
    [[[ return `${entity.entity_id.replace("_kwh_daily","_leistung")}` ]]]
  device_entity_icon: |-
    [[[ return `${entity.entity_id.replace("","")}` ]]]
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 3px
    - background: none
    - border: none
    - box-shadow: none
  grid:
    - grid-template-areas: '"device"'
    - grid-template-columns: auto
custom_fields:
  device:
    card:
      type: custom:stack-in-card
      mode: vertical
      card_mod:
        style: |
          ha-card {
            padding: 0px;
            border: none;
            box-shadow: none;
          }                
      keep:
        background: true
        border_radius: true
        box_shadow: true
        margin: true
        outer_padding: true
      cards:
        - type: horizontal-stack
          cards:
            - type: grid
              columns: 1
              square: false
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      content: '[[[ return variables.geraet_name ]]]'
                      entity: '[[[ return variables.device_entity_icon ]]]'
                      icon: '{{ state_attr(entity,"icon") }}'
                      tap_action: none
                      card_mod:
                        style: |
                          ha-card {
                            background: none !important;
                            border: none !important;
                            box-shadow: none !important;
                            font-size: 3.5rem !important;
                          }
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      content: '[[[ return variables.fenster_geoffnet_friendly_name ]]]'
                      entity: '[[[ return variables.device_entity_icon ]]]'
                      icon: '{{ state_attr(entity,"icon") }}'
                      tap_action: none
                      card_mod:
                        style: |
                          ha-card {
                            background: none !important;
                            border: none !important;
                            box-shadow: none !important;
                            font-size: 3.5rem !important;
                          }
                - type: grid
                  columns: 2
                  square: false
                  cards:
                    - type: custom:mushroom-template-card
                      entity: >-
                        [[[ return "binary_sensor.fenster_" + variables.geraet_entity_name ]]]
                      icon: >-
                        [[[ 
                          if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'off') {
                            return 'mdi:window-closed-variant';
                          } else if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'on') {
                            return 'mdi:window-open-variant';
                          } else if (states[`sensor.fenster_${variables.geraet_entity_name}_gekippt`] == '1') {
                            return 'mdi:window-closed-variant';
                          }
                        ]]]
                      icon_color: >-
                        [[[ 
                          if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'off') {
                            return 'green';
                          } else if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'on') {
                            return 'red';
                          } else if (states[`sensor.fenster_${variables.geraet_entity_name}_gekippt`] == '1') {
                            return 'orange';
                          }
                        ]]]
                      primary: |-
                        [[[ return `${entity.attributes.friendly_name.replace("Fenster","")}` ]]]
                      secondary: |-
                        [[[ 
                          if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'off') {
                            return 'geschlossen';
                          } else if (states[`binary_sensor.fenster_${variables.geraet_entity_name}`] == 'on') {
                            return 'geöffnet';
                          } else if (states[`sensor.fenster_${variables.geraet_entity_name}_gekippt`] == '1') {
                            return 'gekippt';
                          }
                        ]]]
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
  • The Jinja2 template logic was converted into JavaScript logic within the [[[ ... ]]] blocks.
  • The states function is used to get the state of an entity in JavaScript.
  • Adjustments were made to ensure that all conditions work correctly in JavaScript.