Custom animated weather card for Lovelace

Thanks for updating this and for making the icons configurable. (I had been using it with the .js file modified to point to where my icons are)

@Bram_Kragten thanks for the update! :slight_smile:

Question - Iā€™m using the Met.no entity, and it doesnā€™t populate the forecast:

image

I tried setting mode to daily as with DarkSky, any ideas? Clicking the card shows there is reported a forecast:

I donā€™t understand your question, the forecast data is shown in the weather card?

Sorry, my bad - I mixed up what I was looking for when I wrote this one - It seems the card wants to add a ā€œbottom temp valueā€ below the FC, and it doesnā€™t look like the met platform captures this, so there is no value. Iā€™ll remove the bottom line in the card code instead (the blue *C). Sorry for the confusion :slight_smile:

Updated the code, if templow is not available it will not show it.

1 Like

Genious! :slight_smile:

A follow up on customizing this then - in the ā€œoldā€ version I had a hack for showing expected mm rain the next hour. This could replace the visibility part as this is more useful.

Declared a sensor like this for the rain itself (true/false)

  - platform: rest
    resource: http://api.solweb.no/yr?location=Norge%2FAkershus%2FOppeg%C3%A5rd%2FT%C3%A5rn%C3%A5sen
    name: "Rain Oppegard"
    headers:
      User-Agent: 'Home Assistant'
      Accept: 'application/json'
    json_attributes:
      - rain
    value_template: '{{ value_json.value }}'

And one for the rain forecast in mm:

  - platform: template
    sensors:
      rain_forecast_oppegard:
        friendly_name: "Rain 1h"
        unit_of_measurement: 'mm'
        value_template: >-
          {{ states.sensor.rain_oppegard.attributes.rain }}
        icon_template: >-
          {% if is_state('sensor.rain_oppegard', 'on') %}
            mdi:weather-rainy
          {% else %}
            mdi:weather-cloudy
          {% endif %}

However, I donā€™t understand how to get this into the updated card, can you help?
In the old version I believe it was declared like this:

    const rain = hass.states[this.config.entity_rain].state;

Followed by:

<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${rain}<span class="unit"> mm next hour</span></li>

Any help is appreciated as I will then have everything in one window :smiley:

Replace
const rain = hass.states[this.config.entity_rain].state;
with:
const rain = this.hass.states[this._config.entity_rain].state;

1 Like

image

Worked like a charm! Thanks for all the help!

Since the last update (the one from a few hours ago) this element wonā€™t load on my desktop (I have tried edge and firefox, cleared cache etc. but no change). However it works perfect on my iphone now, whereas it would often not load on my iphone (especially after a refresh).

The error it gives me: Custom element doesnā€™t exist: weather-card.

Funny that it used to work flawless on my desktop and had problems on my iphone, now itā€™s the other way around :P. I even tried to reinstall by getting the new files from the repo, but no change :frowning:.

Have you tried forcing a new version? Just override the version number under resources in your ui-lovelace file:
For example:

  - type: js
    url: /local/custom_ui/weather-card.js?v=0.0.7

This usually does the trick for me, as it forces Lovelace to reload the card in the right version. Number could be anything, but you should increase with 1 if you do changes to the card to refresh.

TJ

1 Like

Iā€™m getting the following error:
https://domain.com/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <

Bildschirmfoto%20von%202019-01-24%2015-52-58

Try the new version of the card.

1 Like

I have tried this but unfortunately to no avail. I have not touched the code. (it used to work before on my browser, but it just wonā€™t load anymore. But it works perfect on my iphone now, which it didnā€™t before the update)

I am running the latest update and this is the code I used. (Home Assistant 0.86.1, weather-card 1.2.0)

  - type: 'custom:card-modder'
    style:
      border-radius: 20px
    card:
      entity: weather.dark_sky
      type: 'custom:weather-card'
      icons: '/local/custom-lovelace/weather-card/icons/animated/'

It used to work before like I said, but when I inspect the element it gives me the following error:

< hui-error-card style=ā€œborder-radius: 20px;ā€>ā€¦< /hui-error-card> customā€¦

I imagine the problem lies with the border-radius and the card modder component. However it works perfectly fine on my ios device. Iā€™m not very good at css unfortunately.

I get this error
https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js:96:16 SyntaxError: expected dot, got ā€˜(ā€™

Hi,

Great card. Works very good. I was wondering if it is possible to show bft instead of km/h with the windspeed?
If so, what do I need to do to get it like that?

Kind regards,

Wessel

be careful with that because the weather components BR and Dark_sky give windspeed in meters per second while the displayed unit is km/h. They are off *3.6ā€¦ I recall Open weather Map ro be correct, not sure though, weā€™ve discussed this on this community and on the Github. Lovelace cards are incorrect alsoā€¦

have a look:

# https://www.wiskundeleraar.nl/page3.asp?nummer=7134
# https://nl.wikipedia.org/wiki/Schaal_van_Beaufort
      windkracht:
        friendly_name: Windkracht
        value_template: >
          {% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
          {% set wind_round = wind|round(1) %}
            {% if wind <= 1 %}Bft: 0, Wind stil, {{wind_round}} km/u
            {% elif wind <= 5 %}Bft: 1, Zwak: flauwe wind, {{wind_round}} km/u
            {% elif wind <= 11 %}Bft: 2, Zwak, {{wind_round}} km/u
            {% elif wind <= 20 %}Bft: 3, Matig: lichte bries, {{wind_round}} km/u
            {% elif wind <= 28 %}Bft: 4, Matig: flauwe bries, {{wind_round}} km/u
            {% elif wind <= 39 %}Bft: 5, Vrij krachtig, {{wind_round}} km/u
            {% elif wind <= 50 %}Bft: 6, Krachtig, {{wind_round}} km/u
            {% elif wind <= 62 %}Bft: 7, Hard, {{wind_round}} km/u
            {% elif wind <= 75 %}Bft: 8, Stormachting, {{wind_round}} km/u
            {% elif wind <= 89 %}Bft: 9, Storm, {{wind_round}} km/u
            {% elif wind <= 103 %}Bft: 10, Zware storm, {{wind_round}} km/u
            {% elif wind <= 117 %}Bft: 11, Zeer zware storm, {{wind_round}} km/u
            {% else %} > 117 %}Bft: 12, Orkaan, {{wind_round}} km/u
          {%- endif %}

      wind_bft:
        friendly_name_template: >
          Bft: {{states('sensor.wind_bft')}}
        value_template: >
          {% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
            {% if wind <= 1 %}0
            {% elif wind <= 5 %}1
            {% elif wind <= 11 %}2
            {% elif wind <= 20 %}3
            {% elif wind <= 28 %}4
            {% elif wind <= 39 %}5
            {% elif wind <= 50 %}6
            {% elif wind <= 62 %}7
            {% elif wind <= 75 %}8
            {% elif wind <= 89 %}9
            {% elif wind <= 103 %}10
            {% elif wind <= 117 %}11
            {% else %} > 117 %}12
          {%- endif %}
        entity_picture_template: >
          {% set state = states('sensor.wind_bft') %}
          {% set path = '/local/weather/beaufort/' %}
          {% set ext = '.jpg'%}
            {{[path,state,ext]|join('')|lower}}

You can however edit the unit in the custom card to your needs. On Lovelace card for DarkSky weā€™ve made it like this:

get beaufortWind() { 
  if (this.config.entity_wind_speed) {
    switch (this.hass.states[this.config.entity_wind_speed].attributes.unit_of_measurement) {
      case 'mph':
        if (this.hass.states[this.config.entity_wind_speed].state >= 73) return 12;
        if (this.hass.states[this.config.entity_wind_speed].state >= 64) return 11;
        if (this.hass.states[this.config.entity_wind_speed].state >= 55) return 10;
        if (this.hass.states[this.config.entity_wind_speed].state >= 47) return 9;
        if (this.hass.states[this.config.entity_wind_speed].state >= 39) return 8;
        if (this.hass.states[this.config.entity_wind_speed].state >= 31) return 7;
        if (this.hass.states[this.config.entity_wind_speed].state >= 25) return 6;
        if (this.hass.states[this.config.entity_wind_speed].state >= 18) return 5;
        if (this.hass.states[this.config.entity_wind_speed].state >= 13) return 4;
        if (this.hass.states[this.config.entity_wind_speed].state >= 8) return 3;
        if (this.hass.states[this.config.entity_wind_speed].state >=3) return 2;
        if (this.hass.states[this.config.entity_wind_speed].state >= 1) return 1;
      default:
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 118) return 12;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 103) return 11;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 89) return 10;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 75) return 9;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 62) return 8;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 50) return 7;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 39) return 6;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 29) return 5;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 20) return 4;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 12) return 3;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >=6) return 2;
        if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 1) return 1;
    }
  }
  return 0;
}

or use a correct entity of course in the config :wink:

corrected that for Buienradar:

40

and Dark_sky:

iā€™ve a problem with latest update, now i view this (firefox):

851Z

since previus version all worked ok, i use this config:

- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
  type: module

- type: custom:weather-card
    entity: weather.dark_sky

with chrome no problem

Hi Marius,

Thanks for the elaborate response. Iā€™ll have a look at it later and let you know the results. I do understand that normally the Bft is being measured over a period of time.

Have a nice evening.

Kind Regards,

Wessel

https://github.com/bramkragten/custom-ui/tree/master/weather-card#if-you-are-using-firefox

HI Bram,

I know I can copy your code, but is misses out on many items I have carefully setup before Lit came alongā€¦
Ive tried to see if I could add these to your new card, but I am afraid it is rather differently setup, and that is beyond my JS skills. And, since your card uses many internal attributes, it is also very different from the other Lovelace card I use and know rather well now, the dark_sky card by @m.p.frankland .

Hence my question, and I hope you donā€™t mind: might I ask you to have a look at the weather-card.js and see if it isnā€™t easier for me to somehow only change the extend HTML to Lit import, and use the rest of my card as it is?

using this config:

  - type: custom:weather-card
    entity_weather: weather.woensdrecht #buienradar
    entity_sun: sun.sun
    entity_apparent_temperature: sensor.jagti_windchill
    entity_wind_force: sensor.br_wind_force

in the card a Bft entity has been added.

my card shows as:

15 or

35
in default theme, so you can see better.
Hope you can have a look, Id really like to ease up on the processorā€¦

If youā€™d want to add these items to your card, that would be most welcome too of course :wink: