Tom
Any change of getting a slight mod to this? Not so much the whole thing, but the pointer. I don’t think it will take you too long. Cheers
I wanted to share this sensor, but the picture is actually to small to read.
Here it is anyway 
- platform: template
sensors:
wind_compass:
friendly_name: 'Vent Exterieur'
unit_of_measurement: "km/h"
icon_template: "mdi:weather-windy"
value_template: "{{ states('sensor.netatmo_netatmo_wind_gust_strength')|float() }}"
attribute_templates:
wind_gust_angle: "{{ states('sensor.netatmo_netatmo_home_netatmo_wind_gust_angle')|float() }}"
wind_gust_angle_simple: "{{ states('sensor.netatmo_netatmo_wind_gust_angle') }}"
wind_gust_speed: "{{ states('sensor.netatmo_netatmo_wind_gust_strength')|float() }}"
wind_angle: "{{ states('sensor.netatmo_netatmo_home_netatmo_wind_angle')|float() }}"
wind_angle_simple: "{{ states('sensor.netatmo_netatmo_wind_angle') }}"
wind_speed: "{{ states('sensor.netatmo_netatmo_wind_strength')|float() }}"
entity_picture_template: >-
{% set path="/local/icons/wind/"%}
{% set windangle=state_attr('sensor.wind_compass','wind_gust_angle')|float() %}
{% set windspeed=states('sensor.wind_compass')|float() %}
{% set direction=[
{"N": [348.76, 360]},
{"N": [0, 11.25]},
{"NE": [33.76, 56.25]},
{"NNE": [11.26, 33.75]},
{"NW": [303.76, 326.25]},
{"NNW": [326.26, 348.75]},
{"S": [168.76, 191.25]},
{"SE": [123.76, 146.25]},
{"SSE": [146.26, 168.75]},
{"SW": [213.76, 236.25]},
{"SSW": [191.26, 213.75]},
{"E": [78.76, 101.25]},
{"ENE": [56.26, 78.75]},
{"ESE": [101.26, 123.75]},
{"W": [258.76, 281.25]},
{"WNW": [281.26, 303.75]},
{"WSW": [236.26, 258.75]},
]
%}
{% set speed={
"calm": 5,
"blu": 12,
"grn": 20,
"yel": 50,
"red": 100,
}
%}
{{ path }}
{%- if windspeed <= speed["calm"] -%}
CALM
{%- else -%}
{%- for i in direction %}
{%- for k,v in i.items() if v[0] <= windangle <= v[1] %}
{{- k -}}
{%- endfor %}
{%- endfor -%}
-
{%- for k,v in speed.items() if windspeed <= v %}
{%- if loop.first -%}
{{- k -}}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
.png
it use netatmo as input (which i deeply regret getting) and KM/h for the unit.
i am just lacking a picture for over 100kmh wind, i’ll add a warning of some sort
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!
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}}
Really like how Ambient Weather displays all the wind details in a single card, hopefully someone creates a wind specific Lovelace card one day.
4 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.
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 
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 
- 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