LaMetric Badetemperatur App

Warum entwickle ich die LaMetric Badetemperatur App?

Meine LaMetric begeistert mich immer wieder. Die Hardware schaut cool aus. Apps wie Resultatänderungen im Schweizer Fussball bringen einen Mehrwert. Meine 11 Monate alte Tochter ist fasziniert von LaMetric. Mich spricht meine Kleine selten mit Namen an. Für LaMetric hat sie bereits den Namen „MAAAH“, welchen sie auch während dem Tag mit Blick auf die LaMatric immer mal wieder sagt. Sie lässt sich damit sogar in der Nacht beruhigen und schläft dank LaMetric ein. Dieser Umstand macht LaMetric zu meinem Powergadget. Da muss ich zum Dank irgendwas der Community zurückgeben und mal versuchen, eine App zu entwickeln. Nur welche?

An Ostern schockieren mich die News, dass die Temperaturen um die 20 Grad Celsius vor Ostern auf Minus 7 Grad nach Ostern fallen würden und es Schnee geben soll. Da wünsche ich mir einfach etwas Sommer, um diesen Schock zu verdauen. Ich habe die Idee weitergedacht und mich gefragt, wie ich die Wassertemperatur des Freibads aus meinem Dorf wohl auf die LaMetric bringen könnte.

Informationen zu Temperaturen beziehen

Nach kurzer Recherche im Netz, fand ich heraus, dass unser Freibad Aadorf wie viele andere Bäder seine Daten auf wiewarm.ch stellt. Nach einer E-Mail an die Betreiber habe ich Zugriff auf die JSON-API erhalten: http://www.wiewarm.ch/ap i/doc/index.html
Damit wäre die Basis geschaffen. Mittlerweile ist es bei uns tatsächlich unter 0 Grad „warm“ und Schnee ist gefallen. Lasst uns also schnell gedanklich in den Sommer starten.

LaMetric App entwickeln starten

Um eine LaMetric App entwickeln zu können, kann man sich ganz einfach auf https://developer.lametric.com ein Entwicklerprofil anlegen. Nun darf man sich unter „My App“ über „Create“ eine neue App anlegen.

Apptypen Auswahl

LaMetric Apps werden in drei Grundkategorien unterschieden, welche sich beim Konfigurieren der App aber noch nachjustieren lassen.

  • Informationen Abrufen & Anzeigen => Indicator App
  • Aktion übermitteln => Button App
  • Meldungen anzeigen => Notification App

Wir wollen die Wassertemperatur einer Badeanstalt anzeigen, also entscheiden wir uns für die Indicator App.

Benutzeroberfläche erstellen

LaMetric Developer Konsole

LaMetric bietet einem eine visuelle Oberfläche, um sich mit Klick’s statische Userinterfaces zusammen zu stellen. Das Ergebnis ist jeweils gleich in der simulierten LaMetric sichtbar.
Das Nützliche dabei: Man sieht durch das Konfigurieren auch den jeweiligen Code dahinter unter „Data format“ abgebildet.

Frames verstehen

Die LaMetric Indicator App basiert auf einem oder mehreren Frames / Bildschirmausgaben, wie wir beim Erstellen der Benutzerobflächen gesehen haben. Diese Frames können von extern ans LaMetric dynamisch übergeben werden. LaMetric unterscheidet zwischen vier Grundframetypen: Name, Metric, Goal und Sparkline. Wobei Name der zentrale Frametyp ist. Mit diesem Frametyp kann eine Textinformation mit Icon übermittelt und dargestellt werden. Wie die meisten LaMetric-Apps auf dem Markt brauchen auch wir nur diesen Frametyp, um unsere Daten darstellen zu können.

Daten übermitteln, dynamische Frames erzeugen

Wir können Daten via Poll(ing), also regelmässiger Linkabfrage, oder via LocalPush übermitteln. Da wir die Daten zentral von einem Server aus verteilen möchten, wählen wir Poll. Der URL zur Serverapplikation wird eingetragen und weil sich die Badetemperaturdaten ja nicht zu viel Aktualisieren, setze ich die Poll frequency auf 10 Minuten. Dadurch wird der URL alle 10 Minuten aufgerufen und die neuen Daten bezogen.

Konfigurieren mit App Options

App-Options LaMetric

Einen Klick-Event brauchen wir nicht (Oder hast du eine Idee? Dann lass es mich wissen 😉). Deshalb überspringen wir den Punkt und schauen uns noch die letzte Rubrik dieser Devseite an: App Option. Hier können Appkonfigurationen in Form von Options erfasst werden. Sobald wir hier eine neue Option hinzufügen, sehen wir weiter oben, wie sich die URL-Parameter anpassen.
Wir stellen also fest, die Einstellungen / Options werden als URL-Get Parameter an den Server mitgegeben.

Detail Requirements

Nachdem wir nun die Möglichkeiten der LaMetric Entwicklung kennen gelernt haben, halten wir kurz inne und überlegen uns, welche Detailziele wir erreichen möchten.

Silenece Mode – Reduce to the max

Mockup Hauptframe

Persönlich bin ich von wechselnden Frames auf der LaMetric nicht gerade so angetan. Am liebsten habe ich einen Screen, der sich nur dann bewegt, wenn sich auch was ändert. So bin ich nicht abgelenkt und merke, wenn sich was anpasst. Der Platz ist eingeschränkt, also können wir wirklich nur das Wichtigste darstellen: Die Temperatur.
Wenn wiearm.ch uns mehrere Messpunkte eines Badeortes gibt, stellen wir einfach den ersten dar. Schön wäre es noch, wenn sich das Temperatur-Icon anhand der Badetemperatur anpassen würde.

