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

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.

6 Curtiram

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

1 Curtiu

Já fez hard reload? (F12 depois segurar sobre o ícone de reload)
image
(que chato isso de ter que colocar 20 caracteres)

Continua em branco.

55

Você tem instalado o Custom UI?

Aqui funcionou a primeira.

Adicionaste bem a configuração no frontend?

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

Inseriu todas essas informações?

weather:
  - platform: yweather

?

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

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?

1 Curtiu

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.

1 Curtiu

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

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
2 Curtiram

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

1 Curtiu

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 :smiley:

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

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

2 Curtiram

@souzaathales Muito obrigado. Já funciona :wink:

1 Curtiu

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.


Copyright © 2017-2021. Todos os direitos reservados
CPHA.pt - info@cpha.pt


FAQ | Termos de Serviço/Regras | Política de Privacidade