My Nest Thermostat card config using thermostat-dark-card

Your question doesn’t make sense to me. When you set your thermostat temperature you are telling your HVAC system this is the temperature you want. If the HVAC system can automatically switch between heating and cooling there is a spread between minimum and maximum called swing which has a minimum value which is usually 2 degrees and sometimes adjustable so a setpoint of 71 would have a range of 70 to 72 at which point either heating or cooling comes on. Less capable HVAC systems you have to manually switch between heating and cooling.

I have just now (1 year, 8 months later) fixed this! I was doing something else totally unrelated which brough me back to card-mod style options when I noticed this in the docs:

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sun.sun
        entities:
          - entity: sun.sun
        name: Default
  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sun.sun
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none !important;
              }
        entities:
          - entity: sun.sun
        name: Removed icon
  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sun.sun
        entities:
          - entity: sun.sun
        name: Blank icon
        icon: 'mdi:blank'

specifically this:

  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sun.sun
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none !important;
              }
        entities:
          - entity: sun.sun
        name: Removed icon

and thought “Why the heck did that not work for me in my thermostat card???”

I fiddled just a little bit and changed this code:

  - type: entities
    entities:
      - entity: sensor.nest_humidity
        name: Inside Humidity
        icon: mdi:none
    style:
      .: |
        ha-card {
          color: white;
          font-size: 1.1rem;
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            background: #EB6D00;
            border-bottom: 1pt solid #E65E00;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              background: #0055FF ; 
              border-bottom: 1pt solid #00008B;
            {% else %}
              background: #373F48 ;
              border-bottom: 1pt solid #2b333a;
            {% endif %}
          {% endif %}
        }
      $hui-sensor-entity-row$hui-generic-entity-row$: |
        state-badge {
          display: none;
        }

to this:

  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sensor.nest_humidity
        name: Inside Humidity
        icon: mdi:none
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none !important;
              }
    style:
      .: |
        ha-card {
          color: white;
          font-size: 1.1rem;
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            background: #EB6D00;
            border-bottom: 1pt solid #E65E00;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              background: #0055FF ; 
              border-bottom: 1pt solid #00008B;
            {% else %}
              background: #373F48 ;
              border-bottom: 1pt solid #2b333a;
            {% endif %}
          {% endif %}
        }
    card_mod:
      class: inline-card

and lo and behold, prest-o change-o…

1 Like

I now am using pop-up cards to invoke MODE, ECO and SCHEDULER…

