Adding and removing images/SVG can be done as per here Floorplan now available as a Lovelace card - #433 by OzGav
As for moving objects you would have to look at CSS solutions.Having said that if there were only a couple of locations then showing or hiding images in those locations might be a solution?
Okay the adding seems something I could use. I don’t control the location where i need to add the extra elements (external api) but maybe I could monitor it for a bit and check if it’s always neer the same location. Thanks!
Hi. Today is … a new day for me. Yesterday i planned and recorded a video on how to get started with ha-floorplan. It’s done with Home Assistant OS, which are the easiest way to get started with Home Assistant.
I really hope that I’ll find time to create more videos in the future, with more specific content - but I’ve received quite a few requests on how to get started with ha-floorplan, in the last couple of years.
Happy floorplanning everyone!
It’s my first video in English and as a “teacher”, but I’ve executed it the best I can, during a rainy sunday.
Attachments can be found here:
Please hit the like-button on the video, and write a comment. Thanks! 
Video 2 (part one of two) is now on YouTube 
.
Learn to use Inkscape for the first time, and map a few elements to entiities with YAML - and introductions to some of the services in ha-floorplan 
.
Petar,
I just wanted to say thank you for the awesome work here! I am having a blast setting up my home, still early going but the results are promising!
You’re welcome. I’ve not heard from Petar in quite a while, so I’m doing what I can to keep things running (pushing new features, testing thinngs, and so on) 
.
When you’re done, please consider to share your work in our discussion-area on GitHub 
…
New video about the usage of basic CSS-selectors, what we’re using classes and ID for… and a bit more.
This video is for people touching CSS for the first time - or simular.
ha-floorplan - Using CSS-selectors | How CSS-styling works in ha-floorplan and in general
We’ll take a look at how CSS-selectors works, by using a Class and Id selector. I’ll also try and give you a better understanding in, how the CSS style “connects” to the HTML-dom, and how ha-floorplan are updating the dom-element. Learn how to see the CSS-properties in your browser, and debug by toggling a given property on and off.
This is a (shorter) video all about CSS-styling in ha-floorplan, before I’ll release part 2 of “Create your first floorplan in Inkscape”.
Support my work:
https://www.buymeacoffee.com/coffeetoexeticoSoftware used:
Home Assistant 2022.10.04
ha-floorplan
Documentation: Floorplan for Home Assistant
GitHub: GitHub - ExperienceLovelace/ha-floorplan: Bring new life to Home Assistant. By mapping entities to a SVG-object, you're able to control devices, show states, calling services - and much more. Add custom styling on top, to visualize whatever you can think of. Your imagination just became the new limit.
Examples source-code: ha-floorplan/docs/_docs/floorplan/examples at master · ExperienceLovelace/ha-floorplan · GitHub
Your feedback
Hi. Thank you for looking by this video.Please let me know what you think, and press the like button! I’ll also ask you to search for code-related inputs in our discussion area, instead of here on YouTube. But short questions are totally welcome, but I can’t promise that I’ll walk through all questions from now on.
Changes to this video: I’ve tried to work with both zooming and creating focus-areas on/off. I hope it help to make things more clear.
Home Assistant is known to change over time, so things can be outdated quite fast. I hope most things will be stay the same… But let’s see how it goes!
Tags:
ha-floorplan, floorplan, yaml, css, css selectors, classes, ids, debug css, homeassistant, hass.io, homeassistant osVideo chapters:
00:00 Introduction
00:09 Content of this video
00:37 Classes - A selector for multiple elements
2:37 Using important! to force your changes
3:30 ID’s - A selector for single unique element
4:53 Ordering your style and create more specific selectors
5:47 Styling elements with ha-floorplan
6:48 How the style_set-service works
7:18 Using JavaScript in style_set to define the fill-color
8:34 Outro
It is much appreciated!
I love what you’ve created.
Do I see this right, that you are able to switch between the floors with this icon?
Is this a generic function of HA-floorplan or your own IP 
It is not a standard function. There are various ways to change floors . Have a look here Floorplan now available as a Lovelace card - #468 by OzGav
Perfect - thank you!
As @OzGav mentioned I followed the example and optimized my svg under one group so I can easily toggle via set.class.
Thank you!
I will check out the docs and give it a shot 
Can NOT set a CLASS for an image.
- name: weather icon
entities:
- weather.home
state_action:
- service: floorplan.image_set
service_data:
image: /local/floorplan/examples/home/weather-${entity.state}.svg
cache: true
- service: floorplan.class_set
service_data:
class: weathericon
This does not add the weathericon class to changed image element. If I remove floorplan.image_set the class is added. In another example I change text and set class and both work fine. Why image_set + class_set fail to add class?
Hi all
Part two of “Create your first floorplan in Inkscape” was uploaded two days ago. I bet most of you guys are a step above the skill-“level” in the video.
But give it a go, if you have half an hour.
Tip: Check the chapters if you’re looking for something specific:
Discussion dedicated to questions related to part 2:
I can’t promise that I’ll see the question if it’s asked in this mega-thread 
.
You’re more than welcome to submit a question here: Start discussion in the “Q&A category”
Thanks! submitted
Hi @kol
Can you please update to the latest HA Floorplan (HACS) and let us know if setting a class works now for images?
We recently put in a fix, so hopefully now the CSS classes are retained, even after an image is (re)loaded.
Thanks,
Petar
Finally toot myself together and jumped in the Floorplan. Great integration, thank you for that.
I watched the youtube tutorials and made my first attempt on fist floor lightning. However i’m having issue of some areas not showing the state.
Here is my yaml:
title: Floorplan
views:
- theme: Backend-selected
title: First Floor
path: floorplan
panel: true
badges: []
cards:
- config:
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
image: /local/floorplan/1st_floor/first_floor_v4.svg
rules:
- element: lights_stairs
entity: light.stair_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_wc
entity: switch.downstairs_wc_mirror_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_kitchen_ceiling
entity: light.kitchen_ceiling_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_kitchen_island
entity: light.kitchen_island_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_sauna_lobby
entity: light.sauna_lobby_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_sauna_washing_room
entity: light.sauna_wahing_room_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_sauna
entity: light.sauna_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_hallway
entity: light.hallway_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_garage
entity: light.garage_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_dining_table
entity: light.dining_table_lights_4
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- element: lights_living_room
entity: light.living_room_lights
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
stylesheet: /local/floorplan/1st_floor/first_floor.css
type: custom:floorplan-card
full_height: true
CSS:
.entitystate-on {
opacity: 0;
}
.entitystate-off {
opacity: 1;
}
Toggling works on every element, but it does not show states on half of them. For example Dining Table Lights:
Light is on but on the floorplan its not:
Any ideas what to look?
EDIT:
Also when i hover over, the state is “on”
Hi,
I’m happy to have you onboard 
.
Please consider to share the SVG, too.
Here’s a few thoughts:
That kind of graphical object is the dimmed area?
Have you tried and inspect it, just to see the current styling of the area? (Check ha-floorplan - Using CSS-selectors | How CSS-styling works in ha-floorplan and in general - YouTube)
If you have changed opacity for the object in Inkscape, you’ll need to use !important in CSS (more in the video)
That’s the first three things I can think off as is.
Also: Consider to create a dedicated Q&A discussion on GitHub
