Visualização da previsão do tempo por meio de imagens de paisagem
(github.com/lds133)- Weather as Landscape é um projeto que, em vez de um dashboard meteorológico centrado em números, coloca a previsão de 24 horas e as condições atuais dentro de uma imagem de paisagem, permitindo uma visualização mais natural
- O eixo horizontal da imagem é uma linha do tempo de 24 horas, do momento atual até o dia seguinte; a casa indica a posição atual, e quanto mais à direita, mais distante no futuro está o clima representado
- Os elementos da paisagem codificam nascer e pôr do sol, meio-dia e meia-noite, direção e intensidade do vento, variação de temperatura, temperaturas máxima e mínima, nuvens, precipitação, temperatura e pressão atuais, e até eventos não meteorológicos como aniversários e feriados
- A implementação usa Python 3.9, Pillow e dados do OpenWeather, e as imagens foram projetadas para um display E-Ink de 296x128
- O conjunto com ESP32 e módulo E-Ink de 2,9 polegadas recebe imagens da internet e as atualiza a cada 15 minutos, mas ainda não está claro se o código de geração de imagens pode ser adaptado para o MicroPython no ESP32
Clima visto como paisagem em vez de números
- Estações meteorológicas tradicionais costumam mostrar valores de sensores como dados numéricos, o que exige que o usuário procure parâmetros específicos, interprete e visualize essas informações
- Imagens de paisagem são naturais para o olho humano, e a experiência de observar elementos da paisagem reduz o estresse e oferece uma experiência visual mais confortável com o mínimo de esforço
- Weather as Landscape mostra uma forma de codificar informações meteorológicas dentro de uma imagem de paisagem sem depender de números, ou dependendo deles o mínimo possível
Forma de codificação
- A paisagem é composta em torno de uma pequena casa na floresta
- O eixo horizontal da imagem é uma linha do tempo de 24 horas
- A casa à esquerda marca o momento atual
- Quanto mais à direita, mais próximas estão as condições do dia seguinte
- Quanto mais distante do presente estiver um evento, mais à direita ele aparece na imagem
- Vários elementos da paisagem distribuídos no eixo vertical da imagem representam eventos e condições do tempo
Informações que podem ser colocadas na paisagem
- Marcadores de tempo que ajudam na leitura do horário
- nascer do sol e pôr do sol
- meio-dia e meia-noite
- Informações da previsão do tempo
- direção e intensidade do vento
- variação de temperatura
- temperaturas máxima e mínima
- quantidade de nuvens
- precipitação
- Estado atual do tempo
- temperatura
- pressão atmosférica
- Eventos que não são meteorológicos
- aniversários
- feriados
Elementos visuais e seus significados
- O projeto compõe a paisagem combinando várias imagens de eventos
- Sol: nascer do sol
- Lua: pôr do sol
- Nuvem: quantidade de nuvens
- Casa: posição da hora atual
- Flor: meia-noite e meio-dia
- Sprite de árvore: vento sul, leste, oeste, norte
- Chuva e neve: tipo de precipitação
- Ícone de pressão: pressão alta, normal, baixa
- Ícone de feriado: Non-weather event, por exemplo o aniversário de alguém
- Quanto maior a árvore, mais forte é a intensidade do vento prevista
- Quando diferentes tipos de árvores aparecem misturados na floresta, isso indica vento em direção intermediária
Interpretação dos exemplos
- O primeiro exemplo está próximo do meio-dia, com céu limpo e previsão de algumas nuvens
- Durante a noite surge um vento norte moderado
- A temperatura atual está subindo, mas começa a cair após o pôr do sol
- A temperatura mínima é atingida antes do nascer do sol
- Nesse período, o vento deve mudar para nordeste
- O segundo exemplo mostra o sol nascendo, com um dia quente e limpo e vento fraco de sudeste
- A temperatura continua alta mesmo após o pôr do sol
- O vento muda para leste e fica mais forte ao longo da noite
- O terceiro exemplo mostra um dia frio e chuvoso ao longo do dia e da noite
- O vento sul muda para noroeste durante a noite
- Também indica que no dia seguinte é aniversário de alguém
Execução e geração de imagens
- Preparação do ambiente Linux
./makevenv.shsource .venv/bin/activate
- Preparação do ambiente Windows
makevenv.bat.venv/Scripts/Activate
- Teste de geração de imagem
- É preciso colocar a chave da API do OpenWeather na variável OWM_KEY de
secrets.py - Se necessário, é possível trocar as coordenadas em
secrets.pypela localização do usuário - Depois de executar
python run_test.py, a imagem gerada pode ser conferida na pastatmp
- É preciso colocar a chave da API do OpenWeather na variável OWM_KEY de
- Execução do servidor
python run_server.py- Ao acessar a página do servidor no navegador, é possível ver quantas imagens foram geradas
Uso com E-Ink e celular
- A configuração de hardware inclui uma ESP32 development board e um módulo display E-Ink de 2,9 polegadas
- Atualmente, a configuração com E-Ink exibe imagens obtidas da internet e faz atualização a cada 15 minutos
- Ainda não está claro se o código de geração de imagens pode ser adaptado para uso no MicroPython do ESP32
- Mais detalhes estão em
esp32/README.md - Durante os testes, várias imagens são geradas
- As imagens em preto e branco são para o módulo E-Ink
- As imagens coloridas podem ser colocadas na tela inicial do celular
- No Android, é possível usar o Web Image Widget para criar um widget que exibe imagens da internet
- Execute o script de servidor do repositório
- Adicione um widget apontando para uma das imagens geradas
1 comentários
Comentários do Hacker News
Há alguns anos fiquei brincando com um projeto que escolhia imagens de acordo com o tempo: https://bazzargh.github.io/weather/
Se você mudar para
manual filtere configurar alguns filtros, dá para ver como as imagens etiquetadas aparecem. Eu pensava nisso mais para criar clima em uma moldura digital ou papel de parede de desktop do que para uma previsão do tempo precisaTodas as tags das imagens estão aqui: https://github.com/bazzargh/bazzargh.github.io/blob/master/w...
A maioria foi colocada manualmente, e o processo era primeiro escolher imagens de que eu gostava e depois procurar outras para preencher as lacunas nas tags
Muito legal. Conectei uma moldura digital antiga ao gerador de imagens DALL-E da OpenAI, deixei gerar imagens com base nos dados meteorológicos atuais e atualizar a cada poucas horas
A imagem exibida agora é esta: https://ibb.co/8K5jZ3B
Além da explicação no README, queria compartilhar um caso de uso concreto deste projeto. Eu o uso com uma tela sobre a mesa, e é surpreendentemente prazeroso ver a imagem mudar ao longo do dia
Por exemplo, a chuva aparece pela direita e algumas horas depois desaparece, ou as árvores começam a crescer. Enquanto isso, o sol e a lua avançam constantemente, marcando a transição entre dia e noite
Outra parte divertida é que essa configuração parece um relógio binário. As pessoas presumem que aquilo significa alguma coisa, mas não conseguem interpretar de imediato, e o design simples faz com que tentem descobrir sozinhas
Muito divertido. Fiquei com vontade de instalar uma câmera que fotografe periodicamente a área verde perto de casa
Seria legal salvar as imagens junto com dados de cobertura de nuvens e um carimbo de data, e depois mostrar como papel de parede do notebook a imagem mais parecida com a previsão atual. Talvez não transmita tanta informação quanto este projeto, mas ainda assim poderia ser bem satisfatório
Fofo, e com alguns ajustes eu realmente usaria. Há espaço para melhorar a forma de interpretação: usar a direção em que as árvores se curvam para indicar direção do vento, e tratar ventos norte/sul de forma criativa, seja curvando para baixo ou para fora; o grau da curvatura ou o tamanho/densidade das árvores poderiam indicar a intensidade do vento
O nascer e o pôr do sol poderiam ser representados literalmente com o sol no horizonte, em vez de sol e lua, e o céu noturno poderia ter uma tonalidade diferente da do dia. Também me parece melhor usar como ponto de partida um horário fixo, como manhã ou meia-noite, em vez da “hora atual”, e marcar o “agora” com a posição da casa
Mesmo assim, ainda sobra espaço no céu para elementos divertidos, como uma cegonha em aniversário ou o trenó do Papai Noel na época de festas. Estou esperando que uma tela E-Ink maior e colorida fique barata
E talvez usar uma perspectiva como projeção isométrica ajudasse a visualizar a direção do vento
Há algum tempo uso um conceito parecido como papel de parede no Android[1]
Gosto da ideia de uma arte que transmite informações realmente úteis
[1]: https://play.google.com/store/apps/details?id=kaka.wallpaper...
Isso me lembrou a tela principal do app Yr.no. Ele visualiza o tempo mostrando, como uma ilustração, como a vista da janela parecerá em vários momentos do dia
Só pela animação já dá para ter uma boa noção de volume e tipo de precipitação e do vento. Só que ele mostra apenas um momento por vez, então para ver o dia inteiro é preciso rolar na horizontal, e a temperatura aparece só em números
https://apps.apple.com/no/app/yr/id490989206?l=nb
https://play.google.com/store/apps/details?id=no.nrk.yr&pcam...
Excelente trabalho. Mas, se o foco for experiência do usuário, windy.com é o melhor jeito de apresentar o clima
Por exemplo, eu quase não me interesso por previsões como “30% de chance de pancadas às 20h”; o mais importante é como as nuvens ou a chuva estão se deslocando. É isso que permite decidir, por exemplo, se vale dirigir na direção com melhor luz do sol
Fico curioso se existe outro lugar que faça algo parecido com windy.com. Minha experiência até agora tem sido excelente e quase sem padrões obscuros de UX, mas seria bom ver mais concorrência nessa área
Os timestamps são baseados nas rotas do Google, então em 2024 isso fica o mais próximo possível de uma previsão precisa
Entendo a sensação de que previsões como “30% de chance de pancadas às 20h” não ajudam muito, mas previsões de médio prazo hoje em geral ainda estão nesse nível
Android ou iOS: https://weatherthetrip.com/download
Em termos de experiência do usuário, não é igual ao windy, mas faz um bom trabalho em transmitir a incerteza dos modelos e o grau de concordância entre eles
https://zoom.earth/
Ideia interessante, mas há partes em que o significado da imagem fica estranhamente desalinhado. Em especial, o céu noturno não deveria estar claro, e no nascer do sol ele não deveria estar alto no céu
Se for preciso aprender regras contraintuitivas como “se o sol aparecer em qualquer lugar do céu, isso significa nascer do sol” ou “a noite não é representada por escuridão, mas por outra coisa”, parece que o objetivo principal falhou
Muitos apps de clima usam uma linha do tempo da esquerda para a direita e mostram nascer e pôr do sol com ícones intuitivos. A visualização de linha do tempo do Windy.com reúne bem, de forma compacta, estado do céu, dia/noite, fase da lua, temperatura, precipitação, velocidade do vento e direção do vento numa linha horizontal
Achei que, obviamente, seria uma IA de LLM + geração de imagens transformando previsões do tempo em imagens surreais, mas fiquei agradavelmente surpreso ao ver um sistema em que uma pessoa de verdade tomou as decisões de design e mapeou os dados de forma deliberada para elementos visuais escolhidos com cuidado. Parece estranhamente renovador