aukedejong / lovelace-windrose-card

Home Assistant Lovelace Windrose Card
82 stars 3 forks source link

Card Blank #19

Closed sanderlv closed 1 year ago

sanderlv commented 1 year ago

HI, I followed all steps in the manual including the error ones. I have a blank card with the default config...

What steps can I try?

sanderlv commented 1 year ago

Also, the tip from "error section" gives:

Logger: homeassistant.components.frontend
Source: components/frontend/__init__.py:335
Integration: Home Assistant Frontend (documentation, issues)
First occurred: 09:28:56 (1 occurrences)
Last logged: 09:28:56

Please remove javascript_version from your frontend config. It is no longer supported
aukedejong commented 1 year ago

Do you see the windrose circles or is it complete blank?

How did you install the card? Hacs or manual?

In the browser console, press F12 in the browser to show. Are there any windrose card errors? Do you see the version banner?

sanderlv commented 1 year ago

Complete blank.

HACS install.

Uncaught (in promise) TypeError: this.directionData is undefined
    matchDirectionLeading http://domain.nl:8123/hacsfiles/lovelace-windrose-card/windrose-card.js?hacstag=5912706960110:597
    match http://domain.nl:8123/hacsfiles/lovelace-windrose-card/windrose-card.js?hacstag=5912706960110:562
    updateWindData http://domain.nl:8123/hacsfiles/lovelace-windrose-card/windrose-card.js?hacstag=5912706960110:1465
[windrose-card.js:597:9](http://domain.nl:8123/hacsfiles/lovelace-windrose-card/windrose-card.js?hacstag=5912706960110)
aukedejong commented 1 year ago

Can you post your card configuration?

sanderlv commented 1 year ago

Something is coming to life...

Not there yet, but little steps...

type: custom:windrose-card
title: Wind direction
max_width: 400
windspeed_bar_full: true
wind_direction_entity: sensor.buienradar_wind_direction
windspeed_entities:
  - entity: sensor.buienradar_wind_speed
    name: Average
input_speed_unit: mps
output_speed_unit: mps
speed_ranges:
  - from_value: 0
    color: rgb(0,255,0)
  - from_value: 5
    color: yellow
  - from_value: 10
    color: hsl(200, 100%, 60%)
  - from_value: 20
    color: orange
  - from_value: 40
    color: red

image

aukedejong commented 1 year ago

I'm also from the Netherlands. Installed the Buienradar integration a few years ago. Totally forget it also provided these entities. They where all disabled.

I enabled them just now. Tomorrow I will try to windrose-card work with Buienradar.

One thing I saw. The wind speed entities use km/h instead of m/s. Your input_speed_unit config is mps. I think this should be kph.

About the wind direction. I don't know if you renamed the entities, but here the sensor.buienradar_wind_direction_azimuth entity returns the direction in degrees.

Hopefully tomorrow more info.

sanderlv commented 1 year ago

Cool! Let me know the yaml for the card :-)

aukedejong commented 1 year ago

This config works here. You can tweak the numbers, 24 hours history is very high, maybe you want to lower this.

type: custom:windrose-card
title: Windrose Buienradar
hours_to_show: 24
max_width: 400
refresh_interval: 360
windspeed_bar_location: bottom
windspeed_bar_full: false
wind_direction_entity: sensor.buienradar_wind_direction_azimuth
windspeed_entities:
  - entity: sensor.buienradar_wind_speed
    name: Windkracht
wind_direction_unit: degrees
input_speed_unit: kph
output_speed_unit: bft
windrose_draw_north_offset: 0
cardinal_direction_letters: NOZW
matching_strategy: speed-first
direction_speed_time_diff: 1
Screenshot 2023-05-06 at 11 43 12
sanderlv commented 1 year ago

Works. I am now going to find out how to place it "small" onto a picture elements card. An if needed rotate to the north of my map. Let you know.

sanderlv commented 1 year ago

Did you manage to look into "transparency"?

aukedejong commented 1 year ago

You can set the transparency with card_mod card. Install card_mod: https://github.com/thomasloven/lovelace-card-mod

Just add this to the configuration:

card_mod:
  style: |
    ha-card {
      background-color: transparent
    }