Weather - Wind Direction On Sat Photo

Configuration Frontend
1

Hi there!

I was thinking about getting a satellite photo (google maps) of my home and drawing a wind rose on top of it (NSEW) and an arrow indicating the wind direction.

Already came across the wonderful wind rose card and one solution would be to have it displayed on top of the photo, maybe alongside… even thought about another add-on card that would get a photo and display a card with transparency on top of it rsrs

Any adeas or suggestions?

2

Picture elements card.
Then you can use the transform: rotate I believe

3

Managed to get it working with the help of chatgpt, picture-elements, hui-element and card mod

type: picture-elements
image: /local/satellite_home.jpg
elements:
  - type: custom:hui-element
    card_type: custom:windrose-card
    style:
      left: 69%
      top: 57%
      width: 70%
      height: 70%
      transform: translate(-50%, -50%)
    data_period:
      hours_to_show: 24
    wind_direction_entity:
      entity: sensor.openweathermap_wind_bearing
    windspeed_entities:
      - entity: sensor.openweathermap_wind_speed
        name: Vento
        speed_range_beaufort: false
        speed_range_step: 2
        speed_range_max: 20
    compass_direction:
      entity: sensor.openweathermap_wind_bearing
    current_direction:
      show_arrow: true
      arrow_size: 50
      center_circle_size: 30
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          box-shadow: none !important;
        }
4

No need to place a custom card into hui-element, you are just adding more layers (& more risks).

…which gives plenty of wrong code.

Consider using a native “background-image” option of windrose card instead of picture-elements (see a remark about extra layers above).

Note that a “solution” mark may cause other users to believe that that posted code is correct & optimal.

1 Like
5

You are right, that’s exactly the reason I said the code is chatgpt generated. But if I use the background image option from wind rose, it will be centered and the code using layers enables me to reduce the size of wind rose and get it into a corner of the card.

6

If an image does not occupy a whole card, try using a bigger image, any additional alterations can be done by card-mod.