your card with the house and the interior and exterior temperature is so nice,
could you share it?
Sure, no problem. It uses card-mod to change the colour of the outside temperature depending on whether it’s hotter or colder outside, and the colour of the inside temperature to indicate heating vs cooling. There are also a few template helpers to get rid of the temperature units, for example the helper sensor.hvac_target_temp_no_units has a template of
{{state_attr("climate.hvac", "temperature")}}
There might be a tidier way of doing this, but in the end it works pretty well. It also uses scripts to toggle cool/heat (by tapping on the inside house temperature) or to turn the entire HVAC system off and on (by tapping on the outside temperature).
At some point I want to change the sun to a moon based on whether the sun is above the horizon and move those tap actions into small discrete toggle icons, but with HA there’s always something more important/interesting to poke on.
type: vertical-stack
cards:
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: climate.hvac
state: cool
elements:
- type: state-label
entity: sensor.hvac_target_temp_no_units
style:
top: 65%
left: 21%
transform: scale(3,3)
color: var(--blue-color)
tap_action:
action: call-service
service: script.thermostat_toggle_cool_heat
target: {}
- type: icon
icon: mdi:snowflake
style:
top: 50%
left: 22.5%
transform: scale(1.5,1.5)
color: var(--blue-color)
tap_action:
action: call-service
service: script.thermostat_toggle_cool_heat
target: {}
- type: conditional
conditions:
- entity: climate.hvac
state: heat
elements:
- type: state-label
entity: sensor.hvac_target_temp_no_units
style:
top: 65%
left: 22%
transform: scale(3,3)
color: var(--red-color)
tap_action:
action: call-service
service: script.thermostat_toggle_cool_heat
target: {}
- type: icon
icon: mdi:fire
style:
top: 50%
left: 22.5%
transform: scale(1.5,1.5)
color: var(--red-color)
tap_action:
action: call-service
service: script.thermostat_toggle_cool_heat
target: {}
- type: conditional
conditions:
- entity: climate.hvac
state: "off"
elements:
- type: state-label
entity: sensor.inside_temperature_no_units
style:
top: 65%
left: 22%
transform: scale(3,3)
color: var(--green-color)
- type: state-label
entity: sensor.temperature_no_units
tap_action:
action: call-service
service: script.thermostat_toggle_off
target: {}
style:
top: 25%
left: 72%
transform: scale(3,3)
card_mod:
style: |
:host {
color:
{% set tempOut = states('sensor.outside_temperature')|float(0) %}
{% set tempIn = states('sensor.hvac_air_temperature')|float(0) %}
{% if tempOut > tempIn %}
var(--pink-color)
{% else %}
var(--blue-color)
{% endif %}
image: /local/inside-outside-grey.png
- type: custom:button-card
color_type: blank-card
styles:
card:
- height: 50px
view_layout:
grid-area: thermostat1