Virtual flag post

[Chrpre]

Hi

I have a wind direction sensor and i have a picture of a flag in my garden. Would it not be great, if the flag could rotate in accordance with wind direction sensor.

so wind from north rotates the flag.svg 0 degrees while wind from south rotate the flag.svg 180 degrees and so on.

any good ideas how to implement it?

Thanks

[exetico]

Check a look at the rotate-option in CSS, and combine that with out https://experiencelovelace.github.io/ha-floorplan/docs/usage/#services (Search for 'style_set')

[pkozul]

Hi @Chrpre

We have enhanced the Home example to include a wind direction sensor.

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

The rule that does the work is this one:

      - entity: sensor.wind_direction
        state_action:
          action: call-service
          service: floorplan.style_set
          service_data:
            style: |
              >
              var rotation = Math.floor(entity.state) - 90;

              return `
                transform-box: fill-box;
                transform-origin: center;
                transform: rotate(${rotation}deg);
              `;

As you can see, the final rotation value is offset by -90 degrees since the SVG wind icon is already pointing to the right (i.e. 90 degrees).

Does that work for you?