Gästebuch mit Wemos

Als ich mit meiner Freundin zum Geocaching unterwegs war, fiel mir ein das ich ein Programm schreiben wollte, das die Funktion eines Gästebuch ausführt und das auf einem Mikrocontroller. Wer Geocaching kennt, der weis dass man nach einem gefundenen Geocach sich auf einem beiliegenden Zettel eintragen kann. Und genau das will ich als digitale Form abbilden.

Was brauche ich:

• Wemos
• SD Shield
• SD Karte

Anforderung

Für ein Gästebuch, soll ein (Nick)Name und Datum hinterlegt werden. Datum wird Automatisch mit dem Eintrag gesetzt, so das nur der Nickname eingetragen wird. Hier sollte der Wemos als eigenständiger Access-Point funktionieren, so das man sich mit dem Smartphone verbinden kann. Auf der Webseite sollten zwei Textboxen für die Eingabe des Namens und Datum vorhanden sein. Das Speichern erfolgt dann über ein Button. Neben der Eintrage Möglichkeit, soll auch eine Tabelle mit bereits bestehenden Einträgen zusehen sein. Und natürlich sollte der Zugang per Smartphone funktionieren.

Webseite schreiben

Leider kann die Webseite nicht mit Bootstrap aufgebaut werden. Na ja, eigentlich schon, aber das wäre ein eigenes Thema. Diesmal wird die Seite wieder Klassisch und einfach aufgebaut nach Standard HTML Bordmitteln.

Die Webseite wird mit in dem Programmcode eingebettet, so das diese nicht von der SD Karte erst gelesen werden muss. Zudem sollte bei defekter SD Karte trotzdem etwas angezeigt werden, wie eine Fehlermeldung.

Da die Darstellung des Code mit HTML auf dem Blog sich schwierig gestaltet, kann der Programmcode für den Seitenaufbau auf dem Github Repository betrachtet werden [Link zu WebsiteContent].

Die Seite habe ich zuvor ganz normal in HTML geschrieben und das Ergebnis im Browser immer wieder betrachtet. Erst danach kam die Seite in den Programmcode, das jedoch optisch grausig aussieht. Daher habe ich den Teil in einen eigenen Tab bzw. Code-Datei verfrachtet. Am Ende kam fast das selbe Ergebnis wie in den Folgendem Bild zu sehen ist.

Das Aktuelle Datum wird durch ComboBoxen ermöglicht, in dem man das aktuelle Datum und Uhrzeit einrichten kann. Das testen auf dem Windows Phone erfolgt ohne Probleme. Auf dem Iphone jedoch nicht.

SD Karte prüfen

Mit dem Start soll zunähst geprüft werden, ob die SD Karte verfügbar ist. Zuerst wird jedoch geprüft, ob bereits die Datei mit den Gästeeinträgen vorhanden ist. Wenn nicht, dann wird diese angelegt.

 void InitSdCard() {  
  SD.begin(mChipSelect);  
  if(!SD.exists(mGuestList)){  
   Serial.println("Create file...");  
   File dataFile = SD.open(mGuestList, FILE_WRITE);  
   dataFile.close();  
   Serial.println("...finish");  
  }  
  else {  
   Serial.println("the guest list exist");  
  }  
  if(!mCard.init(SPI_HALF_SPEED, mChipSelect)) {     // initialize sd card and check insert sd card  
   Serial.println("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");  
   Serial.println("\t\tERROR: can not init sd card");  
   Serial.println("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");  
   return;  
  }  
  if(!mVolume.init(mCard)) {               // initialize sd card  
   Serial.println("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");  
   Serial.println("\t\tERROR: Could not find FAT16/FAT32 partition.\nMake sure you've formatted the card");  
   Serial.println("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");  
   return;  
  }  
  Serial.println("SD Card: Exist and partion was found");  
 } 

Wemos zum Access Point machen

Auf der Webseite von Wemos ist es eigentlich schon beschrieben, aber zur Vollständigkeit, nehme ich das hier denoch auf. Um den Wemos zum Access Point zu machen, bedarf dies nur weniger Code zeilen. In den Globalen Variablen muss dann nur die Instanz vom WiFiServer gehalten werden. Für den Zugang wird kein Passwort festgelegt.

 void StartWebserver() {  
  Serial.println("Start access point");  
  WiFi.mode(WIFI_AP);            
  byte setMode = 0;               // 0 = disable, 1 = enable router information  
  wifi_softap_set_dhcps_offer_option(OFFER_ROUTER, &setMode);  
  WiFi.softAP("VisitorsBook", "");  
  mServer.begin();                // Start the HTTP Server  
  Serial.print("Ip Address: ");  
  Serial.println(WiFi.softAPIP());// Send the IP address of the ESP8266 to the computer  
 } 

