newbie question - how to link lights to an area in the floorplan

[javixeneize]

Hi

Apologies for the newbie question, i am doing my first steps with floorplans.

I have created my floorplan. I have added the css and the svg for the light, and also the yaml , changing the entity name to a light entity in my HA. Moreover, i followed the instructions here

• https://experiencelovelace.github.io/ha-floorplan/docs/example-light/

Now my question is... how do i reflect that in my floorplan? It is, what i want is to increase/decrease the brightness of the room when the light is on, as in this example, https://experiencelovelace.github.io/ha-floorplan/docs/example-floorplanner-home/

Thanks!

[OzGav]

You will need to provide more info about the problem you are having as if you replicated the example it should work. The yaml has the rules for what css changes are to occur with a state change or a tap_action. The css changes are what makes the look of your floorplan change.

[OzGav]

The yaml and SVG and CSS all work together. The SVG has a bunch of objects in it. You can then reference those objects in your YAML and change their CSS properties to create the effect you desire. The CSS file just allows you to have a bunch of predefined classes so you can use the floorplan.class_set call rather than using floorplan.style_set and having to repeat all the style changes for every rule.

[javixeneize]

Thanks! Will try it later

[javixeneize]

Hi

I tried that and the error disappeared. I have modified my svg renaming my room as light.salon_pie (home_modified.svg). By clicking on the area, i can switch on and off the light, so this is progress. However, it doesnt light the room in the floorplan as it is doing in the demo

This is the new yaml i have now

type: custom:floorplan-card
full_height: true
config:
  style: null
  image: /local/floorplan/examples/home/home_modified.svg
  stylesheet: /local/floorplan/examples/home/home.css
  log_level: info
  console_log_level: info
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entity: light.salon_pie
      element: light.salon_pie
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'

I am assuming i just need an svg image for my floorplan and the css will make the area brighter or darker, right?

Thanks

[OzGav]

Yes so you need to have classes in home.css called light-on and light-off that apply a style to show or hide an object.

In your SVG you should (typically) have a background image which is all lights off. On top of this you will have objects (could be a PNG image, could be a SVG rectangle) that are given the ID of your entities. So it is the light on image object which you actually are touching. When that object is hidden (i.e. the entity is off) you see the background image. When the entity is switched on then the SVG object becomes visible and obscures the part of the light off image below and thus makes it look like the light has come on.

[OzGav]

For more info look at these discussions

#116
https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489/416?u=ozgav