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

1. Download the simple-thermostat.js from the latest release and store it in your configuration/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
2. Configure Lovelace to load the card:

resources:
  - url: /local/simple-thermostat.js?v=1
    type: module

1. Make sure you've the custom_updater component installed and working.
2. Configure Lovelace to load the card:.

resources:
  - url: /customcards/github/nervetattoo/simple-thermostat.js?track=true
    type: module

3. Run the service custom_updater.check_all or click the "CHECK" button if you use the tracker-card.
4. Refresh the website.

• entity string: The thermostat entity id required
• name string|false: Override the card name, or disable showing a name at all. Default is to use the friendly_name of the thermostat provided
• decimals number: Specify number of decimals to use: 1 or 0
• icon 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/snowflake
  • idle: string: Use this icon for state idle
  • heat: string Use this icon for state heat
  • cool: string Use this icon for state cool
• step_size number: Override the default 0.5 step size for increasing/decreasing the temperature
• hide object: Control specifically information fields to show. Defaults to showing everything
  • temperature: bool (Default to false)
  • state: bool (Default to false) t - away: bool (Default to true)
• mode_type operation|fan: Specify which mode type the card should control for modes. Defaults to operation but you can set fan if wanted
• modes object|bool (From 0.19)
  • {mode_key} object|bool: The key of the mode to define
    • include bool: Whether to include this mode in the list or not
    • name string|bool: Specify a custom name or set to false to show only the icon
    • icon string|bool: Specify a custom icon or set to false to not show icon
• sensors array
  • entity string: A sensor value entity id
  • name string: Specify a sensor name to use instead of the default friendly_name
  • icon string: Specify an icon to use instead of a name
  • attribute string: The key for an attribute to use instead of state. If this sensor has no entity it will use the main entity's attributes
  • unit 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:

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
  ...