# Intégration externe : Meteo France

**URL:** <https://community.gladysassistant.com/t/integration-externe-meteo-france/10322>\
**Category:** Développement\
**Tags:** intégration, méteo, integration-externe\
**Created:** [Juillet 4, 2026, 3:14 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322 "2026-07-04T15:14:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 4, 2026, 3:14 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/1 "2026-07-04T15:14:36Z")

</div>

Aujourd’hui j’ai travaillé sur une intégration meteo france.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/2/72565ba067ad3e73c6fdcbee11bb3b3b5491ec67.png)

Le widget actuel avec openweather est très bien mais manque un peu de couleur pour ma part.  
Comme je me servais déjà de l’api meteo france pour afficher une carte de vigilance (merci au tuto de @prohand [Tuto - Afficher les cartes vigilances Météo France](https://community.gladysassistant.com/t/tuto-afficher-les-cartes-vigilances-meteo-france/8858)) j’ai décidé d’intégrer cela directement dans Gladys.

Comme les images sont plus parlantes voilà les widgets (c’est le même widget à chaque fois mais personnalisable)  
Thème clair:

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/9/b/9bb9592fac47073ced460d91fd61c65b14c25485.png)

Thème sombre:

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/8/286b260f9a34846dd9328b2b8f0d58110b79f581.png)

Les paramètres de réglages du widget

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/9/a/9ad338265530e512fefd2d54cdd50362800b8f60.png)

Pour cette intégration il faut une clé api gratuite uniquement pour afficher la carte de vigilance. Le reste se fait sans clé d’api.

J’attends un changement de niveau de vigilance pour tester le rendu et après je vais ajouter un déclencheur dans les scènes pour les vigilences orange/rouge, pour créer des scènes pour etre notifier et recevoir le texte de vigilance par exemple.

---

<div class="post-metadata">

**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\
**Post date:** [Juillet 4, 2026, 4:36 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/2 "2026-07-04T16:36:22Z")

</div>

J’adore @Will_71 !!

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 4, 2026, 4:59 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/3 "2026-07-04T16:59:29Z")

</div>

Une fois que j’aurais mis le declencheur dans les scènes je mettrai une image a disposition

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 4, 2026, 8:58 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/4 "2026-07-04T20:58:35Z")

</div>

Voilà l’image de test: `docker pull willde71/gladys-test:meteofrance_integration`

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 4, 2026, 11:10 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/5 "2026-07-04T23:10:03Z")

</div>

et la PR

