Sonntag, 12. Mai 2013, 18:59 Uhr

Wetter-Icons als Web-Font in ein Dashboard einbinden

Derzeit arbeite ich mit Hochdruck an einem Dashboard, welches ich in unserer Mietwohnung in Form eines TFT-Bildschirms beim Eingangsbereich platzieren möchte. Das Dashboard basiert softwaretechnisch auf HTML, CSS, JavaScript und PHP. Es integriert gecachte HTML-Dateien, JSON-Abfragen (MEZI, Twitter) und sogar einen iCalendar.

Ein Element (resp. „Tile“) des Dashboards wird die Wettervorhersage für den morgigen Tag sein. Um nicht nur eine qualitative Beschreibung des Wetters anzuzeigen, sondern auch ein Icon, habe ich mich natürlich vom derzeitigen (technologischen wie designtechnischen) Platzhirschen forecast.io inspirieren lassen. Dessen mit HTML5-Canvas animierten Icons waren dann aber doch Overkill für mich.

Stattdessen habe ich auf die Meteocons Web-Font von Alessio Atzeni zurückgegriffen. Die Web-Font ist in der Public Domain und lässt sich somit problemlos in ein HTML5/CSS3-Web-Projekt einbinden.

Leider sind die Icons meines Wissens nicht einem standardisierten Wettertyp zugeordnet, weshalb ich dieses Mapping mittels eines PHP-Arrays von Hand nachholen musste. Das Resultat lässt sich durchaus sehen:

eMeidi.local Dashboard Weather Forecast

Tags: , , , ,
Labels: Web

3 Kommentare Kommentare

christian sagt:

Nett.

Was benutzt du als Datenquelle?

(Ok, das ist jetzt mehr Werbung, aber ich habe gerade eine neue Version unserer API geschrieben und unsere Demo-Daten beinhalten sonst auch unsere Wettersymbole für Bern: http://mdx.meteotest.ch/info/samples#weather)

Mario Aeby sagt:

Schön von dir zu hören (und das vor dem Gurten) :-) Ich verwende die Wetterdaten von Tagi.ch, indem ich die Wetterseite einer Stadt als HTML herunterlade und dann parse (DOMDocument). Vgl.

http://weather2ics.mad4you.homeip.net/Bern

mit welchem ich die Wettervorhersage in einen iCalendar umwandle.

Liefert ihr etwa diese Daten?

Mike sagt:

Hallo,

darf ich fragen was Du für einen TFT Bildschirm verwendest?

Und was für ein PC wird für die Ansteuerung verwendet?

Kommentar erfassen