Thermostat Card

A simple thermostat implemented in CSS based on Nest Thermostat Control by Dal Hundal (@dalhundal) on CodePen

TODO

There are many things still missing, but I'll add below those that I know of

• Allow canceling of schedules for thermostats like Ecobee
• Allow settings Away mode
• Allow changing of Opration mode
• Add support for multiple entities for different functions (zwave thermostats hot/cold, tado away mode, etc)
• Title scaling

Options

Name	Type	Default	Description
type	string	Required	custom:thermostat-card
entity	string	Required	The entity id of climate entity. Example: climate.hvac
title	string	optional	Card title
no_card	boolean	false	Set to true to avoid the card background and use the custom element in picture-elements.
hvac	object	optional	Allows mapping of custom states or using a custom attribute for state
step	number	0.5	The step to use when increasing or decreasing temperature
highlight_tap	boolean	false	Show the tap area highlight when changing temperature settings
chevron_size	number	50	Size of chevrons for temperature adjutment
pending	number	3	Seconds to wait in control mode until state changes are sent back to the server
idle_zone	number	2	Degrees of minimum difference between set points when thermostat supports both heating and cooling
ambient_temperature	string	optional	An entity id of a sensor to use as ambient_temperature instead of the one provided by the thermostat

hvac object

Name	Type	Default	Description
states	optional	optional	A list of states. See examples.
attribute	string	optional	An attribute of the entity to use as state

Example

resources:
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module
name: My Awesome Home
views:
  - title: Home
    cards:
      - type: custom:thermostat-card
        title: Bedroom
        entity: climate.ecobee

Example with custom hvac_states

resources:
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module
name: My Awesome Home
views:
  - title: Home
    cards:
      - type: custom:thermostat-card
        title: Bedroom
        entity: climate.hvac
        chevron_size: 100
        hvac:
          states:
            'Off': 'off'
            'Cooling': 'cool'
            'Heating': 'heat'
          attribute: operation_mode

Example with external ambient sensor

- type: custom:thermostat-card
  title: Bedroom
  entity: climate.ecobee
  ambient_temperature: sensor.bedroom_temperature

⚠️ Make sure you set type to module when including the resource file.

License

This card uses MIT License as it uses a CodePen gist.

Credits

@silasb @ciotlosm