A different take on the thermostat card for Home Assistant Lovelace UI. The aim is to provide a card with simpler interactions that are easier to use and take up less space, as well as provide more modularity to tweak the card. For example the abiltity to embed sensor values that are relevant to your thermostat (like humidity, energy usage, hours on +++).
Hide everything but sensors and temperature control:
type: custom:simple-thermostat
entity: climate.hvac
step_layout: row
show_header: false
control: false
Home Assistant 0.84 or higher
- Download the
simple-thermostat.js
from the latest release and store it in yourconfiguration/www
folder. Previously you could download the source file from Github but starting from the 0.14 release that is no longer possible. If you try to do so it will crash - Configure Lovelace to load the card:
resources:
- url: /local/simple-thermostat.js?v=1
type: module
entity
string: The thermostat entity id requiredtoggle_entity
string: An entity id to create a toggle in the header for. This gives the option to control a separate entity which can be related to the thermostat entity (like a switch, or input_boolean)name
string: Override the card name. Default is to use the friendly_name of the thermostat providedshow_header
bool: Set to false to hide card name and iconunit
string|bool: Override the unit to display. Set to false to hide unitdecimals
number: Specify number of decimals to use: 1 or 0fallback
string: Specify a text to display if a valid set point can't be determined. Defaults toN/A
icon
string|object: Show an icon next to the card name. You can also pass an object to specify specific icons. Current value is taken from attributes.hvac_action when available, or state as fallback.auto
: string Use this icon for hvac_action auto. Default mdi:radiatorcooling
: string Use this icon for hvac_action cooling. Default mdi:snowflakefan
: string Use this icon for hvac_action fan. Default mdi:fanheating
: string Use this icon for hvac_action heating. Default mdi:radiatoridle
: string: Use this icon for hvac_action idle. Default mdi:radiator-disabled"off"
: string Use this icon for hvac_action off. Default mdi:radiator-offauto
: string Use this icon for state auto. Default hass:autorenewcool
: string Use this icon for state cooling. Default hass:snowflakedry
: string: Use this icon for state dry. Default hass:water-percentfan_only
: string Use this icon for state fan. Default hass:fanheat
: string Use this icon for state heat. Default hass:autorenewheat_cool
: string: Use this icon for state heat_cool. Default hass:fire"off"
: string Use this icon for state off. Default hass:power
step_size
number: Override the default 0.5 step size for increasing/decreasing the temperaturestep_layout
string:row
orcolumn
(default). Usingrow
will make the card more compactlabel
object: Override untranslated labelstemperature
: string Override Temperature labelstate
: string Override State label
hide
object: Control specifically information fields to show. Defaults to showing everythingsetpoint
: bool (Default tofalse
)temperature
: bool (Default tofalse
)state
: bool (Default tofalse
)
control
object|array (From 0.27)_names
bool: Show mode names or not. Defaults to true_icons
bool: Show mode icons or not. Defaults to true_headings
bool: Show a heading for each mode button row. Defaults to true{type}
object|bool: The key of the mode type (hvac, preset, fan, swing)_name
string: Override the name of the mode type_hide_when_off
bool: Hides the mode type selection row when the entity is off. Defaults to false shown{mode}
string: Name of mode type to conttrolname
string|bool: Specify a custom name or set tofalse
to show only the iconicon
string|bool: Specify a custom icon or set tofalse
to not show icon
sensors
array|falseentity
string: A sensor value entity idname
string: Specify a sensor name to use instead of the default friendly_nameicon
string: Specify an icon to use instead of a nameattribute
string: The key for an attribute to use instead of state. If this sensor has no entity it will use the main entity's attributesunit
string: When specifying an attribute you can manually set the unit to display
In 0.27, in order to both support changes in the climate domain and to support controlling all modes like hvac, preset, fan and swing modes the old modes
configuration have been removed and replaced with a control
config.
The control
config is most easily explained using a few examples as it supports both a simplified definition using just an array to list the types of modes to control. By default, with no config, it will show hvac
and preset
(if the entity supports it). You can replicate the default manually like this:
control:
- hvac
- preset
This will list all modes for both types. You can get more fine grained control by switching to an object format and taking control of specific modes:
control:
preset:
away: true
none:
name: Not set
What is worth noticing is that there is no merging of the default any more, so with this config you will not get hvac_mode
displayed. If you still want it to display like default you need to set:
control:
preset:
away: true
none:
name: Not set
hvac: true
As previously you can define both name
and icon
on the individual modes, including setting them to false
. What is new is that if you want to only show icons you can hide the names on all modes for the card (or vice versa for only showing names)
control:
_names: false
Please note that you need to quote off/on mode keys to not have them interprented as true/false.
control:
hvac:
off: will not work
"off": works
cards:
- type: 'custom:simple-thermostat'
entity: climate.my_room
step_size: 1
sensors:
- entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy
- entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_power
name: Energy today
- attribute: min_temp
name: Min temp
control:
hvac:
some_mode: false
another_mode: false
'off':
name: Make it cold
icon: false
'on':
name: false
icon: mdi:whitewalker
The card uses the following CSS variables:
Var name | Default value | Usage |
---|---|---|
--st-font-size-xl | var(--paper-font-display3_-_font-size) | Used for target temperature |
--st-font-size-l | var(--paper-font-display2_-_font-size) | Unused at the moment |
--st-font-size-m | var(--paper-font-title_-_font-size) | Used for target temperature unit |
--st-font-size-title | var(--ha-card-header-font-size, 24 | Font size for card heading |
--st-font-size-sensors | var(--paper-font-subhead_-_font-size) | Font size for sensors |
--st-spacing | 4px | Base unit for spacing. Used in multiples many places |
--st-mode-active-background | var(--primary-color) | Background color for active mode button |
--st-mode-active-color | var(--text-primary-color, #fff) | Text color for active mode button |
--st-mode-background | #dff4fd | Background color for inactive mode button |
These variables can be changed globally in the current theme or on each card via card-mod.
Example that makes everything smaller and more compact except sensors that gets blown up completely.
example-theme:
st-font-size-xl: 24px
st-font-size-m: 20px
st-font-size-title: 20px
st-font-size-sensors: 30px
st-spacing: 2px
Same example as above, but will only apply to a single card.
type: 'custom:simple-thermostat'
style: |
ha-card {
--st-font-size-xl: 24px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 30px;
--st-spacing: 2px;
}
...