# Cartão de previsão do tempo com Custom UI **URL:** \ **Category:** Partilha de Projectos\ **Created:** [29 Maio , 2018 15:19 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492 "2018-05-29T15:19:19Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [29 Maio , 2018 15:19 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/1 "2018-05-29T15:19:19Z")
Boas, hoje venho compartilhar uma personalização para o cartão de previsão do tempo. ![image](https://forum.cpha.pt/uploads/default/original/1X/c6bc5aea9617daa738994135e612f51dd10122d6.png) E caso utilize o idioma em português, ele se adaptará também. ![image](https://forum.cpha.pt/uploads/default/original/1X/4a1a8b2099908e9decbce85353459183ac854b8c.png) Para que funciona, você precisará ter instalado o componente Custom UI. Caso ainda não tenha, clique [aqui](https://forum.cpha.pt/t/como-instalar-e-configurar-custom-ui-no-hassio/) para um tutorial de como instalar. configuration.yaml ``` homeassistant: customize: input_text.weather: custom_ui_state_card: custom-weather-card config: weather: weather.yweather sun: sun.sun frontend: extra_html_url: - /local/custom_ui/custom-weather-card.html extra_html_url_es5: - /local/custom_ui/custom-weather-card.html weather: - platform: yweather input_text: weather: name: weather group: weather: name: Weather entities: - input_text.weather ``` Salve o arquivo [**custom-weather-card.html**](https://raw.githubusercontent.com/SouzaaThales/Home-Assistant/master/www/custom_ui/custom-weather-card.html) em **www/custom\_ui/** Baixe os ícones [aqui](https://www.amcharts.com/free-animated-svg-weather-icons/) e extraia em: **\HASSIO\config\www\weather\_icons\animated** Caso alguém tenha algum problema em relação à localização, basta adicionar o “woeid”. ``` weather: - platform: yweather woeid: XXXXXXXX ``` Basta clicar [aqui](http://woeid.rosselliot.co.nz/lookup/) para encontrar seu woeid. ---
**Author:** ![CarlosMartins](https://forum.cpha.pt/user_avatar/forum.cpha.pt/carlosmartins/32/61_2.png) [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)\ **Post date:** [29 Maio , 2018 19:49 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/2 "2018-05-29T19:49:43Z")
Nao funcionou, ja baixei os arquivos estao nas pastas e as permissoes estao OK, Segue o print de como fica no HA. ![47](https://forum.cpha.pt/uploads/default/original/1X/82d244b10be4074d6685677f6be9b905cc6f4289.png) ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [29 Maio , 2018 19:57 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/3 "2018-05-29T19:57:59Z")
Já fez hard reload? (F12 depois segurar sobre o ícone de reload) ![image](https://forum.cpha.pt/uploads/default/original/1X/c8e08a4c7b34f68f70d02e86bd1171ada6351adf.png) (que chato isso de ter que colocar 20 caracteres) ---
**Author:** ![CarlosMartins](https://forum.cpha.pt/user_avatar/forum.cpha.pt/carlosmartins/32/61_2.png) [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)\ **Post date:** [29 Maio , 2018 20:09 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/4 "2018-05-29T20:09:21Z")
Continua em branco. ![55](https://forum.cpha.pt/uploads/default/original/1X/b92739f8e67b3ade898481c94e044cc2a17978ee.png) ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [29 Maio , 2018 20:14 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/5 "2018-05-29T20:14:15Z")
Você tem instalado o Custom UI? ---
**Author:** ![ricain](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/r/9fc348/32.png) [@ricain](https://forum.cpha.pt/u/ricain)\ **Post date:** [29 Maio , 2018 20:14 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/6 "2018-05-29T20:14:44Z")
Aqui funcionou a primeira. Adicionaste bem a configuração no frontend? ---
**Author:** ![CarlosMartins](https://forum.cpha.pt/user_avatar/forum.cpha.pt/carlosmartins/32/61_2.png) [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)\ **Post date:** [29 Maio , 2018 20:15 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/7 "2018-05-29T20:15:54Z")
sim tenho, varios icones modificados. ``` config: weather: weather.yweather sun: sun.sun frontend: themes: !include_dir_merge_named themes/ extra_html_url: - /local/custom_ui/state-card-custom-ui.html - /local/custom_ui/custom-weather-card.html extra_html_url_es5: - /local/custom_ui/state-card-custom-ui-es5.html - /local/custom_ui/custom-weather-card.html input_text: weather: name: weather ``` ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [29 Maio , 2018 20:17 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/8 "2018-05-29T20:17:34Z")
> [@souzaathales](#): > > homeassistant: customize: input\_text.weather: custom\_ui\_state\_card: custom-weather-card config: weather: weather.yweather sun: sun.sun frontend: extra\_html\_url: - /local/custom\_ui/custom-weather-card.html extra\_html\_url\_es5: - /local/custom\_ui/custom-weather-card.html weather: - platform: yweather input\_text: weather: name: weather group: weather: name: Weather entities: - input\_text.weather Inseriu todas essas informações? ---
**Author:** ![Encarnacao](https://forum.cpha.pt/user_avatar/forum.cpha.pt/encarnacao/32/2031_2.png) [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)\ **Post date:** [29 Maio , 2018 20:17 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/9 "2018-05-29T20:17:37Z")
``` weather: - platform: yweather ``` ? ---
**Author:** ![CarlosMartins](https://forum.cpha.pt/user_avatar/forum.cpha.pt/carlosmartins/32/61_2.png) [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)\ **Post date:** [29 Maio , 2018 20:24 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/10 "2018-05-29T20:24:03Z")
Acabei de colocar essa linha q estava faltando, mesmo assim continua mesma coisa. Tudo em branco. ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [29 Maio , 2018 20:26 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/11 "2018-05-29T20:26:27Z")
``` homeassistant: customize: input_text.weather: custom_ui_state_card: custom-weather-card config: weather: weather.yweather sun: sun.sun frontend: extra_html_url: - /local/custom_ui/custom-weather-card.html extra_html_url_es5: - /local/custom_ui/custom-weather-card.html weather: - platform: yweather input_text: weather: name: weather group: weather: name: Weather entities: - input_text.weather ``` Tens todas essas informações adicionadas? Não se esqueceu de nenhum? ---
**Author:** ![CarlosMartins](https://forum.cpha.pt/user_avatar/forum.cpha.pt/carlosmartins/32/61_2.png) [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)\ **Post date:** [29 Maio , 2018 20:40 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/12 "2018-05-29T20:40:20Z")
Funcionou perfeitamente ! Como meus arquivos sao separados, eu tinha colocado o a parte abaixo no config: e no nao customize: config: weather: weather.yweather sun: sun.sun Parabens pelo post. ---
**Author:** ![ricain](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/r/9fc348/32.png) [@ricain](https://forum.cpha.pt/u/ricain)\ **Post date:** [29 Maio , 2018 20:42 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/13 "2018-05-29T20:42:44Z")
> **[Removed integration](https://www.home-assistant.io/more-info/removed-integration)** > > The integration you requested has been removed ---
**Author:** ![Paulo\_Morgado](https://forum.cpha.pt/user_avatar/forum.cpha.pt/paulo_morgado/32/133_2.png) [@Paulo\_Morgado](https://forum.cpha.pt/u/Paulo_Morgado)\ **Post date:** [30 Maio , 2018 17:27 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/14 "2018-05-30T17:27:23Z")
falta ai meter a localização, comigo foi para a outro lado nem sei bem a onde mas nao estava certo [http://woeid.rosselliot.co.nz/lookup/oeiras](http://woeid.rosselliot.co.nz/lookup/oeiras) ``` frontend: extra_html_url: - /local/custom_ui/custom-weather-card.html extra_html_url_es5: - /local/custom_ui/custom-weather-card.html weather: - platform: yweather woeid: XXXXXXXX ``` ---
**Author:** ![j\_assuncao](https://forum.cpha.pt/user_avatar/forum.cpha.pt/j_assuncao/32/3_2.png) [@j\_assuncao](https://forum.cpha.pt/u/j_assuncao)\ **Post date:** [30 Maio , 2018 17:37 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/15 "2018-05-30T17:37:58Z")
@Paulo_Morgado, quando publicares código, selecciona o texto e clica no ícone `` ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [30 Maio , 2018 17:40 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/16 "2018-05-30T17:40:35Z")
Por aqui não tive problemas, creio que a informação de localização já venha de acordo com a latitude e longitude. Mas, de qualquer modo irei atualizar a publicação, assim caso alguém tenha problemas já sabe o que pode ser. Obrigado 😃 ---
**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\ **Post date:** [8 Setembro , 2018 23:30 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/18 "2018-09-08T23:30:40Z")
Boas. Estava com a versão 0.73.1 no hassbian. Tudo configurado direito tanto que funcionava. Hoje actualizei para a versão 0.77.3 e não mostra nada para além do nome “Meteorologia” Pelo log dá-me este erro: [http://192.168](http://192.0.0.168/).\*\* _. **:** _ /local/custom\_ui/custom-weather-card.html:246:33 Uncaught TypeError: Cannot read property ‘unit\_system’ of undefined 23:56 components/system\_log/ **init**.py (ERROR) De que será? Obrigado ---
**Author:** ![souzaathales](https://forum.cpha.pt/user_avatar/forum.cpha.pt/souzaathales/32/445_2.png) [@souzaathales](https://forum.cpha.pt/u/souzaathales)\ **Post date:** [9 Setembro , 2018 00:07 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/19 "2018-09-09T00:07:17Z")
Basta substituir o arquivo Custom Weather Card [https://raw.githubusercontent.com/SouzaaThales/Home-Assistant/master/www/custom\_ui/custom-weather-card.html](https://raw.githubusercontent.com/SouzaaThales/Home-Assistant/master/www/custom_ui/custom-weather-card.html) Depois, vá até a página atualize com CTRL + F5 ---
**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\ **Post date:** [9 Setembro , 2018 10:26 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/20 "2018-09-09T10:26:10Z")
@souzaathales Muito obrigado. Já funciona 😉 ---
**Author:** ![benis\_froms](https://forum.cpha.pt/user_avatar/forum.cpha.pt/benis_froms/32/16085_2.png) [@benis\_froms](https://forum.cpha.pt/u/benis_froms)\ **Post date:** [21 Janeiro , 2024 21:29 UTC](https://forum.cpha.pt/t/cartao-de-previsao-do-tempo-com-custom-ui/492/21 "2024-01-21T21:29:06Z")
Para criar um mapa meteorológico com IU personalizada, são necessárias competências de programação, especialmente em linguagens como HTML, CSS e possivelmente JavaScript, dependendo do nível de interatividade pretendido. Também vale a pena consultar o exemplo de [https://meteum.ai/weather/pt-BR/concordia](https://meteum.ai/weather/pt-BR/concordia) para ver como está organizada a previsão meteorológica. Também pode ser necessário aceder à API meteorológica para obter os dados de que necessita.