Floorplan --> show or hide icons depending on state

Third party integrations Floorplan
1

Hi all,

I am playing with the configuration of the floorplan and I have a question that probably you can answer me…
The idea is to show an icon (light off) when the light is turned off and after click on it, change that icon for another one (light on) and viceversa. Both icon shall share the same home assistant entity.

This one when off:
01
That one when on:
15

In this case, I know that they are very similar and the colour can be filled using the .css file, but how can I do it with different icons?

Thanks in advance!
Oscar

2

I have tried what it is specified in README.md but the icon appears in the incorrect place. Does anybody faced the same and how do you fix it?

Below is an example of using dynamic images which are swapped out at runtime, based on the sensor's current state. In the example below, the sensor.home_dark_sky_icon entitiy is mapped to a <rect> in the SVG file with the same id (which simply acts as a placeholder). Whenever the temperature sensor changes state, the image_template is evaluated to determine which SVG image should be emebedded within the bounds of the <rect>. Also you need to make sure that the placeholder is placed directly within the svg (e.g. not in a layer in inkscape) or else the calculated coordinates will be wrong.

  groups:

    - name: Dark Sky Sensors
      entities:
        - sensor.home_dark_sky_icon
      image_template: '
        var imageName = "";

        switch (entity.state) {
          case "clear-day":
            imageName = "day";
            break;

          case "clear-night":
            imageName = "night";
            break;

          case "partly-cloudy-day":
            imageName = "cloudy-day-1";
            break;

          case "partly-cloudy-night":
            imageName = "cloudy-night-1";
            break;

          case "cloudy":
            imageName = "cloudy";
            break;

          case "rain":
            imageName = "rainy-1";
            break;

          case "snow":
            imageName = "snowy-1";
            break;
        }

        return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";
        '
3

Post your actual code and I can help you figure out what’s broken. I just did all this in mine.

4

Here is my code:

    - name: Lights
      entities:
         - light.lampara_salon
      image_template: '
        var imageName = "";
        switch (entity.state) {
          case "on":
            imageName = "bulblight_on";
            break;
          case "off":
            imageName = "bulblight_on";
            break;
        }
        return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
        '

I have been able to do what I want but now the problem is that the icon appears with incorrects coordenates. Did you face the same problems? I guess this issues is more related to inkscape than floorplan config.

Thanks for your help!

1 Like
5

Yeah, that code looks good. Coordinates shouldn’t change, since it’s just replacing the SVG, but if the images are different aspect ratios, like one is taller than the other or something, it will look weird/out of place. Are you sure that’s not what is happening?

Oh, and in Inkscape, make sure your rectangle has the ID of “light.lampara_salon”

6

Yes, the rectangle has the proper ID:

27
27846×654 44.1 KB

47
47697×419 30.7 KB

As you can see, the ID is the expected, the size is the same as that the image.svg to be replaced (32x32), and it is at the upper layer…

What I am getting is this in off:
35
And that one in on:
42

I cannot figure out what is happening :confounded:

7

Just if someone is in the same situation, I have found the solution. Locate the rectangle element to the root layer, that’s it!