Animowany panel pogody

Bartosz Barabasz

W tym wpisie chciałem pokazać jak przygotować panel pogody w Home Assistant. Na początku pokażę w jaki sposób działa Integracja Meteorologisk institutt oparta na chmurze, następnie pokaże, w jaki sposób przygotować skrypt konfigurujący dla prognozy pogody na kolejne dni, a potem jak spersonalizować wygląd elementów z wykorzystaniem niestandardowej wtyczki Custom-Button-Card. Najbardziej chciałbym pokazać w jaki sposób przygotować animowany pasek z pogodą, który będziecie mogli umieścić w dowolnym dashbordzie w swoim Home Assisstant. Na koniec dodatkowo pokażę w jaki sposób zintegować się z danymi na temat rzeki w Twojej okolicy na podstawie danych dostarczanych przez IMGW-PIB (czyli Polski Instytut Meteorologii i Gospodarki Wodnej) - dzięki czemu będziemy mogli monitorować stan rzek z poziomu Home Assistant, co przy zagrożeniu powodziowym jak to miało miejsce w ostatnim czasie, może nas zaalarmować.

Norweski Instytut Meteorologiczny ( norw . Meteorologisk institutt ), znany również na świecie jako MET Norway , jest krajowym instytutem meteorologicznym Norwegii . Dostarcza prognozy pogody do celów cywilnych i wojskowych oraz prowadzi badania w zakresie meteorologii, oceanografii i klimatologii . Jego siedziba znajduje się w Oslo , a biura i stacje są w innych miastach i miejscowościach.

Skrypt na kolejne dni

Na początku w pliku configuration.yaml dodany skrypt szablonu, który pobiera prognozę pogody co godzinę i przy starcie Home Assistant, a następnie tworzy sensor z informacjami o prognozie dziennej. Będzie on nam potrzebny, aby móg stworzyć prognozę pogody dla kolejnych dni tygodnia.

template:
  - trigger:
      - platform: time_pattern
        hours: /1
      - platform: homeassistant
        event: start
    action:
      - service: weather.get_forecasts
        data:
          type: daily
        target:
          entity_id: weather.dom
        response_variable: daily
    sensor:
      - name: Weather Forecast Daily
        unique_id: weather_forecast_daily
        state: "{{ states('weather.dom') }}"
        attributes:
          temperature: "{{ state_attr('weather.dom', 'temperature') }}"
          temperature_unit: "{{ state_attr('weather.dom', 'temperature_unit') }}"
          forecast: "{{ daily['weather.dom'].forecast }}"

Animowane ikony

Aby móc w Home Assistant stworzyć animowany panel pogody, musimy pobrać animowane ikony, najlepiej zrobić to z dowolnej strony. Wpisany w google animated wheather icon i jaka pierwsza pokazuje nam się strona flaticon. Zobaczcie mamy tutaj listę ikon, jak najedziemy na każdą z nich zaczyna nam się animacja. Klikamy i pobieramy plik – zapisujemy na dysku. Musimy każdy plik nazwać nazwą warunków. Ich listę przedstawiam tutaj.

Podmiot weather może zapewnić warunki wymienione poniżej jako swój stan:

Bezchmurne, noc : Niebo jest czyste w nocy clear-night.
Zachmurzenie : Na niebie jest wiele chmur cloudy.
Mgła : Gęsta mgła lub mgła ogranicza widoczność fog.
Grad : Pada grad hail.
Błyskawice : Występują burze z piorunami lightning.
Błyskawica, deszcz : Występuje burza z piorunami i opadami deszczu lightning-rainy.
Częściowe zachmurzenie : Niebo jest częściowo pokryte chmurami partlycloudy.
Ulewa : Pada ulewny deszcz pouring.
Deszczowy : Pada deszcz rainy.
Snowy : Pada śnieg snowy.
Śnieżno, deszczowo : Pada jednocześnie śnieg i deszcz snowy-rainy.
Słonecznie : Niebo jest czyste i świeci słońce sunny.
Wietrznie : Jest wietrznie windy.
Wietrznie, pochmurno : Jest wietrznie i pochmurno windy-variant.
Wyjątkowe : Występują wyjątkowe warunki pogodowe exceptional.

