Got another card-mod query!
I want to change the colour used on the ‘Off’ button of the control, when the unit is switched off.
Currently it is a grey box, but I would prefer to leave the background of the button is the same blue as the rest of the card, and change the power icon to a dark red.
I suspect card-mod can do this somehow, but haven’t get a clue how to find out what variables I need to work on. Any thoughts? Thanks!
Niiice, can you share your code please?
Hey all! Two small questions:
Is there a way to make the control buttons align, since I have 6 operation modes, 5 fan modes, and 4 swing modes?
Is there a way to add buttons to call services? (Silent mode, sleep mode, boost mode and the display light are all controlled with services that need true/false sent to them).
I’ve been trying many things, but I never manage to!
Not that I am aware of, but you could probably do something with some cards in a vertical stack.
I assume that each zone translates to a separate climate entity in HA?
Here is my design. I have disabled the state and temperature variables because I couldn’t customize their icons. Instead I have manually added temperature as a sensor entity which does allow me to personalize it.
I have additionally added a sensor that tracks the power consumption of the AC unit and a binary sensor that turns green if we are producing power to the grid via solar panels and thus running the airco at that moment is ‘green’.
type: custom:simple-thermostat
entity: climate.airco_kamer_pm
layout:
mode:
names: true
icons: true
headings: false
step: row
header:
faults:
- entity: sensor.airco_kamer_pm_error_code
- entity: binary_sensor.airco_kamer_pm_defrost
- entity: binary_sensor.producing_green_energy
icon: mdi:leaf-circle
name: Airco slaapkamer
icon: mdi:air-conditioner
hide:
temperature: true
state: true
control:
preset: true
fan:
auto:
icon: mdi:fan-auto
low:
icon: mdi:fan-speed-1
medium:
icon: mdi:fan-speed-2
high:
icon: mdi:fan-speed-3
swing:
'off':
name: Swing off
icon: mdi:power
vertical:
name: Vertical swing
icon: mdi:swap-vertical
hvac:
'off':
name: AC off
icon: mdi:power
'on':
name: AC on
icon: mdi:power
sensors:
- entity: sensor.airco_kamer_pm_current_temperature
name: Power
icon: mdi:thermometer
- entity: sensor.airco_kamer_pm_power
name: Power
icon: mdi:lightning-bolt
style: |
ha-card {
--st-font-size-xl: 60px;
--st-font-size-m: 30px;
--st-font-size-title: 20px;
--st-font-size-sensors: 20px;
--st-spacing: 3px;
--st-fault-active-color: green;
}
Hi, love that Simple Thermostat Card. I want to show the next scheduled temperature change. The sensor is sensor.buro_next_scheduled_change_time.
The output of these sensor is 2022-09-30T21:00:00+00:00
I tried to format these output in day month hour minute, but no idea to get this working.
type: custom:simple-thermostat
entity: climate.buro
sensors:
- entity: sensor.buro_battery
name: Batterie
- entity: sensor.buro_comfort_temperature
name: Komfort
- entity: sensor.buro_eco_temperature
name: Absenk
- entity: sensor.buro_next_scheduled_change_time
name: Wechsel
template: "{{ as_timestamp(sensor.buro_next_scheduled_change_time) | timestamp_custom('%w:%b,%H:%M') }}"
layout:
step: row
step_size: '0.5'
decimals: '1'
header: {}
control:
headings: false
include: false
The result is:
Can anybody help me out?
Thanks
Love your card!! It’s exactly what I want and haven’t been able to make work so far…
If you don’t mind could you share your code please?
Thank you!
Hi Guys, loving all these cards, does anyone know how to stop the more info popup coming up when you press the temp?
Thanks in advance.
I can’t come up with smth new and mine, that’s why I take your idea 
Ofcourse no problem… I have changed it slightly since that screenshot, but here is it’s current state:
type: custom:simple-thermostat
entity: climate.aircon
control:
hvac:
dry: false
heat: false
heat_cool: false
fan_only: false
sensors:
- entity: sensor.aircon_inside_temperature
name: Inside
- entity: sensor.aircon_outside_temperature
name: Outside
- entity: sensor.aircon_humidity
name: Humidity
- entity: sensor.aircon_today_s_total_energy_consumption
name: Elec Used Today
layout:
mode:
names: true
icons: true
headings: false
setpoints:
target_temp_high:
hide: true
hide:
temperature: true
state: false
header: true
style: |
ha-card {
--st-font-size-xl: 20px;
--st-font-size-m: 16px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-spacing: 0.5px;
}
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
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
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 %};
}
Thanks, but is it with this one also possible to change the icon? I’m using the icon: mdi:fire
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 %};
}
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:
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