Alternativ zum IoT – Control Center kreierte ich eine einfache Version als Web-Applikation. Auch hier war die zentrale Stelle mein MQTT-Brocker.
Inhaltsverzeichnis
Web-Hauptseite
Schlicht, aber funktional. Das einzige „Problem“ ist, dass beim Start (auch beim Neuladen) der Seite die aktuellen Statusanzeigen verloren gehen. Deshalb erscheinen bei manchen Items „?„. Die entsprechenden Sensoren müssten auf Anfrage ihren aktuellen Status übertragen (was in meinem Fall durch das Modul GPIO-Connector geschieht). Alternativ wäre einen Dienst, welcher die Werte registriert und Auskünfte über den Status/Wert geben könnte (was ich im IoT – Control Center eingebaut habe).
Die hell grün eingefärbte „ON“’s signalisieren, dass zwar der Befehl abgesendet, aber noch keine Bestätigung erhalten wurde.
Die wichtigsten Konfigurationen können angezeigt:
Hintergrundinformation
Allerdings musste ich den MQTT-Broker neu Bauen (möglich dank Open-Source von Mosquitto) mit der sogenannten WebSocket-Unterstützung. Nur dadurch kann ich mich über JavaScript am Broker anmelden und über Änderungen informiert werden. Alternativ könnte ich auch über PHP mit den sogenannten Server-Sent-Events arbeiten. Das wird jedoch von Microsoft Browsern nicht unterstützt. Das Ziel ist, dass der Broker dem Browser eine Statutenänderung senden kann, ohne dass eine Anfrage besteht. Normalerweise stellt der Browser dem Server eine Anfrage, welche von diesem beantwortet wird und danach wird die Kommunikation wieder geschlossen.
Konfiguration
Insbesondere wird hier eingetragen, welchen Wert das Item senden soll, wenn darauf geklickt wird und zum anderen auf welchen Wert es reagieren soll. In der Initialisierung erfolgt der Aufruf um den aktuellen Status abzufragen.
Auswahl der Icons
Neue Bilder hochladen
Neue Daten können im Web veröffentlicht werden indem diese vom Explorer in das „Drag and Drop Upload“-Fenster gezogen werden. Zum Löschen das Icon einfach in die Abfalltonne verschieben.
Hintergrundinformation
Als Basis für die Web-Applikation setze ich das Symfony Framework ein. Die Erstellung und die Abfrage der Daten in der Datenbank wird über Doctrine extrem vereinfacht. Für die Darstellung verwende ich Bootstrap.