type: custom:vertical-stack-in-card
cards:
  - type: custom:thermostat-dark-card
    name: Living Room
    entity: climate.living_room
    chevron_size: 50
    step: 0.5
    pending: '1'
    idle_zone: '2'
    hvac:
      states:
        'off': 'off'
        cooling: cool
        heating: heat
    attribute: hvac_action
    away:
      sensor:
        sensor: sensor.nest_eco_temp
    style: |
      ha-card {
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          background: #EB6D00;
          border-bottom: 1pt solid #E65E00;
        {% else %}
          {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
            background: #0055FF ; 
            border-bottom: 1pt solid #00008B;
          {% else %}
            background: #373F48 ;
            border-bottom: 1pt solid #2b333a;
          {% endif %}
        {% endif %}
        box-shadow: 0 0 10px;
       }
       .dial_title {
         color: white !important;
       }
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.nest_humidity
        name: Inside Humidity
        icon: mdi:none
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none !important;
              }
    style:
      .: |
        ha-card {
          color: white;
          font-size: 1.1rem;
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            background: #EB6D00;
            border-bottom: 1pt solid #E65E00;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              background: #0055FF ; 
              border-bottom: 1pt solid #00008B;
            {% else %}
              background: #373F48 ;
              border-bottom: 1pt solid #2b333a;
            {% endif %}
          {% endif %}
        }
  - type: entities
    entities:
      - entity: sensor.nest_outside_temperature
        name: Outside Temp
        icon: mdi:none
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none !important;
              }
    style:
      .: |
        ha-card {
          color: white;
          font-size: 1.1rem;
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            background: #EB6D00;
            border-bottom: 1pt solid #E65E00;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              background: #0055FF ; 
              border-bottom: 1pt solid #00008B;
            {% else %}
              background: #373F48 ;
              border-bottom: 1pt solid #2b333a;
            {% endif %}
          {% endif %}
        }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.nest_hvac_mode
        name: MODE
        show_name: true
        tap_action:
          action: more-info
        color_type: icon
        state:
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'off' ]]]
            icon: mdi:none
            color: white
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'heat' ]]]
            icon: mdi:none
            color: rgb(239, 140, 0)
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'cool' ]]]
            color: blue
            icon: mdi:none
        show_state: false
        style: |
          ha-card {
            font-size: 85% !important;
            color: white;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 ;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF ; 
              {% else %}
                #373F48;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }
          ha-icon {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='-282.6 655.7 611.9 511.8' fill='%23FFF'%3E%3Cpath d='M235.4 1039.5c-38.3 30.7-76.8 46.1-117.7 46.1-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.4 5.1-2.3.7-5.7 1-7.6-2.6-1.7-3.2 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.2 0 99.7 23 153.5 74.2 61.3 58.8 127.8 110 194.4 110 12.8 0 25.6-2.6 38.3-5.1 2.8-.5 5.9-1.2 7.6 2.6 1.6 3.3.1 5.1-2.4 7.6zM-194.5 991c38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.6-.7 4.6.1 5.7 2.1 1.7 3.1-.6 5.6-.6 5.6-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46.1-43.5-97.2-84.4-145.9-84.4-10.2 0-20.4 2.9-28.2 5.1-2.3.7-4.2.7-5.7-2.3-1.5-2.8.6-5.3.6-5.3 28.1-20.6 56.3-33.3 87-33.3zM327.4 799c-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46-43.4-97.1-84.4-145.8-84.4-10.2 0-20.5 2.6-28.2 5.1-2.2.7-4.3.2-5.6-1.8-2.2-3.5.5-5.9.5-5.9 28.2-23 58.8-33.2 87-33.2 38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.1-.8 4.3-1.1 5.7.7 1.5 2.1 1.9 4.5-.7 7zM81.9 811.9c61.4 58.8 127.9 110 194.5 110 12.8 0 25.6-2.6 38.3-5.1 2.6-.7 5.7-1.2 7.6 2.6 1.6 3.1 0 5.1-2.6 7.6-38.4 30.7-76.8 46-117.7 46-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.3 5.1-2.6.7-5.7.7-7.6-2.6-1.8-3.1 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.1 0 99.7 23.1 153.5 74.3z'/%3E%3C/svg%3E");
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
            }
      - type: custom:button-card
        entity: sensor.nest_preset_mode
        name: ECO
        label: ECO
        tap_action:
          action: more-info
        color_type: icon
        color: green
        icon: mdi:none
        state:
          - operator: template
            value: >
              [[[ return states['climate.living_room'].attributes.preset_mode ==
              'none' ]]]
            icon: mdi:none
            color: white
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 85% !important;
            color: white;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }  
          ha-icon { 
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='0 0 26 24' fill='%23FFF'%3E%3Cpath class='st0' d='M.8 20.7c6.3 4.5 13.1 4.7 19-1.7 6.1-6.5 6.4-14.5 6.2-19-3.3 4-9.5 2.2-18.2 5C1 7.2.1 15.3 0 18.7c1.6-1.7 4.6-4.5 8.5-5.9 6.2-2.3 8.9-2.3 12.6-5.1-2.3 2.6-5.3 4.1-11.1 6.2-4.2 1.5-7.9 5.3-9.2 6.8z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }
      - type: custom:button-card
        entity: climate.living_room
        name: SCHEDULE
        tap_action:
          action: more-info
        color_type: card
        icon: none
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 85% !important;
            color: white !important;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }   ha-icon { 
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24.1' fill='%23FFF'%3E%3Cpath d='M17 24.5H5c-2.8 0-5-2.2-5-5v-12c0-2 1.2-3.8 3-4.6v1c0 1.4 1.1 2.6 2.5 2.6S8 5.3 8 3.9V2.5h6v1.4c0 1.4 1.1 2.6 2.5 2.6S19 5.3 19 3.9v-1c1.8.8 3 2.5 3 4.6v12c0 2.8-2.2 5-5 5zm-1.7-7.9l-3.8-2.2V9c0-.6-.4-1-1-1s-1 .4-1 1V15.6s0 .1.1.1l.1.1.1.1s.1 0 .1.1l4.3 2.5c.5.3 1.1.1 1.4-.4.4-.6.2-1.2-.3-1.5zM16.5 5c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1zm-11 0c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }
      - type: custom:button-card
        entity: climate.living_room
        name: HISTORY
        tap_action:
          action: url
          url_path: https://home.nest.com/thermostat/02AA01AC28140A0G
        color_type: card
        icon: mdi:none
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 80% !important;
            color: white !important;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }  ha-icon {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }

MODE 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: 14px;
      color: gray;
    }
  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'

ECO card:

type: custom:popup-card
entity: sensor.nest_preset_mode
card:
  type: vertical-stack
  cards:
    - type: markdown
      content: |
        Save energy by using Eco Temperatures when no
         one's home. Or turn them on manually any time.
    - type: conditional
      conditions:
        - entity: sensor.nest_preset_mode
          state: none
      card:
        type: custom:button-card
        entity: sensor.nest_preset_mode
        name: Start Eco
        show_icon: false
        styles:
          grid:
            - grid-template-columns: 1fr 75%
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.living_room
            preset_mode: eco
    - type: conditional
      conditions:
        - entity: sensor.nest_preset_mode
          state: eco
      card:
        type: custom:button-card
        entity: sensor.nest_preset_mode
        name: Stop Eco
        show_icon: false
        styles:
          grid:
            - grid-template-columns: 1fr 75%
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.living_room
            preset_mode: none

SCHEDULER card:

type: custom:popup-card
entity: climate.living_room
card:
  type: custom:scheduler-card
  include:
    - climate
  card_mod:
    class: inline-card
1 Like

Will you be updating your GitHub repository with these changes?

GitHub repository has been updated!

How do I install the * custom:popup-card dependency? It seems to be gone from HACS presumably because it was superseded by browser_mod 2

Since I do not have a pop-up card in HACS nor do I see anything in my config folder, and the way the browser_mod 2 instructions are now written, I presume type: custom:popup-card is now just somehow part of browser_mod 2. So rather than specifying the popup card via yaml like this:

