benct / lovelace-multiple-entity-row

Show multiple entity states and attributes on entity rows in Home Assistant's Lovelace UI
MIT License
809 stars 62 forks source link

Add state_icon or icon_template #197

Open pdwonline opened 3 years ago

pdwonline commented 3 years ago

In order to be able to change the icon based on the state, it would be really nice if there was an attribute like:

fabricioavil commented 3 years ago

+1 for it, what could be done as well to accomplish it is to allow to show the entity's icon, because then we can use customize.yaml to change the icon, I'm changing the colors via customize.yaml.

below is my current view, instead of manually setting the icons (mdi:thermometer AND mdi:water-percent), would be good to get what is being currently used in the entity. I configured via customize.yaml to have these icons to automatically change when the heaters or humidifiers are on, but we can't see here, because the icons are statically set.

Screenshot 2021-10-26 at 09 11 13

This is an example of config I have:

          - entity: input_boolean.blank
            icon: mdi:home-thermometer
            type: custom:multiple-entity-row
            name: Sophia's bedroom
            show_state: false
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              :host {
                --paper-item-icon-color:
                  {% if (as_timestamp(now()) - as_timestamp(states.sensor.temp_and_humidity_sensor_sophia_bedroom_temperature_measurement.last_changed)) > 43200 or (as_timestamp(now()) - as_timestamp(states.sensor.temp_and_humidity_sensor_sophia_bedroom_relative_humidity_measurement.last_changed)) > 86400%}
                    grey
                  {% else %}
                    rgb(4, 231, 98)
                  {% endif %}
                  ;
              }
            entities:
              - entity: >-
                  sensor.temp_and_humidity_sensor_sophia_bedroom_temperature_measurement
                icon: mdi:thermometer
                name: false
              - entity: >-
                  sensor.temp_and_humidity_sensor_sophia_bedroom_temperature_measurement
                name: false
              - entity: >-
                  sensor.temp_and_humidity_sensor_sophia_bedroom_relative_humidity_measurement
                icon: mdi:water-percent
                name: false
              - entity: >-
                  sensor.temp_and_humidity_sensor_sophia_bedroom_relative_humidity_measurement
                name: false

if I don't set "icon" (icon: mdi:thermometer AND icon: mdi:water-percent), it shows the state (temperature and humidity values, eg: 23.9 and 54), so instead of setting a specific icon, we could have an option like "show_icon: true/false", to switch between showing the entity's value and entity's icon.

example in my customize.yaml setting the color and icon:

sensor.temp_and_humidity_sensor_sophia_bedroom_temperature_measurement:
  friendly_name: Sophia's bedroom
  templates:
    icon: 'if (entities[''climate.room_climate_sophia_bedroom''].state === ''heat'') return ''mdi:fire'';'
    icon_color: 'if (state > entities[''input_number.climate_temperature_indoor_hot_indicator''].state) return ''red''; else if (state > entities[''input_number.climate_temperature_indoor_warm_indicator''].state) return ''rgb(244, 180, 0)''; else if (state < entities[''input_number.climate_temperature_indoor_cold_indicator''].state) return ''RoyalBlue''; return ''rgb(4, 231, 98)'';'

sensor.temp_and_humidity_sensor_sophia_bedroom_relative_humidity_measurement:
  friendly_name: Sophia's bedroom
  templates:
    icon: 'if (entities[''switch.plug_sophia_bedroom_humidifier''].state === ''on'') return ''mdi:water-plus'';'
    icon_color: 'if (entities[''sensor.sophia_bedroom_humidifier_needs_water''].state === ''empty'') return ''purple''; else if (entities[''sensor.sophia_bedroom_humidifier_needs_water''].state === ''half'') return ''pink''; else if (state < entities[''input_number.climate_humidity_indoor_low_indicator''].state) return ''red''; else if (state > entities[''input_number.climate_humidity_indoor_high_indicator''].state) return ''RoyalBlue''; return ''rgb(4, 231, 98)'';
      '