I believe you’re confusing having a full dashboard in yaml mode and using yaml mode (raw editor) on a storage mode dashboard. The former allows the use of !include, the latter does not.
See here for some info.
Hello @fahr
I am also following your tutorial and stuck on toggling floors. I’m not an HA expert and not sure where everything goes.
In file editor I added:
input_select code to config.yaml
floorplan_first_floor.yaml and floorplan_second_floor.yaml files in same folder/directory as config.yaml
Using raw configuration editor, under the floorplan view, I added the code for horizontal stack and conditional cards, but !include is not being accepted. Your instructions say this code goes in lovelace/floorplan.yaml. Am I supposed to create a floorplan.yaml in the same directory as config, first floor, and second floor? Then do you point to it in your view using raw configuration editor?
It sounds like you can’t use !include directives when editing via the UI. My instructions are for when all of your dashboards are defined in yaml by setting the lovelace mode to yaml in your configuration.yaml.
e.g.
# Enables yaml mode for configuring the lovelace ui.
# https://www.home-assistant.io/lovelace/
lovelace:
mode: yaml
ugh. thank you for the quick response. I know you didn’t develop picture elements. I switched from HA-Floorplan to this picture elements floorplan and works fine for a single floor. I appreciate all the HA developers have done and the support community. For basic controls and automations it’s fairly straightforward, but these more advanced features are still not too friendly for the every day consumer. I was hoping all the time I spent on sweethome second floor could be utilized also. I’ll just add a separate view for the second floor. Thank you.
To be clear, you could still add a floor toggle, you just wouldn’t be able to have your floors divided up in separate files. Instead you would have all of your yaml for each floor nested under the appropriate conditional block.
The include directive I used was only for my sanity so I could keep the floors separate in different files.
ah. I actually prefer that (for now) as im not the coding beast most of you are. I’ll try that TY
I tried that and see 2 panel boxes with my code in them. The top says “no card type configured” for both panels. How do I share my code for that view? I’ll try just pasting.
’ ’ ’
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
badges: []
cards:- type: horizontal-stack
cards:- type: conditional
conditions:- entity: input_select.floorplan_floor
state: 1st floor
card: - type: picture-elements
image: local/renders/first_dark.
panel: true
elements:- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_porch.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_patio1.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_patio2.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_dining_lamp.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.entry
tap_action: ‘no’
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_entry_lamp.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_master_lamp.png
‘off’: local/icons/transparent_square.png - type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: local/renders/first_drive.png
‘off’: local/icons/transparent_square.png - type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
‘–mdc-icon-size’: 20px
‘–paper-item=icon-color’: white - type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
‘–mdc-icon-size’: 20px - typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: ‘#eaeaea’
border-radius: 5%
- type: image
- entity: input_select.floorplan_floor
- type: conditional
conditions:- entity: input_select.floorplan_floor
state: 2nd floor
card: - type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:- typye: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: ‘#eaeaea’
border-radius: 5%
’ ’ ’
- typye: service-button
- entity: input_select.floorplan_floor
- type: conditional
- type: horizontal-stack
It’s hard to tell since the code isn’t formatted, but it looks like the card part of the condition needs to be indented another level. If you surround the code in 3 backticks, ``` it will preserve the formatting.
What I mean is in your 2nd conditional the picture-elements type should be indented more:
type: conditional
conditions:
entity: input_select.floorplan_floor
state: 2nd floor
card:
type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
type: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: ‘#eaeaea’
border-radius: 5%
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
badges: []
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
- type: picture-elements
image: local/renders/first_dark.
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
- type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
I see what you mean and moved both “card” sections over. Now instead of “no card TYPE configured” it says "no card configured.
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
panel: true
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
- type: picture-elements
image: local/renders/first_dark.png
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
- type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
Take a look at your conditional card, it’s not formatted correctly: Conditional Card - Home Assistant
You have the card key nested under conditions when it should be at the same level. Also the card is an object not an array of objects.
Yes I moved the card sections right further because i thought that was your recommendation lol
“it looks like the card part of the condition needs to be indented another level. If you surround the code in 3 backticks, ``` it will preserve the formatting.
What I mean is in your 2nd conditional the picture-elements type should be indented more:”
But I looked at that link and noticed there is no hyphen and space before “card”. I removed those and have an image!
However the image has a large white square in upper left corner where I assume the service button is programmed to go.Also there is a spinning “thinking” wheel and the I need to figure out how to get the image to fit the screen. Here is the current code.
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
type: picture-elements
image: local/renders/first_dark.png
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
found it! i misspelled “type” in the service button.
OK I CAN SWITCH FLOORS!! TY!!
Awesome, glad you got it working!
1 Like
Hello,
I have an issue that the transparant png grays out my whole picture. Any idea why that is?
Even with your code it does this:
That gray box means that the picture is not found. Check the file name, the file extension and the path to see if they’re correct.
Style width: 100% - Try reducing e.g. 2-10% - width: 10%
@fahr Can you please update the link of the article of juanmtech you have on your blog?
Is this one: How to set up the picture elements card in home assistant lovelace | JuanMTech
Thank you.
Great work!
1 Like
If someone needs help hiding title on state-badge refer to this link: Hide text for badges in picture-elements card - #16 by ellepdesk