views:
  - title: My view
    icon: mdi:home-assistant
    popup_cards:
      # popup-card configuration goes here
    cards:
      - type: entities
        ...etc...

you should just be able to create custom card(s) in the same dashboard view (after installing browser_mod 2 of course). Once you’re done editing the dashboard, the pop-up cards become invisible.

type: custom:popup-card
entity: climate.living_room
card:
  type: custom:scheduler-card
  include:
    - climate
  card_mod:
    class: inline-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'
type: custom:popup-card
entity: sensor.nest_preset_mode
card:
  type: vertical-stack
  cards:
    - type: markdown
      content: >
        Save energy by using Eco Temperatures when no one's home. Or turn them
        on manually any time.
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
        }
    - type: conditional
      conditions:
        - entity: sensor.nest_preset_mode
          state: none
      card:
        type: custom:button-card
        entity: sensor.nest_preset_mode
        name: Start Eco
        show_icon: false
        styles:
          grid:
            - grid-template-columns: 1fr 90%
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.living_room
            preset_mode: eco
        style: |
          ha-card {
            background: none;
            box-shadow: none;
            border: none;
          }
    - type: conditional
      conditions:
        - entity: sensor.nest_preset_mode
          state: eco
      card:
        type: custom:button-card
        entity: sensor.nest_preset_mode
        name: Stop Eco
        show_icon: false
        styles:
          grid:
            - grid-template-columns: 1fr 80%
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.living_room
            preset_mode: none
        style: |
          ha-card {
            background: none;
            box-shadow: none;
            border: none;
          }
style: |
  ha-card {
    background: none;
    box-shadow: none;
    border: none;
  }
  bar-card-name {
    color: white;
    font-size: 100%;
    font-weight: normal;
    margin: 4px;     
  } 
  bar-card-backgroundbar {
    border-shadow: 2pt;
    margin-top: -2pt;
    margin-left: -2pt;
    border-radius: 5pt;
    border-style: solid;
    #background: rgba(255, 0, 0, 0.8);
    background: black;
  }
  bar-card-value {
    font-size: 125%;
    color: white;
    font-weight: bold;
    margin: 4px;
  }
  bar-card-currentbar {
    border-radius: 5pt;
  }
card_mod:
  class: inline-card

And the main thermostat card:

