custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.93k stars 233 forks source link

Changing icons for custom_fields based on condition #627

Open Goeste opened 1 year ago

Goeste commented 1 year ago

Checklist

Describe the bug Icons for custom_fields based on condition are not showing. instead [object Object] or [nothing] shows up.

Version of the card Version: 3.4.2

To Reproduce This is the configuration I used:

entity: binary_sensor.emma_tur_iaszone_2
name: Balkontür Emma
tap_action:
  action: none
aspect_ratio: 1/1
show_label: true
custom_fields:
  battery:
    icon: |-
      [[[ if (states['sensor.emma_tur_battery_2'].state <= 20)
          return 'mdi:battery-low'; return 'mdi:battery-high' ]]]
label: |-
  [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
      return 'geschlossen - BAT@' + states['sensor.emma_tur_battery_2'].state + '%' ; else return 'offen' + states['sensor.emma_tur_battery_2'].state + '%' ]]] 
icon: |-
  [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
      return 'mdi:balcony'; return 'mdi:balcony' ]]]
styles:
  icon:
    - color: |-
        [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
            return 'white'; return '#fdd835' ]]]
  label:
    - font-size: 12px
  custom_fields:
    battery:
      - position: absolute
      - right: 10px
      - top: 10px
      - color: >-
          [[[ if (states["sensor.emma_tur_battery_2"].state <= 20) return "red";
          else return "green"]]]

Screenshots image

Expected behavior I expect the icon to change based on the battery level of the sensor in the yaml

Additional context If 'icon' is not a class of custom_fields, how can I change the icon based on the battery level with the code from the documentation:

      [[[
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 12px; height: 12px; color: yellow;">
          </ha-icon><span>${entity.state}°C</span>`
      ]]]

I tried an if loop where the icon is set, but this also just throws an error:

  battery: |
    [[[
      return `<ha-icon
        icon="{if (states['sensor.emma_tur_battery_2'].state <= 20) return "mdi:battery-high; else return "mdi:battery-low"}"
        style="height: 25px;">
        </ha-icon>`
    ]]]

with that nothing is shown: image

Hope someone can get me out of this.

Best regards, goeste