Visualiser les prévisions météo à travers une image de paysage
(github.com/lds133)- Weather as Landscape est un projet qui, au lieu d’un tableau de bord météo centré sur les chiffres, intègre les prévisions sur 24 heures et les conditions actuelles dans une image de paysage pour les consulter plus naturellement
- L’axe horizontal de l’image est une chronologie de 24 heures, du moment présent jusqu’au lendemain ; la maison indique la position actuelle, et plus la météo est future, plus elle est placée vers la droite
- Les éléments du paysage encodent le lever et le coucher du soleil, midi et minuit, la direction et la force du vent, l’évolution de la température, les maximales et minimales, les nuages, les précipitations, la température et la pression actuelles, ainsi que des événements non météo comme les anniversaires et les jours fériés
- L’implémentation utilise Python 3.9, Pillow et les données OpenWeather ; l’image est conçue pour un écran E-Ink de 296x128
- La configuration avec un ESP32 et un module E-Ink 2,9 pouces récupère l’image sur Internet et la met à jour toutes les 15 minutes ; il reste toutefois incertain que le code de génération d’image puisse être adapté au MicroPython de l’ESP32
La météo en paysage plutôt qu’en chiffres
- Les stations météo traditionnelles affichent souvent les valeurs des capteurs sous forme de données numériques, ce qui oblige l’utilisateur à chercher, interpréter et visualiser certains paramètres
- Une image de paysage est naturelle pour l’œil humain, et l’expérience consistant à observer des éléments de paysage réduit le stress tout en offrant une expérience visuelle plus confortable avec un effort minimal
- Weather as Landscape montre une façon d’encoder des informations météo dans une image de paysage, sans dépendre des chiffres, ou en y recourant le moins possible
Méthode d’encodage
- Le paysage est composé autour d’une petite maison dans la forêt
- L’axe horizontal de l’image correspond à une chronologie de 24 heures
- La maison à gauche indique le moment actuel
- Plus on va vers la droite, plus on se rapproche des conditions du lendemain
- Plus un événement est éloigné du présent, plus il est situé à droite dans l’image
- Les différents éléments de paysage répartis sur l’axe vertical de l’image représentent des événements et conditions météo
Informations pouvant être intégrées au paysage
- Des repères temporels facilitant la lecture du temps
- Lever et coucher du soleil
- Midi et minuit
- Informations de prévision météo
- Direction et force du vent
- Évolution de la température
- Températures maximale et minimale
- Nébulosité
- Précipitations
- Conditions météo actuelles
- Température
- Pression atmosphérique
- Événements non météo
- Anniversaires
- Jours fériés
Éléments visuels et signification
- Le projet compose le paysage en combinant plusieurs images d’événements
- Soleil : lever du soleil
- Lune : coucher du soleil
- Nuage : nébulosité
- Maison : position de l’heure actuelle
- Fleur : minuit et midi
- Sprite d’arbre : vent du sud, vent d’est, vent d’ouest, vent du nord
- Pluie et neige : type de précipitations
- Icône de pression : pression élevée, pression normale, pression basse
- Icône de jour férié : événement non météo, par exemple l’anniversaire de quelqu’un
- Plus l’arbre est grand, plus la force du vent prévue est importante
- Si la forêt mélange différents types d’arbres, cela indique un vent de direction intermédiaire
Interprétation d’exemples
- Le premier exemple se situe vers midi, avec un ciel dégagé et quelques nuages attendus
- Un vent du nord modéré apparaît pendant la nuit
- La température actuelle est en hausse, mais commence à baisser après le coucher du soleil
- La température minimale est atteinte avant le lever du soleil
- Pendant cette période, le vent devrait tourner au nord-est
- Le deuxième exemple montre le soleil en train de se lever, avec une journée chaude et dégagée et un léger vent du sud-est
- La température reste élevée même après le coucher du soleil
- Le vent tourne à l’est et se renforce tout au long de la soirée
- Le troisième exemple montre un temps froid et pluvieux toute la journée et toute la nuit
- Le vent du sud tourne au nord-ouest pendant la nuit
- Il indique que quelqu’un fête son anniversaire le lendemain
Exécution et images générées
- Préparation de l’environnement Linux
./makevenv.shsource .venv/bin/activate
- Préparation de l’environnement Windows
makevenv.bat.venv/Scripts/Activate
- Test de génération d’image
- Il faut placer la clé API OpenWeather dans la variable OWM_KEY de
secrets.py - Si nécessaire, les coordonnées dans
secrets.pypeuvent être remplacées par celles de l’utilisateur - Après l’exécution de
python run_test.py, les images générées sont visibles dans le dossiertmp
- Il faut placer la clé API OpenWeather dans la variable OWM_KEY de
- Lancement du serveur
python run_server.py- En ouvrant la page du serveur dans un navigateur, on peut voir le nombre d’images générées
Utilisation avec E-Ink et téléphone
- La configuration matérielle inclut une carte de développement ESP32 et un module d’affichage E-Ink 2,9 pouces
- La configuration E-Ink actuelle affiche une image récupérée sur Internet et la met à jour toutes les 15 minutes
- Il reste pour l’instant incertain que le code de génération d’image puisse être modifié pour fonctionner avec MicroPython sur l’ESP32
- Des informations plus détaillées se trouvent dans
esp32/README.md - Pendant les tests, plusieurs images sont générées
- Les images en noir et blanc sont destinées au module E-Ink
- Les images couleur peuvent être placées sur l’écran d’accueil d’un téléphone
- Sur Android, Web Image Widget permet de créer un widget affichant une image depuis Internet
- Exécuter le script serveur du dépôt
- Ajouter un widget pointant vers l’une des images générées
1 commentaires
Commentaires sur Hacker News
Il y a quelques années, j’ai bricolé un projet qui choisissait des images en fonction de la météo : https://bazzargh.github.io/weather/
En passant à
manual filteret en réglant quelques filtres, on peut voir comment les images taguées ressortent. Je l’imaginais plutôt pour créer une ambiance sur un cadre photo ou en fond d’écran de bureau que comme une prévision météo précise.Tous les tags des images sont ici : https://github.com/bazzargh/bazzargh.github.io/blob/master/w...
Je les ai pour la plupart ajoutés à la main : je choisissais d’abord des images qui me plaisaient, puis je regardais les trous dans les tags et cherchais des images pour les combler.
Amusant. J’ai raccordé un vieux cadre photo au générateur d’images DALL-E d’OpenAI pour qu’il crée une image à partir des données météo actuelles, avec une mise à jour toutes les quelques heures.
L’image affichée en ce moment est celle-ci : https://ibb.co/8K5jZ3B
En plus de ce qui est expliqué dans le README, je voulais partager un usage concret de ce projet. J’ai un écran posé sur mon bureau, et voir l’image évoluer tout au long de la journée est étonnamment agréable.
Par exemple, la pluie apparaît sur la droite puis disparaît quelques heures plus tard, ou bien un arbre commence à pousser. Pendant ce temps, le soleil et la lune avancent régulièrement pour indiquer la transition entre le jour et la nuit.
Autre point amusant : cette configuration ressemble à une horloge binaire. Les gens devinent qu’il y a un sens, sans pouvoir l’interpréter immédiatement, et la simplicité du design les pousse à essayer de le comprendre par eux-mêmes.
Vraiment amusant. Ça me donne envie d’installer une caméra qui prendrait régulièrement des photos d’un espace vert près de chez moi.
En enregistrant avec chaque image les données de couverture nuageuse et un horodatage, on pourrait afficher comme fond d’écran de portable l’image qui ressemble le plus aux prévisions actuelles. Même si ça ne transmettrait pas autant d’informations que ce projet, ça pourrait être assez satisfaisant.
C’est mignon, et avec quelques ajustements je pense que je l’utiliserais vraiment. Il y a moyen d’améliorer l’interprétation : représenter la direction du vent par le sens dans lequel les arbres se plient, traiter les vents du nord et du sud de façon créative — selon qu’ils se courbent vers le bas ou vers l’extérieur — et indiquer la force du vent par le degré de courbure, ou par la taille et la densité des arbres.
Le lever et le coucher du soleil devraient être représentés littéralement par le soleil au-dessus de l’horizon, plutôt que par le soleil et la lune, et le ciel nocturne devrait avoir une teinte différente de celle du jour. Il me semblerait préférable de faire partir la scène d’un point fixe, comme le matin ou minuit, plutôt que de “l’heure actuelle”, et d’utiliser la position de la maison pour indiquer “maintenant”.
Il reste tout de même de la place dans le ciel pour des éléments amusants, comme une cigogne pour un anniversaire ou le traîneau du Père Noël pendant les fêtes. J’attends que les écrans E-Ink plus grands et en couleur deviennent abordables.
Et une perspective de type isométrique pourrait peut-être aider à visualiser la direction du vent.
J’utilise depuis un moment un concept similaire comme fond d’écran Android[1].
J’aime l’idée d’une œuvre visuelle qui transmet des informations réellement utiles.
[1]: https://play.google.com/store/apps/details?id=kaka.wallpaper...
Ça me fait penser à l’écran principal de l’app Yr.no. Elle visualise la météo en montrant, sous forme d’illustration, à quoi ressemblerait la vue par la fenêtre à différents moments de la journée.
Rien qu’avec l’animation, on peut assez facilement se faire une idée de la quantité et du type de précipitations, ainsi que du vent. En revanche, on ne voit qu’un seul instant à la fois : il faut faire défiler horizontalement pour parcourir la journée, et la température n’est indiquée que par des chiffres.
https://apps.apple.com/no/app/yr/id490989206?l=nb
https://play.google.com/store/apps/details?id=no.nrk.yr&pcam...
Excellent travail. Cela dit, si l’on se concentre sur l’expérience utilisateur, windy.com offre la meilleure expérience pour transmettre la météo.
Par exemple, je m’intéresse rarement à une prévision du type « 30 % de probabilité d’averses à 20 h » ; ce qui compte davantage, c’est le mouvement des nuages ou de la pluie. C’est ce qui permet de décider, par exemple, dans quelle direction conduire pour avoir le meilleur ensoleillement.
Je me demande s’il existe d’autres services qui fonctionnent de manière similaire à windy.com. Jusqu’ici, l’expérience est excellente et il y a très peu de dark patterns, mais j’aimerais voir plus de concurrence dans ce domaine.
Les horodatages sont basés sur les itinéraires Google, donc en 2024 on obtient quelque chose d’aussi proche que possible de prévisions précises.
Je comprends le sentiment que les prévisions du type « 30 % de probabilité d’averses à 20 h » ne sont pas très satisfaisantes, mais les prévisions à moyen terme en sont globalement là aujourd’hui.
Android ou iOS : https://weatherthetrip.com/download
Ce n’est pas la même chose que Windy en matière d’expérience utilisateur, mais c’est assez efficace pour montrer l’incertitude des modèles et leur degré de convergence.
https://zoom.earth/
L’idée est intéressante, mais le sens de certaines images paraît étrangement décalé. En particulier, le ciel nocturne ne devrait pas être lumineux, et le soleil ne devrait pas être haut dans le ciel au lever du soleil.
S’il faut apprendre des règles contre-intuitives du genre « si le soleil est visible n’importe où dans le ciel, cela signifie le lever du soleil » ou « la nuit n’est pas représentée par l’obscurité mais par autre chose », alors l’objectif principal me semble raté.
Beaucoup d’apps météo utilisent une chronologie de gauche à droite, avec des icônes intuitives pour le lever et le coucher du soleil. La vue chronologique de Windy.com condense bien l’état du ciel, le jour/la nuit, la phase de la lune, la température, les précipitations, ainsi que la vitesse et la direction du vent dans une timeline horizontale concise.
Je m’attendais évidemment à un système LLM + IA générative d’images transformant les prévisions météo en images surréalistes, mais j’ai été agréablement surpris de voir au contraire un système où une vraie personne a pris les décisions de design et a soigneusement choisi des éléments visuels pour les associer de façon déterministe aux données. C’est étrangement rafraîchissant.