Help with styling a popup card

Configuration Frontend
1

I am trying to emulate this from Nest:
Thermostat mode: heat

image

Thermostat mode: off

Nest Mode Off

So far, I have this:

image

image

I’d like to replace the word in cyan with the icon hass:check or the Unicode Character “✓” (U+2713)
and the text not in cyan with hass:none or the space character but I can’t figure out which card type or card-mod styling will let me achieve this.

My popup code thus far:

    popup_cards:
      sensor.living_room_hvac_mode:
        type: 'custom:card-templater'
        title: Cancel
        card:
          type: entities
          show_header_toggle: false
          title: 'Set thermostat to:'
          style: |
            #main-title {
              font-size: 16px;
            }
            .card-header {
              line-height: 20px;
            }
            .card-header .name {
              font-size: 14px;
              color: gray;
            }
          entities:
            - entity: sensor.living_room_hvac_mode
              type: 'custom:multiple-entity-row'
              image: /local/images/nest-mode-heat-200x200.png
              name: Heat
              show_state: true
              icon: true
              styles:
                font-weight: bold
                width: 80px
                text-align: right
                color: '#25B1F6'
              tap_action:
                action: call-service
                service: climate.set_hvac_mode
                service_data:
                  entity_id: climate.living_room
                  hvac_mode: heat
            - entity: sensor.living_room_hvac_mode
              type: 'custom:multiple-entity-row'
              image: /local/images/nest-mode-off-200x200.png
              name: 'Off'
              show_state: true
              styles:
                font-weight: bold
                width: 40px
                text-align: right
                color: null
              tap_action:
                action: call-service
                service: climate.set_hvac_mode
                service_data:
                  entity_id: climate.living_room
                  hvac_mode: 'off'

Then ideally I’d like to dynamically build the rows based on the items in the hvac_modes list!

My pseudo-code is:

Icon/text:
  hass:none or ' '
  hass:check or '✓', color: '#25B1F6'
   
Then,
Dynamically create 2 to 4 'tap_action' rows depending on climate.living_room.hvac_modes_list displaying the following fields with tap_action call_service:
_left_margin_ [ icon from png ]  [ text ] . . . . . [ hass:none/' ' | hass:check or ✓ ] _right_margin_

Dynamically create the rows:

For n=1 to #items in hvac_modes_list
Template:
icon: /local/images/nest-mode-{hvac_mode[n]}-200x200.png  
[ text ]: *capitalize*( {hvac_mode[n]} )  
icon: {% if is_state('climate.living_room', {hvac_mode[n]} ) %} hass:check (or ✓)
      {% else %}hass:none (or ' ') {% endif %}
call_service: climate.set_hvac_mode
entity_id: climate.living_room
hvac_mode: {hvac_mode[n]}

With the result being: 

Off:
icon: /local/images/nest-mode-off-200x200.png  
[ text ]: "Off"  
icon: {% if is_state('climate.living_room', 'off') %} hass:check (or ✓)
      {% else %}hass:none (or ' ') {% endif %}
call_service: climate.set_hvac_mode
entity_id: climate.living_room
hvac_mode: off

Heat (if available):
icon: /local/images/nest-mode-heat-200x200.png
[ text ]: "Heat"
icon: {% if is_state('climate.living_room', 'heat' ) %} hass:check (or ✓)
      {% else %}hass:none (or ' ') {% endif %}
call_service: climate.set_hvac_mode
entity_id: climate.living_room
hvac_mode: heat

Cool (if available):
icon: /local/images/nest-mode-auto-200x200.png  
[ text ]: "Auto"  
icon: {% if is_state('climate.living_room', 'auto' ) %} hass:check (or ✓)
      {% else %}hass:none (or ' ') {% endif %}
call_service: climate.set_hvac_mode
entity_id: climate.living_room
hvac_mode: auto

Auto (if available)
icon: /local/images/nest-mode-cool-200x200.png  
[ text ]: "Cool"  
icon: {% if is_state('climate.living_room', 'cool' ) %} hass:check (or ✓)
      {% else %}hass:none (or ' ') {% endif %}
call_service: climate.set_hvac_mode
entity_id: climate.living_room
hvac_mode: cool
2

With some thinking outside the box and custom-ui I managed to pull it off…

image

image

2 Likes
3

Great work! I appreciate this was a long time ago, but how did you manage it. Is there any code you could share?

4

This is my current popup card…

type: custom:popup-card
entity: sensor.nest_hvac_mode
card:
  type: entities
  show_header_toggle: false
  title: 'Set thermostat to:'
  style: |
    .card-header {
      line-height: 20px;
    }
    .card-header .name {
      font-size: 20px;
      color: darkgray;
    }
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
    }
  entities:
    - entity: sensor.nest_hvac_mode
      attribute: hvac_heat
      type: custom:multiple-entity-row
      image: /local/images/nest-mode-heat-200x200.png
      name: Heat
      show_state: true
      icon: true
      styles:
        font-weight: bold
        width: 80px
        text-align: right
        color: '#25B1F6'
      tap_action:
        action: call-service
        service: climate.set_hvac_mode
        service_data:
          entity_id: climate.living_room
          hvac_mode: heat
    - entity: sensor.nest_hvac_mode
      attribute: hvac_off
      type: custom:multiple-entity-row
      image: /local/images/nest-mode-off-200x200.png
      name: 'Off'
      show_state: true
      styles:
        font-weight: bold
        width: 40px
        text-align: right
        color: '#25B1F6'
      tap_action:
        action: call-service
        service: climate.set_hvac_mode
        service_data:
          entity_id: climate.living_room
          hvac_mode: 'off'

nest-mode-heat-200x200
nest-mode-off-200x200

5

Brilliant. Thank you and thank you for getting back to me so quickly. Will have a look at this when I get back home this evening. Much appreciated,

6

The above code requires card_mod: There was an update requiring card_mod: going forward.

card_mod:
 style: |
    .card-header {
      line-height: 20px;
    }
    .card-header .name {
      font-size: 20px;
      color: darkgray;
    }
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
    }
7

Thanks, will look into it…