Smart Mirror – Die Software
Der schönste Smart Mirror funktioniert nicht ohne ein wenig Software – in diesem Fall eine HTML-Seite mit PHP, CSS und Javaskript. In diesem Beitrag wird daher der Aufbau des Quellcodes erläutert. So lässt sich die Seite relativ einfach den eigenen Wünschen anpassen. Informationen zum hardwareseitigen Aufbau des Smart Mirror findet ihr im ersten Teil des Projekts. Übrigens hatte ich im Zuge meiner Recherchen zum Bau eines Smart Mirror auch einige fertige Apps ausprobiert. Aber mit keiner konnte ich das darstellen, was ich haben wollte. Daher habe ich mir die Seite selber erstellt. Für die ganz Eiligen gibt es am Ende des Beitrags einen Link zum Download der fertigen Datei. Jetzt aber zu den einzelnen Bereichen der Datei:
Der Kopfbereich
<meta http-equiv="refresh" content="300; URL=http://www.frank-schumacher.de/wetter/">
Die Seite ruft sich alle 300 Sekunden selber neu auf um Wetterdaten und News zu aktualisieren.
<link href="https://fonts.googleapis.com/css?family=Kanit:100" rel="stylesheet">
Lädt den Font „Kanit“ von den Google-Servern. Darauf kann natürlich verzichtet werden, wenn eine Standardschriftart wie z.B. Arial o.ä. verwendet werden soll.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
Lädt den Icon-Font „Awesome“ herunter. Daraus verwende ich z.B. das Icon vor den News.
Javaskript-Bereich
<script language="JavaScript"> <!-- var interval = window.setInterval("uhr_anzeigen()", 1000); function uhr_anzeigen() { var Datum = new Date(); var stunde = Datum.getHours(); var minute = Datum.getMinutes(); var sekunde = Datum.getSeconds(); Zeit = ((stunde < 10) ? "" : " ") + stunde; Zeit += ((minute < 10) ? ":0" : ":") + minute; document.getElementById('uhr').innerHTML=Zeit; } // --> </script>
Das kleine Javaskript berechnet die aktuelle Uhrzeit, welche dann später auf der Wetterseite angezeigt wird. Auf die Anzeige der Sekunden habe ich verzichtet. Das wird zu unruhig auf dem Bildschirm. Und die Uhr läuft natürlich kontinuierlich durch und wird nicht – wie die restliche Seite – alle 5 Minuten aktualisiert ;-).
CSS-Bereich
<style type="text/css"> html, body, td {color:white; background-color:black; font-family:Kanit, sans-serif; font-size:24px; line-height:28px} #big {font-size:100px} #news {font-size:24px; line-height:32px} </style>
Ein wenig CSS für die Formatierung der Schriftfarbe und -größe sowie der Hintergrundfarbe.
Startet Javaskript beim Laden der Seite
<body onload="uhr_anzeigen()">
Initialisiert die Uhrzeitanzeige beim Laden der Seite.
Daten abholen
$rss = simplexml_load_file('http://www.tagesschau.de/xml/rss2');
Holt den RSS-Feed für die News ab. Ich habe mich für den Feed der Tagesschau entschieden. Hier kann natürlich jeder geeignete RSS-Feed geladen werden.
$jsonf = file_get_contents('http://api.openweathermap.org/data/2.5/forecast/daily?q=Bielefeld&APPID=xxxxxx&lang=de&units=metric&cnt=1'); $jsona = file_get_contents('http://api.openweathermap.org/data/2.5/weather?q=Bielefeld&APPID=xxxxxx&lang=de&units=metric');
Holt die Wetterdaten für Vorhersage ($jsonf) und aktuelles Wetter ($jsona) beim Wetterdienst OpenWeatherMap ab. Um per API-Schnittstelle die Wetterdaten abholen zu können, braucht man einen API-Key von OpenWeatherMap. Dazu ist ein kostenloser Account nötig, den man auf dieser Seite beantragen kann. Der API-Key wird dann im Link an Stelle der xxxxxx eingetragen. Im Beispiel werden die Wetterdaten für Bielefeld abgeholt.. Bei größeren Städten funktioniert das über den Namen der Stadt. Bei kleineren Städten (oder wenn man es besonders genau wissen will) müssen die Geokoordinaten eingegeben werden. Wie das geht, wird auf den Hilfeseiten von OpenWeatherMap sehr gut erläutert.
Daten ausgeben
echo "<table width='100%' border='0'>"; echo "<tr>"; echo "<td id='big' width='200px'>" . round($aktuell['main']['temp'], 1) . "º </td>"; echo "<td width='150px'><img src=icons/" . $aktuell['weather'][0]['icon'] . ".png></td>"; echo "<td id='big' align='right'><div id='uhr'><!--Uhrzeit--></div></td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan='2'>" . $aktuell['weather'][0]['description'] . "</td>"; echo "<td align='right'>" . $tage[$tag] . "</td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan='2'>Luftfeuchte: " . $aktuell['main']['humidity'] . " %</td>"; echo "<td align='right'>" . strftime('%d. ') . $monatsnamen[$monat] . strftime(' %Y') . "</td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan='2'>Luftdruck: " . $aktuell['main']['pressure'] . " hpa</td>"; echo "<td align='right'> </td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan='2'>Sonnenaufgang: " . date('H:i',$aktuell['sys']['sunrise']) . " Uhr</td>"; echo "<td align='right'> </td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan='2'>Sonnenuntergang: " . date('H:i',$aktuell['sys']['sunset']) . " Uhr</td>"; echo "<td align='right'> </td>"; echo "</tr>"; echo "</table>"; echo "<br><br>";
In diesem Bereich werden die Wetterdaten sowie Datum und Uhrzeit ausgegeben und durch eine Tabelle an der richtigen Stelle angezeigt. Die Anordnung kann selbstverständlich nach den eigenen Vorstellungen angepasst werden.
echo "<table width='100%' border='0'><tr><td id='news'>"; $i = 0; foreach ($rss->channel->item as $item) { if ($i > 4) { break; } echo "<i class='fa fa-file-text-o fa-fw'></i> " . $item->title . "<br/>"; $i++; } echo "</td></tr></table>";
Fehlen noch die Nachrichten aus dem RSS-Feed, die in diesem Bereich ausgegeben werden. In meinem Fall werden immer die letzten fünf Meldungen des Feeds ausgegeben. Wer mehr oder weniger Nachrichten sehen möchte, der muss den Wert ($i > 4) entsprechend anpassen.
Über diesen Link kann die fertige Datei im Zip-Fornat heruntergeladen werden: Download index.php
Und so sieht die Seite im Browser bzw. später auf dem Smart Mirror aus:
