Visualización del pronóstico del tiempo mediante imágenes de paisajes
(github.com/lds133)- Weather as Landscape es un proyecto que, en lugar de usar un dashboard meteorológico centrado en números, incorpora el pronóstico de 24 horas y el estado actual dentro de una imagen de paisaje para consultarlos de una forma más natural
- El eje horizontal de la imagen es una línea de tiempo de 24 horas desde el momento actual hasta el día siguiente; la casa indica la posición actual y el clima futuro se coloca más a la derecha
- Los elementos del paisaje codifican amanecer y atardecer, mediodía y medianoche, dirección e intensidad del viento, cambios de temperatura, temperaturas máxima y mínima, nubes, precipitación, temperatura y presión actuales, e incluso eventos no meteorológicos como cumpleaños y días festivos
- La implementación usa Python 3.9, Pillow y datos de OpenWeather, y la imagen está diseñada para una pantalla E-Ink de 296x128
- El ESP32 y el módulo E-Ink de 2.9 pulgadas reciben la imagen desde internet y la actualizan cada 15 minutos; todavía no está claro si el código de generación de imágenes puede adaptarse al MicroPython del ESP32
Ver el clima como un paisaje en lugar de números
- Las estaciones meteorológicas tradicionales suelen mostrar los valores de los sensores como datos numéricos, por lo que el usuario debe esforzarse para encontrar, interpretar y visualizar parámetros específicos
- Las imágenes de paisajes resultan naturales para la vista humana, y la experiencia de observar elementos del paisaje reduce el estrés y ofrece una experiencia visual más cómoda con un esfuerzo mínimo
- Weather as Landscape muestra una forma de codificar la información meteorológica dentro de una imagen de paisaje sin depender de números, o haciéndolo al mínimo
Método de codificación
- El paisaje se compone alrededor de una pequeña casa en el bosque
- El eje horizontal de la imagen es una línea de tiempo de 24 horas
- La casa a la izquierda indica el momento actual
- Cuanto más a la derecha, más cerca están las condiciones del día siguiente
- Los eventos más alejados del presente se ubican más hacia la derecha de la imagen
- Varios elementos del paisaje distribuidos en el eje vertical de la imagen representan eventos y condiciones meteorológicas
Información que puede incluirse en el paisaje
- Marcadores de tiempo que ayudan a orientarse en el tiempo
- Amanecer y atardecer
- Mediodía y medianoche
- Información del pronóstico del tiempo
- Dirección e intensidad del viento
- Cambios de temperatura
- Temperaturas máxima y mínima
- Cantidad de nubes
- Precipitación
- Estado actual del clima
- Temperatura
- Presión
- Eventos no meteorológicos
- Cumpleaños
- Días festivos
Elementos visuales y su significado
- El proyecto construye el paisaje combinando varias imágenes de eventos
- Sol: amanecer
- Luna: atardecer
- Nubes: cantidad de nubes
- Casa: posición de la hora actual
- Flor: medianoche y mediodía
- Sprites de árboles: viento del sur, este, oeste y norte
- Lluvia y nieve: tipo de precipitación
- Íconos de presión: presión alta, presión normal, presión baja
- Ícono de festivo: Evento no meteorológico, por ejemplo el cumpleaños de alguien
- Cuanto más grande sea el árbol, mayor será la intensidad del viento esperada
- Si en el bosque se mezclan distintos tipos de árboles, significa viento de dirección intermedia
Interpretación de ejemplos
- El primer ejemplo corresponde a alrededor del mediodía, con cielo despejado y algo de nubosidad esperada
- Durante la noche aparece un viento moderado del norte
- La temperatura actual está subiendo, pero empezará a bajar después del atardecer
- La temperatura mínima se alcanzará antes del amanecer
- Se espera que durante este periodo el viento cambie hacia el noreste
- El segundo ejemplo muestra el amanecer, con un día caluroso y despejado y un viento suave del sureste
- La temperatura seguirá alta incluso después del atardecer
- El viento cambiará hacia el este y se fortalecerá durante toda la noche
- El tercer ejemplo muestra un clima frío y lluvioso durante el día y la noche
- El viento del sur cambia a noroeste durante la noche
- Indica que al día siguiente es el cumpleaños de alguien
Ejecución e imágenes generadas
- Preparación del entorno en Linux
./makevenv.shsource .venv/bin/activate
- Preparación del entorno en Windows
makevenv.bat.venv/Scripts/Activate
- Prueba de generación de imagen
- Debes poner la clave de la API de OpenWeather en la variable OWM_KEY de
secrets.py - Si hace falta, puedes cambiar en
secrets.pylas coordenadas por las de tu ubicación - Después de ejecutar
python run_test.py, la imagen generada se puede revisar en la carpetatmp
- Debes poner la clave de la API de OpenWeather en la variable OWM_KEY de
- Ejecución del servidor
python run_server.py- Si accedes a la página del servidor desde el navegador, puedes ver cuántas imágenes se han generado
Uso con E-Ink y teléfono
- La configuración de hardware incluye una placa de desarrollo ESP32 y un módulo de pantalla E-Ink de 2.9 pulgadas
- La configuración actual con E-Ink muestra imágenes obtenidas desde internet y las actualiza cada 15 minutos
- Todavía no está claro si el código de generación de imágenes puede adaptarse para usarse con MicroPython en el ESP32
- Hay más detalles en
esp32/README.md - Durante las pruebas se generan varias imágenes
- Las imágenes en blanco y negro son para el módulo E-Ink
- Las imágenes a color pueden colocarse en la pantalla de inicio del teléfono
- En Android se puede usar Web Image Widget para crear un widget que muestre una imagen de internet
- Ejecuta el script del servidor del repositorio
- Agrega un widget que apunte a una de las imágenes generadas
1 comentarios
Opiniones en Hacker News
Hace unos años estuve trasteando con un proyecto que elegía imágenes según el clima: https://bazzargh.github.io/weather/
Si lo cambias a
manual filtery configuras algunos filtros, puedes ver cómo aparecen las imágenes etiquetadas. Lo pensaba más para dar ambiente en un marco de fotos o como fondo de escritorio que como un pronóstico meteorológico preciso.Todas las etiquetas de las imágenes están aquí: https://github.com/bazzargh/bazzargh.github.io/blob/master/w...
La mayoría las puse a mano: primero elegía imágenes que me gustaban y luego miraba los huecos en las etiquetas para buscar imágenes que los cubrieran.
Divertido. Conecté un viejo marco de fotos al generador de imágenes DALL-E de OpenAI para que cree imágenes a partir de los datos meteorológicos actuales, y se actualiza cada pocas horas.
La imagen que muestra ahora es esta: https://ibb.co/8K5jZ3B
Además de lo que explica el README, quiero compartir un uso concreto de este proyecto. Tengo una pantalla sobre el escritorio, y es sorprendentemente agradable ver cómo la imagen va cambiando durante el día.
Por ejemplo, la lluvia aparece desde la derecha y desaparece unas horas después, o un árbol empieza a crecer. Mientras tanto, el sol y la luna avanzan de forma constante, mostrando la transición entre el día y la noche.
Otro punto interesante es que esta configuración se ve como un reloj binario. La gente intuye que algo significa, pero no lo interpreta de inmediato, y el diseño simple hace que intenten descubrirlo por sí mismos.
Muy interesante. Me dan ganas de instalar una cámara que tome fotos periódicas de un área verde cerca de mi casa.
Podría guardar junto con la imagen los datos de nubosidad y la fecha, y luego mostrar como fondo de pantalla de la laptop la imagen más parecida al pronóstico actual. Aunque no transmita tanta información como este proyecto, podría ser bastante satisfactorio.
Es tierno, y con unos pequeños ajustes creo que sí lo usaría. Hay margen para mejorar la forma de interpretarlo: la dirección en la que se doblan los árboles podría indicar la dirección del viento; para vientos del norte y del sur habría que resolverlo de forma creativa, pero se podría mostrar si se doblan hacia abajo o hacia afuera, y representar la fuerza del viento con el grado de inclinación, o con el tamaño y la densidad de los árboles.
El amanecer y el atardecer los representaría literalmente con el sol sobre el horizonte, no con el sol y la luna, y el cielo nocturno debería tener una tonalidad distinta a la del día. Parece mejor usar como punto de inicio un momento fijo, como la mañana o la medianoche, en lugar de “la hora actual”, y marcar el “ahora” con la posición de la casa.
Aun así, queda espacio en el cielo para elementos divertidos, como una cigüeña para un cumpleaños o el trineo de Santa en temporada navideña. Estoy esperando a que las pantallas E-Ink más grandes y a color se vuelvan más baratas.
Y tal vez usar una perspectiva isométrica ayudaría a visualizar la dirección del viento.
Hace un tiempo uso un concepto parecido como fondo de pantalla en Android[1].
Me gusta la idea de una obra visual que además transmite información realmente útil.
[1]: https://play.google.com/store/apps/details?id=kaka.wallpaper...
Me recuerda a la pantalla principal de la app Yr.no. Visualiza el clima mostrando, como una ilustración, cómo se vería el exterior en distintos momentos del día.
Con solo ver la animación se puede captar bastante bien la cantidad y el tipo de precipitación, además del viento. Eso sí, solo se ve un momento a la vez, así que para ver todo el día hay que desplazarse horizontalmente, y la temperatura solo aparece como número.
https://apps.apple.com/no/app/yr/id490989206?l=nb
https://play.google.com/store/apps/details?id=no.nrk.yr&pcam...
Excelente trabajo. Dicho eso, si nos enfocamos en la experiencia de usuario, windy.com ofrece la mejor experiencia para comunicar el clima.
Por ejemplo, casi no me interesa un pronóstico como “30% de probabilidad de chubascos a las 8 p. m.”; me importa más cómo se mueven las nubes o la lluvia. Así puedo decidir si manejo hacia donde habrá mejor luz solar, entre otras cosas.
Me pregunto si hay otros servicios que hagan algo parecido a windy.com. Mi experiencia hasta ahora ha sido excelente y casi no tiene patrones oscuros de UX, pero me gustaría que hubiera más competencia en este espacio.
Las marcas de tiempo se generan con base en las indicaciones de Google, así que, para 2024, puedes verlo como algo lo más cercano posible a un pronóstico preciso.
Entiendo la sensación de que un pronóstico como “30% de probabilidad de chubascos a las 8 p. m.” no es muy útil, pero los pronósticos a mediano plazo hoy suelen estar básicamente en ese nivel.
Android o iOS: https://weatherthetrip.com/download
En términos de experiencia de usuario no es igual a Windy, pero comunica bastante bien la incertidumbre del modelo y el grado de coincidencia entre modelos.
https://zoom.earth/
Es una idea interesante, pero hay partes donde el significado de la imagen queda extrañamente desalineado. En especial, el cielo nocturno no debería ser claro, y el sol no debería estar alto durante el amanecer.
Si hay que aprender reglas contraintuitivas como “si se ve el sol en cualquier parte del cielo, significa amanecer” o “la noche no se indica con oscuridad, sino con otra cosa”, creo que falla en su objetivo principal.
Muchas apps del clima usan una línea de tiempo de izquierda a derecha y marcan el amanecer y el atardecer con íconos intuitivos. La vista de línea de tiempo de Windy.com logra condensar bien el estado del cielo, día/noche, fases de la luna, temperatura, precipitación, velocidad y dirección del viento en una línea horizontal concisa.
Obviamente esperaba una LLM + IA generadora de imágenes que convirtiera el pronóstico del tiempo en imágenes surrealistas, pero me sorprendió gratamente que fuera un sistema en el que una persona tomó decisiones de diseño y mapeó los datos de forma determinista a elementos visuales cuidadosamente elegidos. Se siente extrañamente fresco.