type: custom:vertical-stack-in-card
cards:
  - type: entity-filter
    columns: 1
    state_filter:
      - operator: '!='
        value: of
        attribute: hvac_action
    entities:
      - entity: sensor.nest_time_to_temp_message
    state_color: false
    show_state: false
    show_icon: false
    card:
      type: glance
      show_icon: false
      show_name: false
      style: |
        ha-card {
          font-size: 80% !important;
          color: white !important;
          background:
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            #EB6D00 !important;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              #0055FF !important; 
            {% else %}
              #373F48 !important;
            {% endif %}
          {% endif %}
          box-shadow: none;
        }  ha-icon {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
          background-position: 25%;
          background-position-x: 50%;
          background-position-y: center;
          background-repeat: no-repeat;
          height: 44px;
          margin: 0 
          auto 3px;
          width: 26px;            
        }
  - type: custom:thermostat-dark-card
    name: Living Room
    entity: climate.living_room
    chevron_size: '50'
    step: '0.5'
    pending: '1'
    idle_zone: '2'
    hvac:
      states:
        'off': 'off'
        cooling: cool
        heating: heat
    attribute: hvac_action
    away:
      sensor:
        sensor: sensor.nest_eco_temp
    style: |
      ha-card {
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          background: #EB6D00;
          border-bottom: 1pt solid #E65E00;
        {% else %}
          {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
            background: #0055FF ; 
            border-bottom: 1pt solid #00008B;
          {% else %}
            background: #373F48 ;
            border-bottom: 1pt solid #2b333a;
          {% endif %}
        {% endif %}
        box-shadow: 0 0 20px;
       }
       .dial_title {
         color: white !important;
       }
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.nest_humidity
        name: Inside Humidity
        icon: mdi:none
        style:
          hui-generic-entity-row$: |
            state-badge {
              display: none;
            }
    style:
      .: |
        ha-card {
          color: white;
          font-size: 1.1rem;
          {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
            background: #EB6D00;
            border-bottom: 1pt solid #E65E00;
          {% else %}
            {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
              background: #0055FF ; 
              border-bottom: 1pt solid #00008B;
            {% else %}
              background: #373F48 ;
              border-bottom: 1pt solid #2b333a;
            {% endif %}
          {% endif %}
        }
  - type: entities
    entities:
      - entity: sensor.outside_weather_temperature
        name: My Outside Temp
        icon: mdi:none
        style:
          hui-generic-entity-row$: |
            state-badge {
              display: none;
            }
    style: |
      ha-card {
        color: white;
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          background: #EB6D00;
          border-bottom: 1pt solid #E65E00;
        {% else %}
          {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
            background: #0055FF ; 
            border-bottom: 1pt solid #00008B;
          {% else %}
            background: #373F48 ;
            border-bottom: 1pt solid #2b333a;
          {% endif %}
        {% endif %}
        box-shadow: 0 0 10px;
        font-size: 1.0rem;
       }
  - type: horizontal-stack
    style: |
      ha-card {
        font-size: 80% !important;
        color: white !important;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          #EB6D00 !important;
        {% else %}
          {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
            #0055FF !important; 
          {% else %}
            #373F48 !important;
          {% endif %}
        {% endif %}
        box-shadow: none;
      }  ha-icon {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
        background-position: 25%;
        background-position-x: 50%;
        background-position-y: center;
        background-repeat: no-repeat;
        height: 44px;
        margin: 0 
        auto 3px;
        width: 26px;            
      }
    cards:
      - type: custom:button-card
        entity: sensor.nest_hvac_mode
        name: MODE
        show_name: true
        tap_action:
          action: more-info
        color_type: icon
        state:
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'off' ]]]
            icon: mdi:none
            color: white
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'heat' ]]]
            icon: mdi:none
            color: rgb(239, 140, 0)
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'cool' ]]]
            color: blue
            icon: mdi:none
        show_state: false
        style: |
          ha-card {
            font-size: 85% !important;
            color: white;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 ;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF ; 
              {% else %}
                #373F48;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }
          ha-icon {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='-282.6 655.7 611.9 511.8' fill='%23FFF'%3E%3Cpath d='M235.4 1039.5c-38.3 30.7-76.8 46.1-117.7 46.1-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.4 5.1-2.3.7-5.7 1-7.6-2.6-1.7-3.2 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.2 0 99.7 23 153.5 74.2 61.3 58.8 127.8 110 194.4 110 12.8 0 25.6-2.6 38.3-5.1 2.8-.5 5.9-1.2 7.6 2.6 1.6 3.3.1 5.1-2.4 7.6zM-194.5 991c38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.6-.7 4.6.1 5.7 2.1 1.7 3.1-.6 5.6-.6 5.6-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46.1-43.5-97.2-84.4-145.9-84.4-10.2 0-20.4 2.9-28.2 5.1-2.3.7-4.2.7-5.7-2.3-1.5-2.8.6-5.3.6-5.3 28.1-20.6 56.3-33.3 87-33.3zM327.4 799c-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46-43.4-97.1-84.4-145.8-84.4-10.2 0-20.5 2.6-28.2 5.1-2.2.7-4.3.2-5.6-1.8-2.2-3.5.5-5.9.5-5.9 28.2-23 58.8-33.2 87-33.2 38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.1-.8 4.3-1.1 5.7.7 1.5 2.1 1.9 4.5-.7 7zM81.9 811.9c61.4 58.8 127.9 110 194.5 110 12.8 0 25.6-2.6 38.3-5.1 2.6-.7 5.7-1.2 7.6 2.6 1.6 3.1 0 5.1-2.6 7.6-38.4 30.7-76.8 46-117.7 46-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.3 5.1-2.6.7-5.7.7-7.6-2.6-1.8-3.1 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.1 0 99.7 23.1 153.5 74.3z'/%3E%3C/svg%3E");
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
            }
      - type: custom:button-card
        entity: sensor.nest_preset_mode
        name: ECO
        label: ECO
        tap_action:
          action: more-info
        color_type: icon
        color: green
        icon: mdi:none
        state:
          - operator: template
            value: >
              [[[ return states['climate.living_room'].attributes.preset_mode ==
              'none' ]]]
            icon: mdi:none
            color: white
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 85% !important;
            color: white;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }  
          ha-icon { 
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='0 0 26 24' fill='%23FFF'%3E%3Cpath class='st0' d='M.8 20.7c6.3 4.5 13.1 4.7 19-1.7 6.1-6.5 6.4-14.5 6.2-19-3.3 4-9.5 2.2-18.2 5C1 7.2.1 15.3 0 18.7c1.6-1.7 4.6-4.5 8.5-5.9 6.2-2.3 8.9-2.3 12.6-5.1-2.3 2.6-5.3 4.1-11.1 6.2-4.2 1.5-7.9 5.3-9.2 6.8z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }
      - type: custom:button-card
        entity: climate.living_room
        name: SCHEDULE
        action: url
        navigation_path: https://home.nest.com
        color_type: card
        icon: none
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 85% !important;
            color: white !important;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }   ha-icon { 
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24.1' fill='%23FFF'%3E%3Cpath d='M17 24.5H5c-2.8 0-5-2.2-5-5v-12c0-2 1.2-3.8 3-4.6v1c0 1.4 1.1 2.6 2.5 2.6S8 5.3 8 3.9V2.5h6v1.4c0 1.4 1.1 2.6 2.5 2.6S19 5.3 19 3.9v-1c1.8.8 3 2.5 3 4.6v12c0 2.8-2.2 5-5 5zm-1.7-7.9l-3.8-2.2V9c0-.6-.4-1-1-1s-1 .4-1 1V15.6s0 .1.1.1l.1.1.1.1s.1 0 .1.1l4.3 2.5c.5.3 1.1.1 1.4-.4.4-.6.2-1.2-.3-1.5zM16.5 5c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1zm-11 0c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }
      - type: custom:button-card
        entity: climate.living_room
        name: HISTORY
        tap_action:
          action: url
          url_path: https://home.nest.com
        color_type: card
        icon: mdi:none
        show_state: false
        show_name: true
        style: |
          ha-card {
            font-size: 80% !important;
            color: white !important;
            background:
            {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
              #EB6D00 !important;
            {% else %}
              {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                #0055FF !important; 
              {% else %}
                #373F48 !important;
              {% endif %}
            {% endif %}
            box-shadow: none;
          }  ha-icon {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
            background-position: 25%;
            background-position-x: 50%;
            background-position-y: center;
            background-repeat: no-repeat;
            height: 44px;
            margin: 0 
            auto 3px;
            width: 26px;            
          }
1 Like

Hi Daniel,

What a beautiful work. Everything works except the time at the top doesn’t. What could this be?Schermafbeelding 2022-11-30 161522

Did you create the required sensors and automations and edit them as required match your existing climate entity? Are the related automations triggering?

My sensor.nest_time_to_temp_message is a templated sensor based on my sensor.living_room_time_to_temp. That requires the thermostat’s current setpoint, the current ambient temperature and the rate_of_change from the last time it ran. The rate_of_change is based on input_datetime helpers that the automations update when heating starts and stops.

What does your version of sensor.living_room_time_to_temp look like in Dev Tools, States?

I found it

When I turn on the thermostat, it first goes into idle for a few seconds and then goes into heating mode. So I adjusted the automation from idle to heating

1 Like

Wow! What a great card! Considering the number of components that are necessary, this would deserve a tutorial video :slight_smile:

Thanks!
It’s not a card unto itself per-se, just my handiwork to replicate my Nest thermostat display as close as I could to the app using what I learned about HA over the last 20 months, and great use of “Google” - my best friend!
I’ll consider your suggestion!

1 Like

Hi Very good work
I would like to integrate your card but I am very afraid to make modifications in the Lovelace files.
Honestly I don’t understand the sentence
« Copy the code from lovelace_raw_config.yaml and add it as a new view in your ui.lovelace.yaml or your lovelace dashboard raw configuration«
What is ui.Lovelace.yaml ?
What his raw configuration ?
Could you make some screen shots ?
I am very afraid to break one file and to kill my HA !
Thanks
Phil

No problem! It was not that long ago I was where you’re at.
ui.lovelace.yaml is the way a few people use lovelace which is old school. Most though use it through the UI which is the way I learned it. Your complete raw config for the current dashboard can be accessed here…

As you browse through it, you will see the start of each of your views indented two spaces.
Everything else within that view is further indented so with practice you can quickly scroll through looking for the start of each view…

image

You can insert a new view anywhere you want between the end of one view and the start of the next but the easiest might be to append the contents of lovelace_raw_config.yaml to the end of your file…

  - title: Environment
    path: environment
    icon: hass:thermostat
    theme: clear-dark
    popup_cards:
      sensor.nest_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.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'
        entities:
          - entity: sensor.nest_hvac_mode
            state_template: |
              {% if is_state('sensor.nest_hvac_mode', 'heat') %}
               '✓'
              {% else %}
                ' '
              {% endif %}
        entity: sensor.nest_hvac_mode
      sensor.nest_preset_mode:
        title: ' '
        card:
          style: |
            .card-header {
              line-height: 20px;
              font-size: 14px;
              white-space: normal;
              text-align: center;
            }
            .card-header .name {
              font-size: 14px;
              color: gray;
              white-space: normal !important;
              text-align: center;
            }
          type: entities
          show_header_toggle: false
          title: >-
            Save energy by using Eco Temperatures when no one's home. Or turn
            them on manually any time.
          entities:
            - type: button
              icon: mdi:leaf
              action_name: START ECO
              name: ' '
              tap_action:
                action: call-service
                service: climate.set_preset_mode
                service_data:
                  entity_id: climate.living_room
                  preset_mode: eco
            - type: button
              icon: mdi:leaf-off
              action_name: STOP ECO
              name: ' '
              tap_action:
                action: call-service
                service: climate.set_preset_mode
                service_data:
                  entity_id: climate.living_room
                  preset_mode: none
      climate.living_room:
        title: Schedule
        card:
          type: custom:scheduler-card
          title: Living Room Schedule
          include:
            - climate.living_room
    badges: []
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: entity-filter
            columns: 1
            state_filter:
              - operator: '!='
                value: of
                attribute: hvac_action
            entities:
              - entity: sensor.nest_time_to_temp_message
            state_color: false
            show_state: false
            show_icon: false
            card:
              type: glance
              show_icon: false
              show_name: false
              style: |
                ha-card {
                  font-size: 80% !important;
                  color: white !important;
                  background:
                  {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                    #EB6D00 !important;
                  {% else %}
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                      #0055FF !important; 
                    {% else %}
                      #373F48 !important;
                    {% endif %}
                  {% endif %}
                  box-shadow: none;
                }  ha-icon {
                  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:thermostat-dark-card
            name: Living Room
            entity: climate.living_room
            chevron_size: '50'
            step: '0.5'
            pending: '1'
            idle_zone: '2'
            hvac:
              states:
                'off': 'off'
                cooling: cool
                heating: heat
            attribute: hvac_action
            away:
              sensor:
                sensor: sensor.nest_eco_temp
            style: |
              ha-card {
                {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                  background: #EB6D00;
                  border-bottom: 1pt solid #E65E00;
                {% else %}
                  {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                    background: #0055FF ; 
                    border-bottom: 1pt solid #00008B;
                  {% else %}
                    background: #373F48 ;
                    border-bottom: 1pt solid #2b333a;
                  {% endif %}
                {% endif %}
                box-shadow: 0 0 10px;
               }
               .dial_title {
                 color: white !important;
               }
            highlight_tap: true
          - type: entities
            entities:
              - type: custom:multiple-entity-row
                entity: sensor.nest_humidity
                name: Inside Humidity
                icon: mdi:none
                style:
                  hui-generic-entity-row:
                    $: |
                      state-badge {
                        display: none !important;
                      }
            style:
              .: |
                ha-card {
                  color: white;
                  font-size: 1.1rem;
                  {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                    background: #EB6D00;
                    border-bottom: 1pt solid #E65E00;
                  {% else %}
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                      background: #0055FF ; 
                      border-bottom: 1pt solid #00008B;
                    {% else %}
                      background: #373F48 ;
                      border-bottom: 1pt solid #2b333a;
                    {% endif %}
                  {% endif %}
                }
          - type: entities
            entities:
              - entity: sensor.nest_outside_temperature
                name: Outside Temp
                icon: mdi:none
                style:
                  hui-generic-entity-row:
                    $: |
                      state-badge {
                        display: none !important;
                      }
            style:
              .: |
                ha-card {
                  color: white;
                  font-size: 1.1rem;
                  {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                    background: #EB6D00;
                    border-bottom: 1pt solid #E65E00;
                  {% else %}
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                      background: #0055FF ; 
                      border-bottom: 1pt solid #00008B;
                    {% else %}
                      background: #373F48 ;
                      border-bottom: 1pt solid #2b333a;
                    {% endif %}
                  {% endif %}
                }
          - type: horizontal-stack
            style:
              .: |
                ha-card {
                  color: white;
                  font-size: 1.1rem;
                  {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                    background: #EB6D00;
                    border-bottom: 1pt solid #E65E00;
                  {% else %}
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                      background: #0055FF ; 
                      border-bottom: 1pt solid #00008B;
                    {% else %}
                      background: #373F48 ;
                      border-bottom: 1pt solid #2b333a;
                    {% endif %}
                  {% endif %}
                }
            cards:
              - type: custom:button-card
                entity: sensor.nest_hvac_mode
                name: MODE
                show_name: true
                tap_action:
                  action: more-info
                color_type: icon
                state:
                  - operator: template
                    value: >
                      [[[ return states['climate.living_room'].state === 'off'
                      ]]]
                    icon: mdi:none
                    color: white
                  - operator: template
                    value: >
                      [[[ return states['climate.living_room'].state === 'heat'
                      ]]]
                    icon: mdi:none
                    color: rgb(239, 140, 0)
                  - operator: template
                    value: >
                      [[[ return states['climate.living_room'].state === 'cool'
                      ]]]
                    color: blue
                    icon: mdi:none
                show_state: false
                style: |
                  ha-card {
                    font-size: 85% !important;
                    color: white;
                    background:
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                      #EB6D00 ;
                    {% else %}
                      {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                        #0055FF ; 
                      {% else %}
                        #373F48;
                      {% endif %}
                    {% endif %}
                    box-shadow: none;
                  }
                  ha-icon {
                    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='-282.6 655.7 611.9 511.8' fill='%23FFF'%3E%3Cpath d='M235.4 1039.5c-38.3 30.7-76.8 46.1-117.7 46.1-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.4 5.1-2.3.7-5.7 1-7.6-2.6-1.7-3.2 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.2 0 99.7 23 153.5 74.2 61.3 58.8 127.8 110 194.4 110 12.8 0 25.6-2.6 38.3-5.1 2.8-.5 5.9-1.2 7.6 2.6 1.6 3.3.1 5.1-2.4 7.6zM-194.5 991c38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.6-.7 4.6.1 5.7 2.1 1.7 3.1-.6 5.6-.6 5.6-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46.1-43.5-97.2-84.4-145.9-84.4-10.2 0-20.4 2.9-28.2 5.1-2.3.7-4.2.7-5.7-2.3-1.5-2.8.6-5.3.6-5.3 28.1-20.6 56.3-33.3 87-33.3zM327.4 799c-28.2 23-58.8 33.2-87 33.2-38.3 0-76.8-18-115.2-56.3-46-43.4-97.1-84.4-145.8-84.4-10.2 0-20.5 2.6-28.2 5.1-2.2.7-4.3.2-5.6-1.8-2.2-3.5.5-5.9.5-5.9 28.2-23 58.8-33.2 87-33.2 38.3 0 76.8 18 115.2 56.3 46.1 43.5 97.2 84.4 145.9 84.4 10.2 0 20.5-2.6 28.2-5.1 2.1-.8 4.3-1.1 5.7.7 1.5 2.1 1.9 4.5-.7 7zM81.9 811.9c61.4 58.8 127.9 110 194.5 110 12.8 0 25.6-2.6 38.3-5.1 2.6-.7 5.7-1.2 7.6 2.6 1.6 3.1 0 5.1-2.6 7.6-38.4 30.7-76.8 46-117.7 46-51.2 0-99.7-23-153.5-74.2-61.4-58.8-127.9-110-194.5-110-12.8 0-25.6 2.6-38.3 5.1-2.6.7-5.7.7-7.6-2.6-1.8-3.1 0-5.1 2.6-7.6 38.3-30.7 76.8-46.1 117.7-46.1 51.1 0 99.7 23.1 153.5 74.3z'/%3E%3C/svg%3E");
                    background-position: 25%;
                    background-position-x: 50%;
                    background-position-y: center;
                    background-repeat: no-repeat;
                    height: 44px;
                    margin: 0 
                    auto 3px;
                    width: 26px;            
                    }
              - type: custom:button-card
                entity: sensor.nest_preset_mode
                name: ECO
                label: ECO
                tap_action:
                  action: more-info
                color_type: icon
                color: green
                icon: mdi:none
                state:
                  - operator: template
                    value: >
                      [[[ return
                      states['climate.living_room'].attributes.preset_mode ==
                      'none' ]]]
                    icon: mdi:none
                    color: white
                show_state: false
                show_name: true
                style: |
                  ha-card {
                    font-size: 85% !important;
                    color: white;
                    background:
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                      #EB6D00 !important;
                    {% else %}
                      {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                        #0055FF !important; 
                      {% else %}
                        #373F48 !important;
                      {% endif %}
                    {% endif %}
                    box-shadow: none;
                  }  
                  ha-icon { 
                    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.1' height='24.1' viewBox='0 0 26 24' fill='%23FFF'%3E%3Cpath class='st0' d='M.8 20.7c6.3 4.5 13.1 4.7 19-1.7 6.1-6.5 6.4-14.5 6.2-19-3.3 4-9.5 2.2-18.2 5C1 7.2.1 15.3 0 18.7c1.6-1.7 4.6-4.5 8.5-5.9 6.2-2.3 8.9-2.3 12.6-5.1-2.3 2.6-5.3 4.1-11.1 6.2-4.2 1.5-7.9 5.3-9.2 6.8z'/%3E%3C/svg%3E"); 
                    background-position: 25%;
                    background-position-x: 50%;
                    background-position-y: center;
                    background-repeat: no-repeat;
                    height: 44px;
                    margin: 0 
                    auto 3px;
                    width: 26px;            
                  }
              - type: custom:button-card
                entity: climate.living_room
                name: SCHEDULE
                tap_action:
                  action: more-info
                color_type: card
                icon: none
                show_state: false
                show_name: true
                style: |
                  ha-card {
                    font-size: 85% !important;
                    color: white !important;
                    background:
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                      #EB6D00 !important;
                    {% else %}
                      {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                        #0055FF !important; 
                      {% else %}
                        #373F48 !important;
                      {% endif %}
                    {% endif %}
                    box-shadow: none;
                  }   ha-icon { 
                    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24.1' fill='%23FFF'%3E%3Cpath d='M17 24.5H5c-2.8 0-5-2.2-5-5v-12c0-2 1.2-3.8 3-4.6v1c0 1.4 1.1 2.6 2.5 2.6S8 5.3 8 3.9V2.5h6v1.4c0 1.4 1.1 2.6 2.5 2.6S19 5.3 19 3.9v-1c1.8.8 3 2.5 3 4.6v12c0 2.8-2.2 5-5 5zm-1.7-7.9l-3.8-2.2V9c0-.6-.4-1-1-1s-1 .4-1 1V15.6s0 .1.1.1l.1.1.1.1s.1 0 .1.1l4.3 2.5c.5.3 1.1.1 1.4-.4.4-.6.2-1.2-.3-1.5zM16.5 5c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1zm-11 0c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1z'/%3E%3C/svg%3E"); 
                    background-position: 25%;
                    background-position-x: 50%;
                    background-position-y: center;
                    background-repeat: no-repeat;
                    height: 44px;
                    margin: 0 
                    auto 3px;
                    width: 26px;            
                  }
              - type: custom:button-card
                entity: climate.living_room
                name: HISTORY
                tap_action:
                  action: url
                  url_path: https://home.nest.com/thermostat/02AA01AC28140A0G
                color_type: card
                icon: mdi:none
                show_state: false
                show_name: true
                style: |
                  ha-card {
                    font-size: 80% !important;
                    color: white !important;
                    background:
                    {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
                      #EB6D00 !important;
                    {% else %}
                      {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
                        #0055FF !important; 
                      {% else %}
                        #373F48 !important;
                      {% endif %}
                    {% endif %}
                    box-shadow: none;
                  }  ha-icon {
                    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 26 24' fill='%23FFF' stroke='%23FFF'%3E%3Cpath stroke-width='.05' d='M12.5 24c-6.6 0-12-5.4-12-12s5.4-12 12-12c.6 0 1 .4 1 1s-.4 1-1 1C7 2 2.5 6.5 2.5 12s4.5 10 10 10 10-4.5 10-10c0-.6.4-1 1-1s1 .4 1 1c0 6.6-5.4 12-12 12zM22.9 8.4c-.5.2-1.1 0-1.3-.5-.2-.5 0-1.1.5-1.3.5-.2 1.1 0 1.3.5.2.5 0 1.1-.5 1.3zm-3.6-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0zm-2.1 11.7l-5.2-3s-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1v-.1-.1-.1-.1-.1-7.1c0-.6.4-1 1-1s1 .4 1 1v6.4l4.7 2.7c.5.3.6.9.4 1.4-.4.6-1 .7-1.5.5zm-1.1-14c-.5-.2-.8-.8-.5-1.3.2-.5.8-.8 1.3-.5.5.2.8.8.5 1.3-.2.5-.8.7-1.3.5z'/%3E%3C/svg%3E"); 
                    background-position: 25%;
                    background-position-x: 50%;
                    background-position-y: center;
                    background-repeat: no-repeat;
                    height: 44px;
                    margin: 0 
                    auto 3px;
                    width: 26px;         
                  }
      - type: entities
        entities:
          - entity: sensor.nest_hvac_action
          - entity: sensor.norton_court_heating
            name: Furnace Runtime - Today
          - entity: sensor.furnace_runtime_weekly
          - entity: sensor.furnace_runtime_monthly
          - entity: sensor.furnace_runtime_annually
          - entity: sensor.living_room_time_to_temp
            name: Estimated time to temp
          - entity: sensor.nest_time_to_temp_message
            name: Message
          - entity: sensor.nest_setpoint
          - entity: sensor.nest_temperature
          - entity: sensor.living_room_temperature
            name: Living Room Precise Temp
          - entity: input_number.hvac_current_heat_start_temp
            name: This Start Temp
          - entity: input_number.hvac_heat_start_temp
            name: Last Start Temp
          - entity: input_number.hvac_heat_end_temp
            name: Last End Temp
          - entity: input_datetime.furnace_filter_replaced
          - entity: script.furnace_filter_replaced
            name: Filter just replaced
          - entity: sensor.furnace_filter_usage
          - entity: sensor.furnace_filter_hours
        card_mod:
          class: inline-card
      - type: custom:popup-card
        entity: climate.living_room
        card:
          type: custom:scheduler-card
          title: Heat schedule
          discover_existing: false
          include:
            - climate
          card_mod:
            class: inline-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'
      - type: custom:popup-card
        entity: sensor.nest_preset_mode
        card:
          type: vertical-stack
          cards:
            - type: markdown
              content: >
                Save energy by using Eco Temperatures when no one's home. Or
                turn them on manually any time.
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  border: none;
                }
            - type: conditional
              conditions:
                - entity: sensor.nest_preset_mode
                  state: none
              card:
                type: custom:button-card
                entity: sensor.nest_preset_mode
                name: Start Eco
                show_icon: false
                styles:
                  grid:
                    - grid-template-columns: 1fr 90%
                tap_action:
                  action: call-service
                  service: climate.set_preset_mode
                  service_data:
                    entity_id: climate.living_room
                    preset_mode: eco
                style: |
                  ha-card {
                    background: none;
                    box-shadow: none;
                    border: none;
                  }
            - type: conditional
              conditions:
                - entity: sensor.nest_preset_mode
                  state: eco
              card:
                type: custom:button-card
                entity: sensor.nest_preset_mode
                name: Stop Eco
                show_icon: false
                styles:
                  grid:
                    - grid-template-columns: 1fr 80%
                tap_action:
                  action: call-service
                  service: climate.set_preset_mode
                  service_data:
                    entity_id: climate.living_room
                    preset_mode: none
                style: |
                  ha-card {
                    background: none;
                    box-shadow: none;
                    border: none;
                  }
        style: |
          ha-card {
            background: none;
            box-shadow: none;
            border: none;
          }
          bar-card-name {
            color: white;
            font-size: 100%;
            font-weight: normal;
            margin: 4px;     
          } 
          bar-card-backgroundbar {
            border-shadow: 2pt;
            margin-top: -2pt;
            margin-left: -2pt;
            border-radius: 5pt;
            border-style: solid;
            #background: rgba(255, 0, 0, 0.8);
            background: black;
          }
          bar-card-value {
            font-size: 125%;
            color: white;
            font-weight: bold;
            margin: 4px;
          }
          bar-card-currentbar {
            border-radius: 5pt;
          }
        card_mod:
          class: inline-card

Is there a fool’s guide on how to do this please?
great work by the way?

1 Like

What I posted above is rather complete, I think, but being less than 2 years into HA myself I still remember how mind boggled and confused I would get, even after a year of endless studying, googling, and reading! Therefore, please message me here or on Discord (Grabbr#7711) with any questions and I’d be only too happy to answer. I spent like 6 months or more coding & developing this and learned a lot along the way…

Thanks for the replies. Ive tried but no luck

Unable to parse YAML: YAMLException: end of the stream or a document separator is expected (259:1) 256 | state_color: true 257 | title: Humidity In The … 258 | 259 | - title: Environment -------^ 260 | path: environment 261 | icon: hass:thermostat

Looks like I’m just gonna ignore installing this. But it’s still awesome though

I am trying to have it ingegrated but when trying to add the sensors.yaml to my own sensors.yaml file it gives errors

Error loading /config/configuration.yaml: while parsing a block mapping
in "/config/sensors.yaml", line 81, column 6
expected <block end>, but found '-'
in "/config/sensors.yaml", line 152, column 6

Please post your sensors.yaml…

So, your yaml has:

256 | state_color: true 
257 | title: Humidity In The … 
258 | 
259 | - title: Environment -------^ 
260 |   path: environment 
261 |   icon: hass:thermostat

The format of your existing lines 256-258 does not match my formatting.
My yaml is formatted to be added to the UI managed Lovelace dashboard inside views: via {} Raw Configuration Editor