I never resolved it, but changed the method:
- entities:
- weather.home
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/active/weather_icons/${entity.state}.svg'
Hi everyone,
I’m a ‘novice’ with both HA and Floorplan.
My question is:
Using a binary-sensor in HA I would like to simulate the flashing of LEDs on a control panel recreated with a .svg file…
In the attached image I would like to turn on/off, for example, the small blue circle.
This is my sensor code:
- platform: mqtt
name: "coffe_LED_startPause"
unique_id: "coffe_LED_startPause"
state_topic: "coffee/status"
payload_on: "d555000700000000380738070000000007200b"
payload_off: "d5550007000000003807380700000000001917"
Anyone help me?
Thank you all!
Hi Giovanni,
You should create the little blue circle in your SVG and assign it the same ID as your sensor name which might be binary_sensor.coffe_LED_startPause
Then you should have something in your CSS like:
/* Makes things visible and invisible */
.always-invisible {
visibility: hidden !important;
opacity: 0 !important;
stroke-opacity: 0 !important;
}
.always-visible {
visibility: visible !important;
opacity: 1 !important;
stroke-opacity: 1 !important;
}
then in your ui-lovelace.yaml you would have something like:
- entities:
- binary_sensor.coffe_LED_startPause
name: Hide and Show
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "always-visible" : "always-invisible"}'
The above isn’t correct if I understand what you are trying to do: Try this:
- entity: light.ufficio1
tap_action:
service: light.toggle
For this one I am not 100% sure what your floorplan looks like but if you just want to touch anywhere in the room and turn on the light and have the whole room change colour then just make the ID of the rectangle the same as the light entity and use the code I just posted.
If however you want to be able to touch ONLY the light bulb icon but change the background image then there are probably a number of ways to do that. My way might not be the most efficient but I use a input_boolean as a flag to control the state of the room background. I then have an automation to keep the flag in sync with the light. For example:
automation:
- alias: Abigail Bedside Floorplan Sync
mode: restart
trigger:
- platform: state
entity_id: light.abigail_bedside
to: "on"
- platform: state
entity_id: light.abigail_bedside
to: "off"
action:
entity_id: input_boolean.abigail_bedside_light_flag
service_template: "input_boolean.turn_{{trigger.to_state.state}}"
then in my ui-lovelace.yaml I have:
- entities:
- input_boolean.abigail_bedside_light_flag
- input_boolean.abigail_room_light_flag
- input_boolean.bookshelf_light_flag
name: Control Visbility of Elements
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'
You might be able to do this more efficiently using the element: tag but I haven’t used that to be able to give you good advice with it. Maybe look at the examples: https://experiencelovelace.github.io/ha-floorplan/docs/example-home/
I am trying the step by step for floor plan, I just want to try run the examples. but,how can I register entities? the warning log as bellow picture.
Hi,
Entities are defined as entities, mapped to element-things in your SVG. In your SVG, remember to define ID’s for each SVG element 
Here’s another example, where I’ve mapped a group to a SVG element.
area.bathroom are the ID defined in the SVG for my bathroom, and group.bathroom are my HA-entitiy.
You need to change the YAML manually - that’s not configured with a GUI.
If you’re facing any issues, please raise a question in our Discussions section on GitHub. By doing so, it’s much easier for other people to find answers to specific questions in the future 
Hello,
Do you know if there is a way so that the “Hover over” does not apply to an element ?
Thank you for your help
That’s not well-documented, yet. But try with false for the hover-action
thanks,
but seems not working, or I don’t do it well
this the Yaml code:
- name: Doors
entities:
- binary_sensor.openclose_porte_entree
hover_action: false
state_action:
action: call-service
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "door-on" : "door-off"}'
Edit: Thanks a lot my bad I have copy-paste hover-action but with hover_action It’s working perfectly
Hi,
Thw for your tuto @exetico.
Is it important to use an SVG file or is it possible to use a png image? I do not und
If we need an svg, why this type of file?
Can I convert a png image into svg?
Ty
There are a variety of online PNG to SVG converters. For example https://onlineconvertfree.com/convert-format/png-to-svg/
You can also import PNG into Inkscape when you make your floor plan and then save the whole thing as SVG
Ty OzGav.
But, why it’s important to use SVG ?
I believe that’s how HAs front end works. Certainly by using SVG you are the able to apply styles to elements and control the behaviour of the interface. PNG is just a binary image file but SVG files are text files which define the graphics in XML format
https://www.w3schools.com/graphics/svg_intro.asp
https://www.tutorialspoint.com/difference-between-svg-and-png
OzGav are right. Ha-floorplan are using the entities within our SVG-file. Each of them needs to have a ID. Without that, it’s just a “dumb” image, with no references or what so ever
Tip:
You’re able to add a image as the background. I’ve done that myself.
My floorplan are not “live” in the examples-area right now, but that just a image - and transparent objects added on top:
Please check the docs here:
And if you have any specific question, please head over to our dedicated community area. I really like the HA Community, buts it’s just way better to have individual threads for each question. And it has a WAY better SEO impact too, if people are using Google to find answers related to ha-floorplan
Happy floorplanning 
Hi, I am facing the same issue. Did you find how to fix it?
Thanks !
We will need some more info to help but first I would suggest that if you installed manually then undo that and then install via HACS. That will make sure it is all installed properly. Follow the instructions here https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/ Pay particular attention to step 5. Remember to add the /hacsfiles/ha-floorplan/floorplan.js as a module to your resource file - like you do with other modules.
Hi @OzGav, thanks for your prompt reply!!
Sorry, i am beginner with HA so, I followed every steps, even the step 5 as you see in the screenshots attached.
Thanks for the screenshots. Can you paste the YAML code for the card using pre-formatted text so we can see all the indents.
