My Lovelace dashboard was filled with thermostats for each floor. It made a mess of presentation and wasn’t very WAF.
The solution to a more simple layout was the combination of conditional card and stack-in-card.
The result is a more dynamic card, taking a lot less space.
Thermostat used is the simple-thermostat.
Thinking of using the same setup for more parts of my Lovelace dashboard and doing a typical spring cleaning.
Pre conditional:
Post conditional:
Lovelace code:
cards: - cards: - entities: - entity: input_boolean.card_1st_floor_climate_living_room icon: mdi:sofa name: Living room show_state: true tap_action: action: toggle service: homeassistant.toggle - entity: input_boolean.card_1st_floor_climate_office icon: mdi:chair-rolling name: Office show_state: true tap_action: action: toggle service: homeassistant.toggle - entity: input_boolean.card_1st_floor_climate_hallway icon: mdi:door-sliding name: Hallway show_state: true tap_action: action: toggle service: homeassistant.toggle - entity: input_boolean.card_1st_floor_climate_bathroom icon: mdi:shower name: Bathroom show_state: true tap_action: action: toggle service: homeassistant.toggle title: 1st floor clima type: glance type: vertical-stack - cards: - card: entity: climate.living_room_thermostat header: icon: mdi:sofa layout: mode: names: false icons: true headings: false step: row control: - hvac type: custom:simple-thermostat conditions: - entity: input_boolean.card_1st_floor_climate_living_room state: 'on' type: conditional type: vertical-stack - cards: - card: entity: climate.office_thermostat header: icon: mdi:chair-rolling layout: mode: names: false icons: true headings: false step: row control: - hvac type: custom:simple-thermostat conditions: - entity: input_boolean.card_1st_floor_climate_office state: 'on' type: conditional type: vertical-stack - cards: - card: entity: climate.hallway_thermostat header: icon: mdi:door-sliding layout: mode: names: false icons: true headings: false step: row control: - hvac type: custom:simple-thermostat conditions: - entity: input_boolean.card_1st_floor_climate_hallway state: 'on' type: conditional type: vertical-stack - cards: - card: entity: climate.bathroom_thermostat header: icon: mdi:shower layout: mode: names: false icons: true headings: false step: row control: - hvac type: custom:simple-thermostat conditions: - entity: input_boolean.card_1st_floor_climate_bathroom state: 'on' type: conditional type: vertical-stack type: custom:stack-in-card style: | ha-card { border-radius: 15px; --card-background-color: rgba(255, 255, 255, 0.6) }
Input boolean:
card_1st_floor_climate_living_room: name: Living room climate initial: off card_1st_floor_climate_office: name: Office climate initial: off card_1st_floor_climate_hallway: name: Hallway climate initial: off card_1st_floor_climate_bathroom: name: Bathroom climate initial: off