Hello together,
I think it would be nice to have an option to make the climate card a little bit smaller.
Here are to possibilities.
I think it gives a lot of better ways then my ideo to make it a little bit smaller for the screen
The standard card is too large for me as well. However, you can address this yourself.
I use the following cards to get it more compact (but still easy to use on a touch screen):
- custom:vertical-stack-in-card
- custom:layout-card
- custom:button-card
The result is the following g which is great on mobile and desktop.
Use the tile card.
Danke für eure Tipps.
mir gefällt die Klimakarte aber ganz gut und würde die gerne beibehalten aber eben nur etwas kompakter 
I was really looking forward to the tile card (when it came out) but, after playing, I don’t think it makes great use of space.
Here’s the dash I used to compare:
My buttons are bigger (easy for fingers) but uses less space.
Tile card works, but the round aesthetic disappears with it. There are also some custom options like Simple Thermostat Card that allow for a lot of customization, but also in a rectangle way. Better Thermostat is slightly more compact but also not sizeable.
Your solution is very compact and functional too, but it looks very busy. Thinking about this, I think a horizontal or vertical slider, like is available as a feature with ‘light’ entities on a tile card could be a very nice compromise. With an indicator on the slider to show current temperature.
That looks nice, could you please share your code.
here you go.
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: '"down hive up"'
cards:
# down ---------------------------------------
- type: conditional
conditions:
- entity: sensor.hive_heating_reported_mode
state_not: "off"
card:
type: custom:button-card
view_layout:
grid-area: down
entity: sensor.hive_heating_reported_target_temp
size: 30px
show_name: true
name: Set target
show_state: false
show_label: true
label: "[[[ return (entity.state -0.5) + '℃' ]]]"
icon: mdi:thermometer-minus
styles:
card:
- font-size: 15px
- color: grey
icon:
- color: LightBlue
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hive_heating_decrease_setpoint
# hive ---------------------------------------
- type: custom:button-card
view_layout:
grid-area: hive
entity: binary_sensor.hive_heating_reported_action
size: 30px
show_name: false
name: "Actual"
show_state: false
show_icon: true
icon: "[[[ if ( states['binary_sensor.hive_heating_reported_action'].state == 'off') return 'mdi:radiator-disabled'; else return 'mdi:radiator'; ]]]"
show_label: false
label: >
[[[
if ( states['sensor.hive_heating_reported_mode'].state == 'off' ) return '(off)';
if ( states['timer.hive_heating_boost'].state == 'active' ) return states['sensor.hive_heating_reported_target_temp'].state +'<font color="grey"> (Boost)</font>';
else return '<font color="grey"> (' + states['binary_sensor.hive_heating_reported_action'].state+')</font>';
]]]
custom_fields:
ts: "[[[ if ( states['sensor.hive_heating_reported_mode'].state == 'off' ) return 'off'; else return states['sensor.hive_heating_reported_target_temp'].state + '℃' ]]]"
tn: "Target"
cs: "[[[ return states['sensor.hive_heating_reported_current_temp'].state + '℃' ]]]"
cn: "Actual"
styles:
grid:
- grid-template-areas: |
"i i"
"s s"
"tn cn"
"ts cs"
- grid-template-columns: auto
card:
- font-size: 15px
- border: 0px solid
icon:
- color: >
[[[
if ( states['sensor.hive_heating_reported_mode'].state == 'off' ) return 'grey';
else if ( states['binary_sensor.hive_heating_reported_action'].state == 'off' ) return 'LightBlue';
else return 'var(--state-climate-heat-color)';
]]]
state:
- color: "[[[ if ( states['sensor.hive_heating_reported_mode'].state == 'off' ) return 'grey'; else return 'orange'; ]]]"
custom_fields:
tn:
- color: grey
cn:
- color: grey
ts:
- color: "[[[ if ( states['sensor.hive_heating_reported_mode'].state == 'off' ) return 'grey'; ]]]"
cs:
- color: >
[[[
if ( states['sensor.hive_heating_reported_current_temp'].state < states['sensor.hive_heating_reported_target_temp'].state ) return 'LightBlue';
else if ( states['sensor.hive_heating_reported_current_temp'].state > states['sensor.hive_heating_reported_target_temp'].state ) return 'orange';
]]]
tap_action:
action: more-info
# up ---------------------------------------
- type: conditional
conditions:
- entity: sensor.hive_heating_reported_mode
state_not: "off"
card:
type: custom:button-card
view_layout:
grid-area: up
entity: sensor.hive_heating_reported_target_temp
size: 30px
show_name: true
name: Set target
show_state: false
show_label: true
label: "[[[ return (+entity.state +0.5) + '℃' ]]]"
icon: mdi:thermometer-plus
styles:
card:
- font-size: 15px
- color: grey
icon:
- color: orange #var(--state-climate-heat-color)
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hive_heating_increase_setpoint
It uses a couple of scripts:
script:
hive_heating_increase_setpoint:
alias: "Hive heating: Increase setpoint"
sequence:
- service: climate.set_temperature
data:
temperature: "{{ states('sensor.hive_heating_reported_target_temp') |float() +0.5 }}"
entity_id: climate.hive_heat
icon: mdi:thermometer-plus
mode: queued
hive_heating_decrease_setpoint:
alias: "Hive heating: Increase setpoint"
sequence:
- service: climate.set_temperature
data:
temperature: "{{ states('sensor.hive_heating_reported_target_temp') |float() -0.5 }}"
entity_id: climate.hive_heat
icon: mdi:thermometer-minus
mode: queued
and some template sensors:
template:
- binary_sensor:
# Action as reported by HIVE | 'hive' (SLR1c) & 'hive_heat' (SLR2c)
- name: "Hive heating reported action"
unique_id: hive_heating_reported_action
state: "{{ is_state_attr('climate.hive_heat','hvac_action', 'heating') }}"
- sensor:
# Mode as reported by HIVE thermostat: off, heat, auto (Hive schedule), emergency_heating (Hive boost)
- name: "Hive heating reported mode"
unique_id: hive_heating_reported_mode
state: "{{ states('climate.hive_heat') }}"
# Current temp as reported by HIVE thermostat
- name: "Hive heating reported current temp"
unique_id: hive_heating_reported_current_temp
device_class: temperature
unit_of_measurement: °C
state: "{{ state_attr('climate.hive_heat','current_temperature') }}"
state_class: measurement
# Target temp as reported by HIVE thermostat
- name: "Hive heating reported target temp"
unique_id: hive_heating_reported_target_temp
device_class: temperature
unit_of_measurement: °C
state: "{{ state_attr('climate.hive_heat','temperature') }}"
state_class: measurement
Thank you very much
1 Like