Smarte Wetterstation mit Netatmo im Eigenbau

Netatmo Wetterstation
Unser Endergebnis der smarten Wetterstation im Eigenbau

Mit der Netatmo ist bei mir bereits seit geraumer Zeit eine smarte Wetterstation im Einsatz, die im Innenraum Temperatur, CO2-Gehalt, Luftfeuchtigkeit und Lautstärke misst. Ebenso wird im Garten die Temperatur und auch die Luftfeuchtigkeit gemessen. Erweitern kann man das System ferner um einen Regen- und Windsensor.

Dabei werden alle Messdaten gut aufbereitet in einer App angezeigt und können auch über den Browser betrachtet werden.

Netatmo Datenausgabe im Browser
Datenausgabe von Netatmo im Browser

So weit, so gut. In der Praxis gestört hat mich dabei immer, dass man aktiv die App öffnen oder den Browser nutzen muss, um an die aktuellen Daten zu kommen. Das ist nicht wirklich praktisch bzw. ich mache es halt nicht oft, sodass ich seit einiger Zeit über eine andere Lösung nachgedacht habe, die ich nachfolgend vorstellen möchte.

Vorüberlegungen und Anforderungen

Um obigen Kritikpunkt zu lösen, müssen die Daten natürlich auf ein Display, das möglichst immer aktiv sein sollte oder sich besser noch im Vorbeigehen oder per Geste aktivieren lässt.

Die Anzeige soll als Full-Screen nach meinen eigenen Anforderungen geschehen. Ich möchte keine Browserzeile etc. im Screen haben und auch nur die für mich relevanten Daten anzeigen lassen. Die Lautstärke im Innenraum brauche ich so beispielsweise nicht und auch den Regen- und Windmesser habe ich bei mir nicht verbaut.

Angebot
Netatmo Smarte Wetterstation - WLAN, Funk, Innen- und...
Netatmo - Gartenartikel
169,99 EUR - 9% 155,49 EUR

Letzte Aktualisierung am 9.12.2019 um 03:52 Uhr / Affiliate-Links / Bilder von der Amazon Product Advertising API / Vielen Dank für deine Unterstützung 🙂

Somit war für mich klar, dass die Daten über eine Schnittstelle von Netatmo geholt werden müssen, wobei dies nur zwingend für die Innenraum-Daten gilt. Außentemperatur und Co. und auch die Vorhersage für die nächsten Tage, können auch von einem weiteren Dienst kommen.

Für die Darstellung habe ich mich letztendlich für ein „altes“ Fire Tablet mit einer Display-Größe von 7 Zoll entschieden. Dies besitzt eine Auflösung von 1024 x 600 Pixel und erscheint mir für diesen Zweck optimal – vor allem auch, da solch ein Tablet bei mir noch in der Ecke lag. Ansonsten ist es aber auch in der Anschaffung recht preiswert.

Letzte Aktualisierung am 9.12.2019 um 00:14 Uhr / Affiliate-Links / Bilder von der Amazon Product Advertising API / Vielen Dank für deine Unterstützung 🙂

Netatmo API

Netterweise bietet Netatmo eine API an, die auf den Namen Netatmo Connect hört und dabei auf PHP, Obj-C oder Java setzt. Für mich als Nicht-Entwickler mit einer handvoll PHP-Kenntnissen liest sich die Dokumentation verständlich und es gibt auch zahlreiche Beispiele.

Nachdem ich einen kostenlosen Entwickler-Account angelegt habe, kann es auch direkt losgehen und ich erstelle im Backend eine neue App. Dazu muss ich ein paar rudimentäre Angaben machen und erhalte dann im Anschluss eine Client ID und ein Client Secret, die ich jeweils für die Authentifizierung gegenüber der API brauche.

Da man das Rad nicht jedes Mal komplett neu erfinden muss, nutze ich die Suchmaschine meines Vertrauens und lande dabei auf dieser sehr hilfreichen Seite, die sowohl die Authentifizierung als auch die Abfrage der Daten aufzeigt. Dies sieht dann wie folgt aus:

// Zugangsdaten Netatmo
    
	$username	= "*****";
	$password	= "*****";
	$app_id	  = "*****";
	$app_secret  = "*****";
    

