hc_climate_card:
variables:
show_graph: true
graph_entity:
graph_color: var(--color-red)
current_state_label: "Current state: "
show_label: true
show_state: true
tap_action:
action: more-info
state_display: |
[[[
return variables.current_state_label + states[entity.entity_id].attributes.hvac_action;
]]]
label: |
[[[ return states[entity.entity_id].attributes.current_temperature + '<sup style="font-size: 40px;">°</sup>' ]]]
show_icon: false
styles:
grid:
- grid-template-areas: |
'l buttons'
'n buttons'
's buttons'
'footer footer'
'graph graph'
- grid-template-rows: repeat(5, min-content)
card:
- padding: 15px
name:
- justify-self: start
- align-self: end
- font-weight: 600
- font-size: 14px
- z-index: 2
- margin-bottom: -7px
- pointer-events: none
label:
- font-size: 70px
- justify-self: start
- align-self: start
- font-weight: 700
- z-index: 2
state:
- justify-self: start
- color: var(--subtext-color)
- font-size: 12px
- margin-top: 4px
- font-weight: 500
- z-index: 2
custom_fields:
graph:
- display: |
[[[ return variables.show_graph && variables.graph_entity ? 'block' : 'none' ]]]
- position: absolute
- left: 0
- bottom: -1px
- width: 100%
- z-index: 1
footer:
- margin-top: 10px
- display: flex
- justify-content: center
custom_fields:
buttons:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: |
'item_1'
'item_2'
'item_3'
- row-gap: 1.20
card:
- padding: 10px
- border-radius: 50px
- box-shadow: none
- background-color: var(--button-card-background)
- z-index: 3
custom_fields:
item_2:
- opacity: 0.7
custom_fields:
item_1:
card:
type: custom:button-card
icon: mdi:chevron-up
styles: &icon_style
icon:
- width: 25px
card:
- padding: 10px
- border-radius: 500px
- box-shadow: none
- background: none
tap_action:
action: call-service
service: climate.set_temperature
data:
temperature: |
[[[ return states[entity.entity_id].attributes.temperature + 0.5 ]]]
target:
entity_id: "[[[ return entity.entity_id ]]]"
show: |
[[[ return states[entity.entity_id].attributes.hvac_mode === 'heat' ]]]
item_2: "[[[ return states[entity.entity_id].attributes.temperature + '°' ]]]"
item_3:
card:
type: custom:button-card
icon: mdi:chevron-down
styles: *icon_style
tap_action:
action: call-service
service: climate.set_temperature
data:
temperature: |
[[[ return states[entity.entity_id].attributes.temperature - 0.5 ]]]
target:
entity_id: "[[[ return entity.entity_id ]]]"
show: |
[[[ return states[entity.entity_id].attributes.hvac_mode === 'heat' ]]]
footer:
card:
type: horizontal-stack
cards: |
[[[
const modes = states[entity.entity_id].attributes.hvac_modes || ['off', 'heat', 'cool', 'heat_cool', 'dry', 'fan_only'];
return modes.map(mode => ({
type: 'custom:button-card',
icon: `mdi:${
mode === 'off' ? 'power' :
mode === 'heat' ? 'fire' :
mode === 'cool' ? 'snowflake' :
mode === 'heat_cool' ? 'autorenew' :
mode === 'dry' ? 'water-off' :
mode === 'fan_only' ? 'fan' : 'help-circle'
}`,
show_name: false,
styles: {
card: [
{ 'margin-right': '10px' },
{ 'border-radius': '50%' },
{ 'box-shadow': 'none' },
],
icon: [
{ width: '25px' },
{ color: states[entity.entity_id].state === mode ? 'var(--accent-color, #FF9500)' : 'var(--primary-text-color)' },
],
},
tap_action: {
action: 'call-service',
service: 'climate.set_hvac_mode',
data: { hvac_mode: mode },
target: { entity_id: entity.entity_id },
},
}));
]]]
graph:
card:
type: custom:mini-graph-card
entities:
- entity: "[[[ return variables.graph_entity ]]]"
show_fill: true
show_line: false
show:
name: false
icon: false
state: false
points: false
labels: false
height: 100
line_width: 2
line_color: "[[[ return variables.graph_color ]]]"
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
tap_action:
action: more-info
Hello everyone!
I’m trying out this project to refresh my dashboard, which is built on Matt8707’s Lovelace. I’m currently adapting some cards. This template is for the climate system, where I’ve automatically added the operating modes to the footer and the device status in place of the repeated temperature value. If you like it, feel free to use it.
A Note for the Creators
Please review the installation proposed on the website, as there are some unnecessary configurations:
a) If the settings to hide the header have been moved to the theme, there’s no need to propose them and overlap them with Kiosk.
b) Configuring in storage mode (config.yaml - see the second photo) does not require manually declaring additional resources. These will be loaded automatically by the system if uploaded via HACS or manually in settings -> dashboards -> resources
.
c) In the main.yaml file, folders should be indicated as shown in the third photo.