Lovelace Windrose Card

Share your Projects! Dashboards & Frontend
#1

Hello,
I’ve been working an a custom Lovelace card and would like some feedback.
It’s a windrose card to show wind speed and direction history.

Link to the repo:
https://github.com/aukedejong/lovelace-windrose-card

You can add this link in HACS as a cutom repo. It’s not a default repo yet.

Example image:

Screenshot 2023-01-21 at 14.49.57
Screenshot 2023-01-21 at 14.49.57836×908 96.7 KB

Currently it works only with an direction entity with degrees, where 0 degrees is north and multiple windspeed entities using meters per second.
Every windspeed entities results in a bar graph. Only the first windspeed entity is used for the windrose.
The windspeed ranges are in Beaufort.

ToDo:

  • support windspeed entities returning kph speeds.
  • :white_check_mark: support direction entities returning direction as letters like N, E, S, W
  • controls on the card to increase hours shown.
  • controls to move back and forward in time.
  • show the speeds in other unit like: mph, kph, mps, knots
  • maybe also showing the seconds windspeed entity (Gust speeds) in the windrose.
  • other configuration options?
  • any ideas?

I would like to know your wishes.
And maybe share some pictures of the card in action. We didn’t have much wind here ately, so the above graph is made with dummy date.

Thanks

4 Likes
Lovelace Wind Rose Card to show wind history?
#2

Nice!

I’ll have to create a couple of template sensors to get the speed and direction in the required units but will try to test this when I get a chance.

Does the card follow home assistant theming or is it hard coded?

Additional features to consider: Custom severity levels and colours.

#3

I get this message:

Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “mwc-notched-outline” has already been used with this registry

#4

Hi John, thanks for your reply.
The problem you are having, should be fixed in version 0.0.2

#5

Answering your question Tom.
The card works with light and dark theme, using css variables. But I think it’s not perfect yet.

1 Like
#6

Stated testing it , thanks a lot!

#7

Ok found it, not working yet.
Is it only working with historical data?

#8

Yes. You can configure how far in the past it gets the data. Default is 4 hours, but you can set is to one. I’m not sure if fractions of hours work.

There also a refresh_interval property, default 300 seconds. I forgot to put in the README.md.
So every 5 minutes it gets the wind data of the last 4 hours.

Did you check what units your entities use? Should be degrees en meters per second.

#9

Yep direction is in degrees but I don’t save historical data and that’s why it’s not working i believe.

#10

If you have a wind speed sensor connect to HA, I would expect it sends data every few seconds.
So there should be historical data, right?

#11

No it’s disabled in recorder as I don’t want to save it.
I only see the value at the moment, that;s enough.

#12

Windrose graph is for displaying historical data. Weather services make these for even longer periods, moths.

But I understand what you want.
The card should also work with smaller datasets, even 1 measurement.

In de browser dev tools console tab. The history data used by the card is logged. I did not remove the console logs yet.
Can you tell me what you see there?
Errors maybe?

I’ll do some tests this evening.

Maybe it’s an option the keep only the last 15 minutes of data? I don’t know that possible in HA.

#13

Added an option to configure the wind direction unit. Supported options are degrees and letters.
Degrees is the default.
When letters is used, 32 direction are support, case insensitive.

I used this link: http://tamivox.org/dave/compass/index.html

1 Like
#14

Had a chance to test this today.

The graph is showing up when I edit the card (speed units are wrong, but ignore that):

Untitled
Untitled1049×742 96.6 KB

However as soon as I close the card editor I get a blank card:

Screenshot 2023-01-25 at 09-25-14 Administration – Home Assistant
Screenshot 2023-01-25 at 09-25-14 Administration – Home Assistant512×523 9.6 KB

The problem appears to be the letters to degrees conversion:

Untitled
Untitled919×57 3.06 KB

When there is no wind the direction is reported as “CALM”.

Can this be set to an arbitrary direction, like 0°?

#15

Published version 0.1.1 with the CALM option.

If someone finds a bug or has a feature request, please add it in github.
https://github.com/aukedejong/lovelace-windrose-card/issues

#16

Published version 0.2.0 with direction and speed measurement matching.

For more info: https://github.com/aukedejong/lovelace-windrose-card/issues/1

#17

Everything appears to be working except for theming of the header and card background:

Untitled1

Untitled

I use card-mod classes:

themes.yaml

day:
  card-mod-theme: day
  card-mod-card: |

    h1.card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%); 
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px !important;
      padding-bottom: 28px !important;
    }

Card:

type: custom:windrose-card
title: Wind Rose
hours_to_show: 168
max_width: 400
refresh_interval: 300
windspeed_bar_location: bottom
wind_direction_entity: sensor.hobart_wind_direction
windspeed_entities:
  - entity: sensor.hobart_wind_speed_knot
    name: 7 Day
wind_direction_unit: letters
direction_compensation: 0
cardinal_direction_letters: NESW
card_mod:
  class: top-level-card
#18

First of all, thank you a lot for this custom card!
I’m currently trying it out and the first thing I noticed is that the background colour of the card doesn’t match that of the other cards. This happens only if using custom themes, such as Google Theme, and seems to work fine with the default one.

This is what it looks like (there is no data because I’m fixing my weather station anemometer):

image
image497×631 37.4 KB

Is there anything I can do to fix this?

#19

Lorenzo and Tom, can you both add an issue in Github?

I will look into both issues. Need to learn more about HA theming, witch CSS vars to use I think.

#20

Release v0.2.1 with a possible fix for the theming issues.