Element pogody

Pierwszym przykładem będzie stworzenie tego typu elementu, z animowaną ikoną, pełny kod umieszczam poniżej.

square: false
type: grid
cards:
  - type: custom:button-card
    name: |
      [[[
        return states['sensor.date'].state
      ]]]
    label: |
      [[[
        return states['sensor.time'].state
      ]]]
    show_label: true
    styles:
      grid:
        - grid-template-areas: "\"n\" \"l\""
      card:
        - overflow: visible
        - background: none;
        - border: 0px
      name:
        - justify-self: start
        - font-size: 15px
        - padding-left: 5px
      label:
        - justify-self: start
        - font-size: 30px
        - font-weight: bold
        - padding-right: 5px
  - type: custom:button-card
    name: |
      [[[
        return '<ha-icon icon="mdi:home-thermometer-outline" style="width:18px;height:18px"></ha-icon> ' + states['sensor.nspanell_analog_temperature1'].state  + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    label: |
      [[[
        return states['sensor.weather_forecast_daily'].attributes.temperature + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    show_label: true
    tap_action:
      action: navigate
      navigation_path: /pogoda-przyklad/pogoda-podzakladka
    custom_fields:
      icon: |
        [[[
          var pogoda = states['sensor.weather_forecast_daily'].state;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50">';
        ]]]
    styles:
      grid:
        - grid-template-areas: "\"icon n\" \"icon l\""
      card:
        - overflow: visible
        - background: none;
        - border: 0px
      name:
        - justify-self: end
        - font-size: 15px
        - padding-right: 5px
      label:
        - justify-self: end
        - font-size: 30px
        - font-weight: bold
        - padding-right: 5px
      custom_fields:
        icon: null
columns: 2

Panel pogody przykład 1

square: false
type: grid
cards:
  - type: custom:button-card
    name: |
      [[[
        return states['sensor.date'].state
      ]]]
    label: |
      [[[
        return states['sensor.time'].state
      ]]]
    show_label: true
    styles:
      grid:
        - grid-template-areas: "\"n\" \"l\""
      card:
        - overflow: visible
        - background: none;
        - border: 0px
      name:
        - justify-self: start
        - font-size: 15px
        - padding-left: 5px
      label:
        - justify-self: start
        - font-size: 30px
        - font-weight: bold
        - padding-right: 5px
  - type: custom:button-card
    name: |
      [[[
        return '<ha-icon icon="mdi:home-thermometer-outline" style="width:18px;height:18px"></ha-icon> ' + states['sensor.nspanell_analog_temperature1'].state  + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    label: |
      [[[
        return states['sensor.weather_forecast_daily'].attributes.temperature + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    show_label: true
    custom_fields:
      icon: |
        [[[
          var pogoda = states['sensor.weather_forecast_daily'].state;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50">';
        ]]]
    styles:
      grid:
        - grid-template-areas: "\"icon n\" \"icon l\""
      card:
        - overflow: visible
        - background: none;
        - border: 0px
      name:
        - justify-self: end
        - font-size: 15px
        - padding-right: 5px
      label:
        - justify-self: end
        - font-size: 30px
        - font-weight: bold
        - padding-right: 5px
      custom_fields:
        icon: null
columns: 2
type: vertical-stack
cards:
  - type: custom:button-card
    entity: sensor.weather_forecast_daily
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: "\"icon dzien warunki temperatura\""
        - grid-template-columns: 80px 70px max-content  1fr
      card:
        - padding: 5px
        - border: 0px
        - background: none
      custom_fields:
        dzien:
          - justify-self: start
          - font-size: 15px
          - font-weight: 500
          - text-transform: capitalize
        warunki:
          - justify-self: center
          - font-size: 14px
          - font-weight: 400
        temperatura:
          - justify-self: end
        icon:
          - justify-self: center
    custom_fields:
      dzien: |
        [[[
          return helpers.formatDateWeekday(entity.attributes.forecast[0].datetime)
        ]]]
      warunki: |
        [[[ 
          return entity.attributes.forecast[0].condition
        ]]]
      temperatura: |
        [[[ 
          return entity.attributes.forecast[0].temperature +
          entity.attributes.temperature_unit  
        ]]]
      icon: |
        [[[
          var pogoda = entity.attributes.forecast[0].condition;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50" height="50">';
        ]]]
  - type: custom:button-card
    entity: sensor.weather_forecast_daily
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: "\"icon dzien warunki temperatura\""
        - grid-template-columns: 80px 70px max-content  1fr
      card:
        - padding: 5px
        - border: 0px
        - background: none
      custom_fields:
        dzien:
          - justify-self: start
          - font-size: 15px
          - font-weight: 500
          - text-transform: capitalize
        warunki:
          - justify-self: center
          - font-size: 14px
          - font-weight: 400
        temperatura:
          - justify-self: end
        icon:
          - justify-self: center
    custom_fields:
      dzien: |
        [[[
          return helpers.formatDateWeekday(entity.attributes.forecast[1].datetime)
        ]]]
      warunki: |
        [[[ 
          return entity.attributes.forecast[1].condition
        ]]]
      temperatura: |
        [[[ 
          return entity.attributes.forecast[1].temperature +
          entity.attributes.temperature_unit  
        ]]]
      icon: |
        [[[
          var pogoda = entity.attributes.forecast[1].condition;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50" height="50">';
        ]]]
  - type: custom:button-card
    entity: sensor.weather_forecast_daily
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: "\"icon dzien warunki temperatura\""
        - grid-template-columns: 80px 70px max-content  1fr
      card:
        - padding: 5px
        - border: 0px
        - background: none
      custom_fields:
        dzien:
          - justify-self: start
          - font-size: 15px
          - font-weight: 500
          - text-transform: capitalize
        warunki:
          - justify-self: center
          - font-size: 14px
          - font-weight: 400
        temperatura:
          - justify-self: end
        icon:
          - justify-self: center
    custom_fields:
      dzien: |
        [[[ 
          return helpers.formatDateWeekday(entity.attributes.forecast[2].datetime)
        ]]]
      warunki: |
        [[[ 
          return entity.attributes.forecast[2].condition
        ]]]
      temperatura: |
        [[[ 
          return entity.attributes.forecast[2].temperature +
        entity.attributes.temperature_unit  ]]]
      icon: |
        [[[
          var pogoda = entity.attributes.forecast[2].condition;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50" height="50">';
        ]]]
  - type: custom:button-card
    entity: sensor.weather_forecast_daily
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: "\"icon dzien warunki temperatura\""
        - grid-template-columns: 80px 70px max-content  1fr
      card:
        - padding: 5px
        - border: 0px
        - background: none
      custom_fields:
        dzien:
          - justify-self: start
          - font-size: 15px
          - font-weight: 500
          - text-transform: capitalize
        warunki:
          - justify-self: center
          - font-size: 14px
          - font-weight: 400
        temperatura:
          - justify-self: end
        icon:
          - justify-self: center
    custom_fields:
      dzien: |
        [[[ 
          return helpers.formatDateWeekday(entity.attributes.forecast[3].datetime)
        ]]]
      warunki: |
        [[[ 
          return entity.attributes.forecast[3].condition
        ]]]
      temperatura: |
        [[[ 
          return entity.attributes.forecast[3].temperature +
        entity.attributes.temperature_unit  ]]]
      icon: |
        [[[
          var pogoda = entity.attributes.forecast[3].condition;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50" height="50">';
        ]]]
  - type: custom:button-card
    entity: sensor.weather_forecast_daily
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: "\"icon dzien warunki temperatura\""
        - grid-template-columns: 80px 70px max-content  1fr
      card:
        - padding: 5px
        - border: 0px
        - background: none
      custom_fields:
        dzien:
          - justify-self: start
          - font-size: 15px
          - font-weight: 500
          - text-transform: capitalize
        warunki:
          - justify-self: center
          - font-size: 14px
          - font-weight: 400
        temperatura:
          - justify-self: end
        icon:
          - justify-self: center
    custom_fields:
      dzien: |
        [[[ 
          return helpers.formatDateWeekday(entity.attributes.forecast[4].datetime)
        ]]]
      warunki: |
        [[[ 
          return entity.attributes.forecast[4].condition
        ]]]
      temperatura: |
        [[[ 
          return entity.attributes.forecast[4].temperature +
        entity.attributes.temperature_unit  ]]]
      icon: |
        [[[
          var pogoda = entity.attributes.forecast[4].condition;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.svg" width="50" height="50">';
        ]]]

Panel pogody przykład 2

square: false
type: grid
cards:
  - type: custom:button-card
    name: |
      [[[ 
        return '<ha-icon icon="mdi:home-thermometer-outline" style="width: 18px; height: 18px;"></ha-icon> ' + states['sensor.nspanell_analog_temperature1'].state + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    label: |
      [[[ 
        return states['sensor.weather_forecast_daily'].attributes.temperature + states['sensor.weather_forecast_daily'].attributes.temperature_unit
      ]]]
    show_label: true
    custom_fields:
      icon: |
        [[[
          var pogoda = states['sensor.weather_forecast_daily'].state;
          return '<img src="/local/pogoda-ikony/'+ pogoda +'.gif" width="150" height="150">';
        ]]]
    styles:
      grid:
        - grid-template-areas: "\"icon\" \"n\" \"l\""
        - grid-template-rows: min-content
      card:
        - border: 0px
      name:
        - font-size: 15px
        - margin: 0px
      label:
        - font-size: 30px
        - font-weight: bold
        - margin: 0px
      custom_fields:
        icon:
          - margin: 0px
columns: 1
type: custom:button-card
entity: sensor.weather_forecast_daily
show_icon: false
show_name: false
styles:
  grid:
    - grid-template-areas: "\"icon dzien warunki temperatura\""
    - grid-template-columns: 1fr 1fr 1fr 1fr
  card:
    - padding: 5px
    - border: 0px
  custom_fields:
    dzien:
      - justify-self: start
      - font-size: 15px
      - font-weight: 500
      - text-transform: capitalize
    warunki:
      - justify-self: center
      - font-size: 14px
      - font-weight: 400
    temperatura:
      - justify-self: end
    icon:
      - justify-self: center
custom_fields:
  dzien: |
    [[[ 
      return helpers.formatDateWeekday(entity.attributes.forecast[0].datetime)
    ]]]
  warunki: |
    [[[ 
      return entity.attributes.forecast[0].condition
    ]]]
  temperatura: |
    [[[ 
      return entity.attributes.forecast[0].temperature +
    entity.attributes.temperature_unit  ]]]
  icon: |
    [[[
      var pogoda = entity.attributes.forecast[0].condition;
      return '<img src="/local/pogoda-ikony/'+ pogoda +'.gif" width="50" height="50">';
    ]]]

W kategorii: Interfejs użytkownika

0 0 votes

Article Rating

7 komentarzy

najstarszy

najnowszy oceniany

Inline Feedbacks

View all comments

Dae-Hyun

1 miesiąc temu

Dzień dobry. Co do wyświetlania nazw warunków zrobiłem tłumczenie skoro to polski kanał to warto też mieć pogodę po polsku. Pozdrawiam

warunki: |
  [[[
   var pl = entity.attributes.forecast[0].condition;
   if (pl == „cloudy”)
   return „Pochmurno”;
   else if (pl == „clear-night”)
   return „Bezchmurnie”;
   else if (pl == „fog”)
   return „Mgła”;
   else if (pl == „hail”)
   return „Grad”;
   else if (pl == „lightning”)
   return „Błyskawice”;
   else if (pl == „lightning-rainy”)
   return „Błyskawica, deszcz”;
   else if (pl == „partlycloudy”)
   return „Częściowe zachmurzenie”;
   else if (pl == „pouring”)
   return „Ulewa”;
   else if (pl == „rainy”)
   return „Deszczowy”;
   else if (pl == „snowy”)
   return „Śnieg”;
   else if (pl == „snowy-rainy”)
   return „Śnieżno, deszczowo”;
   else if (pl == „sunny”)
   return „Słonecznie”;
   else if (pl == „windy”)
   return „Wietrznie”;
   else if (pl == „windy-variant”)
   return „Wietrznie, pochmurno”;
   else if (pl == „exceptional”)
   return „Wyjątkowe”;
   else
   return „błąd połączenia”;
  ]]]

Odpowiedz

Bartosz Barabasz

Autor

Reply to Dae-Hyun

1 miesiąc temu

Dziękuję 🙂 na pewno się przyda

Odpowiedz

raduch85

Reply to Dae-Hyun

1 miesiąc temu

Podpytam o podpowiedź.
Podmieniłem to w karcie pod warunkami ale coś znowu musiałem zrobić źle ;/ bo nie tłumaczy

Odpowiedz

marvet

Reply to raduch85

1 miesiąc temu

Trzeba zamienić (przynajmniej u mnie) cudzysłowia:
jest „cloudy”a powinno być „cloudy”i tak trzeba poprawić cały kod.

https://zapodaj.net/plik-EUS738uP4v

tutaj masz foto bo w tekscie zmienia niestety te cudzysłowia.

Last edited 1 miesiąc temu by marvet

Odpowiedz

Piotr

Reply to Dae-Hyun

1 miesiąc temu

Fajnie, ale gdzie to wkleić ? 🙂

Odpowiedz

Radek

Reply to Piotr

15 dni temu

Podpinam się, próbowałem na kilka sposobów ale wciąż błędy

Odpowiedz

Radek

Reply to Piotr

14 dni temu

warunki: |
  [[[
   var condition = entity.attributes.forecast[4].condition;
   var translations = {
    „cloudy”: „Pochmurno”,
    „clear-night”: „Bezchmurnie”,
    „fog”: „Mgła”,
    „hail”: „Grad”,
    „lightning”: „Błyskawice”,
    „lightning-rainy”: „Błyskawica, deszcz”,
    „partlycloudy”: „Częściowe zachmurzenie”,
    „pouring”: „Ulewa”,
    „rainy”: „Deszczowo”,
    „snowy”: „Śnieg”,
    „snowy-rainy”: „Śnieżno, deszczowo”,
    „sunny”: „Słonecznie”,
    „windy”: „Wietrznie”,
    „windy-variant”: „Wietrznie, pochmurno”,
    „exceptional”: „Wyjątkowe”
   };
   return translations[condition] || „Błąd połączenia”;
  ]]]

Odpowiedz

Animowany panel pogody

Bartosz Barabasz

w artykule:

Skrypt na kolejne dni

Animowane ikony

Element pogody

Panel pogody przykład 1

Panel pogody przykład 2

Najczęściej poruszane tematy

Najnowsze wpisy

Urządzenia Home Assistant w Google Home, Apple Home i Alexa

Ulanzi TC001 – Integracja AWTRIX w Home Assistant

Tryb kiosku w Home Assistant z wtyczką Kiosk Mode

Animowany panel pogody

Bartosz Barabasz

w artykule:

Skrypt na kolejne dni

Animowane ikony

Element pogody

Panel pogody przykład 1

Panel pogody przykład 2

Najczęściej poruszane tematy

Tagi

Najnowsze wpisy

Urządzenia Home Assistant w Google Home, Apple Home i Alexa

Ulanzi TC001 – Integracja AWTRIX w Home Assistant

Tryb kiosku w Home Assistant z wtyczką Kiosk Mode