Change colour form element doens't work with drawed line inkscape

[AndriesS82]

Helo,

I am since last week busy with the floorplan card.
For a noob i could say that it’s pretty easy if you have some patience to understand what you are doing.
For the moment I have a problem with some lightbulbs/ neon lighting that won’t get lighting up.
In the floorplan I drew some circles that are grey coloured and named the element as it should. When i switch the light on it should get yellow. This doesn’t happen at all… the circle on the floorplan disappears…
The light_on and light_off are as max px weight as the floorplan (took me couple of hours to realise that because it was just a very very tiny circle).
If I do the same but with a symbol of Noun Project then it works??? in particular the motion symbol and the camera symbol.
The symbols are downloaded and drag/drop into inkscape svg file.
The symbol of the camera exist of 2 objects. I have coloured the inside with inkscape of the objects so that makes 4objects . If I use the place that i have coloured and name this as an element it disappears. If I use the outline then it works…

I tried it on a empty page because i was thinking about the layers but stays the same…

Can somebody explain me how i can solve this?? I have some lines (led strip/neon) in the floorplan that i would lighten up but it doesn’t work… it disappears.

The flat line (blue circle) not working and disappears… this line is a straight line downloaded from noun and it's not working either. The rest of the lines are from inkscape.

Cleared cache everytime i made a change.

below the files. You will see that I starting from the examples and build this up step by step.

code yaml

- entity: light.garage
  element: binary_sensor.m1_garage_werkbank
  tap_action:
    action: call-service
      service: homeassistant.toggle
- entity: light.garage
  element: binary_sensor.m1_garage_werkbank
  state_action:
    action: call-service
      service: floorplan.image_set
      service_data:
        image: >-
          /local/floorplan/examples/home/lightspot_${entity.state}.svg
        cache: false
  tap_action: toggle

code css

`/* SVG size */

#floorplan {
padding: 10px;
}

#floorplan > svg {
max-width: 700px;
}

/* SVG elements */

svg * {
vector-effect: non-scaling-stroke !important;
}

/* Hover over */

.floorplan-shape:hover,
g.floorplan-hover > :not(text):hover,
g.floorplan-click > :not(text):hover,
g.floorplan-long-click > :not(text):hover,
:not(text).floorplan-hover:hover,
:not(text).floorplan-click:hover,
:not(text).floorplan-long-click:hover {
stroke: #03a9f4 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}

/* Layers */

.layer-visible {
display: inline !important;
}

.layer-hidden {
display: none !important;
}

/* Animation */

.spinning {
animation-name: spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}

@Keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* Binary sensors */

.binary-sensor-on {
fill: #f9d27c !important;
}

.binary-sensor-off {
fill: #7cb1f9 !important;
transition: fill 5s ease;
}

/* Buttons */

.button-on rect {
fill: #1aba92 !important;
}

.button-off rect {
fill: #d32f2f !important;
}

.button-on tspan,
.button-off tspan {
fill: white !important;
}
`

svg file

woningv6.zip

css file
home.zip

yaml file
home.zip

lightspot file
lightspot.zip

[OzGav]

First thing I notice is that you have grouped lots of your objects together. For example all of the cameras and motion symbols and your line and dots. So I would ungroup all of those so you can select them directly. I only group things if I want to assign an ID to the whole group and control them all togther in floorplan.

binary_sensor.m1_garage_werkbank is a group of two objects, a line and the end of the camera so I am not sure what you are trying to do there? If you are trying to turn a light on with the binary sensor then what you should do is have an automation in HA to do that and then floorplan will just respond to the change in state of the light.

light.garage does not exist in your SVG so that should not be in your YAML. Adding the logging option to your YAML will show you these errors https://experiencelovelace.github.io/ha-floorplan/docs/usage/#logging

So how should you be doing this? You need to find a light or switch in your home assistant that you want to control. I cant find any light.xxx or switch.xxx IDs in your SVG so I will for example call it light.neon I would take one of your lines and label it wil the ID of light.neon then put something like this in your YAML

- entity: light.neon
  state_action:
    action: call-service
      service: floorplan.style_set
      service_data:
        style: |
          fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
          transition: ${ entity.state === "off" ? "fill 5s ease" : "" };
  tap_action: toggle

So what that will do is when you tap/click the line with the ID light.neon its state will toggle and the fill of the object will change colour (and do it slowly if it goes to off). There are many ways to do this and with your large floorplan I would suggest you would be best to add a new style to your CSS such as (you can change colours to whatever you like)

.light-off {
  fill: #7CB1F9 !important;
  transition: fill 5s ease;
}

.light-on {
  fill: #F9D27C !important;
}

then your YAML could be

- entity: light.neon
  state_action:
      service: floorplan.class_set
      service_data:
        class: '${(entity.state === "on") ? "light-on" : "light-off"}'
  tap_action: toggle

So try and do something simple like that. Just take one object, assign it the label of one of your HA lights and add the YAML above and you should find you can tap/click on it and it will turn on and off and the SVG object will change colour.

[OzGav]

Great we are making progress. To make it work for your line I think you just need to add a line to the CSS to account for this:

.light-off {
fill: #7CB1F9 !important;
stroke: #7CB1F9 !important;
transition: fill 5s ease;
}

.light-on {
fill: #F9D27C !important;
stroke: #F9D27C !important;
}

[OzGav]

As for the question about the shading you can do this. Place a picture such as this https://thenounproject.com/term/fluorescent-tube/210348/ in your SVG. Size and rotate it to your needs. Do NOT give it an ID.

Then draw a rectangle in inkscape around the picture. Give this rectangle the ID of your light. Then I think you have two possibilities. In both cases you will use the FILL AND STROKE (Shift+Ctrl+F) tab.
(1) Go to Stroke paint and select the X to remove the outline. Select the Fill tab and (for example) make R & G 255 so you get yellow. Then select the third box from the left RADIAL GRADIENT and move the blue lines around until you get a nice glow around your picture.; OR
(2) Go to Fill and select the X to remove the fill. Select the stroke tab and (for example) make R & G 255 so you get yellow. Make sure the first box FLAT COLOR is selected and then go to Stroke Style and make the line the thickness you want. This will give you a rectangle outline around your picture.
Note: When I was testing this Inkscape sometimes wouldn't apply the new fill or stroke style. Just click on some other styles and then back to the one you want will hopefully fix this. It did for me.
Now add this to your CSS:

.room-light-fadein {
  visibility: visible !important;
  opacity: 0.65 !important;
  transition: opacity 0.5s linear !important;
}

.room-light-fadeout {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: visibility 0s 0.5s, opacity 0.5s linear !important;
}

Make your YAML for this light:

- entity: light.neon
  state_action:
      service: floorplan.class_set
      service_data:
        class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'
  tap_action: toggle

In this case the picture of the light should always be visible. The rectangle (whatever you chose to make it look like) will be invisible when the light is OFF. This is OK because even though you can't see it you can still tap/click on it. Since the picture is behind the rectangle when you go to tap/click on the picture you are actually interacting with the rectangle. So as you tap/click on the picture of the light the rectangle will come in and out of view to show when the light is on or off.

[OzGav]

do i have to work with the image like in the example from floorplanner 'home'

Personally I don't use the functionality of image_set for lights. I only use it when I don't know what the image to insert is going to be. Weather icons are a good example. I get the weather forecast and then select a appropriate icon and insert it with image_set. I provide an similar example here #91

[AndriesS82]

thank you very much for this extensive explication!
Try it and works perfectly!
The image i will not use for the moment.

best regards

[OzGav]

Great news. Please mark this question as answered