// Token anfordern
	
	$postdata = array(
	    'grant_type' => "password",
	    'client_id' => $app_id,
	    'client_secret' => $app_secret,
	    'username' => $username,
	    'password' => $password,
	    'scope' => 'read_station'
	);
	
	$url = "https://api.netatmo.net/oauth2/token";

	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	$response = curl_exec($ch);
	curl_close($ch);
    
	
// Anfrage mit Token

	$params     = null;
	$params     = json_decode($response, true);
	$api_url    = "https://api.netatmo.net/api/devicelist?access_token=" . $params['access_token'];
    

// Daten abrufen
		
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $api_url);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	$array = curl_exec($ch);
	curl_close($ch);


// Messwerte bereitstellen

    $netatmo            = json_decode($array,true);

    $indoor_temp        = $netatmo["body"]["devices"]["0"]["dashboard_data"]["Temperature"];
	$co2		        = $netatmo["body"]["devices"]["0"]["dashboard_data"]["CO2"];
	$humidity	        = $netatmo["body"]["devices"]["0"]["dashboard_data"]["Humidity"];
	//$noise		        = $netatmo["body"]["devices"]["0"]["dashboard_data"]["Noise"];
    //$outdoor_temp       = $netatmo["body"]["modules"]["0"]["dashboard_data"]["Temperature"];
    //$rain_last_hour     = $netatmo["body"]["modules"]["1"]["dashboard_data"]["sum_rain_1"];

    $co2 = number_format($co2, 0, "", ".");

Ein paar Anmerkungen hierzu:

  • Trage in den Zeilen 3 bis 6 deine Zugangsdaten zu Netatmo und die Client ID und den Client Secret ein
  • In Zeile 55 hast du in der Variable dann alle Daten, die dir geliefert werden können
  • Die Daten in Zeile 60 bis 62 sind für mich nicht relevant und deswegen ausgeklammert
  • In Zeile 64 habe ich lediglich den Ausgabewert nach meinen Wünschen formatiert

Somit sind bereits alle Werte entsprechend vorhanden und wir können als Test ein paar Ausgaben machen bevor wir mit dem aktuellen Wetter fortfahren.

Wetterinformationen von Dark Sky

Nach einigen Überlegungen habe ich mich gegen die Verwendung der Daten von meinem Außensensor entschieden. Unter anderem ist dieser nicht weit vom Fenster entfernt und auch noch recht geschützt, sodass die Temperatur eher zu hoch ausfällt.

Nach einer unerwartet langen Recherche nach einem kostenlosen Anbieter bin ich dann letztendlich bei Dark Sky gelandet. Hier muss ein kostenloser Account erstellt werden und auch dann bekommt man einen Secret Key, um die API ansprechen zu können.

Der API Endpoint lautet dann immer https://api.darksky.net/forecast/[key]/[latitude],[longitude], wobei sich die Werte für Latitude und Longitude natürlich nach dem Wohnort richten. Um die Werte zu ermitteln, kann beispielsweise Google Maps verwendet werden. Ein Klick in der Karte auf den gewünschten Ort, zeigt dann ganz unten mittig im Fenster die jeweiligen Werte an.

Die Abfrage sieht bei mir dann wie folgt aus:


$url = "https://api.darksky.net/forecast/[key]/[latitude],[longitude]?exclude=hourly&units=auto";

$contents = file_get_contents($url);
$var = json_decode($contents);

$temp_now = number_format($var->currently->temperature,1,'.','');

$i = 0;
foreach($var->daily->data as $data)

    {
         $temphigh[$i] = number_format($data->temperatureHigh,1,'.','');         
         $templow[$i] = number_format($data->temperatureLow,1,'.','');
         
         $time[$i] = $data->time;
         $icon[$i] = $data->icon;

         $regen[$i] = $data->precipProbability;
         $regen[$i] = $regen[$i] * 100;
         $regen[$i] = number_format($regen[$i],0);
         
         $i++;         
    }  

Auch hier sollte eigentlich alles recht klar sein. In der Schleife werden mit $i = 0 die Werte für den aktuellen Tag geholt. $i = 2 wäre dann beispielsweise der übernächste Tag. Ansonsten gibt es noch ein paar Formatierungen.

Ausgabe der Messdaten von Netatmo und Dark Sky