Aufruf der Seite

Mit dem Aufruf der Seite wird zunächst geprüft, ob der Benutzer einen Request sendet. Wenn nicht, wird die Methode zum Speichern umgangen. Den Request nach dem Inhalt zuprüfen, sieht hier etwas kryptisch aus, das jedoch nur schlimm aussieht. Beim auslesen des Datums wird ein Doppelpunkt mit '%3A' ausgefüllt, der sich jedoch einfach mit einem Replace wieder in einen Doppelpunkt gesetzt werden kann. Nach dem aufbereiten des Namens und Datum kann das Ergebnis gespeichert werden.

void printOnWebside() {  
  WiFiClient webclient = mServer.available();  
  if (!webclient) {  
   return;  
  }  
  String request = webclient.readStringUntil('\r');  
  webclient.flush();  
  int indexGuest = request.indexOf("guestname=");  
  if(indexGuest != -1) {  
   int indexEndGuestname = request.indexOf('&');  
   String guestName = request.substring(indexGuest + 10, indexEndGuestname);  
   int indexSetTime = request.indexOf("settime=");  
   int indexEndSettime = request.indexOf(" HTTP");  
   String settime = request.substring(indexSetTime + 8, indexEndSettime);  
   // Example: 2019-08-25T19%3A40  
   // filter technical colon  
   settime.replace("T", " ");  
   settime.replace("%3A", ":");  
   WriteGuest(guestName, settime);  
  }  
  BuildWebside(webclient);  
 } 

Datenspeichern

Das Speichern erfolgt Zeilenweise. Hier wird der Eintrag mit einem Zeilenumbruch in die Datei hinzugefügt. Zuerst hatte ich nur Name und Datum, aber das Parsen wäre relativ aufwendiger geworden. Daher wird die Zeile bereits mit dem Ziel HTML Format eingetragen. (Wegen HTML Inhalt ist der folgende Code nur ein Bild)

Daten abrufen

Ist etwas lang die Methode. Aber auch nur, weil wieder etwas HTML mit eingeflossen ist, um die Anzahl der gespeicherten Einträge wieder zugeben. Anschließend werden die Gast Einträge aus der Datei Zeilenweise mit dem bereits HTML Anteil abgerufen und hinzugefügt.

Offene Punkte

Das Hübsch machen der Webseite habe ich weggelassen, sowie das Fehlerbehandlung. Denn ein Eintrag kann ohne Namen und Datum erfolgen und führt dazu, dass der Eintrag in der Liste wirklich leer sein kann. Zudem war auch ein RTC Timer angedacht, der jedoch für den ersten Schritt nicht benötigt wird. Im Main Branch habe ich diesen Teil stehen gelassen.

Und dann noch der Fehler, dass das Datum nicht geht, wenn versucht wird vom Iphone ein Request zu senden.

Datenschutz

Die Anmeldung erfolgt anonym, weil hier keine Personenbezogenen Daten erhoben werden. Um genau zu sein, dürfen hier keine Personendaten erhoben werden, wie Email (Macht in diesen Kontext auch kein Sinn), Namen und Geburtsdatum. Für den Eintrag reicht dann der Hinweis:

Mit meinem Eintrag ins Gästebuch erkläre ich mich einverstanden, dass dieser Beitrag mit Datum und Uhrzeit auf der Gästebuch-Seite hier Lokal öffentlich lesbar wird.

Weitere Informationen findet ihr auf der Seite zu "Datenschutz auf Webseiten"

Wie immer das ganze Beispiel auf meinem Github Repository

Github - VisitorsBook

Daten in JSON speichern auf dem Wemos

Um seine Daten auf eine SD Karte zu speichern, muss am Anfang klar sein, in welches Format gespeichert werden soll. Das ist dann besonders entscheidend, wenn die Daten wieder weiter verarbeitet werden.

Wenn für den Moment nur ein Wert gespeichert wird, dann reicht Zeilenweise. Bei mehreren Werten müssen die durch ein Zeichen getrennt werden. Das kann dann über Leerzeichen, Semikolon oder Komma sein, bzw. CSV entsprechend. CSV kann prima in Excel betrachtet und weiter verarbeitet werden. Will man die Daten aber weiter verarbeiten, müssen am Ende viele Zeichenketten zu Werten umgewandelt werden. Grundsätzlich ist das nicht verkehrt, aber man muss sich selbst Standards festlegen, um Aufwände gering zu halten.

Was benötigt wird:

• Arduino oder Wemos
• SD Shield
• SD Karte

Vorhaben

