New to floorplan, struggling with customizing

[Maxxell]

Hi!
I'm running HA on a Pi4.
I think I came across an older version of floorplan first, so I started down the wrong path. But now I am able to get a view of the example home.svg. Then I was able to swap in my custom floorplan svg. So far, so good.
But when I then import another .svg and name that the same as my lightbulb entity, thinks start to misbehave. I can get the bulb to work (show the right icons based on the state of the bulb; and click the bulb to send a toggle command); but the image of the bulb moves to the top-left corner.

Right now, to make changes, I go to my custom dash, click on the floorplan name at the top, then click edit and then "Raw configuration editor". (Question #1: is this floorplan.yaml I see referenced around this topic?)

Here's the last 30+lines showing the portion of the template code provided that I've kept:

• title: Floorplan JSG
  path: floorplan-jsg
  theme: ''
  badges: []
  cards:
  • type: vertical-stack
    cards:
    • type: horizontal-stack
      cards:
      • type: 'custom:floorplan-card'
        full_height: true
        config:
        image: /local/floorplan/examples/home/JSGhome10.svg
        stylesheet: /local/floorplan/examples/home/home.css
        log_level: info
        console_log_level: info
        defaults:
        tap_action: more-info
        rules:
        - element: light.68074866dc4f22afcc90
        entity: light.68074866dc4f22afcc90
        state_action:
        action: call-service
        service: floorplan.image_set
        service_data: >-
        /local/floorplan/examples/home/light_${entity.state}.svg
        tap_action: toggle

Any ideas what I am missing?

[OzGav]

I'm on my phone but if you have a look at the other discussions you will see others with your same issue. The best way to do this is rather than inserting SVG at runtime is to put the bulb SVG in your base image and then use CSS styles to show or hide it

[Maxxell]

Can you clarify something for me?

You should have an off image and then on top of that have the on image in your base image

How would this work? Inkspace yells at me if I try to have two objects with the same name in the master file. How do I have an image for off and an image for on if I can only have 1?

[exetico]

Floorplan supports replacements of graphical elements. Check for docs, or some of the other discussions. There's a few examples, if I remember correctly :-)

[Maxxell]

If I understand you correctly, then it's not something you do in the base image. The base image shows your floorplan and placeholders for active elements, and then you let Floorplan drop in new graphical elements that are stored elsewhere on top when needed.

In my head, the image that shows up in the base image is just a placeholder, and its still there (just hidden behind the 'active' image) when floorplan displays a new image there because of a state call. But what happens when you have different sizes/shapes of image for different states of the same entity (like a garage door or something)?

What happens when floorplan is asked to swap in an image that is different size of the image it's replacing? Does that make sense?

[OzGav]

How would this work? Inkspace yells at me if I try to have two objects with the same name in the master file. How do I have an image for off and an image for on if I can only have 1?

For example, place the off image in Inkscape but do NOT add an ID to this as you won’t be changing anything about this object. Then place the on image on top and add the HA entity ID to this object.

Now in the rules you will control the on image. If you hide the on image then the off image will be visible. If you show the on image it will obscure the off image and only it will be visible.

[OzGav]

What happens when floorplan is asked to swap in an image that is different size of the image it's replacing? Does that make sense?

It does make sense. I think it will get sized or distorted to fit. Just try it and see what happens. If I was trying to put a rectangular shape in a square placeholder then I would actually make the rectangular image square by adding transparent space around it.