Thanks for the update!
I haven’t figured it out yet. Looks like your approach could be a good temporary solution. I opened an issue on the github repo, maybe the developer might chime in at some point. Here’s the link:
I’ve read this thread up and down in circles, but was not able to find an answer to my question:
Is it in non-grid-layout, e.g. horizontal, possible to set the width of the columns in % together width the number of columns or at least depending on mediaquery?
Currently only
card:
type: custom:layout-card
layout_type: horizontal
layout:
width: 30
is working and the unit is always px.
But I would like to have either
card:
type: custom:layout-card
layout_type: horizontal
layout:
width: 30px
with a defined number of columns (like in grid)
or at least
card:
type: custom:layout-card
layout_type: horizontal
layout:
width: 30
mediaquery:
"(min-width: 1112px)":
width: 300
"(min-width: 812px)":
width: 100
But currently nothing is working. 
Somehow I cannot get card to work after recent updates 
I want to have header across entire top row and bottom row split between graph and statistics areas.
Here is the code using explicit placement of cards within grid:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
cards:
- type: markdown
grid-column: 1/3
grid-row: 1/2
content: HEADER
- type: markdown
grid-column: 1/2
grid-row: 2/3
content: GRAPH
- type: markdown
grid-column: 2/3
grid-row: 2/3
content: STATS
And here I tried to use named areas:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
grid-template-areas: |
"header header"
"graph stats"
cards:
- type: markdown
grid-area: header
content: HEADER
- type: markdown
grid-area: graph
content: GRAPH
- type: markdown
grid-area: stats
content: STATS
In both cases I have the same result, as if card used horizontal layout, placing cards horizontaly one by one, as they apperar in config and then overflowing to second row. Grid is created properly with right columns and rows width/height. Only placementof cards within is not workiing as intended:
What am I doing wrong?
EDIT: I found the solution, I was using grid_area wrong… to properly assign area to card following code should be used:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
grid-template-areas: |
"header header"
"graph stats"
cards:
- type: markdown
view_layout:
grid-area: header
content: HEADER
- type: markdown
view_layout:
grid-area: graph
content: GRAPH
- type: markdown
view_layout:
grid-area: stats
content: STATS
2 Likes
If I want to use horizontal mode, but want to have the column width exactly as in standard mode, how to do this?
If I do not use an option, the column width is sometimes less than default (I have then 3 instead of 2 columns). With e.g. width: 450 is looks o.k. but then 450 is set on 300px devices as well and is wrong.
I’m having the hardest time finding the right config, so I am hoping someone would be able to point me in the right direction;
I have a grid, 12x7 that I can place individual cards in - but I am trying to get some to span multiple cells eg. 2x3 with no luck.
current yaml:
views:
- title: Home
path: Home
panel: true
icon: mdi:home
badges: []
cards:- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0px !important;
}
#root {
margin: 2px !important;
}
#root > * {
margin: 2px !important;
}
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-areas: |
“r1c1 r1c2 r1c3 r1c4 r1c5 r1c6 r1c7 r1c8 r1c9 r1c10 r1c11 r1c12”
“r2c1 r2c2 r2c3 r2c4 r2c5 r2c6 r2c7 r2c8 r2c9 r2c10 r2c11 r2c12”
cards:
- type: custom:button-card
name: L2
view_layout:
grid-area: r2c5
show_name: false
icon: mdi:flash
aspect_ratio: 1/1
- type: custom:mod-card
how can i get this card to take up 2 column’s worth of cells??
I am having a similar issue configuring my layout. I am not sure what I am missing.
I have created a layout based on the example on the github page.
This is what mine looks like:
Now that I have a layout with a sidebar, header, footer and main sections, I want to start populating it with cards. I will be using mostly custom button cards to make it look like this:
This is my code:
title: Estate Dashboard
name: estate-dashboard
swipe_nav:
wrap: true
animate: swipe
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: false
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
width:
desktop: 15
mobile: 15
tablet: 20
breakpoints:
mobile: 768
tablet: 1024
template: |
<li>
{% if now().hour < 5 %} Good night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good evening {{'\U0001F44B\U0001F3FB'}}{% endif %}{{user}}
</li>
style: |
:host {
--sidebar-background: #FFF;
--sidebar-text-color: #000;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
box-shadow: inset -11px 0px 6px 1px #1d1f1f;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 35px!important;
}
.sidebarMenu li ha-icon {
}
.sidebarMenu li.active {
background-color: #2C2E30!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
font-size: 50px !important;
font-weight: 500!important;
text-align: center;
}
.date {
padding-bottom: 10px;
font-size: 25px;
font-weight: 300;
text-align: center;
}
sidebarMenu:
- action: navigate
active: true
name: MAIN
icon: mdi:bullseye
navigation_path: /estate-dashboard/main
- action: navigate
active: true
name: HOUSE
icon: mdi:home-outline
navigation_path: /estate-dashboard/house
- action: navigate
active: true
name: GALLERY
icon: mdi:car-multiple
navigation_path: /estate-dashboard/gallery
- action: navigate
active: true
name: GUEST HOUSE
icon: mdi:home-floor-g
navigation_path: /estate-dashboard/guest-house
- action: navigate
active: true
name: CABANA
icon: mdi:pool
navigation_path: /estate-dashboard/cabana
- action: navigate
active: true
name: GROUNDS
icon: mdi:home-group
navigation_path: /estate-dashboard/grounds
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
icon: mdi:shield-home
tap_action:
action: navigate
navigation_path: /estate-dashboard/security
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
tap_action:
action: navigate
navigation_path: /estate-dashboard/settings
icon: mdi:cog-sync-outline
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
views:
- title: MAIN
path: main
theme: Caule Black Orange
icon: mdi:bullseye
badges:
- entity: person.haz
- title: HOUSE
path: house
theme: Caule Black Orange
icon: mdi:home-outline
type: custom:grid-layout
layout:
grid-template-columns: 10% fr fr fr
grid-template-rows: min-content min-content min-content
grid-template-areas: |
"sidebar header header header"
"sidebar main main main"
"sidebar footer footer footer"
mediaquery:
'(max-width: 600px)':
grid-template-columns: 100%
grid-template-rows: min-content min-content min-content min-content
grid-template-areas: |
"header"
"sidebar"
"main"
"footer"
'(max-width: 800px)':
grid-template-columns: 10% 90%
grid-template-rows: min-content min-content min-content
grid-template-areas: |
"sidebar header"
"sidebar main"
"sidebar footer"
cards:
- type: vertical-stack
cards:
- type: custom:simple-weather-card
entity: weather.home_austin
card_mod:
style: |
ha-card {
padding: 0px;
}
name: ' '
backdrop:
day: var(--primary-color)
night: '#40445a'
primary_info:
- extrema
- humidity
- wind_speed
- wind_bearing
secondary_info:
- pressure
- precipitation_probability
- precipitation
layout:
grid-area: header
- type: custom:button-card
template: container
color: '#EDE7B0'
name: Guest Bedroom
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.ge_14291_in_wall_smart_switch_switch_2
name: Kitchen
template: standard
icon: mdi:wall-sconce-flat
type: custom:button-card
- entity: light.ge_14294_in_wall_smart_dimmer_level_10
name: Table
template: standard
icon: mdi:ceiling-light
type: custom:button-card
- entity: light.ge_14294_in_wall_smart_dimmer_level_7
name: Dining
template: standard
icon: mdi:ceiling-light
type: custom:button-card
- entity: switch.patio_light
template: standard
name: Patio
icon: mdi:outdoor-lamp
type: custom:button-card
The main question I have is the following:
How do I move the map or the custom button card from the bottom of the dashboard which is where the layout places them ignoring the grid above it, to a grid area?
for example, I want the custom:simple-weather-card to be in the grid area sidebar.
I want to move the custom:button-card to the header grid area.
Any thoughts?
1 Like
If you want to use named areas, then the same name should be used for all grid cells that you want your content to span across. So in your case areas should be named:
“r1c1 r1c1 r1c1 r1c4 r1c5 r1c6 r1c7 r1c8 r1c9 r1c10 r1c11 r1c12”
“r1c1 r1c1 r1c1 r2c4 r2c5 r2c6 r2c7 r2c8 r2c9 r2c10 r2c11 r2c12”
In this example content placed in r1c1 will span across first 3 cells horizontally and 2 cells vertically.
I tried that, too - it blows up the button to be square, not rectangular… and also messes up the other cell sizes. I am running HAOS 6.2; core-2021.9.4 - maybe something is broken?
If it helps, I am using a custom button card in the cell that I am trying to get a 2x3 layout for.
Thanks,
Dan
Well, as far as I recall button card has its own proportion management options, perhaps this conflicts with what layout card tries to do. Lets test it with any other standard lovelace card. If result will be the same then it is layout card, if it will fit properly the button card is the issue.
Found the solution. The post from @mirekmal fixed it for me too
The structure is set, now I can start populating it with my cards!
From what I can tell, and I have to test it more, the mediaquery works too.
- title: GALLERY
path: gallery
theme: Caule Black Orange
icon: mdi:car-multiple
panel: true
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 10% fr fr fr
grid-template-rows: min-content min-content min-content
grid-template-areas: |
"header header header header"
"sidebar main main main"
"sidebar main main main"
mediaquery:
'(max-width: 600px)':
grid-template-columns: 100%
grid-template-rows: min-content min-content min-content min-content
grid-template-areas: |
"header"
"sidebar"
"main"
'(max-width: 800px)':
grid-template-columns: 10% 90%
grid-template-rows: min-content min-content min-content
grid-template-areas: |
"sidebar header"
"sidebar main"
"sidebar main"
cards:
- type: custom:simple-weather-card
entity: weather.home_austin
card_mod:
style: |
ha-card {
padding: 0px;
}
name: ' '
backdrop:
day: var(--primary-color)
night: var(--disabled-color)
primary_info:
- extrema
- humidity
- wind_speed
- wind_bearing
secondary_info:
- pressure
- precipitation_probability
- precipitation
view_layout:
grid-area: header
content: HEADER
- type: markdown
view_layout:
grid-area: sidebar
content: GRAPH
- type: markdown
view_layout:
grid-area: main
content: STATS
I will update if I learn something new as I work through this.
Hi, it’s nice to see everyone exited about layout-card! Would like to join the party.
Could anyone point me at some documentation regarding how to use this?
For example, what does gridrows and gridcols 1/3 2/3 etc. mean?
Is there any write up about this topic?
Anyhow, question is - where does one start?
I found some old youtube video referencing to usage readme… is it relevant?
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?