The easiest interaction from HA floorplan

Third party integrations Floorplan
1

I use Inkscape create my house SVG, putting many MDI icons and set their IDs to corresponding entity IDs in HA.

In lovelace card I config like this:

- title: Floorplan
 icon: mdi:floor-plan
 path: floorplan
 theme: Google Dark Theme
 badges: []
 cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:floorplan-card'
            full_height: true
            config:
              image: /local/floorplan/manndr/home.svg?v=1
              stylesheet: /local/floorplan/examples/home/home.css
              console_log_level: info
              defaults:
                hover_action: hover-info
                tap_action: more-info
              rules:
                - entity: light.office
                  element: light.office
                  icon: 'mdi:lightbulb-on-outline'
                  state_color: true
                  type: state-icon
                  tap_action: homeassistant.toggle
                  style:
                    top: 50%
                    left: 50%
                    transform: scale(2)

I am able to click on icons to control those devices, but cannot change the color of icon to get feedback of my operations. The bulb remain unchanged no matter it is on or off. In fact, the lightbuild-on-outline icon doesn’t even show up in my floorplan. I can see the icon I add into svig with inkscape, which is static.

I don’t need those fancy light rendering effects, just want the same color changing behavior as lovelace card (blue as off, yellow as on" with minimum coding efforts. I am trying to avoid touching CSS as I am not an expert. a few lines in yaml is my preference.

Thanks if anyone can help me out.

2

Some of your code is not valid in ha-floorplan rules section such as your lines icon, type, style and state-color so you should remove those. See the docs for valid entries Usage - Floorplan for Home Assistant

As for changing the colour of the icons. Assuming you have a valid SVG element then you need to add a state_action which applies a css style contained within your specified style sheet (in your case home.css) using floorplan.class_set or you can alternatively define the style directly using floorplan.style_set. See here for examples Floorplanner Home Example - Floorplan for Home Assistant

3

state_action works! Should have read official documents carefully.
Thank you for the quick help.