Undefined values for floorplan service actions

[adamgross42]

Hi there,

I have an SVG file and configuration working fine for tap_action, but am having issues with state_action. Looking at the examples, I do see that floorplan.class_set and floorplan.style_set should work on a switch entity.

With floorplan.class_set, when the entity state changes, the SVG element gets a class of undefined applied, instead of the expected class or style.

With floorplan.style_set, nothing happens to the SVG element. I was expecting the style fill: yellow; to be added.

The SVG element with this ID is of type path not type g as seen in the examples - could that be the issue?
Or any other thoughts on why the service isn't able to manipulate the SVG element?

Here is the approach I am taking:

  rules:
    - entities:
        - switch.living_room_lamp
      tap_action: homeassistant.toggle
      state_action:
        - action: call-service
          service: floorplan.class_set
          service-data: light-${entity.state}
        - action: call-service
          service: floorplan.style_set
          service-data: 'fill: yellow;'

I've also tried enumerating service-data in YAML to the Service Data Properties (class and style) per the documentation for verboseness, that didn't change anything.

I've also tried putting single quotes around light-${entity.state} but the Home Assistant Lovelace web editor strips those out.

---

Update:

Chrome browser JS console is showing an error for the style service, TypeError: (intermediate value)(intermediate value)(intermediate value).split is not a function.
Looking within the JS debugger, I can see that the floorplan.js function setStyle() (I think called from here) is trying to manipulate an SVG element with ID switch.living_room_lamp.undefined instead of switch.living_room_lamp. Not sure where that string is coming from yet.

[OzGav]

I think the single quotes should be there. I edit my YAML with a text editor so I don't see the stripping that you have noticed. Try this YAML and if it doesn't work then might be an issue with your SVG. Also the style set doesn't make sense to me as you are filling with yellow for any state change. You would be better to just fill it yellow in your SVG and leave that out. In case that was a mistake I have shown an option to have it change from yellow to blue depending upon the state.

  rules:
    - entities:
        - switch.living_room_lamp
      tap_action: switch.toggle
      state_action:
        - action: call-service
          service: floorplan.class_set
          service-data: 'light-${entity.state}'
        - action: call-service
          service: floorplan.style_set
          service_data: 
            style: |
              fill: ${(entity.state === "on") ? "yellow" : "blue"}

[OzGav]

Maybe there is an issue with your SVG or maybe a misunderstanding about how floorplan works. Based on some of the things you wrote above I will just talk a bit about how floorplan works.

If we take the example I provided above you should have a single object in your SVG which has the id switch.living_room_lamp. Assuming there are no other objects in your SVG which are obscuring it when you click/tap on the object it’s state will toggle and the both the class will be set as well as the style. It is probably unusual that you are doing both, I generally use class_set as I typically use the same styling for consistency.

As for a YAML entry for multiple entities you can certainly do that. I will provide an example in the next post but if you are finding you can tap on the object and it physically toggles state but your SVG does not change appearance then it sound like a problem with your YAML or CSS. You will be best to post a formatted excerpt of the non-working YAML and your SVG. We can then test it on our systems.

[OzGav]

Here is an example of multiple entities: (I use homeassistant.toggle as there are switches and lights)

            - tap_action:
                service: homeassistant.toggle
              entities:
                - light.abigail_bedside
                - light.hue_white_lamp_3
                - light.hue_white_lamp_2
                - switch.hannah_beside
                - switch.grace_switch
                - light.kids_desk_light
                - light.spare_bedroom
                - light.fairy_lights
                - switch.tank_pumo
                - light.pantry_bench_white
                - switch.car_charger
                - switch.main_pc_wol 
              name: Light and other icons
              state_action:
                service: floorplan.class_set
                service_data: 
                  class: '${(entity.state === "on") ? "lamp-on" : (entity.state === "off") ? "lamp-off" : "entity-unavailable"}'

[adamgross42]

Thanks, I agree setting both the class and style are unnecessary, was just doing that for testing. I cleaned that up a bit below.

Here is my latest iteration of the YAML (changed the entity name slightly, but it still matches 1:1 with the SVG):

type: custom:floorplan-card
config:
  console_log_level: debug
  image: /local/home.svg
  stylesheet: /local/home.css
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entities:
        - switch.living_room_corner_lamp
      tap_action: homeassistant.toggle
      state_action:
        service: floorplan.class_set
        service-data:
          class: light-${entity.state}

And the greatly-simplified SVG (for testing this feature):

<svg
   version="1.1"
   id="svg222"
   width="960"
   height="679"
   viewBox="0 0 960 679"
   sodipodi:docname="home.svg"
   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
<g
     inkscape:groupmode="layer"
     id="layer3"
     inkscape:label="Entities"
     style="display:inline">
    <path
       d="m 203.33602,463.73973 -6.78991,5.13595 3.61258,4.17841 v 33.94952 h -13.05751 v 8.70501 h 34.82003 v -8.70501 h -13.05752 v -33.51427 l 3.69963,-4.52661 -6.87695,-5.17948 -2.35035,-0.0435 m -14.84204,-20.67439 3.96078,12.53521 -1.00108,0.78345 -11.01183,-7.26868 8.05213,-6.04998 m 4.65718,-14.40679 -27.8125,20.93554 26.46322,17.45354 10.75068,-8.22623 -9.4014,-30.16285 m 27.33372,14.36326 8.09566,6.09351 -11.01184,7.26868 -1.00107,-0.73993 3.91725,-12.62226 m -4.61365,-14.36326 -9.44494,30.2499 10.79421,8.13918 26.46322,-17.45354 z"
       id="switch.living_room_corner_lamp"
       style="stroke-width:4.3525"
       inkscape:label="Living Room Corner Lamp" />
</g>
</svg>

[adamgross42]

And the CSS:

/* SVG size */

#floorplan {
  padding: 20px;
}

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

/* 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: 2px !important;
  stroke-opacity: 1 !important;
}

/* Lights */

.light-on {
  fill: yellow !important;
}

.light-off {
  fill: black !important;
}

[OzGav]

Until I get time to test it I think I noticed one thing. Try changing to this in your CSS

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

.light-off, .light-off * {
  fill: black !important;
}

edit: and add single quotes around service-data class

[OzGav]

OH it is so painful when it is a typo! Look carefully at your YAML. You have service-data but you need service_data

The shift key on the keyboard makes all the difference! :-)

[adamgross42]

Oh wow, that is indeed the issue! Reloaded all of the original files and corrected to service_data and CSS styling is working correctly now.

Thanks for the extra eyes to help catch that 😝

The failure behavior here is quite interesting.
I wonder if there is a better way to validate the YAML and output any issues to the browser JS console or within Lovelace web UI like the default YAML syntax checker (image below). Do you happen to know if Home Assistant Core or HACS has any support for extending that validation?

[OzGav]

That is a good idea but I am not aware of anything that checks for the sort of typo we found here….