Überblick

Die Web-View dient als Visualisierung und Zugang für den Benutzer. Hier können die Sensordaten und Betriebswerte aller verbauten Module als Diagramme, „Google Maps“ Karten oder in einer dreidimensionalen Repräsentation der Maschine dargestellt und analysiert werden.


Aufbau

Die Web-View ist in HTML und JavaScript implementiert und in vier grundlegende Bereiche unterteilt. Die Web-View kann hier erreicht werden.

Die Startseite, auf der sich der Benutzer einloggt und dann eines seiner Geräte auswählt von dem er Daten einsehen möchte.

Abbildung 1: Startseite der Web-View

 Die Diagramm-Darstellung, auf der alle verfügbaren Sensoren und Werte aufgelistet werden und über einen auswählbaren Zeitbereich als Diagramme dargestellt werden können. Hierfür wird die JavaScript Bibliothek „CanvasJS“ verwendet.

Abbildung 2: Diagramm-Darstellung des ausgewählten Zeitbereichs

Die Karten-Ansicht, auf welcher der GPS-Positionsverlauf des ausgewählten Bereichs dargestellt wird. Dabei wird auf die JavaScript API von Google Maps zugegriffen, welche ein einfach zu bedienendes Interface anbietet, trotzdem aber zahlreiche Funktionen besitzt.

Abbildung 3: Positionsverlauf auf einer Google-Karte

Die 3D-Visualisierung, bei der die letzte Position der gewählten Maschine dreidimensional dargestellt wird. Diese Ansicht unterstützt Echtzeitdarstellung mit einem Aktualisierungsinterval von einer Sekunde. Diese Funktionalität wird durch die Bibliothek „ThreeJS“ ermöglicht, welche ebenfalls in JavaScript implementiert ist. Die Daten für das rendern des Models in Echtzeit werden dabei asynchron über einen „WebWorker“ von der Datenbank abgefragt und mittels „Message-Mechanismus“ wieder an die Render-Engine zurückgegeben. Diese Vorgehensweise ist wichtig, um das flüssige Darstellen des Models mit 60 Bildern in der Sekunde zu gewährleisten.

Abbildung 4: 3D-Visualisierung der aktuellen Lage der Maschine

Anbindung zum Server

Die Web-View ist mittels AJAX-Call, der an einen PHP-Controller gesendet wird, in der Lage Daten von der Datenbank abzufragen (Abbildung 5). Der Controller fungiert dabei als Interface für die Datenbank, da es JavaScript alleine nicht möglich ist über SQL-Abfragen Daten aus der Datenbank auszulesen.

Abbildung 5: Überblick über die Verbindung der Web-View zum Server