Simple Climate Card V3.0
MOBILE OPTIMISED CARD V3.0
- Dewpoint Comfort Colour Change OUTER RING
- Temperature Comfort Colour Change CARD BACKGROUND
-
Best if used in a horizontal stack card for two cards side by side or two vertical stack cards side by side, within a horizontal stack card.
-
Multiple cards four or more full width of tablet or wall mount panel.
type: picture-elements
image: local/overlay.svg
card_mod:
style: |
ha-card {
{% if is_state('sensor.text_temperature_comfort_upstairs','FROSTY') %}
--ha-card-background: radial-gradient(circle, , black, black, black, mediumblue) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','COLD') %}
--ha-card-background: radial-gradient(circle, black, black, black, dogerblue) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','CHILLY') %}
--ha-card-background: radial-gradient(circle, black, black, black, deepskyblue) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','COOL') %}
--ha-card-background: radial-gradient(circle, black, black, black, mediumaquamarine) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','MILD') %}
--ha-card-background: radial-gradient(circle, black, black, black, seagreen) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','PERFECT') %}
--ha-card-background: radial-gradient(circle, black, black, black, limegreen) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','WARM') %}
--ha-card-background: radial-gradient(circle, black, black, black, gold) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','HOT') %}
--ha-card-background: radial-gradient(circle, black, black, black, orange) !important;
{% elif is_state('sensor.text_temperature_comfort_upstairs','BOILING') %}
--ha-card-background: radial-gradient(circle, black, black, black, crimson) !important;
{% endif %}
}
ha-card {
--ha-card-border-width: 0px !important;
--ha-card-border-radius: 5px !important;
--box-shadow: none !important;
}
elements:
- type: custom:button-card
name: Card Title
label: Upstairs
show_name: false
show_label: true
style:
left: 50%
top: 5%
width: 100%
styles:
label:
- font-size: 12px
- color: silver
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Dew Point Comfort - Upstairs
entity: sensor.text_dewpoint_comfort_upstairs
label: >-
Sensor created in Node Red converts dewpoint to comfort text
https://github.com/miguelangel-nubla/home-assistant-dewpoint
show_state: true
show_name: false
show_label: false
show_icon: false
style:
right: '-50%'
top: 14%
width: 100%
styles:
state:
- font-size: 16px
- font-weight: bold
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 1 - Dewpoint - Upstairs
entity: sensor.dewpoint_upstairs
icon: mdi:water-thermometer-outline
show_state: true
show_name: false
show_icon: true
style:
left: 20%
top: 25%
width: 50%
transform: translate(-50%, -50%) scale(0.6, 0.6)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 2 - Air Quality - Aquarium
entity: sensor.aquarium_air_quality_text
show_state: true
show_name: false
show_icon: true
style:
left: 80%
top: 25%
width: 50%
transform: translate(-50%, -50%) scale(0.6, 0.6)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 3 - Temperature - Upstairs
entity: sensor.netatmo_devonport_tas_indoor_temperature
show_state: true
show_name: false
show_icon: true
style:
left: 20%
top: 75%
width: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 4 - Humidity - Upstairs
entity: sensor.netatmo_devonport_tas_indoor_humidity
show_state: true
show_name: false
show_icon: true
style:
left: 80%
top: 75%
width: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Temperature Comfort Sensor 3 - Upstairs
entity: sensor.text_temperature_comfort_upstairs
label: >-
Sensor created in node red to grab temperature comfort text
https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
Requires msg.payload = msg.payload.comfort[0].temperatureLevel return msg;
show_state: true
show_name: false
show_label: false
show_icon: false
style:
left: 20%
top: 92%
width: 50%
styles:
state:
- font-size: 15px
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Humidity Comfort Sensor 4 - Upstairs
entity: sensor.text_humidity_comfort_upstairs_direct
label: >-
Sensor created in node red to grab humidity comfort text
https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
Requires msg.payload = msg.payload.comfort[0].humidityLevel return msg;
show_state: true
show_name: false
show_label: false
show_icon: false
style:
left: 80%
top: 92%
width: 50%
styles:
state:
- font-size: 15px
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Outer Ring Limits
show_name: false
show_icon: false
aspect_ratio: 1/1
entity: sensor.text_dewpoint_comfort_upstairs
style:
right: 4.5%
top: 50%
height: 45%
width: 45%
styles:
card:
- border-radius: 50%
- border-width: 2.5px
- border-color: rgba(255,255,255,1)
card_mod:
style: |
ha-card {
{% if is_state('sensor.text_dewpoint_comfort_upstairs','Too Dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Comfy Dry') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Pleasant') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Comfortable') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Sticky Humid') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Muggy') %}
--ha-card-background: radial-gradient(circle, gold, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Sweltering') %}
--ha-card-background: radial-gradient(circle, orange, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_upstairs','Stifling') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, black, black) !important;
{% endif %}
}
- type: custom:button-card
name: Inner Circle Comfort Zone
show_name: false
show_icon: false
aspect_ratio: 1/1
entity: sensor.text_dewpoint_comfort_upstairs
style:
right: 28.5%
top: 50%
height: 21%
width: 21%
styles:
card:
- border-radius: 50%
- border-width: 0px
card_mod:
style: |
ha-card {
--ha-card-background: radial-gradient(circle, black, black, grey ) !important;
{
- type: custom:button-card
name: Floating Circle
icon: mdi:circle
show_name: false
size: 20%
card_mod:
style: |
:host {
{% set humidity_float = states('sensor.netatmo_devonport_tas_indoor_humidity') | float %}
{% set temperature_float = states('sensor.netatmo_devonport_tas_indoor_temperature') | float %}
left: {{ 0.4 + humidity_float }}%;
bottom: {{((temperature_float-4)*(100-0)/(72.5-27.5))+0}}%;
transition: bottom 1s, left 1s;
}
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Warm
show_label: true
style:
right: 0%
top: 22%
width: 50%
styles:
label:
- font-size: 12px
- color: grey
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Cold
show_label: true
style:
right: 0%
top: 79%
width: 50%
styles:
label:
- font-size: 12px
- color: grey
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Dry
show_label: true
style:
left: 22%
top: 50%
width: 20%
styles:
label:
- font-size: 12px
- color: grey
- writing-mode: vertical-rl
- transform: rotate(180deg)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Humid
show_label: true
style:
left: 79%
top: 50%
width: 20%
styles:
label:
- font-size: 12px
- color: grey
- writing-mode: vertical-rl
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
TABLET OR FULL WIDTH PHONE OPTIMISED CARD V3.0
- Dewpoint Comfort Colour Change OUTER RING
- Temperature Comfort Colour Change CARD BACKGROUND
- Optimised for Tablets or Wall Displays, can be used full width on a phone.
type: picture-elements
image: local/overlay.svg
card_mod:
style: |
ha-card {
{% if is_state('sensor.text_temperature_comfort_living','FROSTY') %}
--ha-card-background: radial-gradient(circle, , black, black, black, mediumblue) !important;
{% elif is_state('sensor.text_temperature_comfort_living','COLD') %}
--ha-card-background: radial-gradient(circle, black, black, black, dogerblue) !important;
{% elif is_state('sensor.text_temperature_comfort_living','CHILLY') %}
--ha-card-background: radial-gradient(circle, black, black, black, deepskyblue) !important;
{% elif is_state('sensor.text_temperature_comfort_living','COOL') %}
--ha-card-background: radial-gradient(circle, black, black, black, mediumaquamarine) !important;
{% elif is_state('sensor.text_temperature_comfort_living','MILD') %}
--ha-card-background: radial-gradient(circle, black, black, black, seagreen) !important;
{% elif is_state('sensor.text_temperature_comfort_living','PERFECT') %}
--ha-card-background: radial-gradient(circle, black, black, black, limegreen) !important;
{% elif is_state('sensor.text_temperature_comfort_living','WARM') %}
--ha-card-background: radial-gradient(circle, black, black, black, gold) !important;
{% elif is_state('sensor.text_temperature_comfort_living','HOT') %}
--ha-card-background: radial-gradient(circle, black, black, black, orange) !important;
{% elif is_state('sensor.text_temperature_comfort_living','BOILING') %}
--ha-card-background: radial-gradient(circle, black, black, black, crimson) !important;
{% endif %}
}
ha-card {
--ha-card-border-width: 0px !important;
--ha-card-border-radius: 5px !important;
--box-shadow: none !important;
}
elements:
- type: custom:button-card
name: Card Title
label: Living Room
show_name: false
show_label: true
style:
left: 50%
top: 5%
width: 100%
styles:
label:
- font-size: 20px
- color: silver
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Dew Point Comfort - Living Room
entity: sensor.text_dewpoint_comfort_living
label: >-
Sensor created in Node Red converts dewpoint to comfort text
https://github.com/miguelangel-nubla/home-assistant-dewpoint
show_state: true
show_name: false
show_label: false
show_icon: false
style:
right: '-50%'
top: 13%
width: 100%
styles:
state:
- font-size: 25px
- font-weight: bold
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 1 - Dewpoint - Living Room
entity: sensor.dewpoint_living_room
icon: mdi:water-thermometer-outline
show_state: true
show_name: false
show_icon: true
style:
left: 20%
top: 25%
width: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 2 - CO2 - Living Room
entity: sensor.netatmo_devonport_tas_indoor_co2
show_state: true
show_name: false
show_icon: true
style:
left: 80%
top: 25%
width: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 3 - Temperature - Living Room
entity: sensor.air_conditioning_temperature
show_state: true
show_name: false
show_icon: true
style:
left: 20%
top: 75%
width: 50%
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Sensor 4 - Humidity - Living Room
entity: sensor.air_conditioning_humidity
show_state: true
show_name: false
show_icon: true
style:
left: 80%
top: 75%
width: 50%
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Temperature Comfort Sensor 3 - Living Room
entity: sensor.text_temperature_comfort_living
label: >-
Sensor created in node red to grab temperature comfort text
https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
Requires msg.payload = msg.payload.comfort[0].temperatureLevel return msg;
show_state: true
show_name: false
show_label: false
show_icon: false
style:
left: 20%
top: 92%
width: 50%
styles:
state:
- font-size: 20px
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Text Humidity Comfort Sensor 4 - Living Room
entity: sensor.text_humid_comfort_living_room_tado
label: >-
Sensor created in node red to grab humidity comfort text
https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
Requires msg.payload = msg.payload.comfort[0].humidityLevel return msg;
show_state: true
show_name: false
show_label: false
show_icon: false
style:
left: 80%
top: 92%
width: 50%
styles:
state:
- font-size: 20px
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
name: Outer Ring Limits
show_name: false
show_icon: false
aspect_ratio: 1/1
entity: sensor.text_dewpoint_comfort_living
style:
right: 4.5%
top: 50%
height: 45%
width: 45%
styles:
card:
- border-radius: 50%
- border-width: 5px
- border-color: rgba(255,255,255,1)
card_mod:
style: |
ha-card {
{% if is_state('sensor.text_dewpoint_comfort_living','Too Dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Comfy Dry') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Pleasant') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Comfortable') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Sticky Humid') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Muggy') %}
--ha-card-background: radial-gradient(circle, gold, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Sweltering') %}
--ha-card-background: radial-gradient(circle, orange, 55%, black, black) !important;
{% elif is_state('sensor.text_dewpoint_comfort_living','Stifling') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, black, black) !important;
{% endif %}
}
- type: custom:button-card
name: Inner Circle Comfort Zone
show_name: false
show_icon: false
aspect_ratio: 1/1
entity: sensor.text_dewpoint_comfort_living
style:
right: 28.5%
top: 50%
height: 21%
width: 21%
styles:
card:
- border-radius: 50%
- border-width: 0px
card_mod:
style: |
ha-card {
--ha-card-background: radial-gradient(circle, black, black, grey ) !important;
{
- type: custom:button-card
name: Floating Circle
icon: mdi:circle
show_name: false
size: 25%
card_mod:
style: |
:host {
{% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
{% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
left: {{ 0.5 + humidity_float }}%;
bottom: {{((temperature_float-1.5)*(100-0)/(72.5-27.5))+0}}%;
transition: bottom 1s, left 1s;
}
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Warm
show_label: true
style:
right: 0%
top: 22%
width: 50%
styles:
label:
- font-size: 20px
- color: grey
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Cold
show_label: true
style:
right: 0%
top: 79%
width: 50%
styles:
label:
- font-size: 20px
- color: grey
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Dry
show_label: true
style:
left: 22%
top: 50%
width: 20%
styles:
label:
- font-size: 20px
- color: grey
- writing-mode: vertical-rl
- transform: rotate(180deg)
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}
- type: custom:button-card
label: Humid
show_label: true
style:
left: 79%
top: 50%
width: 20%
styles:
label:
- font-size: 20px
- color: grey
- writing-mode: vertical-rl
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
}