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 +++).
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 requiredname
string|false: Override the card name, or disable showing a name at all. Default is to use the friendly_name of the thermostat provideddecimals
number: Specify number of decimals to use: 1 or 0icon
string|object: Show an icon next to the card name. You can also pass an object to specify state-specific icons. Defaults state-specific icons radiator/radiator-disabled/snowflakeidle
: string: Use this icon for state idleheat
: string Use this icon for state heatcool
: string Use this icon for state cool
step_size
number: Override the default 0.5 step size for increasing/decreasing the temperaturehide
object: Control specifically information fields to show. Defaults to showing everythingtemperature
: bool (Default tofalse
)state
: bool (Default tofalse
) t -away
: bool (Default totrue
)
mode_type
operation|fan: Specify which mode type the card should control formodes
. Defaults to operation but you can set fan if wantedmodes
object|bool (From 0.19){mode_key}
object|bool: The key of the mode to defineinclude
bool: Whether to include this mode in the list or notname
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
arrayentity
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
Parsing of YAML will read modes named on
and off
to true
and false
unless you wrap them in ", probably breaking what you wanted to do. If you need to tweak a mode with these names you need to do it like this:
modes:
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
modes:
some_mode: false
another_mode:
include: 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 |
Example that makes everything smaller and more compact except sensors that gets blown up completely
type: 'custom:card-modder'
style:
--st-font-size-xl: 24px
--st-font-size-m: 20px
--st-font-size-title: 20px
--st-font-size-sensors: 30px
--st-spacing: 2px
card:
type: 'custom:simple-thermostat'
...