I’m trying to split up my dashboard into more manageable chunks. I believe I have a spacing/indentation issue but can’t seem to solve it. Here’s the start of my attempt to split:
tablet-split.yaml
views:
- title: Tablet-Test
panel: true
cards:
- type: picture-elements
image: /local/floorplan/home.png
elements:
- !include /config/dashboards/floorplans/fo_floorplan.yaml
- !include /config/dashboards/elements/fo_elements.yaml
fo_floorplan.yaml
####################################################################################################
# FRONT OFFICE
####################################################################################################
- type: image
entity: light.front_office_overhead_lights_dimmer
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color
?
states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color[0]
: 0) + "deg)"}
opacity: >-
${states[‘light.front_office_overhead_lights_dimmer’].state === 'on' ?
(states[‘light.front_office_overhead_lights_dimmer’].attributes.brightness
/ 255) : '0'}
state_image:
"on": /local/floorplan/home_fo_overhead.png
"off": /local/floorplan/home.png
tap_action:
action: none
- type: image
entity: light.front_office_desk_lamp
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_desk_lamp’].attributes.hs_color ?
states[‘light.front_office_desk_lamp’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.front_office_desk_lamp’].state === 'on' ?
(states[‘light.front_office_desk_lamp’].attributes.brightness / 255) :
'0'}
state_image:
"on": /local/floorplan/home_fo_desk_lamp.png
"off": /local/floorplan/home.png
tap_action:
action: none
- type: image
entity: light.front_office_fan_light
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_fan_light’].attributes.hs_color ?
states[‘light.front_office_fan_light’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.front_office_fan_light’].state === 'on' ?
(states[‘light.front_office_fan_light’].attributes.brightness / 255) :
'0'}
state_image:
"on": /local/floorplan/home_fo_fan.png
"off": /local/floorplan/home.png
tap_action:
action: none
fo_elements.yaml:
#####################################################################################################
# FRONT OFFICE
#####################################################################################################
- type: state-icon
icon: mdi:alarm-light
entity: light.living_room_overhead_lights_dimmer
style:
left: 75%
top: 15%
opacity: 75%
transform: scale(3.0,3.0)
color: red
hold_action:
action: more_info
double_tap_action:
action: toggle
I can’t read the error message as it’s too far to the left, but I think it’s an indentation error? I removed the ‘-’'s from the files it loads since the !include itself is in a list but that didnt’t work… any idea how to figure out what’s causing it?
karwosts
January 7, 2025, 4:42pm
2
I don’t believe you can include, inside a list, files that themselves are a list, it doesn’t merge into a flat list.
If you had fo_floorplan.yaml and fo_elements.yaml inside a single directory, I think you could merge like so:
elements: !include_dir_merge_list /config/dashboards/
I’m not sure if there’s a way you can merge them into a single list if they’re in different directories.
This is all detailed in https://www.home-assistant.io/docs/configuration/splitting_configuration/
Thanks. That does seem to work with the simple example I provided above; now when I try and, for example, add my entire front office, I don’t get the icon overlays loaded… just the layout.png; it’s just blank; no error messages.
views:
- title: Tablet-Test
panel: true
cards:
- type: picture-elements
image: /local/floorplan/home.png
elements: !include_dir_merge_list /config/dashboards/floorplans
fo_floorplan.yaml
####################################################################################################
# FRONT OFFICE
####################################################################################################
- type: image
entity: light.front_office_overhead_lights_dimmer
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color
?
states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color[0]
: 0) + "deg)"}
opacity: >-
${states[‘light.front_office_overhead_lights_dimmer’].state === 'on' ?
(states[‘light.front_office_overhead_lights_dimmer’].attributes.brightness
/ 255) : '0'}
state_image:
"on": /local/floorplan/home_fo_overhead.png
"off": /local/floorplan/home.png
tap_action:
action: none
- type: image
entity: light.front_office_desk_lamp
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_desk_lamp’].attributes.hs_color ?
states[‘light.front_office_desk_lamp’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.front_office_desk_lamp’].state === 'on' ?
(states[‘light.front_office_desk_lamp’].attributes.brightness / 255) :
'0'}
state_image:
"on": /local/floorplan/home_fo_desk_lamp.png
"off": /local/floorplan/home.png
tap_action:
action: none
- type: image
entity: light.front_office_fan_light
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states[‘light.front_office_fan_light’].attributes.hs_color ?
states[‘light.front_office_fan_light’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘light.front_office_fan_light’].state === 'on' ?
(states[‘light.front_office_fan_light’].attributes.brightness / 255) :
'0'}
state_image:
"on": /local/floorplan/home_fo_fan.png
"off": /local/floorplan/home.png
tap_action:
action: none
fo_elements.yaml:
#####################################################################################################
# FRONT OFFICE
#####################################################################################################
- type: icon
icon: mdi:desk
style:
left: 78.2%
top: 75%
opacity: 75%
transform: scale(1.75,1.75)
color: orange
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Front Office
alignment: justify
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: entity
entity: sensor.main_floor_temperature
icon_color: orange
- type: entity
entity: sensor.main_floor_humidity
icon_color: indigo
- type: template
content: |-
{% set lights = ['light.front_office_overhead_lights_dimmer',
'light.front_office_desk_lamp', 'light.front_office_fan_light'] %}
{% set total = lights|select('is_state', 'on')|list|count %}
({{total}}) Lights ON
icon: mdi:lightbulb-group
icon_color: |-
{% set lights = ['light.front_office_overhead_lights_dimmer',
'light.front_office_desk_lamp', 'light.front_office_fan_light'] %}
{% set total = lights|select('is_state', 'on')|list|count %}
{% if total > 0 %}
orange
{% else %}
grey
{% endif %}
- type: template
content: |-
{% if is_state('fan.front_office_fan', 'on') %}
Fan is ON
{% else %}
Fan is OFF
{% endif %}
icon: mdi:fan
icon_color: |-
{% if is_state('fan.front_office_fan', 'on') %}
green
{% else %}
grey
{% endif %}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.front_office_overhead_lights_dimmer
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.front_office_desk_lamp
show_brightness_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.front_office_fan
icon_animation: true
show_percentage_control: true
- type: custom:mushroom-light-card
entity: light.front_office_fan_light
