Change Background Image path based on JS expression

Third party integrations Floorplan
1

Hello everyone,
I was successfully able to change the background image based on the screen resolution. However, I can’t then change the image based on the time of day.
I report what I wrote in which in the first segment with min_width: 0 I try to change the path of the image based on a parameter (tested successfully I will replace xtesting with a sensor that I have already prepared and tested that calculate the time of the day (evening, day, night, ec.)). I can’t see the image in the browser in this way. While in the second segment, min_width: 2570, I get the desired result.

    config:
      defaults:
        hover_action: hover-info
      image:
        sizes:
          - min_width: 0
            location: |
              >
              xtesting = 2;
              if (xtesting == 3) { ytesting = "/local/floorplan-casa/SVG/Night1080/floorplan_optimised_night_1080.svg";}
              else { ytesting = "/local/floorplan-casa/SVG/Day1080/floorplan_optimised_day_1080.svg";}
              return (ytesting);
            cache: false
          - min_width: 2570
            location: /local/floorplan-casa/SVG/Day1440/floorplan_optimised_day_1440.svg
            cache: false

Thank You very much in advance
Regards

2

I’m not sure if you can do it that way. You could check the console logs and see if you are getting an error with that.

The alternative is to just use one image as the back ground and then use a rule to show a different background image over the top.

3

Hello,
thank You very much for the tip. I solved the contingent problem. However, I still have other situations in which I cannot resolve in this way. For example I should show a different image based on the time of day for each individual light (day mode and night mode).
So I ask: is it possible, within the javascript code of the “element” field, to manage and make conditions about the state of two sensors/entities?
For example, a light and the time of the day?

4

Yes as ALL HA entities are exposed to ha-floorplan. You can access them like so:

            - entity: sensor.moon_angle
              name: Moon Angle White Text
              state_action:
                - service: floorplan.text_set
                  service_data: '${entity.state != "unavailable" ? Math.ceil(entity.state) + "°" : "?"}'
                - service: floorplan.class_set  
                  service_data:  |
                    >
                      if(hass.states["sun.sun"].state === "below_horizon")
                        return "always-visible";
                      else
                        return "always-invisible";
5

Thank You Very Much!
I don’t know if I lack on find it but I can’t find an example about that in documentation. Solved!