Delay fill on binary sensor state change

[patfelst]

Hi there, is it possible to delay fill of an SVG element by (for example) 30s after a binary sensor changes state? My use case is I have CCTV cameras with an integration that creates binary sensors in HA which indicate CCTV movement detection. The binary sesnors only stay true for a few seconds. So I have time to see a recent motion event on the floorplan, I would like an SVG element (CCTV camera icon) fill to turn red when the binary sensors goes true, and then say 60 seconds after the sensor goes false, it goes to fill blue.

I guess this would be ok to work with opacity too instead of color.

I've almost got it working with this code, however the fill gradually changes over 30s, I would like an immediate step change.

    - name: Binary Sensors
      entities:
        - entity: binary_sensor.ds_7608ni_i2_8p0820220623ccrrk17144184wcvu_3_fielddetection
          element: cctv-alfresco

      tap_action: none
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            fill: ${ entity.state === "on" ? "red" : "blue" };
            transition: fill 30s ease;

[OzGav]

You could use another binary sensor and an automation which keeps it in sync with the one you are currently using but with the delay you want

[patfelst]

yes I did think of this, or just create a binary template sensor with a delay_off based on the original CCTV binary sensor, but I prefer to do it all in ha-floorplan if possible.

[patfelst]

Actually I found the correct css function called transition-delay, I just don't have the syntax quite right to return the correct css. Do I need quotes or curly braces around the parts in the if statements?

    - name: Binary Sensors
      entities:
        - entity: binary_sensor.ds_7608ni_i2_8p0820220623ccrrk17144184wcvu_3_fielddetection
          element: cctv-alfresco

      tap_action: none
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            >
              if (entity.state == "on") {
                fill: red;
              }
              else {
                fill: blue;
                transition-delay: 10s;
              }

[OzGav]

Not sure if might be return ‘fill: red’;

have a look at the yaml in the example here https://experiencelovelace.github.io/ha-floorplan/docs/example-home/

[patfelst]

thanks, that was it, this works great:

      tap_action: none
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            >
              if (entity.state == "on") {
                return 'fill: red;'
              }
              else {
                return `
                  fill: blue;
                  transition-delay: 10s;
                  `
              }

[exetico]

It's great that you'd figured it out!

Another solution would be to create a function which had a timeout before executing, or handle it in HA, as mentioned 😀.

[patfelst]

Doing further testing, this is possibly not a good solution. Every time I refresh the web page, the SVG element goes to its default appearance (as loaded from SVG file), even if the binary sensor did not change. Then after the timeout period finishes, it correctly goes back to blue. This also means if I use two different devices to view the floorplan (e.g. a laptop and a phone) the status can get out of sync during the timeout period.

I think handling this in HA by creating a new binary sensor with delay might be the better solution.