Infos konfigurierbar ausgeben

Mockup optionaler Frames

Die App mit unserem Silence Mode würde ja reichen. Doch es könnte interessant sein, zu wissen, wann die Temperaturmessung durchgeführt wird. Vielleicht möchte ich mir ja auch die ausgewählte Badeanstallt textlich ausgeben lassen. Wenn ein Badeort mehrere Messpunkte hat, wollen wir vielleicht alle sehen. Es wäre also dienlich, wenn man einstellen könnte welche Frames bzw. Daten man sieht.

App Options für unsere App

Dateninfos bzw. Bildschirme ein/ausschalten


Der Benutzer soll auswählen können, welche Daten er dargestellt haben möchte. Lass uns also ein paar Checkboxen machen, welche unserer Serverapplikation per GET-Parameter mitteilt, welche Daten benötigt werden.

Auswahl des Badeorts

Der Benutzer soll die Möglichkeit bekommen, den Badeort zu bestimmen. Dafür wollen wir ein Dropdown machen, welches dann den Badeort als GET-Parameter unserem Server mitteilt. Hier ist der grösste Pain dieser Entwicklung. Erstens kann man als „Normal“ Developer nur statische App Options zur Verfügung stellen. (Kennst du was anderes? Bitte lass es mich wissen). Dies bedeutet, dass ich in der Developerkonfiguration von LaMetric manuell alle Badeorte einpflegen darf. Zweitens verfügt die Wiewarm-API nicht über eine komplette Liste der Badeanstalten. Also darf ich mir diese via Webseite herunterziehen und interpretieren. Drittens kann ich bei der Dropdownbox nur einen Namen als Auswahl und kein Value eintragen. Das Value entspricht also dem Namen der Auswahl. So erhalte ich als GET-Parameter den Namen des Badeortes. Ich muss dann serverseitig irgendwie darüber die ID des Badeortes finden damit ich mir die Daten von der WarmAPI ziehen kann. Aber dazu später.

Server Applikation

Nachdem ich die knapp 200 Badeorte in die Dropdownliste abgetippt haben, lass uns mit der Serverapplikation starten.

Technologie

Für mein Sideprojekt verwende ich einen Shared LAMP. Die Serverapplikation habe ich lean ohne zusätzliche Frameworks umgesetzt.

Hauptfunktion Frame UI-Handler

header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');

$frames=[];

addFrames($frames,"20.3°", 21748);
addFrames($frames,"Aadorf, Freibad Heidelberg (TG)", null);
addFrames($frames,"20.08.2020 16:15", null);

$lametricfeedback["frames"]=$frames;
echo json_encode($lametricfeedback);

function addFrames(&$frames,$text, $iconkey)
{
    array_push($frames, array("text" => $text, "icon" => $iconkey));
}

Im Header wird CORS freigegeben und der Inhaltstyp JSON definiert. Die Frames / Bildschirmausgaben werden in einem Frames Array gesammelt. Der Code dafür ist in der Funktion addFrames gekapselt. Das mehrfach verschachtelte Array wird als JSON-Objekt ausgegeben. Und schon haben wir eine lauffähige Serverapplikation. Wir können Frames verändern und welche hinzufügen oder entfernen. Das Rumspielen und sehen der Ergebnisse macht doch schon einmal Spass.

Interpretation der Badeortname

LaMetric sendet die Badeorte als Text und wir dürfen diese Interpretieren, um die BadeID von Wiewarm zu erhalten. Ich habe auf eine DB verzichten wollen und deshalb JSON mit allen Namen der Badeorte und der dazugehörigen ID angelegt.

 $bathinglocations =  getBathingLocationsFromJsonFile();

 $bathinglocationid=$bathinglocations[urldecode($_REQUEST["bathingLocation"])];

 function getBathingLocationTempreature($bathinglocationid)
    {
        global $configs;

        try {
            $result = callAPI("GET", $configs["api_baseurl"] . "temperature.json/" .$bathinglocationid . "/", array("api_key" => $configs["api_key"]));
            return json_decode($result);
        } catch (Exception $ex) {
        }
    }

Dynamische Daten

        $poolTempreatures=getBathingLocationTempreature($bathinglocationid);
foreach ($poolTempreatures as $poolTempreature) {            
        addFrames($frames,$poolTempreature->temp . "° ", 21748);

}

function getBathingLocationTempreature($bathinglocationid)
{
    try {
        $result = callAPI("GET", $configs["api_baseurl"] . "temperature.json/" .$bathinglocationid . "/", array("api_key" => $configs["api_key"]));
        return json_decode($result);
    } catch (Exception $ex) {
    }
}

Die Konfigurationen speichere ich in einer zweiten PHP-Datei, welche den Config-Array enthält. Hinter CallAPI ist eine einfache Curl-Funktion, mit welcher wir auf der wiewarm-API die aktuellen Temperaturen abfragen können. Per Foreach-Schleife werden nun die Daten aller Becken (Messpunkte) in Frames abgelegt.

Und Schwups haben wir unsere Badetemperatur-App fertig.

Weite Links

Auswahl des Badeorts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert