imbuzi/meteo-france-weather-card

Weather Card with animated icons for Home Assistant Lovelace adapted to display all informations from Météo France integration

Lovelace animated weather card

Originally created for the old UI converted by @arsaboo and @ciotlosm to Lovelace and now adapted to display all informations available in the Météo-France integration.

This card uses the awesome animated SVG weather icons by amCharts.

Thanks for all picking this card up.

Installation

You have 2 options, hosted or self hosted (manual). We strongly recommend to install using the first option, as it will update itself (by the way, it needs internet).

The instructions aren't givent to install it self-hosted, as this is a standard installation procedure.

Hosted

Add the following to resources in your lovelace config:

resources:
    url: https://cdn.jsdelivr.net/gh/Imbuzi/meteo-france-weather-card/dist/meteo-france-weather-card.js
    type: module

You can also specify a specific tag or version in the URL by adding @x.x :

resources:
    url: https://cdn.jsdelivr.net/gh/Imbuzi/[email protected]/dist/meteo-france-weather-card.js
    type: module

Configuration

And add a card with type custom:meteo-france-weather-card:

type: custom:meteo-france-weather-card

Then you can switch to visual editor to see the available options.

You can choose wich elements of the weather card you want to configure, only the weather entity is required for the card to work properly.

If you want to show the sunrise and sunset times, make sure the sun component is enabled:

# Example configuration.yaml entry
sun:

This is a basic example of the config for a full-configured card (there is just missing the "icon" attribute, only needed to switch to another icon library) :

type: 'custom:meteo-france-weather-card'
name: Ville
entity: weather.ville
rainForecastEntity: sensor.ville_next_rain
freezeChanceEntity: sensor.ville_freeze_chance
rainChanceEntity: sensor.ville_rain_chance
snowChanceEntity: sensor.ville_snow_chance
thunderChanceEntity: sensor.ville_thunder_chance
alertEntity: sensor.ville_weather_alert
uvEntity: sensor.ville_uv

meteo-france-weather-card's Issues

CPU Issue with animated Icons

Hi,

It's a very nice card you developped! Thanks for it :)

By the way, I noticed my CPU exploded on the raspberry I used to display my home assistant dashboard, when using this card.
Leading it to heat to 80° and throttle...
This is due to animated Icons on amCharts.

Their aspect are very nice, and I noticed also that amCharts provide static Icons (which doesn't charge CPU) : https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/icons/static/

Is it possible to add an element of configuration to have the choice between animated and static icon, please ?

Thank you for your work again!

Partial weather forecast

Hi,

This morning I have a partial weather forecast : only monday and tuesday. monday without any icon. tested on two different devices, same issues.

Wind direction is incorrect

Hello,

The wind direction displayed by the meteo-france-weather-card is incorrect and does not match what the attached weather entity returns :

In this example, you can see a wind direction NO but the card returns SE (the opposite ?).

Regards

Wasted space

Hi and thank you for your card!
Just one thing, there is a lot of wasted space in it, for little screen this is not optimize.
Is it possible to improve that?

Animated icon name undefined

Hi,

Got an undefined icon name tha throw a 404 error.
Weather condition: rain
https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/icons/animated/undefined.svg

URL changed between versions

For v. 1.1, URL is :
https://cdn.jsdelivr.net/gh/Imbuzi/[email protected]/weather-card.js

But for v. 1.5, "dist/meteo-france-" string has been inserted in the URL:
https://cdn.jsdelivr.net/gh/Imbuzi/[email protected]/dist/meteo-france-weather-card.js

¯_(ツ)_/¯

Issue displaying city name on Mobile devices

Hello,
I'll start by saying that I fixed this in my install, but this is just for my city and this is based on a trial and error, and not at all a good fix (eg applicable for every city name).

On mobile devices, the city name overlapse with the actual temperature as seen in the picture below. I live in Antibes which has a small name and I think that it would look a lot worth if I lived in Aix En Provence for example :) A picture is worth a thousand words so here it is :
https://imgur.com/a/7F0cW9w
This is light on an Ipad Mini, but it really overlap a lot on mobile (Galaxy S8).

I lack the skills to provide a pull request myself, if someone talented enough can take a look at this, feel free :)

Main icon not correctly displayed with Firefox

Hello,
With the latest version (1.15), the main icon is not correctly displayed with Firefox. (see attached picture with red arrow showing the icon)
Even after clearing the cache, I am getting the same behavior.
It works fine with Chrome or Edge
Thanks
Regards

