Home Assistant -kortti, joka näyttää Ilmatieteen laitoksen sadetutkan ja salamahavainnot kuvaesityksenä kojelaudalla.
Lisää HACSin frontend-puolelle mukautettu repo kosmosnautti/ha-fmi-radar kategoriaan lovelace ja asenna HACSista sen jälkeen "Ilmatieteen laitoksen sadetutka- ja salamahavainnot".
- Kopioi fmi-radar.js -tiedosto Home Assistantin /config/www -polkuun
- Avaa Home Assistantin asetukset ja sen alta kojelaudat
- Klikkaa oikeasta yläkulmasta löytyvää kolmen pisteen kuvaketta ja valitse avautuvasta valikosta resurssit
- Klikkaa lisää resurssi -painiketta
- Aseta avautuvasta ikkunasta URLiksi /local/fmi-radar.js, valitse tyypiksi JavaScript-moduuli ja klikkaa luo
Konfiguroinnissa tarvittavan kohteen IDn selvitys onnistuu siirtymällä selaimella osoitteeseen https://ilmatieteenlaitos.fi/ ja hakemalla hakukentästä sääennuste halutulle sijainnille. Kun ennustesivu avautuu, rullaa kohtaan Sadetutka- ja salamahavainnot. Klikkaa tutkakuvan päällä hiiren oikealla painikkeella ja valitse Avaa kuva uudessa välilehdessä (kielestä ja selaimesta riippuen). Selaimen osoiteriviltä näet avautuvan kuvan URL-osoitteen noudattelevan seuraavanlaista kaavaa:
https://cdn.fmi.fi/weather-observations/products/radar-tiles/station_100971/...
Tässä esimerkkiosoitteessa näkyvä numero 100971 on haluttu kohteen ID, jota käytetään kortin konfiguroinnissa.
Huom! Jos haluat laajempia tutkakuvia, tarkan kohteen IDn haku edellä mainitulla tavalla ei ole välttämätöntä. Voit käyttää kohteen IDnä myös seuraavan taulukon arvoja:
Kohteen ID | Määritelmä |
---|---|
suomi1h | Koko Suomen sadetutka 1 h aikavälillä + ennuste |
suomi | Koko Suomen sadetutka 15 min aikavälillä |
etela-suomi | Etelä-Suomen sadetutka 15 min aikavälillä |
keski-suomi | Keski-Suomen sadetutka 15 min aikavälillä |
pohjois-suomi | Pohjois-Suomen sadetutka 15 min aikavälillä |
Lisää kojelautaan uusi kortti ja valitse korttiluettelosta Mukautettu: Ilmatieteen laitoksen sadetutka- ja salamahavainnot. Kortti sisältää visuaalisen editorin jolla pystyy muokkaamaan kaikkia kortin tarjoamia ominaisuuksia.
Kuvan päälle voi halutessa piirtää CSS-tyylittelyä apua käyttäen esimerkiksi erilaisia muotoja tai lisätä tekstiä. Tämä tapahtuu määrittelemällä halutut elementit JSON-muodossa kortin konfiguraattorissa. Kortti generoi tämän jälkeen JSON-datan perusteella div-elementtejä kuvien päälle halutulla CSS-tyylittelyllä.
Kortti edellyttää JSONilta seuraavanlaista muotoa:
{
"ensimmäisen_elementin_nimi": {
"teksti": "Kuvien päälle luotavan div-elementin sisään lisättävä teksti (ei pakollinen)",
"css": "Kuvien päälle luotavan div-elementin tyyli (pakollinen)"
},
"toisen_elementin_nimi": {
"teksti": "...",
"css": "..."
},
...
}
Ympyrä 2 pikseliä leveällä punaisella reunuksella:
{"ympyrä":{"css":"width:10%;height:8%;top:46%;left:45%;border:2px solid red;border-radius:50%;"}}
Neliö 2 pikseliä leveällä sinisellä reunuksella ja "Koti" -tekstillä:
{"neliö":{"teksti":"Koti","css":"width:10%;height:8%;top:46%;left:45%;border:2px solid blue;color:black;text-align:center;line-height:50px;"}}
Yllä olevat esimerkit yhdistettyinä ja siirrettyinä:
{"ympyrä":{"css":"width:10%;height:8%;top:35%;left:45%;border:2px solid red;border-radius:50%;"},"neliö":{"teksti":"Koti","css":"width:10%;height:8%;bottom:35%;left:45%;border:2px solid blue;color:black;text-align:center;line-height:50px;"}}