Für das Ziel Projekt werden einige Werte aus den Messungen gespeichert. Daher wird ein Daten Objekt benötigt, dass alle Werte enthält. Um dieses nicht im Arbeitsspeicher zu halten, muss der Inhalt persistiert werden und später auf Abruf wieder hergestellt werden.

Datenformat zum Speichern

Die Entscheidung war für mich schon ein eigenes Thema Wert. Neben CSV blicke ich seit langem wieder auf JSON und XML. Nachdem ich ein wenig gesucht habe, kam ich zu dem Entschluss JSON zu verwenden. Für das JSON Format existiert bereits eine fertige Bibliothek.

ArduinoJson

Was man beachten sollte

Nach einigen Tutorials und veralteten Beispielen, hatte ich die nötigen Informationen zusammen. Zum Schreiben und lesen der Daten können zwei verschiedene Klassen zum Verarbeiten von JSON verwendet werden.

• StaticJsonDocument
• DynamicJsonDocument

Für meinen Einsatz reicht der StaticJsonDocument aus. Dieser legt die Daten im Stack ab und verbraucht durch die Eingrenzung auch weniger Arbeitsspeicher. Das ist bedingt durch den Mikrocontroller, vorzugsweise zu verwenden.

Mit DynamicJsonDocument werden die Daten im Heap abgesetzt. Für mein Beispiel konnte ich evaluieren, das nur zwölf Datensätze zuverlässig verarbeitet werden, ohne dass das Programm anhält bzw. abstürzt.

Datenobjekt

Der Zeitpunkt der Aufnahme und zu speichernden Werte werden für den späteren verlauf verwendet. Sekunden habe ich hier nicht einbezogen, da solche Zeitlich genauen Messungen für die Darstellung keinen Nutzen hat. Die Stunden und Minuten werden wiederum verwendet, um später Durchschnittswerte zu berechnen. Der Tag, Monat und Jahr werden ebenfalls für die Durchschnittswerte verwendet.

 class MeasureData {  
  public:  
   int16_t Day;  
   int16_t Month;  
   int16_t Year;  
   int16_t Hour;  
   int16_t Minute;  
   float Temperature;  
   float Humidity;  
   float Pressure;  
 };  

Speichern (Serialisieren)

Bevor die Daten in das JsonObject geschrieben werden können, muss die Größe definiert werden. Im folgenden Programmcode in "JSON_ARRAY_SIZE" der Wert 1 eingetragen, weil hier nur einmal gespeichert wird. Im Github Repository zeige ich dieses mit mehreren Datensätzen.

 void SaveData() {  
  const size_t capacity = JSON_ARRAY_SIZE(1) * JSON_OBJECT_SIZE(8);        
  StaticJsonDocument jsonBuffer;     // set the content size  
  JsonArray data = jsonBuffer.to();   // setup array to write  
  JsonObject measure = data.createNestedObject();  // created to add a new object  
  measure["Day"] = 12;  
  measure["Month"] = 12;  
  measure["Year"] = 2019;  
  measure["Hour"] = 12;  
  measure["Minute"] = 12;  
  measure["Temperature"] = 21.4f;  
  measure["Humidity"] = 50.5f;  
  measure["Pressure"] = 12345.6f;  
  File file = SD.open(mFilename, FILE_WRITE);  
  serializeJson(jsonBuffer, file);       // write json document to file  
  file.close();   
 } 

Öffnen (Deserialisierung)

Genau wie beim Speichern, wird ebenfalls die Kapazität angegeben. Dann kann die eingelesene Datei aus dem JSON Inhalt eingelesen und als JsonObject abgerufen werden.

 void OpenData() {  
  File file = SD.open(mFilename);  
  String content = file.readString();  
  const size_t capacity = JSON_ARRAY_SIZE(1) * JSON_OBJECT_SIZE(8);        
  StaticJsonDocument doc;  
  deserializeJson(doc, content);  
  JsonObject measure = doc[0];  
  Serial.print(" Day:"); Serial.print((int16_t)measure["Day"], DEC);  
  Serial.print(" Month:"); Serial.print((int16_t)measure["Month"], DEC);  
  Serial.print(" Year:"); Serial.print((int16_t)measure["Year"], DEC);  
  Serial.print(" Hour:"); Serial.print((int16_t)measure["Hour"], DEC);  
  Serial.print(" Minute:"); Serial.print((int16_t)measure["Minute"], DEC);  
  Serial.print(" Temperatur:"); Serial.print((float)measure["Temperature"], DEC);  
  Serial.print(" Humidity:"); Serial.print((float)measure["Humidity"], DEC);  
  Serial.print(" Pressure:"); Serial.println((float)measure["Pressure"], DEC);  
 }  

Fazit

