Cartão de previsão do tempo com Custom UI

souzaathales · 29 Maio , 2018 15:19

Boas, hoje venho compartilhar uma personalização para o cartão de previsão do tempo.

E caso utilize o idioma em português, ele se adaptará também.

Para que funciona, você precisará ter instalado o componente Custom UI. Caso ainda não tenha, clique aqui 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 em www/custom_ui/
Baixe os ícones aqui 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 para encontrar seu woeid.

CarlosMartins · 29 Maio , 2018 19:49

Nao funcionou, ja baixei os arquivos estao nas pastas e as permissoes estao OK,
Segue o print de como fica no HA.

souzaathales · 29 Maio , 2018 19:57

Já fez hard reload? (F12 depois segurar sobre o ícone de reload)

(que chato isso de ter que colocar 20 caracteres)

CarlosMartins · 29 Maio , 2018 20:09

Continua em branco.

souzaathales · 29 Maio , 2018 20:14

Você tem instalado o Custom UI?

ricain · 29 Maio , 2018 20:14

Aqui funcionou a primeira.

Adicionaste bem a configuração no frontend?

CarlosMartins · 29 Maio , 2018 20:15

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

souzaathales · 29 Maio , 2018 20:17

Inseriu todas essas informações?

Encarnacao · 29 Maio , 2018 20:17

weather:
  - platform: yweather

?

CarlosMartins · 29 Maio , 2018 20:24

Acabei de colocar essa linha q estava faltando, mesmo assim continua mesma coisa.
Tudo em branco.

souzaathales · 29 Maio , 2018 20:26

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?

CarlosMartins · 29 Maio , 2018 20:40

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.

ricain · 29 Maio , 2018 20:42

https://www.home-assistant.io/components/sensor.yweather/

Paulo_Morgado · 30 Maio , 2018 17:27

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

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

j_assuncao · 30 Maio , 2018 17:37

@Paulo_Morgado, quando publicares código, selecciona o texto e clica no ícone </>

souzaathales · 30 Maio , 2018 17:40

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

karma · 8 Setembro , 2018 23:30

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.** . : /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

souzaathales · 9 Setembro , 2018 00:07

Basta substituir o arquivo Custom Weather Card

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

karma · 9 Setembro , 2018 10:26

@souzaathales Muito obrigado. Já funciona

benis_froms · 21 Janeiro , 2024 21:29

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 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.