Conditions in picture-elements to colour state label etc

Configuration Frontend
1

Hi, I love the picture glance card to use but it’s not powerful enough. So I now replace them with picture-elements card in order to show temperatures and humidity in rooms. They work OK apart from that I haven’t found a great way to add a grey bar at the bottom (hack only) nor to colour these labels based on simple condition. Is there a way I might have overlooked?
image

For the grey bar I use the grey picture as main picture then have the switching picture colour and greyscale toggle on 85%-90% height. It’s OK but it scales a bit problematic between different screen resolution and lovelace layouts

For the temperature colour (blue = thermostat idle and no heating demand; orange = thermostat switched to heating but no boiler demand yet; red = thermostat set to heating and boiler demand is high). I used helpers for that set by automation. It seems very cumbersome for a simple condition. The problem is that the I need the thermostat attribute hvac_mode which I don’t seem to be able to capture in the picture-elements condition.

Have I overlooked something here?

type: picture-elements
image: /local/cva-office-2-dark.jpg
tap_action:
  action: navigate
  navigation_path: front-live
elements:
  - type: image
    image: /local/cva-office-2.jpg
    entity: light.samotech_dimmer_switch_zb3_0_level_on_off
    tap_action:
      action: toggle
    style:
      top: 40%
      left: 50%
      width: 100%
      height: 80%
  - type: state-icon
    entity: binary_sensor.chris_motion_ias_zone
    tap_action:
      action: more-info
    style:
      top: 90%
      left: 10%
      '--paper-item-icon-color': darkgrey
      '--paper-item-icon-active-color': white
  - type: conditional
    conditions:
      - entity: input_select.chris_office_heating_colour
        state: heating
    elements:
      - type: state-label
        entity: climate.chris_office_trv_thermostat
        attribute: current_temperature
        suffix: °C
        tap_action:
          action: more-info
        style:
          top: 90%
          left: 30%
          color: orange
  - type: conditional
    conditions:
      - entity: input_select.chris_office_heating_colour
        state: 'off'
    elements:
      - type: state-label
        entity: climate.chris_office_trv_thermostat
        attribute: current_temperature
        suffix: °C
        tap_action:
          action: more-info
        style:
          top: 90%
          left: 30%
          color: lightskyblue
  - type: conditional
    conditions:
      - entity: input_select.chris_office_heating_colour
        state: demand
    elements:
      - type: state-label
        entity: climate.chris_office_trv_thermostat
        attribute: current_temperature
        suffix: °C
        tap_action:
          action: more-info
        style:
          top: 90%
          left: 30%
          color: tomato
  - type: state-icon
    entity: light.gledopto_gl_c_007_level_light_color_on_off
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 90%
      left: 70%
      '--paper-item-icon-color': darkgrey
      '--paper-item-icon-active-color': white
  - type: state-icon
    entity: light.samotech_dimmer_switch_zb3_0_level_on_off
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 90%
      left: 90%
      '--paper-item-icon-color': darkgrey'
2

I’m searching for exactly the same solution.

Possible solution maybe here: Picture-element : state label with conditional color

I will give it a try.

1 Like
3

With card-mod 3 from HACS my working solution is as follows:

  - type: state-icon
    entity: climate.trv_kueche
    style:
      top: 10%
      left: 85%
      transform: rotate(0.5turn)
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
           {% if 'off' and (state_attr('climate.trv_kueche', 'hvac_action')  == 'off') %}
              grey
           {% elif 'heat' and (state_attr('climate.trv_kueche', 'hvac_action'))  == 'idle' %}
              #44739e
           {% elif 'heat' and (state_attr('climate.trv_kueche', 'hvac_action'))  == 'heating' %}
              #ff6f22
            {% else %}
              red
            {% endif %};
        }
1 Like