In einer Card den Status eines anderen Sensors anzeigen

Dashboard/Cards/Frontend
1

Hallo,

ich möchte in einer button Card den Status (Hintergrund) anzeigen lassen, wenn ein Sensor (Leistung) über 10 W anzeigt. Wie bekomme ich das hin? Hintergrund ist folgender:

Ich habe einen Bewegungsmelder über eine Smart Steckdose geschaltet. Der button soll nun anzeigen, dass die Lampe des Bewegungsmelders an ist (fertige Lampe mit integriertem Bewegungsmelder). Da der Bewegungsmelder ja in der Lampe selber ist, muss ich das mittels der Leistung anzeigen. Leistung größer 10 W = Lampe an.

Mein bisheriger Code

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: switch.bewegungsmelder_einfahrt
        color_type: label-card
        name: Bewegungsmelder
        show_icon: false
        show_label: true
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
          entity: sensor.bewegungsmelder_einfahrt_leistung
        hold_action:
          action: more-info
          entity: sensor.bewegungsmelder_einfahrt_energiezahler
        label: |
          [[[
          var pow = states['sensor.bewegungsmelder_einfahrt_leistung'].state;
          if (pow != 0.001)
          return 'Leistung: ' + (pow ? pow : '0') + ' W';
            else
            return "Offline";
          ]]]
        state:
          - value: "on"
            color: green
          - operator: default
            color: rgb(255, 204, 229)
        styles:
          card:
            - height: 90px
      - type: custom:button-card
        entity: switch.bewegungsmelder_einfahrt
        color_type: label-card
        name: Bewegungsmelder Licht einschalten
        show_icon: false
        show_label: true
        tap_action:
          action: call-service
          service: >-
            script.bewegungsmelder_kurz_3_sekunden_unterbrechen_zum_licht_einschalten
        label: |
          [[[
          var pow = states['sensor.bewegungsmelder_einfahrt_leistung'].state;
          if (pow != 0.001)
          return 'Leistung: ' + (pow ? pow : '0') + ' W';
            else
            return "Offline";
          ]]]
        state:
          - value: "on"
            color: yellow
          - operator: default
            color: rgb(255, 204, 229)
        styles:
          card:
            - height: 90px

Der linke button zeigt an, dass der Bewegungsmelder generell eingeschaltet ist, der rechte soll eben anzeigen, wenn das Licht auch leuchtet

Screenshot 2024-10-10 141749

2

Schau mal ob Du es aus diesem Beispiel ableiten kannst. Dort wird der Hintergrund rot bei Bewegung. Gutes Gelingen.

Hier ein Beispiel bei Änderung mir Werten

type: custom:button-card
entity: sensor.luftreiniger_oben_indoor_allergen_index
layout: horizontal
show_icon: true
show_name: true
show_state: true
name: Allergene
icon: pap:iai
styles:
  card:
    - justify-content: center
    - align-items: center
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: auto auto auto
  icon:
    - width: 35px
    - color: white
  name:
    - justify-self: start
    - padding-left: 10px
    - color: white
  state:
    - justify-self: start
    - padding-left: 10px
    - color: white
state:
  - operator: template
    value: |
      [[[ return entity.state >= 1 && entity.state <= 3; ]]]
    styles:
      card:
        - background-color: '#5686FF'
  - operator: template
    value: |
      [[[ return entity.state >= 4 && entity.state <= 6; ]]]
    styles:
      card:
        - background-color: '#BB7CFF'
  - operator: template
    value: |
      [[[ return entity.state >= 7 && entity.state <= 9; ]]]
    styles:
      card:
        - background-color: '#FF59A3'
  - operator: template
    value: |
      [[[ return entity.state >= 10 && entity.state <= 12; ]]]
    styles:
      card:
        - background-color: red

Und hier eins mit Einzelwerten (keine Ranges). Das war etwas ungewohnt Zahlen in ‘’ zu stecken aber so geht es

type: custom:button-card
entity: sensor.luftreiniger_oben_total_volatile_organic_compounds
layout: horizontal
show_icon: true
show_name: true
show_state: true
name: Gas
icon: mdi:blur
styles:
  card:
    - justify-content: center
    - align-items: center
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: auto auto auto
  icon:
    - width: 35px
    - color: white
  name:
    - justify-self: start
    - padding-left: 10px
    - color: white
  state:
    - justify-self: start
    - padding-left: 10px
    - color: white
state:
  - operator: template
    value: |
      [[[ return entity.state == '1'; ]]]
    styles:
      card:
        - background-color: '#5686FF'
  - operator: template
    value: |
      [[[ return entity.state == '2'; ]]]
    styles:
      card:
        - background-color: '#BB7CFF'
  - operator: template
    value: |
      [[[ return entity.state == '3'; ]]]
    styles:
      card:
        - background-color: '#FF59A3'
  - operator: template
    value: |
      [[[ return entity.state == '4'; ]]]
    styles:
      card:
        - background-color: red
3

OK. Habe ich soweit hinbekommen. Jetzt habe ich aber das Problem, wie ich die Farbe der Schrift jeweils ändere, also bei state on etc. Eine Idee?

4

Ja, Du mußt im Style das Element benennen von dem Du die Farbe ändern willst und dann die Farbe angeben. Bei mir oben ist die Schrift das Element Name und der Teil des Codes sieht dann so aus:

  - operator: template
    value: |
      [[[ return entity.state == '1'; ]]]
    styles:
      card:
        - background-color: '#5686FF'
      name:
        - color: red
1 „Gefällt mir“