[Partage] Intégrer Windy proprement avec la "Windy Card"

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
1

Salut à tous,

Pour ceux qui, comme moi, utilisaient jusqu’ici un iframe pour afficher Windy dans Home Assistant, je voulais partager une alternative beaucoup plus élégante : lovelace-windy-card.

C’est une carte personnalisée développée par timmaurice qui permet d’intégrer la carte météo directement dans votre Dashboard, sans les bordures et les contraintes de taille liées aux iframes.

Pourquoi passer à cette carte ?

  • Intégration native : Elle s’adapte parfaitement à votre design Lovelace.
  • Support des templates : Vous pouvez dynamiser la carte (lat/long ou type de couche) directement via des templates Home Assistant.
  • Configuration facile : Tout se gère via l’éditeur YAML standard.

Exemple de configuration :

type: custom:windy-card
latitude: "{{ state_attr('zone.home', 'latitude') }}"
longitude: "{{ state_attr('zone.home', 'longitude') }}"
overlay: wind
metric_wind: km/h
height: 400

Vous trouverez le dépôt ici pour l’installation via HACS : :backhand_index_pointing_right: GitHub - timmaurice/lovelace-windy-card: A Lovelace card that embeds the Windy.com interactive weather map and spot forecast directly into your Home Assistant dashboard. · GitHub

5 « J'aime »
2

Hello,

Merci pour l’info, j’ai testé, j’ai adopté et supprimé l’iframe :wink:

Bonne soirée

1 « J'aime »
3

Salut,
Allez, encore une carte à installer, ça m’en fera que 52. :rofl:
Merci pour le partage.
C’est le dev de Blitzortung Lightning Card, que j’utilise.

Edit:
petite modification custom, on peut pas enlever le padding quand on a le menu map et forecast :

image
image1005×569 119 KB

image
image1004×536 129 KB

Pour uix :

uix:
  style: |
    ha-card div.card-content {
      padding: 0px;
    }

Pour card-mod:

card_mod:
  style: |
    ha-card div.card-content {
      padding: 0px;
    }

Pas de margin-bottom sous le menu map et forecast. Le border-radius a 0px pour la map en haut a gauche et droite :

image
image492×365 66.9 KB

image
image483×275 26.1 KB

uix:
  style: |
    ha-card div.card-content {
      padding: 0px;
    }
    div.card-content div.modes {
      margin-bottom: 1px;
    }        
    div.card-content div#map-panel {
      border-radius: 0px 0px 12px 12px;
    }
    div.card-content div#forecast-panel {
      border-radius: 0px 0px 12px 12px;
    }

top sur ma page météo :wink:

image
image1916×909 1.16 MB

2 « J'aime »
4

Évelyne Dhéliat n’a plus rien à t’apprendre :slight_smile:

2 « J'aime »
5

@Pulpy-Luke ,
ça sert à quoi cette nouvelle option?

Dynamic Map Overlays: Control the map’s weather layer dynamically using a Home Assistant entity state via the new overlay_entity option.

6

Haha !

L’idée est d’afficher les infos les plus pertinentes en fonction de la météo.

- name: windy
  unique_id: windy
  state: >-
    {% set weather = states('weather.xxxxx') %}
    {% set overlays = {
      'cloudy': 'wind',
      'partlycloudy': 'wind',
      'rainy': 'rain',
      'snowy': 'rain',
      'pouring': 'rain',
      'snowy-rainy': 'rain',
      'lightning': 'radar',
      'lightning-rainy': 'radar',
      'exceptional': 'thunder',
      'hail': 'thunder',
      'sunny': 'temp',
      'clear-night': 'temp'
    } %}
    {% if weather in overlays %}
      {{ overlays[weather] }}
    {% else %}
      wind
    {% endif %}

Donc s’il fait chaud, on affiche la température, s’il pleut la pluie etc

7

D’accord, fallait comprendre. :sweat_smile:
edit:
installée et fonctionnelle :+1:

8

Super cette nouvelle carte, beaucoup mieux qu’un iframe et en plus s’adapte dynamiquement à la météo. Merci

1 « J'aime »