⚠️ Important: Version 3 introduces breaking changes to the card configuration. After upgrading, please review and update your card options.
What changed:
- The Gunmalmg theme has been completely redesigned with a new condensed layout, preset scrollable row, lock/timed preset controls, a detailed popup, and warning/safety visual indicators. See the Gunmalmg theme section for full details.
- Configuration options have been reorganized into two sections: Common options (all themes) and Classical, VTherm and Uncolored themes only. Some options that were previously available are no longer applicable to the Gunmalmg theme.
- Obsolete options removed:
disable_circleanddisable_background_colorare no longer supported (they are now enforced by the selected theme). - Unused option removed:
eco_temperaturehas been removed.
What you should do:
- Open each card configuration that uses this card.
- Check that your options are still valid — unused or obsolete options will be silently ignored but should be cleaned up to be able to use the UI configuration window.
- If you use the Gunmalmg theme, review the applicable options to see which settings are supported.
This card is dedicated to the Versatile Thermostat integration which is available in HACS also and here.
This card is based on the beautiful Better Thermostat UI Card. It adds some feature so that you can use Versatile Thermostat directly from the card. A big thanks to @KartoffelToby for this Better Thermostat UI Card.
Notes:
- The VTherm should be in V8.x or above to work well with this version.
- Only VTherm climate entities will have a correct display with this card. Other climate should work rougthly
When presence is detected:
When safety is detected:
When activity is detected:
When overpowering is detected:
When window open is detected:
When window bypass is activated:
With all status icons:
The card configuration:
- Add versatile_thermostat support for showing the extra status
- Improve the UI for Touch devices
The 2.3 release adds a theme management option
The classical theme with the temperature selection circle and all VTherm specificities displayed.
The VTherm theme is a full featured theme but more concise than the classical. All VTherm's specificities are displayed in a smaller card. Basically it removes the big colored circle that takes place and add a colored ellipse in background allowing you to see immediatly the state of the thermostat.
Juste like the VTherm theme but without the colored ellipse in background.
Inspired by the card developed by @Gunmalmg (see here), this theme is a minimal, condensed theme designed to be easily readable even from a distance.
Displayed information:
- Current temperature (
current_temperature) - Target temperature (
target_temperature) - HVAC mode (
hvac_mode) - HVAC action (
hvac_action) - Lock state (
lock_state) - Selected preset (
preset_mode) - Timed preset (
timed_preset)
Available actions from the card:
- Turn on / turn off the thermostat (hvac_mode)
- Change the preset (preset_mode)
- Toggle the lock state
- Activate / deactivate the timed preset
- Open a detailed popup by clicking on a temperature
Presets are displayed as buttons on a single horizontally scrollable row. The active preset is highlighted with a colored background, while other presets have a neutral (greyed) background. The scrollable area automatically scrolls to the active preset when the card is displayed.
The lock and timed preset controls are displayed as buttons to the right of the preset buttons.
- The lock button is displayed at the top-right, vertically aligned with the preset buttons. When the lock is active, the button is displayed in red; otherwise it is displayed in green. The lock button can be completely hidden via the
allow_lock_toggleoption. - The timed preset controls work identically to the other themes (duration selector or manual input), but are positioned next to the preset buttons instead of below them.
Clicking on a temperature opens a popup that displays the same detailed information as the Classical theme. The popup reuses the Classical theme code directly (no duplication).
- The popup is centered on the screen.
- On mobile, it can take the full page; on desktop, it is smaller but always easily readable.
- A close button is available at the top-left corner (like standard Home Assistant popups).
If a warning message is present or if the thermostat is in safety mode, the main temperature is displayed in red to draw the user's attention. Clicking on it opens the popup with the warning/safety message already visible, as if the user had clicked on the red information icon.
Only the following options apply to the Gunmalmg theme: disable_name, disable_safety_warning, set_current_as_main, allow_lock_toggle, lock_relock_delay, disable_timed_preset, use_manual_duration_input. Other display options (window, overpowering, HVAC mode buttons, power infos, etc.) are not applicable since those elements are not displayed in this theme. See the Options section for details.
For installation you should have HACS installed. Then add this repository https://github.com/jmcollin78/versatile-thermostat-ui-card in HACS and install the card. You have to reload you browser after installation.
Then you can add the new card into your dashboard.
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:versatile-thermostat-ui-card |
| entity | string | Required | The entity id of climate entity (must be a versatile_thermostat entity). Example: climate.hvac |
| name | string/boolean | Optional | Override the default entity name |
| theme | string | Optional | The default theme that will be applied when the card loads |
| disable_name | boolean | Optional | true to hide the name |
| disable_safety_warning | boolean | Optional | Turn off the security warning (when a temperature sensor is out) |
| set_current_as_main | boolean | Optional | Exchange target temperature and room temperature |
| allow_lock_toggle | boolean | Optional | true to display a lock icon to lock/unlock the thermostat. If a code is configured in VTherm, a keypad will be displayed. |
| lock_relock_delay | number | Optional | Delay in seconds after which the card will automatically re-lock after being unlocked. Set to 0 or omit to disable auto-relock. |
| disable_timed_preset | boolean | Optional | true to hide the timed preset duration selector next to preset icons. |
| use_manual_duration_input | boolean | Optional | true to use a manual input field instead of the preset duration selector (15min, 30min, 1h, 4h, 8h, 24h). |
These options are not applicable to the Gunmalmg theme.
| Name | Type | Default | Description |
|---|---|---|---|
| disable_window | boolean | Optional | Turn off the window open indicator |
| disable_overpowering | boolean | Optional | Turn off the overpowering indicator |
| disable_heat | boolean | Optional | Turn off the on/heat button |
| disable_cool | boolean | Optional | Turn off the on/cool button |
| disable_heat_cool | boolean | Optional | Turn off the on/heat_cool button |
| disable_auto | boolean | Optional | Turn off the on/auto button |
| disable_dry | boolean | Optional | Turn off the on/dry button |
| disable_fan_only | boolean | Optional | Turn off the on/fan_only button |
| disable_off | boolean | Optional | Turn off the off button |
| disable_sleep_mode | boolean | Optional | Turn off the sleep mode button |
| disable_buttons | boolean | Optional | Turn off the plus/minus buttons |
| disable_power_infos | boolean | Optional | Turn off the power informations |
| disable_auto_fan_infos | boolean | Optional | Turn off the auto-fan informations |
| disable_target_icon | boolean | Optional | Hide the target icon for the setpoint temperature (which can be confusing with the room temperature) |
| disable_presets | boolean | Optional | true to hide all the preset icons and timed preset controls. |
| autoStartStopEnableEntity | string | Optional | The entity id of auto-start/stop entity (must be a switch entity). Example: switch.clim_salon_auto_start_stop |
| powerEntity | string | Optional | The entity id of sensor entity which gives the real power consumed by the VTherm. Example: sensor.clim_salon_power |
Example:
type: custom:versatile-thermostat-ui-card
entity: climate.multi_climate
set_current_as_main: true
disable_menu: true
autoStartStopEnableEntity: switch.multi_climate_enable_auto_start_stop
powerEntity: sensor.multi_climate_power
theme: gunmalmg
Some actions are available directly on the card when the theme allows it.
For over_climate you have the possibility to configure the auto-fan mode feature. See versatile_thermostat README.
If the auto-fan mode is configured, you can toggle between the configured auto_fan_mode configured for the VTherm and the None mode (which disable the auto-fan mode).
To toggle the auto-fan mode you must:
- click on the
Auto-fanicon at the left of the Thermostat.
If an open window has been detected, you want to bypass it by clicking on the window icon (above the temperatures). This will enable the window by-pass and then disable the window detection impact. Notice that the icon change to this one when the by-pass is set: 
You can lock or unlock the thermostat by clicking on the lock icon at the top right of the card.
If a pincode is configured in the Versatile Thermostat integration, a keypad dialog will appear to enter the code.
This requires the allow_lock_toggle option to be set to true in the card configuration.
The lock should be configured in the VTherm integration in order to have a full feature. See here.
You can configure an auto-relock delay using the lock_relock_delay option. When set, the card will automatically re-lock itself after the specified number of seconds following an unlock action.
Example with auto-relock after 60 seconds:
type: custom:versatile-thermostat-ui-card
entity: climate.living_room
allow_lock_toggle: true
lock_relock_delay: 60The timed preset feature allows you to temporarily switch to a preset for a specific duration. After the duration expires, the thermostat will automatically return to its previous preset.
This feature requires Versatile Thermostat v8.4.2 or above.
- Next to the preset icons, you will see a duration selector (or input field if
use_manual_duration_inputis enabled) - Select a duration: 15 min, 30 min, 1h, 4h, 8h, or 24h (or enter a custom duration in minutes if using manual input)
- Click on the desired preset icon
- The preset will be activated for the selected duration
The new timed preset field:
When the select duration is open:
With the option to enter manually the duration:
When a timed preset is active:
- The duration selector is replaced by the remaining time display (e.g., "45 min" or "2h30" for durations over 1 hour)
- A cancel button (X) appears next to the remaining time
- Click the cancel button to immediately cancel the timed preset and return to the previous preset
- disable_timed_preset: Set to
trueto completely hide the timed preset feature - use_manual_duration_input: Set to
trueto use a free input field (in minutes) instead of the preset duration selector
Example with timed preset using selector (default):
type: custom:versatile-thermostat-ui-card
entity: climate.living_roomExample with manual duration input:
type: custom:versatile-thermostat-ui-card
entity: climate.living_room
use_manual_duration_input: trueExample with timed preset disabled:
type: custom:versatile-thermostat-ui-card
entity: climate.living_room
disable_timed_preset: trueWhen the mode or the preset or the target temperature has been changed due to special event (window detection, motion detection, power, ...) an information icon like 
or 
is diplayed on the left bar.
Click on it and you will see why your VTherm is not in the requested state.
Example when the setpoint has been changed due to motion detection:
Another example when the VTherm has been turned off by the auto-start/stop feature:
When overpowering and shedding is activated and the setpooint has been set with the power_temp configuration value:
If the VTherm has been turned off by the auto-start/stop feature:
When the timed preset is active:
When a heating failure is detected:
See more informations on heating failure detection in the VTherm documentation.
Just click another time to the information icon to close the information popup.
When the update of the underlying has been delayed due to temporal filter (see on VTherm documentation), then an update icon will be displayed in the left bar:
The safety state informs you that one off the temperature sensors configured in your VTherm don't have send any new temperature to your VTherm. When this happens, there is a risk of overheating and then the VTherm turns into the safety state. This is displayed like that:
The safety mode has been activated because the outdoor temperature sensor's last measurement was 554 minutes ago (and the room temperature was 13 min ago which is more normal).
More informations on the safety mode can be found here.
| Icon | Meaning |
|---|---|
|
Some information messages are available. Click on it to see it |
|
Some warning informations messages are available. Click on it to see it |
 |
The underlying device's update has been delayed. See temporal filter on VTherm documentation |
 |
The presence is detected |
 |
The activity (ie motion) is detected |
 |
The window is detected as open. Click on it to bypass the window detection |
|
The window bypass is active. Click on it to cancel the bypass |
 |
An overpowering detection has been done. The VTherm is in shedding mode |
 |
The VTherm has been turned off by the auto-start/stop feature. |
 |
The target temperature (setpoint) |
 |
The underlying device is cooling (hvac_action is cooling) |
 |
The underlying device is idle and the mode is Cool (hvac_action is idle and the hvac_mode is Cool) |
 |
The underlying device is heating (hvac_action is heating) |
 |
The underlying device is idle and the mode is Heat (hvac_action is idle and the hvac_mode is Heat) |
Example:
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.
What we have so far:
- en - Reference
- bg
- ca
- cn
- cs
- da
- de
- el
- es
- fi
- fr - Reference
- hu
- it
- nl
- no
- pl
- pt
- ro
- ru
- sv
- sl
- sk
- tr
- uk
