Added two new sensors: nest_eco_low and nest_eco_high with unit of measurement set to °C so automatic conversion by HA to value in Fahrenheit will occur (if your system is set to Imperial). I tested by setting their value to Fahrenheit values and unit of measurement as °F and HA displayed the correct value for me in Celsius!
hey man, have two nest thermostats and want to apply your work to my lovelace.
So i got your repo files, set the sensors according to my climate.xxx thermostat name.
But sensors started working, so thats a nice start.
Secondary, i can’t understand where to put the lovelace-raw or lovelace.yaml file to make a card of it in my ui-lovelace.yaml config.
Just copy the code from lovelace_raw_config.yaml and add it your lovelace raw configuration.
Here is my thermostat card:
type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:thermostat-dark-card'
name: Living Room
entity: climate.living_room
chevron_size: 50
step: 0.1
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:
- 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;
}
- type: entities
entities:
- entity: sensor.nest_outside_temperature
name: Outside Temp.
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;
}
- 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
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;
}
Use the UI and add an empty manual card and then highlight its yaml and replace with the above.
1 Like
Then in your lovelace raw config, find the view where you added the manual card and insert the code below for the popup cards into the code for the view:
- path: environment
title: Environment
icon: 'hass:thermostat'
theme: ''
badges: []
popup_cards:
sensor.living_room_hvac_mode:
type: 'custom:card-templater'
title: Cancel
card:
type: entities
show_header_toggle: false
title: 'Set thermostat to:'
style: |
#main-title {
font-size: 16px;
}
.card-header {
line-height: 20px;
}
.card-header .name {
font-size: 14px;
color: gray;
}
entities:
- entity: sensor.living_room_hvac_mode
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.living_room_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.living_room_hvac_mode
state_template: |
{% if is_state('sensor.living_room_hvac_mode', 'heat') %}
'✓'
{% else %}
' '
{% endif %}
entity: sensor.living_room_hvac_mode
sensor.living_room_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
cards:
- type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:thermostat-dark-card'
I hope that helps!
1 Like
I am using lovelace in yaml mode, not in beginner mode
Dont know anything about lovelace raw mode bro
This one is familliar and i can add it
But this one
Never saw such instructions before
I guess I must still be in beginner mode since I am not using ui.lovelace.yaml.
I added my own dashboard and have set that as my default view (My Dashboard)
It’s raw config start off with:
title: Norton Court
views:
- path: essentials
title: Essentials
panel: false
icon: 'mdi:home-outline'
theme: transparentblue
background: center / cover no-repeat fixed url('/local/images/216876.jpg')
badges:
- entities:
- entity: sun.sun
icon: 'mdi:moon-waxing-crescent'
name: Nighttime
state_filter:
- below_horizon
type: entity-filter
- entities:
- entity: sun.sun
icon: 'mdi:white-balance-sunny'
name: Daytime
state_filter:
- above_horizon
type: entity-filter
- entity: sensor.period_of_day
- entity: sensor.next_sunrise
- entity: sensor.next_sunset
- entity: person.daniel_brunt
- entity: person.may_yang
cards:
- type: vertical-stack
cards:
- type: entity-filter
You may not be using path in which case each view would start with:
title: Norton Court
views:
- title: Essentials
panel: false
icon: 'mdi:home-outline'
theme: transparentblue
background: center / cover no-repeat fixed url('/local/images/216876.jpg')
badges:
- entities:
- entity: sun.sun
icon: 'mdi:moon-waxing-crescent'
name: Nighttime
state_filter:
- below_horizon
type: entity-filter
- entities:
- entity: sun.sun
icon: 'mdi:white-balance-sunny'
name: Daytime
state_filter:
- above_horizon
type: entity-filter
- entity: sensor.period_of_day
- entity: sensor.next_sunrise
- entity: sensor.next_sunset
- entity: person.daniel_brunt
- entity: person.may_yang
cards:
- type: vertical-stack
cards:
- type: entity-filter
You would need to add this code into the view that holds the thermostat card:
popup_cards:
sensor.living_room_hvac_mode:
type: 'custom:card-templater'
title: Cancel
card:
type: entities
show_header_toggle: false
title: 'Set thermostat to:'
style: |
#main-title {
font-size: 16px;
}
.card-header {
line-height: 20px;
}
.card-header .name {
font-size: 14px;
color: gray;
}
entities:
- entity: sensor.living_room_hvac_mode
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.living_room_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.living_room_hvac_mode
state_template: |
{% if is_state('sensor.living_room_hvac_mode', 'heat') %}
'✓'
{% else %}
' '
{% endif %}
entity: sensor.living_room_hvac_mode
sensor.living_room_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
Can you post your lovelace yaml or at least the beginning of it?
title: HASSiO Server
resources:
- url: /local/thermostat-card.js?v=1
type: module
- url: /local/multiple-entity-row.js?v=3.4.0
type: module
- url: /local/card-mod.js
type: module
- url: /local/card-tools.js
type: module
- url: /local/card-modder.js
type: module
- url: /local/markdown-mod.js
type: js
- url: /local/todoist-list.js?v=1
type: js
- url: /hacsfiles/hass-shutter-card/hass-shutter-card.js
type: module
- url: /local/tiles-card.js?v=0.1
type: js
- url: /hacsfiles/button-card/button-card.js
type: module
- url: /hacsfiles/lovelace-html-card/html-card.js
type: module
- url: /local/vertical-stack-in-card.js?v=0.3.2
type: js
- url: /local/stack-in-card.js
type: module
- url: /local/custom-header.js?v=0.0.1
type: module
- url: /hacsfiles/surveillance-card/surveillance-card.js
type: module
- url: /local/mini-graph-card-bundle.js?v=0.9.4
type: module
- url: /local/scheduler-card/scheduler-card.js?v=0
type: module
- url: /hacsfiles/lovelace-thermostat-dark-card/thermostat-dark-card.js
type: module
custom_header:
compact_mode: true
- type: vertical-stack
cards:
- type: entities
title: TV room
entities:
- entity: light.tv_room_lights
name: Lights
- entity: light.tv_room_led
name: LED
icon: mdi:led-strip
- entity: cover.55770580cc50e3ee9fe1
name: Curtain
icon: mdi:atlassian
- entity: light.hue_lighstrip_top
name: Hue top
icon: mdi:led-strip
- entity: light.hue_lightstrip_bottom
name: Hue bottom
icon: mdi:led-strip
- entity: media_player.samsung75
icon: mdi:television
name: Samsung 75"
oh man, you made such a great frontend integration and still not using it in yaml mode!
the thing is, that i can’t understand where i should
add this code into the view that holds the thermostat card:
Does your lovelace display as a single view?
This is my dashboard with many views. The Environment view where I have the thermostat card is highlighted:
it has many views, im making them in that ui-lovelace.yaml file
this way
views:
- title: HOME
icon: mdi:home-assistant
cards:
- type: vertical-stack
cards:
- type: glance
title: Gateway control
entities:
Okay, so just add my lovelace yaml to the end of yours.
- title: Climate
icon: 'hass:thermostat'
theme: ''
badges: []
popup_cards:
sensor.living_room_hvac_mode:
type: 'custom:card-templater'
title: Cancel
card:
type: entities
show_header_toggle: false
title: 'Set thermostat to:'
style: |
#main-title {
font-size: 16px;
}
.card-header {
line-height: 20px;
}
.card-header .name {
font-size: 14px;
color: gray;
}
entities:
- entity: sensor.living_room_hvac_mode
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.living_room_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.living_room_hvac_mode
state_template: |
{% if is_state('sensor.living_room_hvac_mode', 'heat') %}
'✓'
{% else %}
' '
{% endif %}
entity: sensor.living_room_hvac_mode
sensor.living_room_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
cards:
- type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:thermostat-dark-card'
name: Living Room
entity: climate.living_room
chevron_size: 50
step: 0.1
pending: '1'
idle_zone: '2'
hvac:
states:
'off': 'off'
cooling: cool
heating: heat
attribute: hvac_action
away:
sensor:
sensor: sensor.living_room_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:
- entity: sensor.living_room_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;
}
- type: entities
entities:
- entity: sensor.openweathermap_temperature
name: Outside Temp
icon: 'mdi: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
cards:
- type: 'custom:button-card'
entity: sensor.living_room_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.living_room_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;
}
hey bro, that helped! almost all worked, just the weather sensor and schedule is not active yet, making some tweaks so they do
thanks, you should add this code to github as an installation and to the readmefile
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