Control works, but no status

[simonsmart99]

I have recently installed ha-floorplan, and have created a new floorplan.svg with a single icon linked to a home assistant entity.
When I click on the icon the entity toggles correctly, however the status (color of icon) does not change accordingly.

Any help would be appreciated.

Here is the lovelace code in raw configuration editor

- title: Floorplan1
    path: floorplan1
    panel: true
    theme: ''
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: 'custom:floorplan-card'
                full_height: true
                config:
                  image: /local/community/ha-floorplan/floorplan.svg
                  stylesheet: /local/community/ha-floorplan/floorplan.css
                  log_level: info
                  console_log_level: info
                  defaults:
                    hover_action: hover-info
                  rules:
                    - entity: switch.garden_room_table_lamp
                      element: switch.garden_room_table_lamp
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data:
                          class: >-
                            ${(entity.state === "on") ? "light-on" :
                            "light-off"}
                      tap_action:
                        action: call-service
                        service: homeassistant.toggle

Here is the 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;
}

/* 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;
}

/* Light */

.light-off {
  fill: #0a7afa !important;
}

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

[simonsmart99]

I have attached the floorplan.svg file
floorplan.zip

[pkozul]

Hi @simonsmart99

I can have a closer look at this later, but in the meantime, can you try putting your code for evaluating the class: into just one line?

Like this:

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

If that still doesn't work, it might be due to the SVG image and how your element is structured in there.

I will have a look later and see what I can find.

[simonsmart99]

Hi Petar. Thank you for your quick response. That is how I structured the code in the raw configuration editor in the first place, however when you save it and re-open the editor, home assistant changes the code into the structure:

class: >-
${(entity.state === "on") ? "light-on" :
"light-off"}

for some reason the editor does not like the quotes in this context. I changed it back to the single line entry as you suggested, then checked again after saving, but home assistant has changed it again.

[pkozul]

Hi @simonsmart99

Found it! All you need is to add another selector to each of your CSS classes, to ensure that the styles are applied to nested elements also.

.light-off,
.light-off * {
  fill: #0a7afa !important;
}

.light-on,
.light-on * {
  fill: #e6fa0a !important;
}

As you can see below, your target element is a <g> element, which is really just a container for the 'real' elements (i.e. <path>). The additional selectors on the above CSS ensure that all nested elements are also included.

Let us know if the above CSS works.

[simonsmart99]

That works perfectly, thank you very much for your time, effort, and of course for the floorplan add-on.

I would love to say I understand why that worked, but clearly I have a lot to learn.

Thanks again.

[pkozul]

@simonsmart99 No probs. Great to hear that it's working. Good luck!