OH sorry. You are right. U stucked myself and didn´t continue to read. Now it works. Thanks.
Hello Oscar,
After hours of research I just came across your project.
I am trying to document myself to try to do the same things, I manage to put 1 light but the config with several I can not.
could you show me your yaml code or tell me what’s wrong with me?
thank you in advance for your help
’
type: picture-elements
image: >-
/www/Floorplan/Plan%20Maison%20nuit.png
elements:
- type: image
entity: light.barrette_d_eclairage_a_led
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: >-
/www/Floorplan/Balise%20led%20ipn%20on.png
‘off’: >-
www/images/3d_floorplan/ipn.png - type: image
entity: light.barrette_d_eclairage_a_led
style:
top: 50%
left: 50%
width: 100%
state_image:
‘on’: >-
www/images/3d_floorplan/ipn.png
‘off’: >-
/www/Floorplan/Plan%20Maison%20nuit.png - type: state-icon
icon_color: yellow
icon: mdi:lightbulb
entity: light.barrette_d_eclairage_a_led
style:
left: 60%
top: 65%
tap_action:
action: toggle
’
Unfortunately this thread is about ha-floorplan not the picture elements card. If you decide to switch we will be able to help.
no worries, I will post in which section?
Try googling “picture elements floorplan” or perhaps start a new thread.
You might want to include some more details about what you are trying to do, what isn’t working and what you have tried. Also you will likely get more replies if you can post in English. Bon chance!
Edit: …and technically probably should be in the CONFIGURATION >> FRONTEND area
Friends, I ask for help.
I do it according to the instructions:
Installed ha-floorplan from the HACS repository.
Checked the availability of a new resource in the resource management section in lovelace.
I’m trying to add the code from the example, but an error is returned:
Clear log
29.01.2022, 00:03:29 ERROR URIError: /local/floorplan/examples/home/home.css?_=1643403809735: Error fetching resource at Function. (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:2717) at Generator.next () at s (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:734)
29.01.2022, 00:03:29 ERROR STYLESHEET Error loading stylesheet: /local/floorplan/examples/home/home.css
29.01.2022, 00:03:29 WARNING CONFIG Cannot find ‘pages’ nor ‘rules’ in floorplan configuration
29.01.2022, 00:03:29 INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.30
How do I solve my problem? Thanks
Have you uploaded the image and CSS in the correct location. The error is saying the CSS can’t be loaded?
Yes. You are absolutely right. There were no such files. Please tell me where exactly they need to be copied? I am interested in the absolute path, not the relative one.
It worked. Thank you very much. I’m starting to study
Hi!
I’m looking for a way to open a popup when long pressing an area.
I’m almost there but there is one problem. My popup configuration needs to know which entity should be displayed and I can’t find a way to pass the entity as a variable.
Here is the code I have so far
type: custom:floorplan-card
title: Appartement
config:
show_side_bar: false
show_app_header: false
image: /local/Appart2.svg
stylesheet: /local/floorplanner_home.css
style:
height: 50%
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- name: Rooms
entities:
- entity: light.chambre
element: area.chambre
- entity: light.salon
element: area.salon
tap_action: light.toggle
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
hold_action:
haptic: heavy
action: fire-dom-event
browser_mod:
command: popup
card:
cards:
- entities:
- entity: '{{ entity }}'
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
entity: entity.entity_id
color_picker: false
effects_list: false
full_width_sliders: true
hide_header: true
persist_features: true
show_slider_percent: true
smooth_color_wheel: true
type: custom:light-entity-card
style: |
ha-card {
box-shadow: none !important;
}
column_num: 1
layout: vertical
max_width:
- 100%
type: custom:layout-card
type: custom:layout-card
type: custom:vertical-stack-in-card
deviceID:
- '{{ deviceID }}'
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Salon
image: /local/transparent.png
style:
height: 28%
left: 61%
top: 23%
width: 12.7%
tap_action:
action: toggle
type: image
As you can see, I tried different ways of getting the entity parameter, but none worked so far.
Anything I missed regarding this ?
thanks
Hi
Thank you for using floorplan.
We’re primary using the Discussion area on GitHub, to get a better overview of each question. I also think that we have a simular question there.
With that said. Are you trying to open a new window in your browser or a element within Home Assistant, with other Home Assistant elements?
Or maybe you’re not even talking about a popup at all. I’m a bit confused. If I misunderstod, please consider to give us a few more details.
For me it feels a bit like the xyproblem.info 
Hi !
I’ve had a look at github but haven’t found what I’m looking for.
I’m trying to open a popup with browser_mod (GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity - and also an audio player) in home assistant, with home assistant elements inside, where the popup will contain controls for the lightin the pressed area. It’s basically working if I set a fix entity name in the entity fields (for example : entity: light.salon). But the thing is that action is common for multiple areas/lights so I would like to be able to write something like entity: ${entity.name} where entity.name would be replaced by the entity the “hold action” was done on.
Out of interest what do you want that is different to the more-info dialog that you can have pop up?
I want the light-entity-card that shows a color wheel and a brightness control
Ok I have the colour wheel and brightness control show in the standard dialog?
What do you mean ?
Replace your yaml completely with the following. You will see the default hold action is more-info. Then long press on your light and the normal light dialog box will appear. If you the light is on you will see you have the controls for brightness and colour.
type: custom:floorplan-card
title: Appartement
config:
show_side_bar: false
show_app_header: false
image: /local/Appart2.svg
stylesheet: /local/floorplanner_home.css
style:
height: 50%
defaults:
hover_action: hover-info
hold_action: more-info
rules:
- name: Rooms
entities:
- entity: light.chambre
element: area.chambre
- entity: light.salon
element: area.salon
tap_action: light.toggle
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'