dorkhub

better-thermostat-ui-card

a custom card for a better thermostat in home assistant based on better_thermostat intigration

KartoffelToby
TypeScript370151 forksAGPL-3.0updated 1 week ago
visit the demogit clone https://github.com/KartoffelToby/better-thermostat-ui-card.gitKartoffelToby/better-thermostat-ui-card

Release Discord hacs_badge

UI Card for Better Thermostat

This is a advanced climate card for HA, but with some improvements for the custom better_thermostat integration. (you need at least 1.8.0)

Note: The Eco toggle uses the preset-based API introduced in better_thermostat 1.8.0 (preset_mode "eco"). The card will prefer calling climate.set_preset_mode with preset_mode: "eco" when the preset is available; a fallback to the legacy better_thermostat.set_eco_mode service is kept for older installations.

As for now the main improvement is the ability to see the extra status from better_thermostat like if a window open is detected etc. You can configure the cards as you like, we use the latest HA UI Configuration tool.

Better Thermostat Normal UI Card

Better Thermostat UI Card

Better Thermostat Mini UI Card

Custom colors

Both cards accept a colors: option to recolor HVAC modes and Better Thermostat presets — the dial, mode/preset buttons, badges and features follow the same colors. Use the color pickers in the visual editor ("Colors" section — only the HVAC modes and presets your entity actually exposes are offered; off is intentionally grey and has no picker), or set it in YAML. Values are HA theme color tokens (red, deep-orange, light-green, …) or any raw CSS color as escape hatch:

type: custom:better-thermostat-normal-climate-card
entity: climate.living_room
colors:
  heat: deep-orange
  eco: light-green
  boost: "#ff00ff"

Available keys: auto, cool, dry, fan_only, heat, heat_cool, eco, away, boost, sleep, comfort, activity, home.

Themes can override the same colors globally via the --bt-color-<key> CSS variables (underscores become dashes, e.g. --bt-color-fan-only); the legacy --bt-state-* RGB-triplet theme variables keep working as defaults.

Goals

  • Add better_thermostat support for showing the extra status
  • Improve the UI for Touch devices
  • Show also the Humidity in the UI

Help wanted!

It would be awsome if you help me to translate this card to other languages.

Create a PR, the Translation is done in json files checkout the en translation here

Please add your language to this list as well while you are making your PR. Put it in alphabetical order and according to ISO 639-1.

Translations

INLANG Editor

inlang status badge

What we have so far:

  • en - Reference
  • bg
  • ca
  • cn
  • cs
  • da
  • de
  • el
  • es
  • fi
  • fr
  • hu
  • it
  • lv
  • nl
  • no
  • pl
  • pt
  • ro
  • ru
  • sv
  • sl
  • sk
  • tr
  • uk

Support me

more like this

markItDown

📱 A React app to preview and edit Markdown✍. You can also export it as HTML.

JavaScript51

search

search projects, people, and tags