Hi,
The grid properties are all based on CSS. Youāll find some infos here or by googling CSS grids, that ought to get you started 
1 Like
To add to this:
2 Likes
Thanks for replies! Yeah, have to learn css a bit. Sometimes I confuse haas specific configurations with css code parts.
Guys, Iām trying this layout card on Core but cannot find the āLayout Optionsā box to enter the width & cols.
Hello, I have a hard time trying to write correct yaml for the layout card. Grid option in combination with āchildrenā elements seems hard to get to work. Here is my grid:
Please, Can someone help me write the yaml for the layout card.
Here is the html and css.
<div class="container">
<div class="card1"></div>
<div class="card2">
<div class="card2\.1"></div>
<div class="card2\.2"></div>
</div>
<div class="card3">
<div class="card3\.1"></div>
<div class="card3\.2"></div>
</div>
<div class="card4"></div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
gap: 10px 10px;
grid-auto-flow: row;
grid-template-areas:
"card1 card2"
"card3 card4";
}
.card1 { grid-area: card1; }
.card2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.5fr 0.5fr;
gap: 10px 0px;
grid-auto-flow: row;
grid-template-areas:
"card2\.1 card2\.1 card2\.1"
"card2\.2 card2\.2 card2\.2";
grid-area: card2;
}
.card2\.1 { grid-area: card2\.1; }
.card2\.2 { grid-area: card2\.2; }
.card3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.5fr 0.5fr;
gap: 10px 0px;
grid-auto-flow: row;
grid-template-areas:
"card3\.1 card3\.1 card3\.1"
"card3\.2 card3\.2 card3\.2";
grid-area: card3;
}
.card3\.1 { grid-area: card3\.1; }
.card3\.2 { grid-area: card3\.2; }
.card4 { grid-area: card4; }
1 Like
you have an awesome setup. I am struggling to arrange multicolumn card like yours. could you share your yaml please? thanks.
I hope that someone can put me in the right direction?
with horizontal or masonry
with default
I want āonlyā horizontal, but sizing and size breaks same as default and though it should be possible, because the guide says:
But that is not the case. There are big differences in sizing and size breaks, as shown in screenshots above.
Is there any means to align a not-so-tall card to the center? I tried with align-item/align-self and justify, but apparently canāt find the correct place to put it.
I want the āBlood Sugarā card to be centered like the weather one, which auto-centered.
Help please?
The yaml for this dashboard currently looks like this:
title: Home
views:
- type: panel
theme: transparentblue
title: Grid View
badges: []
cards:
- type: grid
cards:
- type: entities
entities:
- entity: sensor.netatmo_netatmo_indoor_temperature
name: Indoor Temperature
- entity: sensor.netatmo_netatmo_indoor_humidity
- entity: sensor.netatmo_netatmo_indoor_noise
- entity: sensor.netatmo_netatmo_indoor_co2
- entity: sensor.netatmo_netatmo_indoor_pressure
title: Temperatures Sascha
footer:
type: graph
entity: sensor.netatmo_netatmo_indoor_temperature
hours_to_show: 24
detail: 1
- type: entities
entities:
- entity: >-
sensor.netatmo_arakon_weather_satellite_12_indoor_weather_satellite_s_sattelite_temperature
- entity: >-
sensor.netatmo_arakon_weather_satellite_12_indoor_weather_satellite_s_sattelite_humidity
- entity: sensor.ble_temperature_atc_living_room
name: Living Room Temperature
- entity: sensor.ble_humidity_atc_living_room
name: Living Room Humidity
title: Temperatures Other 1
footer:
type: graph
entity: >-
sensor.netatmo_arakon_weather_satellite_12_indoor_weather_satellite_s_sattelite_temperature
hours_to_show: 24
detail: 1
show_header_toggle: true
- type: entities
entities:
- entity: sensor.ble_temperature_atc_chris
name: Chris Temperature
- entity: sensor.ble_humidity_atc_chris
name: Chris Humidity
- entity: sensor.ble_temperature_atc_kitchen
name: Kitchen Temperature
- entity: sensor.ble_humidity_atc_kitchen
name: Kitchen Humidity
- entity: sensor.ble_temperature_atc_bathroom
name: Bathroom Temperature
- entity: sensor.ble_humidity_atc_bathroom
name: Bathroom Humidity
title: Temperatures Other 2
- type: custom:button-card
entity: sensor.blood_sugar
show_label: true
show_name: true
show_state: true
show_last_changed: true
styles:
card:
- background-color: |
[[[
if (entity.state < 75) return 'rgba(255, 0, 0, 0.4)';
if (entity.state >= 75 && entity.state < 80) return 'rgba(255, 255, 0, 0.4)';
else return 'rgba(0, 255, 0, 0.1)';
]]]
- font-size: 12px
- font-color: white
grid:
- grid-template-areas: >-
"n n n" "s i i" "s i i" "l l l" "delta delta delta" "graph
graph graph"
- grid-template-columns: 50% 20% 30%
- grid-template-rows: 10% 15% 10% 20% 5% 50%
name:
- font-size: 16px
- align-self: left
- justify-self: start
- padding-bottom: 4px
- padding-left: 12px
label:
- font-size: 12px
- align-self: middle
- justify-self: center
- padding-top: 4px
- padding-bottom: 4px
state:
- font-size: 30px
- justify-self: start
- padding-left: 16px
icon:
- height: 40px
custom_fields:
graph:
- padding-left: 5px
- padding-right: 5px
- filter: opacity(100%)
delta:
- font-size: 10px
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- padding-top: 4px
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.blood_sugar
hours_to_show: 12
points_per_hour: 12
height: 80
hour24: true
show:
name: false
state: false
icon: false
labels: false
points: false
color_thresholds:
- value: 75
color: '#ff0000'
- value: 85
color: '#ffff00'
- value: 100
color: '#3030ff'
style: |
ha-card {
box-shadow: none;
}
delta:
card:
type: custom:button-card
entity: sensor.blood_sugar_delta
attribute: change
name: Delta
label: |
[[[
var delta = states['sensor.blood_sugar_delta'].attributes.change;
if (delta > 0) return 'Delta: +' + (delta);
if (delta <= 0) return 'Delta: ' + (delta);
]]]
show_label: true
show_icon: false
show_name: false
style: |
ha-card {
box-shadow: none;
}
- type: weather-forecast
entity: weather.home
show_forecast: true
- type: thermostat
entity: climate.heating_sascha
name: Heating Sascha
- type: thermostat
entity: climate.heating_chris
name: Heating Chris
- type: vertical-stack
cards:
- type: custom:button-card
name: Power Sockets
styles:
name:
- align-self: left
- justify-self: start
- padding-left: 12px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.tybf42623994c15a05dav5z1
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.ledvance_socket
name: null
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_3
styles:
card:
- font-size: 12px
- font-weight: bold
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_2
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_1
name: null
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.blitzwolf
styles:
card:
- font-size: 12px
- font-weight: bold
- type: vertical-stack
cards:
- type: custom:button-card
name: Lights
styles:
name:
- align-self: left
- justify-self: start
- padding-left: 12px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.ty43206416e8db84c97e5c
icon: |
[[[
if (entity.state === 'on') return 'mdi:lightbulb-on-outline';
else return 'mdi:lightbulb-outline';
]]]
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: light.led_strip_1
name: LED Strip Desk
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: light.led_strip_1_2
styles:
card:
- font-size: 12px
- font-weight: bold
state:
- value: 'on'
styles:
icon:
- color: blue
- value: 'off'
styles:
icon:
- color: white
- type: custom:button-card
entity: light.ty43206416e8db84c97e5c
name: |
[[[
if (entity.state === 'on') return 'Brightness Sascha';
else return '';
]]]
styles:
card:
- font-size: 12px
- height: 16px
- type: horizontal-stack
cards:
- type: custom:slider-entity-row
entity: light.ty43206416e8db84c97e5c
hide_when_off: true
full_row: true
hide_state: false
columns: 5
square: false
- path: default_view
title: Experiments
type: custom:horizontal-layout
background: center / cover no-repeat url("/local/hex.jpg") fixed
layout:
width: 300
max_cols: 10
theme: transparentblue
badges: []
cards:
- type: entities
entities:
- entity: sensor.netatmo_netatmo_indoor_temperature
name: Indoor Temperature
- entity: sensor.netatmo_netatmo_indoor_humidity
- entity: sensor.netatmo_netatmo_indoor_noise
- entity: sensor.netatmo_netatmo_indoor_co2
- entity: sensor.netatmo_netatmo_indoor_pressure
title: Sascha
footer:
type: graph
entity: sensor.netatmo_netatmo_indoor_temperature
hours_to_show: 24
detail: 1
- type: entities
entities:
- entity: sensor.ble_temperature_a4c1387d157d
name: Living Room Temperature
- entity: sensor.ble_humidity_a4c1387d157d
name: Living Room Humidity
title: Livingroom
state_color: true
- type: weather-forecast
entity: weather.home
show_forecast: false
- type: entities
entities:
- entity: >-
sensor.netatmo_arakon_weather_satellite_12_indoor_weather_satellite_s_sattelite_temperature
- entity: >-
sensor.netatmo_arakon_weather_satellite_12_indoor_weather_satellite_s_sattelite_humidity
title: Outdoors
- type: entity
entity: sensor.blood_sugar
state_color: true
footer:
type: graph
entity: sensor.blood_sugar
hours_to_show: 12
detail: 2
- type: vertical-stack
cards:
- type: custom:button-card
name: Lights
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.ty43206416e8db84c97e5c
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: light.led_strip_1
name: LED Strip Desk
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: light.led_strip_1_2
styles:
card:
- font-size: 12px
- font-weight: bold
- type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.ty43206416e8db84c97e5c
shorten_cards: true
consolidate_entities: true
child_card: false
hide_header: false
header: Lights Sascha
color_wheel: false
persist_features: false
brightness: true
color_temp: false
white_value: false
color_picker: false
smooth_color_wheel: false
show_slider_percent: true
full_width_sliders: false
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
group: true
effects_list: false
- type: vertical-stack
cards:
- type: custom:button-card
name: Power Sockets
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.tybf42623994c15a05dav5z1
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.tybf55ea5d09537a7cbbal2m
name: null
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_3
styles:
card:
- font-size: 12px
- font-weight: bold
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_2
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.tasmota_e868e7c05019_switch_relay_1
name: null
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: switch.blitzwolf
styles:
card:
- font-size: 12px
- font-weight: bold
- type: custom:button-card
entity: sensor.blood_sugar
layout: null
show_label: true
show_name: true
show_state: true
show_last_changed: true
styles:
card:
- filter: opacity(50%)
- background-color: |
[[[
if (entity.state < 75) return 'red';
if (entity.state >= 75 && entity.state < 80) return 'orange';
else return 'green';
]]]
- font-size: 30px
grid:
- grid-template-areas: '"n n n" "s i i" "s i i" "l l l"'
- grid-template-columns: 2fr 25%
- grid-template-rows: min-content min-content min-content
name:
- font-size: 18px
- font-weight: bold
- align-self: left
- padding-bottom: 4px
label:
- font-size: 12px
- align-self: middle
- padding-top: 4px
- type: entity
entity: sensor.blood_sugar_delta
attribute: change
- type: custom:button-card
entity: sensor.blood_sugar
show_label: true
show_name: true
show_state: true
show_last_changed: true
styles:
card:
- background-color: |
[[[
if (entity.state < 75) return 'rgba(255, 0, 0, 0.4)';
if (entity.state >= 75 && entity.state < 80) return 'rgba(255, 255, 0, 0.4)';
else return 'rgba(0, 255, 0, 0.1)';
]]]
- font-size: 12px
- font-color: white
grid:
- grid-template-areas: >-
"n n n" "s i i" "s i i" "l l l" "delta delta delta" "graph graph
graph"
- grid-template-columns: 50% 20% 30%
- grid-template-rows: 10% 15% 10% 20% 5% 50%
name:
- font-size: 16px
- align-self: left
- justify-self: start
- padding-bottom: 4px
- padding-left: 12px
label:
- font-size: 12px
- align-self: middle
- justify-self: center
- padding-top: 4px
- padding-bottom: 4px
state:
- font-size: 30px
- justify-self: start
- padding-left: 16px
icon:
- height: 40px
custom_fields:
graph:
- padding-left: 5px
- padding-right: 5px
- filter: opacity(100%)
delta:
- font-size: 10px
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- padding-top: 4px
- background-color: transparent
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.blood_sugar
hours_to_show: 12
points_per_hour: 12
height: 80
hour24: true
show:
name: false
state: false
icon: false
labels: false
points: false
color_thresholds:
- value: 75
color: '#ff0000'
- value: 85
color: '#ffff00'
- value: 100
color: '#3030ff'
delta:
card:
type: custom:button-card
entity: sensor.blood_sugar_delta
attribute: change
name: Delta
style: |
ha-card {
box-shadow: none;
}
label: |
[[[
var delta = states['sensor.blood_sugar_delta'].attributes.change;
if (delta > 0) return 'Delta: +' + (delta);
if (delta <= 0) return 'Delta: ' + (delta);
]]]
show_label: true
show_icon: false
show_name: false
- type: custom:scheduler-card
title: true
time_step: 30
tags:
- Sascha
include:
- climate
- type: thermostat
entity: climate.heating_sascha
I have a question about Netatmo noise sensor? How reliable is that? Does it measure noise level continuously or periodically?
Mine started acting weird after last update. I can view my Lovelace properly via win10 PC using chrome but on my mobile device I get: Custom element doesnāt exist: layout-card.
Is there a way to have a card laid on top of another card? Much like you can do with a div in html?
So now all my lovelace show Custom element doesnāt exist: layout-card. Was there a breaking change in the new hassio update?
Hi guys ,
Can anybody help me with this code:
layout:
grid-template-columns: 7% auto 370px 367px
grid-template-rows: auto
grid-template-areas: |
"radio media main map"
mediaquery:
'(max-width: 800px)':
grid-template-columns: 100%
grid-template-areas: |
"map"
"media"
"main"
"radio"
'(max-width: 1100px)':
grid-template-columns: 50% 50%
grid-template-areas: |
"main map"
"radio media"
Iām not able to specify the order of the content in the mediaquery parts - everything seems to work fine but it keeps showing the content in the same order as first mentioned: āradio media main mapā
How can that be?
1 Like
Never mind - my bad. I accidentally place the
view_layout:
grid-area: "namehere"
in the wrong ālevelsā
Hi, Iām new to CSS grid, so still learningā¦
How do I now centre the grid within the available space in the card (red rectangle in image)
I managed to do it with gap cards and more columns, but the code was messy and Iām sure thereās an easier, cleaner way to do it.
Thanks!
layout_type: grid
layout:
grid-template-columns: 100px 100px 100px
grid-template-rows: auto
grid-template-areas: |
"title title title"
cards:
- type: markdown
content: Sky Q Upstairs
view_layout:
grid-area: title
card_mod:
style: |
ha-card {
text-align: center;
{
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:rewind
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: rewind
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:play-pause
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: play
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:fast-forward
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: forward
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:exit-to-app
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: dismiss
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-up
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: up
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:home
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: home
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-left
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: left
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:circle-medium
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: select
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-right
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: right
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-up-circle-outline
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: channelup
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-down
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: down
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:information-outline
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: i
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chevron-down-circle-outline
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: channeldown
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:record-rec
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: record
media_content_type: skyq
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:help-circle-outline
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.sky_upstairs
media_content_id: help
media_content_type: skyq
- type: custom:gap-card
- type: custom:gap-card
columns: 7
I want to create a view that looks like the picture above and I have struggled with layout-card, grid-card and different kind of combinations of horizontal- and vertical stacks but failed miserably. Any chance that this could be done with layout-card? I want the cards to fill the entire view
Grateful for all help I can get 
Iāve tested this, and it will distribute the cards on the screen how you want:
title: Test
icon: mdi:home-assistant
path: test
type: custom:grid-layout
layout:
grid-template-columns: 20% 20% 20% 20% 20%
grid-template-rows: auto ## or 4 if you want to be strict about it
grid-template-areas: |
"buttons1 buttons1 buttons1 buttons1 buttons1"
"r2button1 picture1 picture1 picture1 r2button2"
"r3button1 picture1 picture1 picture1 r3button2"
"buttons2 buttons2 buttons2 buttons2 buttons2"
cards:
## Row1
- type: horizontal-stack
view_layout:
grid-area: buttons1
cards:
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
## Row2
- type: horizontal-stack
view_layout:
grid-area: r2button1
cards:
- type: button
entity: XXXX
- type: picture-glance
view_layout:
grid-area: picture1
entity: XXXX
state_image:
- XXXX
entities:
- XXXX
- type: horizontal-stack
view_layout:
grid-area: r2button2
cards:
- type: button
entity: XXXX
## Row3
- type: horizontal-stack
view_layout:
grid-area: r3button1
cards:
- type: button
entity: XXXX
- type: horizontal-stack
view_layout:
grid-area: r3button2
cards:
- type: button
entity: XXXX
## Row4
- type: horizontal-stack
view_layout:
grid-area: buttons2
cards:
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
- type: button
entity: XXXX
Iāve used horizontal-stack cards around the buttons to ensure they fill 100% of the row height. And this is where you might meet your first hurdle - your graphic assumes that the default button height is 50% of the picture-glance height, which is not the case. Therefore, with this layout, the buttons on rows 3 + 4 will be taller than the buttons on rows 1 + 4.
Assuming you are working with a screen with a fixed height and width e/g a tablet, you can play around with Thomas Lovenās custom card-mod to specify a height in pixels for the cards on rows 2 + 3, but this will not likely work well on a layout that needs to be responsive.
Anyway, hope this can get you going at least. Others might chip in if my code has obvious flaws or ways it could be improved.
2 Likes
Thank you very much, that worked like a charm!
I just need to tweak the heights of the button cards or add one more card on each side to match the height of the picture-glance card
Thank you @reste_narquois , that is very helpful.
Trying to build off of your template I have gotten stuck.
I thought I had it figured, but the height of my buttons in my second vertical stack is not automatically adjusted to fill the outer horizontal stack.
Did I do something wrong in the grid-template? To me it should be āsimplyā two vertical stacks in one horizontal stack and the buttons in the second vertical-stack should be strechted evenly to fill the second column.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 70% 30%
grid-template-rows: auto
grid-template-areas: |
"position1 position2"
cards:
- type: vertical-stack
view-layout:
grid-area: position1
cards:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
icon: mdi:fire
- type: custom:apexcharts-card
layout: minimal
graph_span: 24h
experimental:
color_threshold: true
update_interval: 10 s
now:
show: false
color: red
label: Now
yaxis:
- show: false
max: 20
min: 0
header:
title: Living Room Temperature
show: false
show_states: true
colorize_states: true
apex_config:
grid:
show: false
chart:
height: 200px
series:
- entity: sensor.eq_3_temperature_lr
stroke_width: 2
group_by:
func: last
fill_raw: zero
color_threshold:
- value: 4.5
color: blue
- value: 16
color: yellow
- value: 18
color: orange
- value: 20
color: red
type: line
opacity: 1
- type: vertical-stack
view-layout:
grid-area: position2
cards:
- type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 18 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 18; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 20 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 20; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 20
entity_id: climate.eq_3_living_room
I am curious, is it possible to use badges with any layout?
Tried this example - no badges:
title: test-2
path: test-test-2
panel: false
badges:
- entity: input_boolean.test_boolean
type: custom:masonry-layout
cards: []
Same for vertical, horizontal.
Works only if the type: line is commented.
Panel mode = false.
It is not that I cannot live w/o badges - just for testingā¦
Update 08.12.21:
There is a Github issue for this: