Yet another wind compass - with wind speed indication

adding to the above template sensor, one could also use this template sensor in the Lovelace frontend:

      {% set direction = states('sensor.br_wind_direction') %}
      {% set gust = states('sensor.br_wind_force') %}
      {% set ext = '.png' %}
      {% set path = '/local/weather/compass/' %}
      {% if gust <= '10' %} {% set color = '-blu' %}
      {% elif gust <= '20' %} {% set color = '-grn' %}
      {% elif gust <= '30' %} {% set color = '-yel' %}
      {% else %} {% set color = '-red' %}
      {% endif %}
      {{[path,direction,color,ext]|join('')}}

given my test sensors, this is a completely wrong outcome, but I wanted to keep Tom’s calculations for this example, and I don t have the Bom sensors to try. (we use different windspeed units…)

guess this would be more appropriate for BR windspeed:

      {% set direction = states('sensor.br_wind_direction') %}
      {% set speed = states('sensor.br_wind_speed') %}
      {% set path = '/local/weather/compass/' %}
      {% set ext = '.png' %}
      {% if speed <= '11' %} {% set color = '-blu' %}
      {% elif speed <= '39' %} {% set color = '-grn' %}
      {% elif speed <= '75' %} {% set color = '-yel' %}
      {% else %} {% set color = '-red' %}
      {% endif %}
      {{[path,direction,color,ext]|join('')}}


using:

  - type: custom:button-card
    show_entity_picture: yes
    name: >
      [[[return states['sensor.br_wind_direction'].state + ' - ' + states['sensor.br_wind_force'].state]]]
    entity_picture: >
      [[[return states['sensor.colored_wind_compass'].state ]]]
    styles:
      name:
        - color: >
            [[[ var speed = states['sensor.br_wind_speed'].state;
                if (speed <= 11) return 'blue';
                if (speed <= 39) return 'green';
                if (speed <= 75) return 'yellow';
                return 'red'; ]]]

Tom, when does Calm kick in in your template, given the fact that you start the color selection with <=10, wouldn’t that exclude any other picture than the direction pictures?

Did this break as part of .106?

Getting errors for the custom:ui-picture-entity-card that are reminiscent of https://github.com/home-assistant/frontend/issues/4984

====
Install https://github.com/thomasloven/lovelace-hui-element via HACS

This is what my card configuration needed to turn into to implement:

card:
  type: custom:hui-element
  card_type: picture-entity
  entity: sensor.friendly_wind_direction

I’ve been using this to prevent those sorts of errors:

Thx, good stuff! :slight_smile:

My wind direction was in a 0° - 360° unit, here’s my conversion:

- platform: template
  sensors: 
    wind_compass_abbreviation:
      value_template: >-
        {% if 348.76 <= states('sensor.WIND_DIRECTION_°')|float <= 360.00 %}
           N
        {% elif 0.00 <= states('sensor.WIND_DIRECTION_°')|float <= 11.25 %}
           N
        {% elif 11.26 <= states('sensor.WIND_DIRECTION_°')|float <= 33.75 %}
           NNE
        {% elif 11.26 <= states('sensor.WIND_DIRECTION_°')|float <= 33.75 %}
           NNE
        {% elif 33.76 <= states('sensor.WIND_DIRECTION_°')|float <= 56.25 %}
           NE
        {% elif 56.26 <= states('sensor.WIND_DIRECTION_°')|float <= 78.75 %}
           ENE
        {% elif 78.76 <= states('sensor.WIND_DIRECTION_°')|float <= 101.25 %}
           E
        {% elif 101.26 <= states('sensor.WIND_DIRECTION_°')|float <= 123.75 %}
           ESE
        {% elif 123.76 <= states('sensor.WIND_DIRECTION_°')|float <= 146.25 %}
           SE
        {% elif 146.26 <= states('sensor.WIND_DIRECTION_°')|float <= 168.75 %}
           SSE
        {% elif 168.76 <= states('sensor.WIND_DIRECTION_°')|float <= 191.25 %}
           S
        {% elif 191.26 <= states('sensor.WIND_DIRECTION_°')|float <= 213.75 %}
           SSW
        {% elif 213.76 <= states('sensor.WIND_DIRECTION_°')|float <= 236.25 %}
           SW
        {% elif 236.26 <= states('sensor.WIND_DIRECTION_°')|float <= 258.75 %}
           WSW
        {% elif 258.76 <= states('sensor.WIND_DIRECTION_°')|float <= 281.25 %}
           W
        {% elif 281.26 <= states('sensor.WIND_DIRECTION_°')|float <= 303.75 %}
           WNW
        {% elif 303.76 <= states('sensor.WIND_DIRECTION_°')|float <= 326.25 %}
           NW
        {% elif 326.26 <= states('sensor.WIND_DIRECTION_°')|float <= 348.75%}
           NNW
        {% endif %}

2 Likes

Nice idea, very useful for wind bearing data.

I’ve just integrated Bjarne’s weatherbit.io integration and see it now supports Beaufort scale 0 to 12. Cross checking with the Wikipedia article I see there is an official color scales for wind strength.

No, I’m not fond of hundreds of png files and believe the wind rose per se could be nicer than provided. I’ll continue tinkering by showing only the wind direction on the compass rose and use background color and text for indication the wind strength. Bear some days and I’ll follow up on this.

There’s nothing official about that arbitrary choice of colours. Follow the three references for that table. They are all uncoloured.

It’s just a choice the author of the table made.

Feel free to do better.

oooh, if you want, here’s what would get you started:

    sensor.owm_wind_speed:
      friendly_name: Wind speed
      icon: mdi:weather-windy
      templates: &windspeed_ms_color
        icon_color: >
          if (state < 0.5) return 'lightblue';
          if (state < 1.5) return 'paleturquoise';
          if (state < 3.3) return 'aquamarine';
          if (state < 5.5) return 'greenyellow';
          if (state < 7.9) return 'lime';
          if (state < 10.7) return 'mediumspringgreen';
          if (state < 13.8) return 'yellowgreen';
          if (state < 17.1) return 'navy';
          if (state < 20.1) return 'gold';
          if (state < 24.4) return 'orange';
          if (state < 28.4) return 'tomato';
          if (state < 32.6) return 'orangered';
          return 'crimson';

you can use on the sensor provided and everywhere else using the m/s unit

or use the bft color

    sensor.weatherbit_beaufort_value:
      templates: &bft_color
        icon_color: >
          var mapper = {'0':'lightblue',
                        '1':'paleturquoise',
                        '2':'aquamarine',
                        '3':'greenyellow',
                        '4':'lime',
                        '5':'mediumspringgreen',
                        '6':'yellowgreen',
                        '7':'navy',
                        '8':'gold',
                        '9':'orange',
                        '10':'tomato',
                        '11':'orangered'}
          return mapper[state] ? mapper[state] : 'crimson';

of course you could also use this in a template sensor with some pictures:

        entity_picture_template: >
          {% set state = states('sensor.wind_bft') %}
          {% set path = '/local/weather/beaufort/' %}
          {% set ext = '.jpg'%}
            {{[path,state,ext]|join('')|lower}}

Schermafbeelding 2020-06-19 om 17.40.10

Really like how Ambient Weather displays all the wind details in a single card, hopefully someone creates a wind specific Lovelace card one day.

6 Likes

I have an Ambient Weather Station and the dashboard is very nice. Would like to also integrate some of those items into my HA Dashboard with a similar look at some point.

I created most of a CSS-based wind compass, but for some reason the CSS is not quite working when inside a card and I couldn’t figure out why, so I’ve tabled it for now. The CSS was working outside of the Lovelace card.

Hi, I got around fixing @ryans CSS-based compass, might be worth checking it out

2 Likes

Yup. I have abandoned my effort in favour of this. It’s really good and has some great planned features.

Now I’m wondering which of the planned features you consider to be great :stuck_out_tongue:

Pointer colour based on wind speed.

1 Like

wuahh… i’d love to use this compass but i’m to stupid to get it work :cry:

- type: custom:config-template-card
  entities: sensor.pws_wind_gust
  variables:
    - states['sensor.pws_wind_gust'].state
  card:
    type: custom:hui-picture-entity-card
    entity: sensor.pws_wind_dir
    show_name: false
    show_state: false
    state_image:
      CALM: /local/icons/wind/CALM.png
      E: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'E-blu.png' : vars[0] <= 20 ?
        'E-grn.png' : vars[0] <= 30 ? 'E-yel.png' : 'E-red.png' ) }
      ENE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ENE-blu.png' : vars[0] <= 20
        ? 'ENE-grn.png' : vars[0] <= 30 ? 'ENE-yel.png' : 'ENE-red.png' ) }
      ESE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ESE-blu.png' : vars[0] <= 20
        ? 'ESE-grn.png' : vars[0] <= 30 ? 'ESE-yel.png' : 'ESE-red.png' ) }
      'N': >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'N-blu.png' : vars[0] <= 20 ?
        'N-grn.png' : vars[0] <= 30 ? 'N-yel.png' : 'N-red.png' ) }
      NE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NE-blu.png' : vars[0] <= 20
        ? 'NE-grn.png' : vars[0] <= 30 ? 'NE-yel.png' : 'NE-red.png' ) }
      NNE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNE-blu.png' : vars[0] <= 20
        ? 'NNE-grn.png' : vars[0] <= 30 ? 'NNE-yel.png' : 'NNE-red.png' ) }
      NNW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNW-blu.png' : vars[0] <= 20
        ? 'NNW-grn.png' : vars[0] <= 30 ? 'NNW-yel.png' : 'NNW-red.png' ) }
      NW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NW-blu.png' : vars[0] <= 20
        ? 'NW-grn.png' : vars[0] <= 30 ? 'NW-yel.png' : 'NW-red.png' ) }
      S: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'S-blu.png' : vars[0] <= 20 ?
        'S-grn.png' : vars[0] <= 30 ? 'S-yel.png' : 'S-red.png' ) }
      SE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SE-blu.png' : vars[0] <= 20
        ? 'SE-grn.png' : vars[0] <= 30 ? 'SE-yel.png' : 'SE-red.png' ) }
      SSE: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSE-blu.png' : vars[0] <= 20
        ? 'SSE-grn.png' : vars[0] <= 30 ? 'SSE-yel.png' : 'SSE-red.png' ) }
      SSW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSW-blu.png' : vars[0] <= 20
        ? 'SSW-grn.png' : vars[0] <= 30 ? 'SSW-yel.png' : 'SSW-red.png' ) }
      SW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SW-blu.png' : vars[0] <= 20
        ? 'SW-grn.png' : vars[0] <= 30 ? 'SW-yel.png' : 'SW-red.png' ) }
      W: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'W-blu.png' : vars[0] <= 20 ?
        'W-grn.png' : vars[0] <= 30 ? 'W-yel.png' : 'W-red.png' ) }
      WNW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WNW-blu.png' : vars[0] <= 20
        ? 'WNW-grn.png' : vars[0] <= 30 ? 'WNW-yel.png' : 'WNw-red.png' ) }
      WSW: >-
        ${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WSW-blu.png ': vars[0] <= 20
        ? 'WSW-grn.png' : vars[0] <= 30 ? 'WSW-yel.png' : 'WSw-red.png' ) }

You have not told it to even use this card anywhere.

1 Like

Use this instead:

It’s easier to set up and much better.

2 Likes

@ryans What’s that sun/moon card?

@ryans could you share your config für the sun/moon card please. I’d really appreciate it.

That’s how Ambient Weather does it, although it would be nice to have that in HA.