Nachdem nun alle Daten für den Innenraum, die Außentemperatur und auch die aktuelle Vorhersage für die nächsten Tage erfasst sind, gilt es diese entsprechend auszugeben.

Hierbei empfehle ich zunächst die Entwicklung im einem klassischen Browser. So kann man beispielsweise über die Entwicklertools (Strg + Umschalttaste + I) von Chrome die gewünschte Auflösung festlegen und in einem ersten Schritt mit Dummy-Daten arbeiten.

Die Formatierung kann dabei nach eigenen Wünschen erfolgen und erforderte zumindest bei mir einiges an Herumspielerei via CSS. Letztendlich habe ich auf das Box-Modell gesetzt.

Netatmo Wetterstation
Ausgabe der Daten im Browser mit angepasster Auflösung für das Fire-Tablet

Zur Übersicht nachfolgend nochmals alle Variablen mit den jeweiligen Inhalten, die wir von den APIs erhalten haben:

Messdaten von Netatmo

$indoor_temp = Aktuelle Innentemperatur

$co2 = Aktueller Kohlenstoffdioxid-Gehalt im Innenraum

$humidity = Aktuelle Luftfeuchtigkeit im Innenraum

Messdaten von Dark Sky

$temp_now = Aktuelle Außentemperatur

$temphigh[$i] = Maximale Tagestemperatur

$templow[$i] = Minimale Tagestemperatur

$time[$i] = Timestamp des jeweiligen Tages

$icon[$i] = Das zu erwartende Wetter (bspw. „Rain“)

$regen[$i] = Regenwahrscheinlichkeit

Bei der späteren grafischen Ausgabe des zu erwartenden Wetters empfiehlt es sich die Grafiken entsprechend zu benennen (also beispielsweise „Rain.png“) und entsprechend einzubinden.

Bei meiner Ausgabe wollte ich der schöneren Übersicht wegen jeweils den Wochentag ausgeben. Dies habe ich vermutlich etwas unelegant wie folgt gelöst:


$tag = date('w', $time[0]) . "
";
			
			switch($tag)
			{
			  case (0):
			  $wtag = "Sonntag";
			  break;
			  case (1):
			  $wtag = "Montag";
			  break;
			  case (2):
			  $wtag = "Dienstag";
			  break;
			  case (3):
			  $wtag = "Mittwoch";
			  break;	
			  case (4):
			  $wtag = "Donnerstag";
			  break;
			  case (5):
			  $wtag = "Freitag";
			  break;
			  case (6):
			  $wtag = "Samstag";
			  break;		 
			}

Ausgabe Netwatmo-Wetterstation auf dem Fire Tablet

Hast du dann soweit via HTML und unter Umständen auch schon mit den echten Daten die Ausgabe realisiert, wird nach einem ersten Test auf dem Tablet mit dem hauseigenen Browser sehr schnell klar, dass das so nicht klappt. Das Vollbild geht nicht, die Adresszeile ist immer vorhanden, „always on“ gibt es auch nicht und die Möglichkeiten sind insgesamt doch sehr ernüchternd.

Fully Kiosk Browser

Nachdem ich das ganze Thema mit einer Menge Frust für ein paar Tage zur Seite gelegt habe, bin ich dann nach weiterer Suche irgendwann auf den Fully Kiosk Browser gestoßen, den es in einer kostenlosen Version (die ausreichend ist) und einer „PLUS“-Version gibt, die einmalig überschaubare 5,90 Euro pro Gerät kostet (mehr dazu weiter unten unter „Ausblick“).

„Fully Kiosk Browser ist ein flexibel konfigurierbarer Android Kiosk Browser und App Launcher. Beschränken Sie die Funktionen und sperren Sie Ihre Webseiten und andere Apps im Kiosk-Modus ein. Als Vollbild-Webbrowser mit Kiosk-Modus, Bewegungserkennung, Remote Admin und vielen anderen Features können Sie Fully in allerlei Informations-Panelen, Kiosk-Systemen, Digital Signages, Wand-Tablets und allen unbeaufsichtigten Android-Geräten einsetzen. Rooting ist nicht erforderlich.“

Fully Kiosk Browser auf dem Fire Tablet installieren

Mangels Play Store auf dem Fire Tablet muss Fully Kiosk Browser als .apk-Datei auf dem Fire Tablet installiert werden, die auf der Seite von Fully vorhanden ist.

