Custom Button Card Variablen

Dashboard/Cards/Frontend
,
1

Hallo zusammen,

ich würde gerne den Fensterzustand (offen, gekippt und geschlossen) in einer Button Card darstellen. Ich verwende einen binary_sensor für offen und geschlossen und einen Template Sensor für den gekippten Zustand.
Um die beiden Sensoren in der Button Card zu verwenden,benutze ich Variablen. Leider klappt die Variable nicht in der if- Gleichung. Um Farbe, Icon und Text zu ändern.

Dies schein das Problem zu sein:

{% elif states('[[[ return "sensor.fenster_" + variables.geraet_entity_name + "_gekippt" ]]]') == '1' %}

Hier der Code:

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("","").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(entity) == 'off' %}
                          mdi:window-closed-variant
                        {% elif states(entity) == 'on' %}
                          mdi:window-open-variant
                        {% elif states('[[[ return "sensor.fenster_" +
                        variables.geraet_entity_name + "_gekippt" ]]]') == '1'
                        %}
                          mdi:window-closed-variant
                        {% endif %}
                      icon_color: >-
                        {% if states(entity) == 'off' %}
                          green
                        {% elif states(entity) == 'on' %}
                          red
                        {% elif states('[[[ return "sensor.fenster_" +
                        variables.geraet_entity_name + "_gekippt" ]]]') == '1'
                        %}
                          orange
                        {% endif %}
                      primary: >-
                        [[[ return
                        `${entity.attributes.friendly_name.replace("Fenster","")}`
                        ]]]
                      secondary: >-
                        {% if states(entity) == 'off' %}
                          geschlossen
                        {% elif states(entity) == 'on' %}
                          geöffnet
                        {% elif states('[[[ return "sensor.fenster_" + 
                        variables.geraet_entity_name + "_gekippt" ]]]') == '1'
                        %}
                          gekippt
                        {% endif %}
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
2

Variablen werden meine ich mit ${VARIABLEN_NAME} eingefügt und nicht wie in manch anderen Programmiersprachen mit +.

{% elif states('[[[ return "sensor.fenster_${variables.geraet_entity_name}_gekippt" ]]]') == '1' %} könnte funktionieren, wenn ich mich nicht irre. Angaben daher ohne Gewähr.

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.
4

Nach langem probieren und lesen, hier der funktionierende Code für die if else Formel:

icon: -
    [[[ 
      if (states[variables.anzahl_offene_fenster].state = 0) return 'green';
      else if (states[variables.anzahl_offene_fenster].state > 0) return 'red';
      else if (states[variables.anzahl_gekippter_fenster].state > 0) return 'orange';
      else return 'blue';
    ]]]