Is is possible to place an if statement into the layout of a "grid(layout-card)
i want it to swap over depending on the state of a bulb etc i can get it to work in templating and see it swap but getting errors when i try to put it in the layout section grid-template-columns: 1fr 1fr 1fr
{% if is_state(“light.study_light”, “on”) -%}
grid-template-areas: |
“slider button button”
{-% else %-}
grid-template-areas: |
“slider slider button”
{%- endif %}
I’ve tried all various options of brackets but to no avail
Yes, but that will not solve your problem, because the key part of the key:value (like grid-template-areas: “slider slider button”) can not be templated.
I can not see you entire YAML, since you only posted a picture, but maybe you can limit your template to only the value part.
Next time use the </> icon or the preformatted text when posting code pieces.
Indentation is important in YAML, and the preformatted text preserve that.
The text formatting tag you have chosen here also change the quatations, so doubleqoutes can not be copied back into HA.
The key grid-template-areas is present in all options in the if section, so it can be moved outside, which means the key is no longer templated.
Then question is then if the value can be templated, which depends on the card’s code.
Dependds on what you mean by ‘swap over’… I had similar dilema to display in my network dashboard different cards depending on network connection status
if everything wiorks fine I wanted to display main link, VPN link data throughput and WAN latency
or if WAN goes down and LTE modem kick in the only one card with LTE throughput (VPN is then inactive) and WAN latency.
So I put these cards in respective horizontal stacks and then placed both stacks inside the same grid cell. Additionally visibility of these cards is controlled by network status helper, so at the same only one of them is visible:
Sorry for late response… that was busy end of the week for me.
So here is the code. Please note that I heavily striped it down to show only structure of relevant functionality (entire dashboard has almost 1800 lines). So I removed configuration of ‘fixed’ grid cells and part of chart code related to formatting of chart itself. I also added few comments that should point you to important parts of code.
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: 210px auto auto
# router-h is the grid cell where conditional card is placed
grid-template-areas: >
"wan wan wan devices devices devices agh agh agh agh agh agh"
"router-h router-h router-h router-h router-h router-h router-h router-h
router-h router-h router-h router-h"
"switch switch switch switch switch switch switch switch switch switch
switch switch"
"ap-b ap-b ap-b ap-g ap-g ap-g ap-f ap-f ap-f ap-a ap-a ap-a"
cards:
- # other cards in different grid cells
- type: custom:vertical-stack-in-card
view_layout:
grid-area: router-h
cards:
- type: custom:text-divider-row
text: ROUTER
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: markdown
content: >
<ha-icon icon="mdi:information-variant"></ha-icon> Model: {{
states('sensor.draytek_model') }}
- type: markdown
content: >
<ha-icon icon="mdi:alert-outline"></ha-icon> FW Ver: {{
states('sensor.draytek_firmware') }}
- type: markdown
content: >
<ha-icon icon="mdi:clock-check-outline"></ha-icon> Uptime: {{
states('sensor.draytek_vigor_uptime') }}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:bar-card
unit_of_measurement: "%"
value_style: false
visibility: false
animation:
delay: 1000
speed: 1000
state: "on"
direction: right
entities:
- color: var(--cyan3)
entity: sensor.draytek_status
attribute: cpu
name: CPU
icon: mdi:harddisk
. . .
- type: custom:bar-card
unit_of_measurement: "%"
value_style: false
visibility: false
animation:
delay: 1000
speed: 1000
state: "on"
direction: right
entities:
- color: var(--pink2)
entity: sensor.draytek_status
attribute: mem
name: MEM
icon: mdi:harddisk
. . .
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: conditional
conditions:
- entity: sensor.snmp_lte_status # this is the entity I check for status to determine visbility
state_not: "1"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:text-divider-row
text: WAN Throughput
- type: custom:apexcharts-card
update_interval: 5s
graph_span: 5m
. . .
series:
- entity: sensor.internet_speed_in1
color: var(--green1)
name: IN
- entity: sensor.internet_speed_out1
color: var(--green4)
name: OUT
invert: true
- entity: input_number.zero_value
color: var(--green4)
name: " "
all_series_config:
stroke_width: 1.5
type: area
- type: conditional
conditions:
- entity: sensor.snmp_lte_status# # this is the entity I check for status to determine visbility
state_not: "1"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:text-divider-row
text: VPN Throughput
- type: custom:apexcharts-card
update_interval: 5s
graph_span: 5m
. . .
series:
- entity: sensor.internet_speed_in2
color: var(--orange1)
name: IN
- entity: sensor.internet_speed_out2
color: var(--orange4)
name: OUT
invert: true
- entity: input_number.zero_value
color: var(--orange4)
name: " "
all_series_config:
stroke_width: 1.5
type: area
opacity: 0.1
- type: conditional
conditions:
- entity: sensor.snmp_lte_status # this is the entity I check for status to determine visbility
state: "1"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:text-divider-row
text: LTE Throughput
- type: custom:apexcharts-card
update_interval: 5s
graph_span: 5m
. . .
series:
- entity: sensor.internet_speed_lte_in
color: var(--magenta1)
name: IN
- entity: sensor.internet_speed_lte_out
color: var(--magenta4)
name: OUT
invert: true
- entity: input_number.zero_value
color: var(--magenta4)
name: " "
all_series_config:
stroke_width: 1.5
type: area
opacity: 0.1
- type: custom:vertical-stack-in-card
cards:
- type: custom:text-divider-row
text: WAN Latency
- type: custom:apexcharts-card
update_interval: 5s
graph_span: 5m
. . .
series:
- entity: sensor.default_gateway_round_trip_time_maximum
color: var(--red4)
name: MAX
- entity: sensor.default_gateway_round_trip_time_average
color: var(--red1)
name: AVG
- entity: sensor.default_gateway_round_trip_time_minimum
color: black
name: MIN
- entity: input_number.zero_value
color: var(--red3)
name: " "
all_series_config:
stroke_width: 1.5
type: area
opacity: 0.1
- # yet more cards for the grid
This is not what you described in your 1st post.
You wanted to change grid options (just changing fields) dynamically - I suggested you card-mod solution.
Another person suggested you to use conditional cards (for which there was a simplified example provided) - and you still saying this is not what you need.
might have been how i worded it. using grid templates and the button id will change the shape and size of them. so for example it would be 1 button taking 66% and then 33% then if they swap. the right button is 33% and the other would then be 66%
A possible way - a horiz stack with 2 conditional layout cards. each layout card has own look (if you are ready to deal with cumbersome hidden cards). Or consider layout-card with card-mod as was suggested.
looks like it’s back to the drawing board then
