Sensorwerte auf Webserver (ESP 8266) anzeigen

In diesem Post geht es darum, wie man vom Arduino, oder vom ESP 8266 direkt, gemessene Werte auf einer Website anzeigen kann.

Anwendungsbeispiel

Durch das direkte auslesen der Sensoren mittels des ESP 8266 , kann man sich den Arduino sparen, was die gesamte Applikation schneller, stromsparender und vor allem billiger macht. Aus diesen Gründe möchte als Beispiel einen PIR (passive infrared) Senser, also einen Bewegungsmelder, mit dem ESP 8266 auslesen, und erkannte Bewegungen samt Zeit dokumentieren.

Die einfachste Möglichkeit Daten darzustellen, ist wahrscheinlich eine einfache Tabelle zu erstellen. Das kann man in reinem HTML umsetzen, was auch der ESP 8266 unterstützt, im Gegensatz zu aufwendigen graphischen Darstellungen mit exotischen und/oder leistungshungrigen Add-ons. 

Wie bei HTML üblich, besteht auch eine Tabelle aus einem Anfangs- und einem Endtag: <table> und </table>. Jede Tabellenzeile besteht aus <tr> und </tr>. Tr steht für "Table Row". Einzelne Zellen können mit <td> Inhalt der Zelle </td> hinzugefügt werden. Td steht für "Table Data". Über CSS, kann man nun noch die Tabelle verschönern.

Im Sketch, muss wieder, wie üblich, der ESP 8266 als Webserver konfiguriert werden, und mit einem Wlan Netzwerk verbunden werden.

Der Beispielsketch, welcher die oben gezeigte Ausgabe produziert sieht so aus:

Vor dem Upload sollte man jedoch die Uhrzeit noch aktualisieren(setTime(hr, min, sec, d, mon, year) ).

Weitere Möglichkeiten des ESP 8266

Die erste Anlaufstelle, um die Tabelle graphisch umzugestalten, sollte CSS sein. CSS Stylesheet-Sprache, mithilfe derer man das Design von Websites verschönern kann, oder aber Tabellen, soweit es Sinn macht, in Graphen umzuwandeln (guter Post dazu). 

Eine andere Möglichkeit wäre die Skriptsprache Javascript, welche man neuerdings auch auf dem ESP 8266 verwenden kann. Hierzu gibt es das Projekt Espruino.