Hey Daniel, Great front end. I just installed HA 2 weeks ago and this is my first project. I have your version of dark-card working nicely with my home MQTT connected heater. The only issue is to get the dial icon showing up - Heat/Leaf/thermometer, etc…
. Can you confirm where this is in the lovelace Yaml. I can’t see what is triggering these icons to appear… Thanks
Bonjour, et merci pour le partage 
Hello. Could someone explain to me how to configure the lower temperature value. When I click on the image I raise or lower the temperature but only the maximum. Thank you very much
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?
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 
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…
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…