This content originally appeared on DEV Community and was authored by bug_elseif
Após várias pessoas perguntarem se eu estava com frio durante as lives na Twitch, surgiu a ideia de colocar um overlay com a previsão do tempo, mostrando a temperatura atual da minha localização.
Foi possível fazer isso de uma maneira simples, usando uma página HTML e uma API.
Vamos aos passos:
Primeiramente, criamos um arquivo com a estrutura básica de HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Titulo</title>
</head>
<body>
</body>
</html>
Dentro do corpo do HTML, criamos uma tag <img> da seguinte forma:
<img src="http://wttr.in/~Lages+Brazil_tqp0.png">
Desta maneira acessamos a API que nos retorna uma imagem .png, através do link vamos passar alguns parâmetros, são eles:
- Localização - informa o nome da cidade e país;
- t - aplica transparência na imagem;
- q- retira o texto “previsão do tempo” deixando só o nome da cidade e país como título;
- p - adiciona uma borda ao redor da imagem;
- 0 - deixa visível somente o clima no momento atual.
Além destes, existem outros parâmetros que modificam a imagem.
Por fim adicionamos um <meta> tag que atualizará a página em determinado tempo (em segundos):
<meta http-equiv="refresh" content="300" />
A estrutura final do código fica assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="300" />
<title>Previsão do tempo</title>
</head>
<body>
<img src="http://wttr.in/~Lages+Brazil_tqp0.png" >
</body>
</html>
Gerando este resultado:
Com a página pronta, basta adicionar uma fonte de navegador no OBS com o caminho no qual o arquivo HTML foi salvo.
Mais informações sobre a API neste github.
Enjoy!
This content originally appeared on DEV Community and was authored by bug_elseif
bug_elseif | Sciencx (2021-05-11T01:19:06+00:00) Criando overlay com a previsão do tempo. Retrieved from https://www.scien.cx/2021/05/11/criando-overlay-com-a-previsao-do-tempo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.