.

Add precipitation in forecast

It wold be cool to add the precipitation in forecast. Just at the bottom of min temp.
You can access to this with daily.precipitation.

It will be also interesting to add the sensor sensor.$city_daily_precipitation on the top part.

If you want i can look at this and make a PR.

Weather condition not translated

Hi,

First, thanks for this beautiful card

I got no translation on weather condition and the alert display is collide UV

problème de configuration carte avec installation HACS

Bonjour,

J'ai intégré le modèle depuis HACS, J'ajoute donc une custom-card avec
type: 'custom:meteo-france-weather-card'

Il y a deux jours j'avais bien dans le mode éditeur visuel, Mais il y avait quelques petits problèmes de configuration, ce jour après l'update en supprimant et reconstruisant ma carte, je me suis retrouvé avec des éléments en moins et j'ai constaté toujours qu'il semblait y avoir un mismatch entre l'entité et le descripteur.
par exemple rain/freeze uv/next_rain, …

type: 'custom:meteo-france-weather-card'
name: Ici
entity: sensor.ville_weather
rainChanceEntity: sensor.ville_freeze_chance
uvEntity: sensor.ville_next_rain
thunderChanceEntity: sensor.ville_uv
freezeChanceEntity: sensor.ville_temperature
snowChanceEntity: sensor.ville_thunder_chance

De plus, j'ai perdu l'affichage de l'animation de la température et des projections sur les jours à venir.

Serait-il possible d'avoir un exemple complet de configuration dans le readMe ?

Problème de vulnérabilité

Bonjour,

Il y a un problème de vulnérabilité sur le package minimist. Certes modéré mais vulnérabilité quand même.

Known moderate severity security vulnerability detected in minimist >= 1.0.0, < 1.2.3 defined in yarn.lock.

What about hosting this custom card on HACF organization ?

It seems there are a lot of expectation for this custom_card from the french community.
@Imbuzi What do you think about hosting this code in the HACF organization. You can join the pool of developers and could have support to maintain this card (for code review and PR merge).

Moon displayed instead of Sun

Hi! It's 7:00 pm in France, Sun is shining... but Moon is displayed. 😛

Maybe use the sunrise and sunset times to choose if Moon or Sun should be displayed?

Better readability for rain forecast in the hour

Hello. Thanks for the card.

Can you add a visual separator between each cadran (5min, 10min, 15 min, etc...) for the rain forecast. It will be better to guess when is the next rain.

Hide chance_* when value is equal to 0

It will be smart to hide the chance of rain/thunderstorm/snow/freeze value while the value is equal to zero. Having 0% of freeze or snow in summer seems obvious :)

Maybe it's better to display only value when it's different from 0% ?
It will make this card more readable and a little more compact

Alerte jaune et orange

Nous avons une alerte jaune et orange en même temps, mais pas d'icones pour la orage:

cas surement rare mais pas WAF :(

Problème label entités

Bonjour,

J'ai souvent voire toujours un soucis avec le label des entités.
Au lieu de stipuler le nom du sensor ( next_rain par exemple ) il y a juste noté entité.

Le problème est qu'on ne sait pas qui correspond à quoi dans ce cas là.

Prepare for next meteo_france version

We have worked hard on the future version of meteo_france. The PR will be reviewed soon and probably merged.
There are some breaking changes who could have an impact on your card.

Custom element doesn't exist: meteo-france-weather-card

I installed the meteo-france-weather-card according to the documentation (in HACS, then restarted HA just in case). The files show up in www/community/meteo-france-weather-card.

I then tried to add the card, next to the one available though the "Metéo France" integration:

 - entity: weather.<my city>
    type: weather-forecast
  - type: custom:meteo-france-weather-card
    name: <my city>
    entity: weather.<my city>

Unfortunately, I get

Would you have an idea of what I could have missed?

(HA is running in a docker container, the version is 0.114.2)

Add daily forecast flag

Pourrais tu ajouter comme dans le projet forké un flag forecast: true/false pour l'affichage du bandeau des jours ?

C'est ici
https://github.com/bramkragten/weather-card/blob/master/dist/weather-card.js#L140
https://github.com/bramkragten/weather-card/blob/master/dist/weather-card.js#L234

L'idéal serait de nommer ce flag daily_forecast: true/false
pour ne pas confondre avec un hourly_forecast qui pourrait venir dans le futur