Minimalist Thermostat by @ShepleySound

A super-simple thermostat for Home Assistant's Lovelace. The goal is to create a thermostat interface that clearly shows both current and target temperatures. This style of display works particularly well in tablet-mounted applications, when the status of a climate device may want to be viewed from a distance.

Installation

1. In Home Assistant, make sure you have HACS installed.
2. In HACS, go to the "frontend" section
3. Select "Custom Repositories"
4. Add the URL of this repository.
5. Select "Lovelace" under "Category"
6. Click the "Add" Button.
7. The plugin should appear as a new repository. Click the "Download" button.
8. Reload your browser.
9. Add to resources:

url: /hacsfiles/minimalist-thermostat/minimalist-thermostat.js
type: module

Examples

Default Configuration

Panel Configuration (Using Card-Mod)

CSS Variables

This card uses the following CSS variables.
You can configure these globally using a Lovelace theme or on each card individually using Card-Mod.

Full-Screen Panel Configuration (Card-Mod)

type: 'custom:minimalist-thermostat'
panel: true
style: |
  ha-card {
  --mt-header-font-size: 2em;
  --mt-number-font-size: 12vmax;
  --mt-temp-header-font-size: 2em;
  --mt-header-margin-bottom: 24px;
  }

To-do

• Add testing.
• Move mode buttons to new custom element.
• Add optional fan mode buttons.
• Add optional vane mode buttons.
• Add optional layout options (Column, row, -/+ buttons, hiding / showing elements)
• Add better support for Celcius / 0.5 degree steps.
• Add localization / language translations.
• Add more CSS variables for better customization.
• Implement "hold" action to quickly change temperature.
• Implement temperature memory to store last set temperature for each mode.
• Implement default temperature to store an optional default temperature for each mode.

Credit

This custom Lovelace card was inspired by simple-thermostat. Boilerplate code for basic card implementation was provided by @custom-cards/boilerplate-code