Um dies zu ermöglichen, muss in den Einstellungen des Tablets die Installation von Apps unbekannter Herkunft erlaubt werden. Auch hier hilft die Suchmaschine deines Vertrauens weiter, um die richtigen Einstellungen vornehmen zu können.

Ausgabe mit Fully Kiosk Browser und Einstellungen

Nachdem der Browser nun installiert ist kann erstmalig die entsprechende URL mit deinen Daten im Browser aufgerufen werden. Dabei wirst du unter Umständen feststellen, dass die Ausgabe nicht zu 100% mit der Anzeige im „Entwicklungs-Browser“ übereinstimmt, sodass hier vielleicht noch ein paar kleinere Änderungen notwendig sein werden. Im Großen und Ganzen sollte es aber passen.

In den Einstellungen von Fully habe ich dann folgende Änderungen vorgenommen:

Web Content Settings

Start URL – meine URL festgelegt

Device Management

Keep Screen On – Yes

Anzeigen-Aktualisierung und API Rate Limits

Natürlich möchte man immer aktuelle Daten angezeigt bekommen, sodass sich die Frage stellt, wie oft man die Seite aktualisieren sollte.

Grundsätzlich nimmt Netatmo einem hier bereits die Entscheidung ab, da die aktuellen Daten nur alle 10 Minuten an die API-Server gesendet werden. Bei Dark Sky gibt es ferner eine Begrenzung von 1.000 API-Anfragen pro Tag.

Letztendlich habe ich mich für eine Aktualisierung alle 15 Minuten entschieden, sodass dann an beide Dienste knapp 100 Anfragen pro Tag gesendet werden. Gelöst ist dies über einen einfachen Meta Refresh in HTML:


<meta http-equiv="refresh" content="900" >

Fazit uns Ausblick

Insgesamt bin ich mit dem jetzigen Status recht zufrieden – auch wenn die Umsetzung deutlich länger als gedacht gedauert hat. Für ein kleines Hobbyprojekt „nebenbei“ ist aber vor allem auch der Spaß entscheidend und ich kann nur empfehlen, so eine Sache mal anzugehen, wenn man sich mit der Materie ein wenig auskennt oder sich damit auseinandersetzen möchte.

Für die Zukunft könnte ich mir trotzdem noch einige Erweiterungen vorstellen, die wie folgt aussehen könnten:

Hintergrundbild dynamisch ändern

Abhängig vom Wetter (Sonne, Regen etc.) oder auch der Tages- oder Jahreszeit könnte man jeweils ein anderes Hintergrundbild verwenden.

Energiesparmodus

Das „always on“ des Browsers ist auf Dauer sicherlich nicht sinnvoll. In der Plus-Version bietet der Fully-Browser aber beispielsweise die Möglichkeit, dass das Display nur zu bestimmten Zeiten eingeschaltet ist bzw. im Umkehrschluss dann nachts ausgeschaltet wird.

Ebenfalls gibt es in der Plus-Version die Möglichkeit der Bewegungserkennung via Frontkamera oder Mikrofon. So könnte man bei „Aktivität“ das Display einschalten und nach x Minuten wieder deaktivieren.

Wandhalterung für das Tablet

Netatno Wetterstation

Im Moment steht das Tablet bei mir auf dem Schreibtisch. Für die Zukunft könnte ich mir aber vorstellen, dass es vielleicht eher in der Küche oder im Flur platziert wird. Eine entsprechende Kabelführung ist hier aber wohl notwendig, damit es halbwegs gescheit aussieht.

Letzte Aktualisierung am 8.12.2019 um 19:17 Uhr / Affiliate-Links / Bilder von der Amazon Product Advertising API / Vielen Dank für deine Unterstützung 🙂

Netatmo mit IFTTT und Philips Hue verknüpfen

Die Messdaten von Netatmo können via IFTTT mit Philips Hue verknüpft werden. So ist es beispielsweise denkbar, dass eine bestimmte Lampe rot leuchtet, sofern ein definierter Kohlenstoffdioxid-Gehalt überschritten ist.

Falls dir dieses kleine Projekt gefallen hat, folge uns doch auch bei Facebook. Dort erreichst du uns auch, wenn du Fragen zum Thema hast. Gerne schicke ich dir auch den kompletten Quellcode.