I’ve put together a template for displaying Evohome heating zones from entities created by the evohome_cc / RAMSES_RF custom component integration. It’s easy to tweak and reasonably compact, whilst displaying a lot of information. It’s designed to be used in a Lovelace grid of two columns for optimum mobile viewing, but will work in a single column too.
Firstly, make sure you have the evohome_cc and the button-card components installed. HACS is the easiest way to do this in my opinion…GitHub - zxdavb/evohome_cc: (WIP) HA custom component for evohome_rf GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Secondly, edit your Lovelace UI configuration. If you’ve never done this before here are some basic steps:
I suggest you do this from a regular web desktop/laptop web browser and not a tablet / mobile.
On the Home Assistant dashboard, click on the three-dots icon in the top-right and choose ‘Edit Dashboard’
Go and find those three-dots again in the top-right and click a second time on it, this time choosing ‘Raw configuration editor’
Did I mention to make sure you’ve already taken a backup?
The first row in this file is usually ‘title: SERVER-NAME’, you copy and paste my whole template under this, starting on line 2.
This goes in your Lovelace-UI YAML file:
button_card_templates:
evohome_tile:
variables:
entity_climate: climate.living_room
entity_heat_demand: sensor.04_029854_heat_demand
entity_battery: binary_sensor.04_029854_battery_2
entity_window: binary_sensor.04_029854_window_2
triggers_update:
- '[[[ return variables.entity_climate ]]]'
- '[[[ return variables.entity_heat_demand ]]]'
- '[[[ return variables.entity_battery ]]]'
- '[[[ return variables.entity_window ]]]'
action: more-info
show_icon: false
show_name: true
styles:
card:
- padding: 2%
- background-color: |
[[[
var entity_name = variables.entity_climate
if (entity_name == 'water_heater.stored_hw')
if(states[entity_name].state == 'off')
return "#dddddd"; // grey
else
return "#ff5252"; // red
if (states[entity_name].attributes['hvac_action'] == 'heating')
return "#ff5252"; // red
if (states[entity_name].attributes['preset_mode'] == 'away')
return "#dec362"; // yellow
if ((states[entity_name].attributes['heating_type'] == 'electric_heat') && (states[entity_name].state != 'off'))
return "#73d16b"; // green
if (states[entity_name].attributes['hvac_action'] == 'idle')
return "#73d16b"; // green
if (states[entity_name].state == 'off')
return "#dddddd"; // grey
if (states[variables.entity_climate].attributes['hvac_action'] == null)
return "#6ba5d1"; // blue
return "#ffffff"; // white
]]]
grid:
- grid-template-areas: >-
"n n n" "current_temperature current_temperature setpoint_title"
"current_temperature current_temperature setpoint_value" "status
status status" "mode mode mode" "demand demand demand" "battery
battery battery" "window window window"
- grid-template-columns: auto
- grid-template-rows: min-content
name:
- color: black
- font-size: 12px
- justify-self: start
custom_fields:
current_temperature:
- color: black
- font-size: 30px
- font-weight: bold
- justify-self: start
setpoint_title:
- color: black
- font-size: 10px
- font-weight: normal
- justify-self: start
- font-style: italics
setpoint_value:
- color: black
- margin-top: '-6px'
- font-size: 17px
- font-weight: normal
- justify-self: start
- font-style: italics
status:
- color: black
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
mode:
- color: black
- font-style: italics
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
demand:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
battery:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
window:
- color: black
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
custom_fields:
current_temperature: |
[[[
return states[variables.entity_climate].attributes['current_temperature'] + "°C"
]]]
setpoint_title: |
[[[
return "Setpoint"
]]]
setpoint_value: |
[[[
return states[variables.entity_climate].attributes['temperature'] + "°C"
]]]
status: |
[[[
var outputtext
if (variables.entity_climate == 'water_heater.stored_hw')
outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
else if (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat')
outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['preset_mode']
//else if (states[variables.entity_climate].attributes['hvac_action'] == null)
// outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode']
else
outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
return outputtext
]]]
mode: |
[[[
if ((states[variables.entity_climate].attributes['preset_mode'] != null) && (states[variables.entity_climate].attributes['preset_mode'] == "temporary") )
if ((states[variables.entity_climate].attributes['mode'] != null))
return "Until: " + states[variables.entity_climate].attributes['mode']['until']
else
return "No Mode Data"
else
if ((states[variables.entity_climate].attributes['mode'] != null))
return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
else
return "No Mode Data"
]]]
demand: |
[[[
var returnstring = "<br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_heat_demand].state == null)
return returnstring + "?"
else
return returnstring + Math.round(states[variables.entity_heat_demand].state) + "%"
]]]
battery: |
[[[
var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_battery].attributes['battery_level'] == null)
return returnstring + "?"
else
return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
]]]
window: |
[[[
var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if ( (states[variables.entity_window].attributes['device_id'] == null) || (variables.entity_climate == 'water_heater.stored_hw') || (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat'))
return "<br>"
else
if(states[variables.entity_window].state == 'on')
return returnstring + 'Open'
else
return returnstring + 'Closed'
]]]
Now add a new card of type ‘Custom: Button-Card’ and paste the following example. You will need to replace the entity and variables with your appropriate sensor entities. Yes, I know you’ve got to put your climate entity in twice but I can’t figure out how to improve that at the moment.
type: custom:button-card
template: evohome_tile
entity: climate.living_room
variables:
entity_climate: climate.living_room
entity_heat_demand: sensor.04_029854_heat_demand
entity_battery: binary_sensor.04_029854_battery_2
entity_window: binary_sensor.04_029854_window_2
And this is an example of how to make it look nice in a Grid:
type: grid
cards:
- type: custom:button-card
template: evohome_tile
entity: climate.living_room
variables:
entity_climate: climate.living_room
entity_heat_demand: sensor.04_029854_heat_demand
entity_battery: binary_sensor.04_029854_battery_2
entity_window: binary_sensor.04_029854_window_2
- type: custom:button-card
template: evohome_tile
entity: climate.guest_room
variables:
entity_climate: climate.guest_room
entity_heat_demand: sensor.04_029850_heat_demand
entity_battery: binary_sensor.04_029850_battery_2
entity_window: binary_sensor.04_029850_window_2
- type: custom:button-card
template: evohome_tile
entity: climate.en_suite
variables:
entity_climate: climate.en_suite
entity_heat_demand: sensor.04_029880_heat_demand
entity_battery: binary_sensor.04_029880_battery_2
entity_window: binary_sensor.04_029880_window_2
- type: custom:button-card
template: evohome_tile
entity: climate.main_bedroom
variables:
entity_climate: climate.main_bedroom
entity_heat_demand: sensor.04_059705_heat_demand
entity_battery: binary_sensor.04_059705_battery_2
entity_window: binary_sensor.04_059705_window_2
columns: 2
square: false
Update 2021-11-10:
Merged the Window entity tweaks into this post.
Added some checking for null objects in the ‘Mode’ display. If you notice any more errors from this card caused by null entity objects please let me know. They manifest as a massive ugly blob of error text on your dashboard when you try and display the card.
2 Likes
That’s very nice looking but looks like it’s not working in your card template the variables bit has your own settings
The template is fine, but for the cards you would need to substitute my entities for your own. The three variable values at the top of the template are default values. You can put your own default entities in there too.
1 Like
phdelodder
October 16, 2021, 5:40am
5
Thanks for this nice overview of the different heating zones. I’m wondering if you might add the open window binary_sensor to the card?
Yup, should be straightforward but I had my window entities disabled. They’re enabled now so once they’ve become available and populated with some data I’ll tweak the template.
Ok here it is then. Your updated template which supports the window open/close entity status too. The end result if embedded in a 2 column grid would look something like this (note that I rebooted Home Assistant recently so the status of some of my entities are currently unknown, hence the ? and blank spaces everywhere):
button_card_templates:
evohome_tile:
variables:
entity_climate: climate.living_room
entity_heat_demand: sensor.04_029854_heat_demand
entity_battery: binary_sensor.04_029854_battery_2
entity_window: binary_sensor.04_029854_window_2
triggers_update:
- '[[[ return variables.entity_climate ]]]'
- '[[[ return variables.entity_heat_demand ]]]'
- '[[[ return variables.entity_battery ]]]'
- '[[[ return variables.entity_window ]]]'
action: more-info
show_icon: false
show_name: true
styles:
card:
- padding: 2%
- background-color: |
[[[
var entity_name = variables.entity_climate
if (entity_name == 'water_heater.stored_hw')
if(states[entity_name].state == 'off')
return "#dddddd"; // grey
else
return "#ff5252"; // red
if (states[entity_name].attributes['hvac_action'] == 'heating')
return "#ff5252"; // red
if (states[entity_name].attributes['preset_mode'] == 'away')
return "#dec362"; // yellow
if ((states[entity_name].attributes['heating_type'] == 'electric_heat') && (states[entity_name].state != 'off'))
return "#73d16b"; // green
if (states[entity_name].attributes['hvac_action'] == 'idle')
return "#73d16b"; // green
if (states[entity_name].state == 'off')
return "#dddddd"; // grey
if (states[variables.entity_climate].attributes['hvac_action'] == null)
return "#6ba5d1"; // blue
return "#ffffff"; // white
]]]
grid:
- grid-template-areas: >-
"n n n" "current_temperature current_temperature setpoint_title"
"current_temperature current_temperature setpoint_value" "status
status status" "mode mode mode" "demand demand demand" "battery
battery battery" "window window window"
- grid-template-columns: auto
- grid-template-rows: min-content
name:
- color: black
- font-size: 12px
- justify-self: start
custom_fields:
current_temperature:
- color: black
- font-size: 30px
- font-weight: bold
- justify-self: start
setpoint_title:
- color: black
- font-size: 10px
- font-weight: normal
- justify-self: start
- font-style: italics
setpoint_value:
- color: black
- margin-top: '-6px'
- font-size: 17px
- font-weight: normal
- justify-self: start
- font-style: italics
status:
- color: black
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
mode:
- color: black
- font-style: italics
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
demand:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
battery:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
window:
- color: black
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
custom_fields:
current_temperature: |
[[[
return states[variables.entity_climate].attributes['current_temperature'] + "°C"
]]]
setpoint_title: |
[[[
return "Setpoint"
]]]
setpoint_value: |
[[[
return states[variables.entity_climate].attributes['temperature'] + "°C"
]]]
status: |
[[[
var outputtext
if (variables.entity_climate == 'water_heater.stored_hw')
outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
else if (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat')
outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['preset_mode']
//else if (states[variables.entity_climate].attributes['hvac_action'] == null)
// outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode']
else
outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
return outputtext
]]]
mode: |
[[[
if (states[variables.entity_climate].attributes['preset_mode'] == "temporary")
return states[variables.entity_climate].attributes['mode']['until']
else
return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
]]]
demand: |
[[[
var returnstring = "<br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_heat_demand].state == null)
return returnstring + "?"
else
return returnstring + Math.round(states[variables.entity_heat_demand].state) + "%"
]]]
battery: |
[[[
var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_battery].attributes['battery_level'] == null)
return returnstring + "?"
else
return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
]]]
window: |
[[[
var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if ( (states[variables.entity_window].attributes['device_id'] == null) || (variables.entity_climate == 'water_heater.stored_hw') || (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat'))
return "<br>"
else
if(states[variables.entity_window].state == 'on')
return returnstring + 'Open'
else
return returnstring + 'Closed'
]]]
And an example of how you’d call it from a card:
type: custom:button-card
template: evohome_tile
entity: climate.living_room
variables:
entity_climate: climate.living_room
entity_heat_demand: sensor.04_029854_heat_demand
entity_battery: binary_sensor.04_029854_battery_2
entity_window: binary_sensor.04_029854_window_2
Update 2021-10-18: I’ve just tweaked the code slightly so as the window status doesn’t show on electric heating zone or DHW cards.
3 Likes
Many thanks. I used a lot of your code to do the same approach for mine. More of understanding the concept of Variables and grid as well
1 Like
Would you be able to perhaps share a screenshot of your chosen layout please? I’m just curious as to how other people are presenting their heating systems in HA.
Sure, will do, but I’m working on the design step by step slowly. I’ll share it here by the end
phdelodder
December 1, 2021, 5:02am
12
Do you plan on adding boost button for 1 hour?
I’m sorry but I don’t plan on doing that, I like the clean information view and never personally use boost for heating. I’m sure it’s possible if you wanted to play - my starting point would be trying to embed a button-card for calling the boost service as an entity within my existing button-card’s grid layout. It’s probably easiest to create the new button-card first to get it working, and then try embedding it afterwards.
Update - I thought about this for a few more seconds and I’m not certain you can actually embed a button-card in a button-card. I think you’d have to totally change the approach and instead implement a vertical stack instead containing two button cards, and then you’d have to change the logic to control the background colour and make it look like a single tile. It’s basically a very different solution to the one I have built. Happy to be proven wrong though!
Here is my general dashboard look
In the details, I need this: temp, humidity, label if data didn’t change for a long time, yellow fire if Climate device at that room is not idling, and notification if the battery of the sensor goes off
On a double click it pops-up a mini graph card with the h24h history
Here are the codes:
# Climate display switch
# Simple weather https://github.com/kalkih/simple-weather-card
- type: 'custom:simple-weather-card'
entity: weather.home
name: ""
tap_action:
action: call-service
service: timer.start
service_data:
entity_id: timer.climate_display
style: |
ha-card {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: var(--paper-item-icon-color);
border-bottom-style: solid;
border-bottom-width: 0.5px;
}
# Line1 of temps
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo3_outside_humidity
- temp_entity_id: sensor.termo3_outside_temperature
- clim_intity_id: climate.dummyclimate
- name: Outdoor
- timer_entity: timer.outdoor_climate_display
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.xiaomi_lywsd02_badroom_humidity
- temp_entity_id: sensor.xiaomi_lywsd02_badroom_temperature
- clim_intity_id: climate.dummyclimate
- name: Bedroom1
- timer_entity: timer.k1_bedroom_climate_display
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo2_kitchen_k1_humidity
- temp_entity_id: sensor.termo2_kitchen_k1_temperature
- clim_intity_id: climate.k1_ac
- name: K1 Kitchen
- timer_entity: timer.k1_kitchen_climate_display
# Line2 of Temps
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo_6_workshop_humidity
- temp_entity_id: sensor.termo_6_workshop_temperature
- clim_intity_id: climate.workshop_heat
- name: Workshop
- timer_entity: timer.workshop_climate_display
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo1_office_humidity
- temp_entity_id: sensor.termo1_office_temperature
- clim_intity_id: climate.office_ac
- name: Office
- timer_entity: timer.office_climate_display
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo5_bedroom_k2_humidity
- temp_entity_id: sensor.termo5_bedroom_k2_temperature
- clim_intity_id: climate.dummyclimate
- name: Master WC
- timer_entity: timer.dummytimer
# EXTRA Cards
- type: conditional
conditions:
- entity: timer.climate_display
state: "active"
card:
type: custom:stack-in-card
mode: vertical
keep:
margin: true
border_radius: true
cards:
# Line3 of Temps
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo4_hall_k2_humidity
- temp_entity_id: sensor.termo4_hall_k2_temperature
- clim_intity_id: climate.dummyclimate
- name: Hall1
- timer_entity: timer.dummytimer
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo4_hall_k2_humidity
- temp_entity_id: sensor.termo4_hall_k2_temperature
- clim_intity_id: climate.dummyclimate
- name: Hall1
- timer_entity: timer.dummytimer
- type: custom:decluttering-card
template: declat_cliamte_graph
variables:
- hum_entity_id: sensor.termo4_hall_k2_humidity
- temp_entity_id: sensor.termo4_hall_k2_temperature
- clim_intity_id: climate.dummyclimate
- name: Hall1
# - timer_entity: timer.dummytimer
# # Line4 of Temps
# - type: horizontal-stack
# cards:
# - type: custom:button-card
# template: btc_climate
# entity: scene.outdoor
# - type: custom:button-card
# template: btc_climate
# entity: scene.bed_time
# - type: custom:button-card
# template: btc_climate
# entity: scene.tv_time
Button card template, kudos for @sOckhamSter
btc_climate:
aspect_ratio: 5/2
show_icon: false
show_name: true
show_last_changed: true
### TODO ###
# tap_action:
# action: call-service
# service: scene.turn_on
# service_data:
# entity_id: entity
variables:
entity_termo: '[[[ return entity.entity_id ]]]'
entity_hum: ""
entity_clim: climate.dummyclimate
triggers_update: all
# - '[[[ return variables.entity_termo ]]]'
# - '[[[ return variables.entity_hum ]]]'
# - '[[[ return variables.entity_clim ]]]'
styles:
card:
- align-self: center
- border-radius: 15px
- border-width: 1px
- border-style: solid
- border-color: var(--paper-item-icon-color)
img_cell:
- padding-left: 15px
- justify-content: start
grid:
- grid-template-areas: '"temp l l l" "temp n n n" "temp hum clim btr"'
- grid-template-columns: 35% 25% 20% 20%
- grid-template-rows: 30% 40% 30%
name:
- margin-left: 5%
- font-size: 80%
- justify-self: start
- align-self: start
# TODO Relative time - плохо?
label:
- margin-left: 5%
- font-size: 50%
- justify-self: start
- color: |
[[[
var d = Math.round((Date.now() - Date.parse(states[variables.entity_termo].last_changed))/60/1000);
var r;
if (d > 35) r = "var(--secondary-text-color)"; else r = "rgba(0,0,0,0)";
return r;
]]]
custom_fields:
temp:
- font-size: 75%
- border-radius: 50%
- width: 65%
- height: 75%
- padding: 10%
- background: var(--paper-item-icon-color)
- color: white
- display: grid
- justify-self: end
- align-items: center
- justify-content: center
hum:
- font-size: 60%
- justify-self: start
- margin-left: 15%
clim:
- justify-self: center
- color: var(--paper-item-icon-active-color)
btr:
- justify-self: center
- color: red
custom_fields:
temp: |
[[[
return states[variables.entity_termo].state + "°"
]]]
hum: |
[[[
return Math.round(states[variables.entity_hum].state) + "%"
]]]
clim: |
[[[
if (states[variables.entity_clim].attributes.hvac_action == 'off' || states[variables.entity_clim].attributes.hvac_action == 'idle')
return "";
else return "<ha-icon icon='mdi:fire' style='width: 60%; height: 60%'></ha-icon>";
]]]
btr: |
[[[
if (states[variables.entity_termo].attributes.battery < 15)
return "<ha-icon icon='mdi:battery-charging-20' style='width: 50%; height: 50%'></ha-icon>";
]]]
And a declatering card optimise coding a bit:
declat_cliamte_graph: # This is the name of a template
# default:
# entity_clim: climate.dummyclimate
card:
type: custom:button-card
template: btc_climate
entity: '[[temp_entity_id]]'
name: '[[name]]'
variables:
entity_hum: '[[hum_entity_id]]'
entity_clim: '[[clim_intity_id]]'
tap_action:
action: call-service
service: timer.start
service_data:
entity_id: '[[timer_entity]]'
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: TestTitle1
hide_header: true
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mini-graph-card
name: Outside temperature 24h
hours_to_show: 24
points_per_hour: 1
group_by: hour
decimals: 1
hour24: true
lower_bound: 20
upper_bound: 90
height: 120
show:
labels: true
labels_secondary: true
icon: false
fill: fade
legend: false
color_thresholds:
- value: 20
color: "#d428d4"
- value: 30
color: "#d676d6"
- value: 40
color: "#43afc4"
- value: 50
color: "#4476c2"
- value: 60
color: "#078bf7"
- value: 70
color: "#5600e0"
- value: 80
color: "#003596"
icon_adaptive_color: true
entities:
- entity: '[[hum_entity_id]]'
- entity: '[[temp_entity_id]]'
y_axis: secondary
color: "#ffc21c"
show_state: true
show_fill: false
show_points: true
smoothing: true
Hope it will help or inspire someone
jdungen
January 6, 2022, 10:47pm
15
Hi, I have some problems when creating the button when copy / paste the button card:
Any idea?
Does your climate.evh.kinderkamer entity have any attributes such as hvac_action that this card is using? You can check in the developer dashboard.
jdungen
January 8, 2022, 11:48am
17
Hi, Thanks for the reply.
No there are only these:
This a radiator valve (HR92)
Thanks,
That’ll be the reason then. I created the template purely for Evohome controller climate zone entities created by evohome_cc. If you’re using other types of entities then they just won’t have the data available or in the expected format. You’ll have to dive through the template code and take out or adjust the parts as appropriate. Enable the developer tools, locate your climate entity, and have a look at the data available to you. Here’s an example of one of my climate entities:
Compare that with your climate.evh.kinderkamer entity and wherever I reference a particular attribute in my template, replace the attribute name with the equivalent for your entity.
dcorfan
January 2, 2023, 6:15pm
19
Hi, I’ve just started with HA so please be gentle. I initially installed the Honeywell TCC integration which logs into the TCC platform and it’s working OK but I was looking to add some more information the view. I really like the look of your integration and I’m OK with the YAML side of things but am really struggling to install the RAMSES integration. All hints and tips welcome. Thank you
@sOckhamSter
Many thanks for this nice card
Like this, but please note that the battery percentage part no longer works (for me anyway) because ramses_cc doesn’t seem to send any charge percentages anymore.
type: custom:button-card
entity: climate.kitchen
variables:
entity_climate: climate.kitchen
entity_heat_demand: sensor.04_029876_heat_demand
entity_battery: binary_sensor.04_029876_battery_2
entity_heat_demand2: sensor.04_029878_heat_demand
entity_battery2: binary_sensor.04_029878_battery_2
entity_battery3: binary_sensor.34_112355_battery_2
entity_window1: binary_sensor.04_029876_window_open
entity_window2: binary_sensor.04_029878_window_open
triggers_update:
- '[[[ return variables.entity_climate ]]]'
- '[[[ return variables.entity_heat_demand ]]]'
- '[[[ return variables.entity_battery ]]]'
action: more-info
show_icon: false
show_name: true
styles:
card:
- padding: 2%
- background-color: |
[[[
var entity_name = variables.entity_climate
if (entity_name == 'water_heater.stored_hw')
if(states[entity_name].state == 'off')
return "#dddddd"; // grey
else
return "#ff5252"; // red
if (states[entity_name].attributes['hvac_action'] == 'heating')
return "#ff5252"; // red
if (states[entity_name].attributes['preset_mode'] == 'away')
return "#dec362"; // yellow
if (states[entity_name].attributes['hvac_action'] == 'idle')
return "#73d16b"; // green
if (states[entity_name].state == 'off')
return "#dddddd"; // grey
if (states[variables.entity_climate].attributes['hvac_action'] == null)
return "#6ba5d1"; // blue
return "#ffffff"; // white
]]]
grid:
- grid-template-areas: >-
"n n n" "current_temperature current_temperature setpoint_title"
"current_temperature current_temperature setpoint_value" "status status
status" "mode mode mode" "demand demand2 battery3" "battery battery2
battery2" "window1 window2 window2"
- grid-template-columns: auto
- grid-template-rows: min-content
name:
- color: black
- font-size: 12px
- justify-self: start
custom_fields:
current_temperature:
- color: black
- font-size: 30px
- font-weight: bold
- justify-self: start
setpoint_title:
- color: black
- font-size: 10px
- font-weight: normal
- justify-self: start
- font-style: italics
setpoint_value:
- color: black
- margin-top: '-6px'
- font-size: 17px
- font-weight: normal
- justify-self: start
- font-style: italics
status:
- color: black
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
mode:
- color: black
- font-style: italics
- margin-top: 1px
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
demand:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
battery:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
demand2:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
battery2:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
battery3:
- color: black
- font-size: 14px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
window1:
- color: black
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
window2:
- color: black
- font-size: 12px
- font-weight: normal
- justify-self: start
- text-transform: capitalize
custom_fields:
current_temperature: |
[[[
return states[variables.entity_climate].attributes['current_temperature'] + "°C"
]]]
setpoint_title: |
[[[
return "Setpoint"
]]]
setpoint_value: |
[[[
return states[variables.entity_climate].attributes['temperature'] + "°C"
]]]
status: |
[[[
var outputtext
if (variables.entity_climate == 'water_heater.stored_hw')
outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
else if (states[variables.entity_climate].attributes['hvac_action'] == null)
outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode']
else
outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
return outputtext
]]]
mode: |
[[[
if ((states[variables.entity_climate].attributes['preset_mode'] != null) && (states[variables.entity_climate].attributes['preset_mode'] == "temporary") )
if ((states[variables.entity_climate].attributes['mode'] != null))
return "Until: " + states[variables.entity_climate].attributes['mode']['until']
else
return "No Mode Data"
else
if ((states[variables.entity_climate].attributes['mode'] != null))
return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
else
return "No Mode Data"
]]]
demand: |
[[[
var returnstring = "<small>Kitchen</small><br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_heat_demand].state == null)
return returnstring + "?"
else
return returnstring + states[variables.entity_heat_demand].state + "%"
]]]
battery: |
[[[
var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_battery].attributes['battery_level'] == null)
return returnstring + "?"
else
return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
]]]
demand2: |
[[[
var returnstring = "<small>Dining</small><br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_heat_demand2].state == null)
return returnstring + "?"
else
return returnstring + Math.round(states[variables.entity_heat_demand2].state) + "%"
]]]
battery2: |
[[[
var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_battery2].attributes['battery_level'] == null)
return returnstring + "?"
else
return returnstring + states[variables.entity_battery2].attributes['battery_level']*100 + "%"
]]]
battery3: |
[[[
var returnstring = "<small>Stat</small><br><ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_battery3].attributes['battery_level'] == null)
return returnstring + "?"
else
return returnstring + Math.round(states[variables.entity_battery3].attributes['battery_level']*100) + "%"
]]]
window1: |
[[[
var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_window1].attributes['device_id'] == null)
return "<br>"
else
if(states[variables.entity_window1].state == 'on')
return returnstring + 'Open'
else
return returnstring + 'Closed'
]]]
window2: |
[[[
var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon> "
if (states[variables.entity_window2].attributes['device_id'] == null)
return "<br>"
else
if(states[variables.entity_window2].state == 'on')
return returnstring + 'Open'
else
return returnstring + 'Closed'
]]]
