Palmin
(Bernd)
September 23, 2022, 3:02pm
887
Since I had the same issue (wanted to use icons for state
and temperature
, here is what worked for me: You need to switch to version: 3
, which provides templating.
type: custom:simple-thermostat
entity: climate.essbereich
version: 3
step_size: 0.5
decimals: 1
sensors:
- entity: climate.essbereich
id: state
label: '{{"mdi:power-settings"|icon}}'
template: >-
{{hvac_action|translate('state_attributes.climate.hvac_action.')}}
({{state.text}})
- entity: sensor.essbereich_temperature
id: temperature
label: '{{"mdi:thermometer"|icon}}'
template: '{{state.text|formatNumber}} {{unit_of_measurement}}'
- entity: sensor.essbereich_humidity
label: '{{"mdi:water-percent"|icon}}'
template: '{{state.text}} %'
layout:
step: row
mode:
names: true
headings: false
control:
hvac: true
this results in the following:
It took me a bit of searching here in the forum to be able to recreate the original “State” value, there might be a better way of doing this.
Maybe this is useful for others as well.
Cheers,
Bernd
5 Likes
josdegroot
(Josdegroot)
September 27, 2022, 10:24am
888
I would like the icon in the header (mdi:fire) to change color depending on the heating status. Anyone an idea?
type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
step: row
header:
name: Kelder
icon: mdi:fire
control: false
sensors:
- attribute: hvac_action
name: Status
- entity: sensor.klepsturing_kelder
name: Valve
hide:
state: true
label:
temperature: Temp
sebbaT
September 27, 2022, 1:27pm
889
Try this:
type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
step: row
header:
name: Kelder
control: false
sensors:
- attribute: hvac_action
name: Status
- entity: sensor.klepsturing_kelder
name: Valve
hide:
state: true
label:
temperature: Temp
style: |
ha-card .header__icon {
color:
{% set mode = states('climate.thermostaat_kelder_2')
%} {% if mode == 'off' %} grey {% elif mode ==
'auto' %} green {% elif mode == 'heat' %} red
{% else %} grey {% endif %};
}
josdegroot
(Josdegroot)
October 2, 2022, 9:20pm
890
Thanks, but is it with this one also possible to change the icon? I’m using the icon: mdi:fire
sebbaT
October 2, 2022, 9:23pm
891
type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
step: row
header:
name: Kelder
icon: mdi:fire
control: false
sensors:
- attribute: hvac_action
name: Status
- entity: sensor.klepsturing_kelder
name: Valve
hide:
state: true
label:
temperature: Temp
style: |
ha-card .header__icon {
color:
{% set mode = states('climate.thermostaat_kelder_2')
%} {% if mode == 'off' %} grey {% elif mode ==
'auto' %} green {% elif mode == 'heat' %} red
{% else %} grey {% endif %};
}
Mibix
October 7, 2022, 9:15am
892
How come when in heat/cool mode it doesn’t show the temperature range it is set to? Mine is set to heat at 66 and cool at 72 and it just shows the current temp:
Where it should look something like this:
Elmout
(Sylvain)
October 19, 2022, 7:46am
893
Hi everyone, I’m pretty new to HA and I wonder if it’s possible to get only the temperature from a thermostat entity ?
I would like to add this information on my dashboard like I made it from my sonoff device but this only thing I get it “auto” and not the value of the temperature :
Is there a way to get “climate.temperature” or something like this ? If this card get the value I think I can get it too right ?
Thanks a lot !
Hi everyone. I’ve been tinkering with the simple thermostat for a while, and I’ve incorporated a few ideas from various users into this result:
Updated screenshots after fixing the errors below:
The inside temp has a green check if it matches the thermostat set point. The main entity icon and color changes based on the mode and whether it’s currently running or not.
A couple of things I can’t figure out though, if anyone can tell me how to fix it… UPDATE: I got both issues below fixed by uninstalling and reinstalling the card-mod add-on.
No matter where I change the colors, I can’t get the colors of the Off/Heat/Cool buttons or the On/Auto buttons to change. I’ve tried using both color names and hex codes, but nothing seems to affect it.
I can’t get the On/Auto fan buttons to line up with the other 2 temperature cards on the same row. It’s just a horizontal stack with 2 mushroom templates and the simple thermostat card. Same thing as above, nothing changes when I adjust the spacing in the style.
Here’s the code:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Thermostat
secondary: >
{{ state_attr('climate.thermostat', 'hvac_action') | title }} ● Fan {{
state_attr('climate.thermostat', 'fan_action') }}
icon: |-
{% set mode = states('climate.thermostat') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.thermostat','hvac_action') %}
{% if status == 'off' %}
disabled
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
deep-orange
{% else %}
grey
{% endif %}
tap_action: none
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.thermostat
header: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 12px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.thermostat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: true
step: row
control:
hvac:
'off':
name: 'Off'
heat:
name: Heat
cool:
name: Cool
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: '{{ states(entity) | round|int }} °F'
secondary: Inside
icon: mdi:thermometer
entity: sensor.thermostat_temperature
icon_color: blue
badge_icon: |-
{% set temp = states(entity) | int %}
{% set setpoint = states('sensor.thermostat_setpoint') | int %}
{% if temp == setpoint %} mdi:check-bold
{% elif temp <= 60 %} mdi:snowflake
{% elif temp >= 80 %} mdi:heat-wave
{% else %}
{% endif %}
badge_color: |-
{% set temp = states(entity) | int %}
{% set setpoint = states('sensor.thermostat_setpoint') | int %}
{% if temp == setpoint %} green
{% elif temp <= 60 %} blue
{% elif temp >= 80 %} deep-orange
{% else %}
{% endif %}
picture: ''
- type: custom:mushroom-template-card
primary: '{{ states(entity) | round|int }} °F'
secondary: Outside
icon: mdi:thermometer
entity: sensor.outdoor_temperature
icon_color: green
badge_icon: |-
{% set outside_temp = states(entity) | int %}
{% set inside_temp = states('sensor.thermostat_temperature') | int %}
{% if outside_temp == inside_temp %} mdi:equal
{% elif outside_temp <= 32 %} mdi:snowflake
{% elif outside_temp >= 90 %} mdi:heat-wave
{% else %}
{% endif %}
badge_color: |-
{% set outside_temp = states(entity) | int %}
{% set inside_temp = states('sensor.thermostat_temperature') | int %}
{% if outside_temp == inside_temp %} green
{% elif outside_temp <= 32 %} blue
{% elif outside_temp >= 90 %} deep-orange
{% else %}
{% endif %}
picture: ''
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.thermostat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: true
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
auto:
name: Auto
icon: mdi:fan-auto
'on':
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.thermostat_temperature
name: Inside Temperature
color: '#2196f3'
- entity: sensor.outdoor_temperature
name: Outside Temperature
color: '#4caf50'
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
10 Likes
I’ve created a nice swipe card for the iPhone to control the heatings, but the current temperature is too close to the actuator setting (and also not in line, which hurts my eyes)
Can I set “Aktuell” above the current temperature value?
Here’s the code:
cards:
- cards:
- cards:
- entity: climate.heizung_wohnzimmer_thermostat
name: Heizung Wohnzimmer
type: custom:simple-thermostat
step_size: 1
style: |
ha-card {
--st-font-size-xl: 50px;
--st-font-size-sensors: 30px;
}
sensors:
- entity: sensor.wohnzimmer_klima_temperature
name: Aktuell
control:
hvac_mode: false
hide:
temperature: true
state: true
- entity: climate.heizung_esszimmer_becathermostat
name: Heizung Esszimmer
type: custom:simple-thermostat
step_size: 1
style: |
ha-card {
--st-font-size-xl: 50px;
--st-font-size-sensors: 30px;
}
sensors:
- entity: sensor.esszimmer_klima_temperature
name: Aktuell
control:
hvac_mode: false
hide:
temperature: true
state: true
- entity: climate.heizung_bad_thermostat
name: Heizung Bad
type: custom:simple-thermostat
step_size: 1
style: |
ha-card {
--st-font-size-xl: 50px;
--st-font-size-sensors: 30px;
}
sensors:
- entity: sensor.bad_klima_temperature
name: Aktuell
control:
hvac_mode: false
hide:
temperature: true
state: true
- entity: climate.heizung_kinderzimmer_becathermostat
name: Heizung Kinderzimmer
type: custom:simple-thermostat
step_size: 1
style: |
ha-card {
--st-font-size-xl: 50px;
--st-font-size-sensors: 30px;
}
sensors:
- entity: sensor.kinderzimmer_klima_temperature
name: Aktuell
control:
hvac_mode: false
hide:
temperature: true
state: true
- entity: climate.heizung_schlafzimmer_becathermostat
name: Heizung Schlafzimmer
type: custom:simple-thermostat
step_size: 1
style: |
ha-card {
--st-font-size-xl: 50px;
--st-font-size-sensors: 30px;
}
sensors:
- entity: sensor.schlafzimmer_klima_temperature
name: Aktuell
control:
hvac_mode: false
hide:
temperature: true
state: true
type: custom:swipe-card
type: horizontal-stack
- cards:
- cards:
- align_state: center
entities:
- color: '#A7C7E7'
entity: sensor.wohnzimmer_klima_humidity
index: 0
name: Wohnzimmer Luftfeuchtigkeit
- color: '#FFC300'
entity: sensor.wohnzimmer_klima_temperature
index: 1
name: Wohnzimmer Temperatur
type: custom:mini-graph-card
hour24: true
- align_state: center
entities:
- color: '#A7C7E7'
entity: sensor.esszimmer_klima_humidity
index: 0
name: Esszimmer Luftfeuchtigkeit
- color: '#FFC300'
entity: sensor.esszimmer_klima_temperature
index: 1
name: Esszimmer Temperatur
type: custom:mini-graph-card
hour24: true
- align_state: center
entities:
- color: '#A7C7E7'
entity: sensor.bad_klima_humidity
index: 0
name: Bad Luftfeuchtigkeit
- color: '#FFC300'
entity: sensor.bad_klima_temperature
index: 1
name: Bad Temperatur
type: custom:mini-graph-card
hour24: true
- align_state: center
entities:
- color: '#A7C7E7'
entity: sensor.kinderzimmer_klima_humidity
index: 0
name: Kinderzimmer Luftfeuchtigkeit
- color: '#FFC300'
entity: sensor.kinderzimmer_klima_temperature
index: 1
name: Kinderzimmer Temperatur
type: custom:mini-graph-card
hour24: true
- align_state: center
entities:
- color: '#A7C7E7'
entity: sensor.esszimmer_klima_humidity
index: 0
name: Schlafzimmer Luftfeuchtigkeit
- color: '#FFC300'
entity: sensor.schlafzimmer_klima_temperature
index: 1
name: Schlafzimmer Temperatur
type: custom:mini-graph-card
hour24: true
type: custom:swipe-card
type: horizontal-stack
type: custom:vertical-stack-in-card
Mikypan81
(Michele)
November 9, 2022, 4:58pm
896
Hi everyone, I have a problem with this wonderful card.
In practice, when I press the button at the bottom (last line) to set the status (pre-setting) of my valves, what I select is actually transmitted to my thermostat, but on the lovelace it does not update.
In the example of my screenshot I have clicked and set the “Frost Guard” status, which is actually seen on the netatmo website and app, but why does the orange square persist on “schedule” ???
raphael303
(Raphael303)
November 10, 2022, 9:32am
897
Hi
Does anyone else not see icons for presets in version 2.5 and Home Assistant 2022.11.2? (I also tried 2.4x)
Also, does anyone know how to change the labels for the presets, so that it says “Frost protection” instead of ECO, or sleep instead of night and such?
# Different example usage of sensors with templating support (2.4 release)
You must set `version: 3` on the card to enable these features.
### Render a state value from a different entity:
This is the basic, most used case. Just render the state of a different sensor.
All that happens when you don't pass a template is that a default template is used for label + value.
The two following sensors are thus equal
```yaml
type: 'custom:simple-thermostat'
entity: climate.living_room
version: 3
sensors:
- entity: sensor.living_room_humidity
- entity: sensor.living_room_humidity
template: '{{state.text}}'
label: '{{friendly_name}}'
This file has been truncated. show original
but I don’t get it. I really tried to understand it, but what I really needed to understand were more examples with screenshots.
Also above someone commented that “version: 3” is not needed anymore. However the card clearly changes when putting this into the code.
Furthermore, when I put “version: 3” the labels change
without version 3:
with version 3:
The order is mixed up as well.
How can I have temperature at the top again?
I tried to set custom icons for modes, but to no success. Please not the lack of indentation. It does not work with indentation, which I thought would be needed for “icon” and “name” under comfort.
Here is my code:
type: custom:simple-thermostat
entity: climate.heizung_kuche_und_galerie_2
version: 3
step_size: 0.5
sensors:
- entity: sensor.feuchte_esszimmer
name: Feuchte
layout:
mode:
headings: false
icons: true
names: true
hide:
state: false
control:
preset:
comfort: true
name: Warm
icon: mdi:sofa
home: false
away: true
sleep: true
eco: true
none: false
TekDad
(Ryan Santiago)
November 15, 2022, 4:19pm
898
Running into some issues with this card, using Nest thermostats.
code:
type: custom:simple-thermostat
entity: climate.downstairs_thermostat
name: 1st Floor
icon:
heat: mdi:fire
cool: mdi:snowflake
eco: mdi:leaf
'off': mdi:power
auto: mdi:autorenew
idle: mdi:power
away: mdi:leaf
sensors:
- entity: sensor.downstairs_thermostat_humidity
name: Humidity
layout:
mode:
names: true
icons: true
headings: true
step: row
step_size: 1
modes:
'off':
include: true
name: 'Off'
icon: mdi:power-off
heat:
include: true
name: Heat
icon: mdi:fire
cool:
include: true
name: Cool
icon: mdi:snowflake
heat_cool:
include: false
name: Heat/Cool
Sensor States:
hvac_modes: heat, off, heat_cool, cool
min_temp: 50
max_temp: 90
fan_modes: on, off
preset_modes: none, eco
current_temperature: 68
temperature: 67
target_temp_high: null
target_temp_low: null
fan_mode: off
hvac_action: idle
preset_mode: none
friendly_name: Downstairs Thermostat
supported_features: 27
As you can see above, a bunch of stuff is missing:
Up and Down arrows to control temperature
Icons above operation modes
Hiding the heat/cool mode
Anyone able to tell me where I’m going wrong with that stuff?
tontze
(Tomi)
December 7, 2022, 7:16pm
900
Hello !
Is there a way to add these as preset modes ? They come from modbus …
nickrout
(Nick Rout)
December 7, 2022, 7:19pm
901
Yes, use a template sensor.
android
December 10, 2022, 7:34pm
902
Hello,
is it possible to also send a temperature values together with the hvac_mode options?
e.g.:
control:
hvac:
heat:
name: Heat to 21
temperature: 21
I want to controll a Danfoss Ally TRV via simple-thermostat.
The problem is that compared to e.g. an air conditioner which might have many hvac_modes:
( hvac_modes: cool, heat, dry, heat_cool, fan_only, off)
The Danfoss Ally TRV only supports one:
(hvac_modes: heat)
That’s why I am currently controlling my TRV via lovelace-climate-mode-entity-row
My card has two buttons one for
“off” = hvac_mode: heat / temperature: 10
and one for:
“on” = hvac_mode: heat / temperature: 21
this works as expected.
Now what I’d like to do the same thing via simple-thermostat:
(ugly mock-up)
I’d like to use control buttons that also send a temperature payload to quickly go to e.g. 10˚C or 21˚C and then use the +/- button as normal to do fine adjustment when needed.
This feature would of course be also useful for e.g. air conditioners.
Instead of selecting the “cool” operation mode via button and then having to adjust the temperature with +/- you could just select a button / operation mode which does both things at once: like presets but for every climate device.
android
December 14, 2022, 8:18pm
903
My current workaround is combining vertical-stack-in-card, simple-thermostat and paper-buttons-row.
The three buttons below set the temperature to
10˚C (=“off”), 18˚C or 21°C and glow if they are selected.
hkapanen
(Harri Kapanen)
December 15, 2022, 2:36pm
904
Hello!
Is there a way to create a custom icon/button that would fire off an arbitrary HA script when tapped? I am using the card to control my EV’s HVAC, the state of which does not get updated too often. I’d like to be able to manually refresh it by tapping an icon on the card.
Many thanks,
– Harri
cmj118
(JohnC)
December 22, 2022, 3:57pm
905
Hi,
I am using the basic configuration with Centralite Pearl thermostat, using Zigbee2MQTT. The card shows up like this:
and works great.
I would like to have the cool control and the right setpoint hidden.
Putting this:
control:
hvac:
cool: false
in the configuration works nicely to hide the cool control button. The problem is when I add this:
setpoint:
target_temp_low:
hide:
target_temp_high:
hide: true
the right sepoint is hidden but I get this error:
Failed to call service climate/set_temperature. some but not all values in the same group of inclusion ‘temperature’ @ data[]
when pressing the up and down arrows. I have worked on this for awhile now and even found a post with the same issue but there was no solution.
Any help would be appreciated.
Love the card to control my AC’s :).
However, how do I add the “mode” dropdown? and how can I set a background color for the card? It’s now transparant.
And for the world, I can’t figure how to hide the labels “Werking” and “Ventilatormodus” and to put custom icons in the fanspeed buttons…
Help greatly appreciated!!
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 12px;
}
entity: climate.ac_woonkamer
name: Airco Woonkamer
header:
name: Woonkamer
icon: false
layout:
step: column
mode:
names: false
control:
hvac:
heat_cool: false
icon: mdi:fire
dry: false
fan:
auto: false
medium-low: false
medium-high: false
very-high: false
RCZ
(Roelf Zomerman)
December 26, 2022, 10:05am
907
Hi,
I’m trying to load this card, but it isnt working for me… I added it via HACS - but when I add it into a dashboard it goes: Custom element doesn’t exist: simple-thermostat…
Not sure what I’m doing wrong - and I’m sure its a beginners mistake…
I also added to my configuration.yaml:
lovelace:
mode: yaml
resources:
- url: /local/simple-thermostat.js?v=1
type: module
but not sure if that is required…