I would like to share my Climate card for the once who are interested. The card itself makes use of the following HACS lovelace integrations:
Bubble Card (Optional)
Custom Button Card
Mushroom Card
I’ve placed the Card’s my self in a Pop Up bubble card. So whenever i press (tap_action) the Room Temperature Graph cards, a pop up opens with all my room thermostats. The code for the Custom Button Card can be found below. Don’t hesitate to ask questions if you have!
Code
type: custom:button-card
entity: climate.living_room
name: Woonkamer
icon: phu:rooms-living
label: >-
[[[ return states['climate.living_room'].attributes.current_temperature + "
°C";
]]]
show_label: true
tap_action:
action: none
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_living_room
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: >-
linear-gradient(90deg, rgba(177,197,255, 0.5) 0%,
rgba(255,175,131, 1) 100%
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-6px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: rgba(144, 191, 255,var(--color-tint))
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px