> <https://github.com/GladysAssistant/Gladys/pull/2626>
>
> \### Pull Request check-list
> 
> To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items:
> 
> \- \[x\] If your changes affect the code, did you write the tests?
> \- \[x\] Are server tests passing with coverage? (\`cd server && npm run coverage\`) — Codecov requires \*\*100% coverage on lines changed in this PR\*\*
> \- \[x\] Did Cypress E2E tests pass? (\`npm run cypress:run\` from repo root, if UI changed)
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[x\] If you are adding a new feature/service, did you run the integration comparator? (\`npm run compare-translations\` on front)
> \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[forum\](https://community.gladysassistant.com/)) for testing before merging.
> \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)
> \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com).
> \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com).
> 
> NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.
> 
> \### Description of change
> 
> \## Overview
> 
> This PR adds a \*\*Météo France\*\* integration to Gladys: a weather dashboard widget, official vigilance (weather alert) support, and scene triggers/actions
> 
> \## Features
> 
> \- \*\*Weather widget\*\* with per-section display options: current weather, weather
> details (humidity, pressure, wind, rain, sunrise/sunset, moon phase, UV index),
> next 24 hours and next 5 days forecasts. User unit preferences are respected
> (°F, mph, inches, inHg).
> \- \*\*Vigilance alerts\*\*: department auto-detected from the house GPS coordinates,
> colored alert badges with the bulletin text, and an optional national vigilance
> map (the only feature requiring the free DPVigilance API key).
> \- \*\*Scenes\*\*: a trigger fired when the vigilance level raises (configurable
> minimum level), plus two actions exposing the current vigilance and a multi-day
> forecast bulletin as variables for messages.
> 
> \<img width="580" height="500" alt="image" src="https://github.com/user-attachments/assets/f09644c9-d782-4863-bb8d-ef52d7696c00" /\>
> 
> \<img width="580" height="500" alt="image" src="https://github.com/user-attachments/assets/c05c6efb-ef0f-498c-874d-2a24e2c0b691" /\>
> 
> \<img width="390" height="523" alt="image" src="https://github.com/user-attachments/assets/f2c42485-4d75-4b54-aede-c9c01c8643d2" /\>
> 
> 
> 
> \## Summary by CodeRabbit
> 
> \* \*\*New Features\*\*
> \* Added Météo France as a new dashboard weather widget with hourly/daily forecasts, UV, sunrise/sunset, and optional vigilance alerts/map.
> \* Added a Meteo France integration page to configure an API key and support the widget.
> \* Added scene actions and triggers for Meteo France vigilance and forecast data.
> \* \*\*Bug Fixes\*\*
> \* Improved robustness of weather/vigilance display, including graceful fallback when vigilance data or map imagery can’t be loaded.
> \* \*\*Documentation\*\*
> \* Added new UI setup and localization text for the Meteo France integration, widget, scenes, and triggers.
> \* \*\*Style\*\*
> \* Enhanced dark-mode rendering for Météo France vigilance visuals and alert colors.

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Juillet 5, 2026, 8:27 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/6 "2026-07-05T08:27:09Z")

</div>

Oups, comme je découvre encore gladys, comment puis-je essayer ce widget sans risque et comment faire ?

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 5, 2026, 9:35 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/7 "2026-07-05T09:35:56Z")

</div>

Salut, j’ai vu que t’avais acheté le kit Gladys donc tu n’as pas fait l’installation.  
Si tu es débutant et que tu n’as pas fait toi-même la première installation de Gladys avec les commandes Docker, je te déconseille de le faire.  
Mais t’inquiètes pas, car si ça plaît et que je n’ai pas écrit trop de bêtises dans la PR, ça pourra être vite intégré.

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Juillet 5, 2026, 9:54 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/8 "2026-07-05T09:54:02Z")

</div>

Ok, merci !

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [Juillet 5, 2026, 11:16 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/9 "2026-07-05T11:16:41Z")

</div>

Trop cool ça !!!  
C’est vraiment sympa et en effet c’est plus coloré 👍

Par contre on retrouve ici le petit défaut (pour moi) du thème sombre : cela semble ajouter un filtre sombre sur tous les éléments. Là la carte, les icônes soleil.

C’est ce qui fait aussi que les se lecteurs de couleur ont le centre noir au lieu de blanc.

Ça n’a pas de lien avec cette PR mais je pense qu’il faudrait améliorer ça, qu’en penses tu @pierre-gilles ?

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 5, 2026, 11:53 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/10 "2026-07-05T11:53:16Z")

</div>

> [@guim31](#):
>
> Par contre on retrouve ici le petit défaut (pour moi) du thème sombre : cela semble ajouter un filtre sombre sur tous les éléments. Là la carte, les icônes soleil.

En faite j’ai travailler dessus pour atténuer le phénomène voilà le rendu maintenant

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/c/7c61bc7e50d440b9f100fd5ade564ba020164aec.png)

---

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Juillet 6, 2026, 7:58 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/11 "2026-07-06T07:58:07Z")

</div>

Excellent 🙂

Merci pour le dev en tout cas

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juillet 6, 2026, 7:59 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/12 "2026-07-06T07:59:14Z")

</div>

Très sympa, j’aime beaucoup ! 😄

La seule remarque que je me fais, c’est que c’est un développement très spécifique à la France, alors que le projet a une portée internationale.

Je sais qu’on a déjà quelques widgets spécifiques à la France, mais jusqu’à présent le widget météo était international. Avec cette approche, on se retrouve finalement avec deux widgets qui remplissent le même usage.

Est-ce qu’il ne serait pas possible de faire évoluer le widget météo existant en permettant de choisir une **source** (OpenWeather ou Météo-France) ? En fonction de la source sélectionnée, il pourrait simplement afficher une interface adaptée. Ça éviterait de dupliquer les widgets tout en gardant le support de Météo-France. 🙂

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 6, 2026, 8:35 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/13 "2026-07-06T08:35:35Z")

</div>

Je n’avais pas pensé à ce cas mais oui je peux travailler pour fusionné ces 2 parties et mettre le choix de la source en paramètre. Et il y aura plus qu’un seul widget meteo.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juillet 6, 2026, 8:38 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/14 "2026-07-06T08:38:26Z")

</div>

Et même de manière générale, la proposition que tu fais en termes de design est super propre et pourrait remplacer le widget météo existant même pour les données venant de OpenWeather 🙂

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juillet 6, 2026, 8:59 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/15 "2026-07-06T08:59:20Z")

</div>

> [@guim31](#):
>
> Ça n’a pas de lien avec cette PR mais je pense qu’il faudrait améliorer ça, qu’en penses tu @pierre-gilles ?

C’est du cas par cas 🙂  
Si il y a des endroits où le mode sombre est mal fait, n’hésite pas à créer un sujet avec les détails !

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 6, 2026, 8:48 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/16 "2026-07-06T20:48:31Z")

</div>

> [@pierre-gilles](#):
>
> et pourrait remplacer le widget météo existant même pour les données venant de OpenWeather

Pour le coup, tout le monde pourra avoir le nouveau design avec une seule box météo, c’est plutôt pertinent!

Je travaille dans ce sens pour intégrer ce que j’ai fait dans la partie avec OpenWeather.

Du coup, l’intégration OpenWeather + mon intégration Météo France deviendront l’intégration Météo. Je chercherais une nouvelle image.

Pour la page paramètres, je mettrais les explications pour les 2 sources de données. Mais est-ce que je mets le choix des 2 sources dans une liste et, en fonction de celui sélectionné, j’affiche ensuite les paramètres liés ou tout sur la même page ?

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 7, 2026, 6:06 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/17 "2026-07-07T06:06:03Z")

</div>

Pour information, voici le rendu quand il y a une vigilance en cours

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/a/faf57045428afe7a77800650d37df0b93e72a9c5.png)

On peut cliquer sur le texte pour agrandir et lire tout le texte de la vigilance.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/8/3/83c525e3e66a95df231840598c3404356ef3a15e.png)

Ce texte par contre sera uniquement en français car c’est le texte reçu de l’API Meteo France directement

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 7, 2026, 12:15 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/18 "2026-07-07T12:15:46Z")

</div>

@pierre-gilles, pour l’intégration je ne sais pas trop quoi choisir.  
Tu préfères avoir une seule intégration météo et en paramètre on choisit la source de données + un widget météo.  
Ou 2 intégrations séparées Openweather et Meteo France. Un seul widget météo avec le choix de la source en paramètre du widget?

---

<div class="post-metadata">

**Author:** ![mutmut](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mutmut/32/14064_2.png) [@mutmut](https://community.gladysassistant.com/u/mutmut)\
**Post date:** [Juillet 7, 2026, 4:24 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/19 "2026-07-07T16:24:51Z")

</div>

Je mets mon grain de sel 😜

> [@Will\_71](#):
>
> Du coup, l’intégration OpenWeather + mon intégration Météo France deviendront l’intégration Météo.

oui !

> [@Will\_71](#):
>
> je mets le choix des 2 sources dans une liste

oui !

> [@Will\_71](#):
>
> en fonction de celui sélectionné, j’affiche ensuite les paramètres liés

oui !

> [@Will\_71](#):
>
> Tu préfères avoir une seule intégration météo

oui !

Ben voilà 😅

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Juillet 7, 2026, 10:01 UTC](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322/20 "2026-07-07T22:01:50Z")

</div>

voilà ce que j’ai fait, choix de la source dans une intégration meteo

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/3/a3449acb8a8a98a0bf0742005c6f645294dc0a43.png)

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/3/2387921a8a9cec3129313f1aad58c774b5d3b286.png)

Le widget se reconfigure en fonction de la source réglé dans l’intégration

[Page suivante](https://community.gladysassistant.com/t/integration-externe-meteo-france/10322.md?page=2)