Das JSON Format kann ich jeden nahe legen, dieses zu verwenden. Sobald mehrere Daten erfasst und gespeichert werden, ist der Aufwand beim Einlesen nahezu gleich. Das mag anfangs etwas ungewohnt sein. Spätestens wenn ihr Daten aus einer CSV einlesen wollt, das innerhalb des Mikrocontroller Bereiches geschieht, spart ihr eine Menge Zeit für das Entwickeln einer Methode, dass die Daten einließt.

Wie immer ein Beispiel:

Github - ExampleWriteReadSdCard

Wetterstation und Daten Logger

Immer die Aktuellen Messdaten abzurufen ist schön, aber auf Dauer würde man doch gerne sich ansehen wie sich das Wetter über einen Zeitraum verändert hat. Man könnte natürlich immer zu jeder Stunde nach sehen und sich das in der Excel Tabelle Notieren. Besser wäre der Vorgang, ein Programm zu verwenden das im vordefinierten Intervall die Messdaten automatisch speichert.

Wemos Codebeispiele

Die kurz Beschreibung, wie die Daten auf die SD Karte geschrieben werden, ist auf dem Github zu Wemos zu finden.

Simple übernommen

Ich habe das Codebeispiel übernommen und entsprechende Anpassungen und Erweiterungen eingesetzt. Im wesentlich wird am Anfang das SD Shield initialisiert und geprüft, ob eine SD Karte eingesetzt ist. Über den Seriellen Monitor wird der Typ und die Kapazität der SD Karte abgezeigt. Wenn die Zieldatei noch nicht vorhanden ist beim Speichern, wird die Datei "weather.csv" angelegt und bekommt in die erste Zeile die Header Info zu den Spalten.

Abruf der gespeicherten Daten

Nach dem Initialisieren und der ersten Messungen, werden im Beispiel von mir, alle zehn Sekunden die aktuellen Daten auf die SD Karte gespeichert. Die Daten werden in einer CSV Datei angehängt. Hierbei wird die Datei geöffnet und der neue Datensatz in eine neue Zeile geschrieben. Um später die Datei zu entnehmen, muss die SD Karte aus dem Shield entnommen werden und am PC mit einem SD Karten Slot eingelesen werden.

Problem mit Excel

Öffnet man die Datei in Excel, so kann es sein das Werte als Datum Formatiert werden. Das liegt mitunter an der verwendeten Zeichen für Nachkommastelle. Technisch gesehen ist alles Richtig, nur Excel macht etwas zu viel des Guten.

Statt die Datei per Doppel klick zu öffnen, muss die Datei über Excel aufgerufen werden. Über den Reiter "Daten" und dann Daten abrufen -> Aus Datei -> Aus Text/CSV  kann die Datei importiert werden.

Nach dem Import öffnet sich ein neuer Dialog. In der dritten Combobox wählt ihr Dateitypen nicht ermitteln und anschließend kann dann auf den Button Laden geklickt werden.

Leider kann das hier nur zum Betrachten verwendet werden. Eine Darstellung in einem Diagramm geht hier ebenfalls nicht. Zugegeben empfand ich dies sehr nervig und schrieb hierzu ein einfachen Konverter, der mir die Werte in das Zielformat bringt. In dem vorigen Bild ist auch zu sehen, dass die Nachkommastelle komplett entfernt wurde.

Hat nur eine Aufgabe

Das Tool zum konvertieren der CSV Datei ist ebenfalls auf meinem Repository zu finden. Momentan kann das Tool nur eine Sache und zwar die Zahlen mit einem Punkt als Nachkommastelle umzustellen zu einem Komma. Wenn die Anforderungen steigt, dann werde ich sicherlich mehr daraus machen.

Im Diagramm betrachten

Kommen wir zum eigentlich Ziel. Die gemessenen Daten können in Excel im Einzelnen Betrachtet werden. Mit dem Anlegen einer Diagramm-kurve sieht man wie die Temperatur und Feuchtigkeit zu einander sich verändert haben. Der Luftdruck muss ein separates Diagramm haben, da die Werte im Hektopascal hinterlegt sind.

Immer noch nicht Rund

Das Automatische Aufzeichnen der Messdaten ist schon hilfreich. Aber an den gespeicherten Messungen ist keine Uhrzeit angegeben, so dass eine Zeitliche Orientierung nicht ermittelt werden kann. Und noch besser wäre, die Diagramme ebenfalls im Browser anzuzeigen. Aber dazu komme ich zu einem anderen Zeit.

Github - WeatherStation (Wemos Anwendung)

Github - ToolCsvConverter (Ein Tool für eine Sache)

Oder das Tool ohne Umwege als fertige Exe in einer Zip Datei verpackt.