Für einen Kunden im Bereich Video- und Kamerasysteme zur Prozessoptimierung und -Überwachung sowie Digitalisierung Logistik und Transport wurde eine moderne Web UI für ein bestehendes Kundensystem entwickelt, das durch die videogestützte Erkennung von Zeichen, Beschriftungen und Nummern eine vollautomatische Erfassung von LKWs und Zügen, bzw. Waggons sowie deren Ladeeinheiten an Ein- und Ausfahrten zu geschlossenen Infrastrukturbereichen ermöglicht. Dieses System ist in der Regel direkt in bestehende Logistiksysteme integriert und verfügte bisher nur über eine rudimentäre Bedienoberfläche. Aus diesem Grund sollte das System durch eine moderne Web UI erweitert werden.

Bei der Entwicklung lag der Fokus neben der Funktionalität, insbesondere auf der UX Optimierung. Deshalb wurden für alle UI Komponenten Mockups sowie Feedback- bzw. Korrekturschleifen vorgesehen, in denen unser Kunde und im besten Fall auch bereits Endnutzer in die UX Entwicklung mit einbezogen wurde und somit direkt Einfluss auf die Entwicklung nehmen konnte. Ein großer Mehrwert, da die Anforderungen dadurch kontinuierlich verfeinert und an die Kundenwünsche angepasst werden konnten.

Nach dem Starten der Anwendung im Browser ist die Passagensuche einer der ersten und damit wohl wichtigsten Einstiegspunkte. Der Benutzer gelangt entweder über die gespeicherten Suchanfragen im Dashboard oder über das Lupensymbol in der Navigationsleiste zur Ansicht der Passagensuche. Hierbei stehen zahlreiche Möglichkeiten zur Auswahl nach den gewünschten Passagen über Suchparameter wie beispielsweise Datum, Uhrzeit oder auch die Richtung der Durchfahrt und Zeichentyp wie beispielsweise „Gefahrgut“ oder „UIC“ Nummern zu suchen.

Von der zuvor erwähnten Passagensuche und den Suchergebnissen gelangt der Nutzer mit Klick in die gewünschte Zeile zur Detailansicht der ausgewählten Passage (Passagenansicht) und den Bilddaten. Die Passagenansicht ist hierbei unterteilt in den oberen Navigationsbereich und den Inhaltsbereich. Im Navigationsbereich können die gewünschten Waggons ausgewählt werden, die dann im Inhaltsbereich beispielsweise im Videoplayer angezeigt und abgespielt werden können.

Hier lagen auch die größten Herausforderungen: Es mussten alle Kamerakanäle gleichzeitig und synchron abspielbar sein. Alle Videos und Bilder sollten Annotationen haben sowie „zoom“- und „drag“-bar sein. Weiterhin mussten auf diese Weise auch die sogenannten „Stitches“ angezeigt werden. Wird ein Fahrzeug von einer Kamera erfasst, so erfasst diese in der Regel nur einen Teilausschnitt und nicht beispielsweise den gesamten Zug oder den gesamten LKW. Aus diesem Grund werden sogenannte „Stitches“ aus Einzelbildausschnitten zusammengefügt und man erhält dadurch ein komplettes Bild eines kompletten Zuges. Da diese „Stitches“ die maximale Länge von Standardbildformaten überschreiten können, musste ein spezieller „Stitchviewer“ implementiert werden. Hierbei werden Teile der „Stitches“ automatisch nachgeladen, sobald diese in den Sichtbereich des Anwenders gescrollt werden.

Weitere Auswahlmöglichkeiten wie „Erkannte Zeichen“ und „Bewegungsprofil“ werden hier im Navigationsbereich ebenfalls bereitgestellt.

Die bereits zuvor erwähnte Passagenansicht muss neben Durchfahrten vom Typ „Schiene“ auch Durchfahrten vom Typ „Straße“ anzeigen können. Dabei sollten möglichst viele Komponenten aus der Schienenansicht wiederverwendet werden und mussten deshalb für die Anzeige von LKWs entsprechend kompatibel gemacht werden. Der Navigationsbereich zeigt bei Durchfahrten vom Type „Straße“ beispielsweise abhängig von der Position am Fahrzeug eine strukturierte Liste von erkannten Zeichen an. Dadurch lässt sich einfach durch die verschiedenen Detailansichten navigieren: Beim Klick auf ein erkanntes Zeichen auf dem Fahrzeug, springt beispielsweise der Videoplayer im Inhaltsbereich an die entsprechende Stelle, die Ansicht mit den jeweiligen „Stitches“ an die passende Position und die Ansicht mit den Einzelbildern wechselt zum zugehörigen Einzelbild.

Über die Ansicht „Erkannte Zeichen“ im Inhaltsbereich der Passagenansicht, werden die Bilddaten des hier abgebildeten LKWs im Detail aus verschiedenen Kamerapositionen angezeigt und die erkannten Zeichen wie beispielsweise das KFZ-Zeichen oder die Typnummer des Fahrzeuges im Navigationsbereich ausgegeben. Über die „Detail Ansicht“ kann der Nutzer sich weitere Bilddaten der verschiedenen Kameraperspektiven anzeigen lassen. In der Abbildung wird hier beispielsweise die Draufsicht auf den LKW und die Seitenansicht des LKWs angezeigt.

Auch für die Ansicht auf mobilen Endgeräten wurde das Design und Layout ansprechend für den Kunden umgesetzt. Über eine schlanke Navigation sind sämtliche für den Kunden relevante Funktionen übersichtlich dargestellt und insbesondere für den Benutzer einfach zu bedienen und schnell erreichbar. Durch Responsive Design wurden die UI Komponenten für sämtliche Displaygrößen einschließlich Smartphones, Desktop PC und Tablet optimiert. Das Layout konnte dadurch automatisch auf das Ausgabemedium angepasst werden, um auf den verschiedensten Endgeräten zuverlässig ein gutes Nutzererlebnis sicherzustellen.

Über das Kamerasymbol „Status“ in der Navigationsleiste wird für jedes „Gate“ über den Zustand angezeigt, ob aktuell eine Zug- oder LKW Durchfahrt aktiv ist oder nicht. Weiterhin kann der Verbindungsstatus sowie der Zeitpunkt der letzten Verbindung eingesehen werden.

Für jedes Gate werden die verfügbaren Kamerakanäle inklusive Standort, aktive Zeichenerkennungstypen sowie Verbindungsstatus ausgewiesen. Für jeden Kamerakanal kann ein Echtzeitvideo aktiviert werden, um beispielsweise aktive Durchfahrten in Echtzeit zu verfolgen.

Das Backend wurde mit Go implementiert und verbindet sich direkt mit der PostgreSQL Datenbank des bestehenden Kundensystems. Das implementierte Backend stellt mit einer RESTful API eine offenen und standardisierte Schnittstelle zur Verfügung für das Web UI sowie für weitere Integrationen zur Verfügung. Alle Listenendpunkte bieten standardmäßig Support für Pagination, Suche und Sortierung. Alle API Objekte können durch eindeutige UUID´s referenziert werden.

Die Schnittstellenbeschreibung und Definition wurde anhand der OpenAPI Spezifikation Version 3 erstellt. Dadurch konnten Datenstrukturen und Code sowohl für das Backend, als auch für das Frontend abgeleitet und teilweise automatisch erstellt werden. Weiterhin kann die standardisierte API Beschreibung beispielsweise über die Swagger UI direkt verwendet werden. Dies ist nicht nur während der Entwicklung hilfreich, sondern erleichtert auch die Entwicklung zukünftiger Erweiterungen oder Integrationen.

Neben der Datenbank verbindet sich das Backend auch mit dem Video- und Bildserver des Kundensystems und stellt die Video- und Bilddaten in einem kompatiblen Video- und Bildformat für das Frontend zur Verfügung. Zusammen mit einem entwickelten Caching wird somit das Anzeigen der Video- und Bilddaten in Echtzeit sowie im entsprechenden Video- und Bildformat in der Web UI über die API ermöglicht.

Das Frontend wurde als Webanwendung und nach dem Material Design Standard (Quantum Paper) mit React umgesetzt. Hierzu wurde MUI (Material UI) verwendet, eine UI-Library für React, welche die Material Design Vorgaben von Google vollständig implementiert. Damit erfüllt das Frontend implizit die von Google entwickelten UI/UX Richtlinien für moderne Webanwendungen. Dazu gehört auch das Responsive Design, welches die UI Komponenten für sämtliche Displaygrößen einschließlich Desktop PC, Tablet und Smartphones optimiert (siehe auch Mobile Endgeräte). Für zukünftige Versionen wurde außerdem vorgesehen, dass ein Branding oder White-Labeling für Kunden, beispielsweise die Anpassung des Logos oder der Themefarben, unterstützt.

Vor Projektstart wurden mit unserem Kunden in mehreren Iterationen bereits konkrekte „Mockups“ besprochen, wodurch wir die später entstandene UI konkret mit dem Kunden festlegen und finalisieren konnten. Durch die genauen Wünsche, Ansichten und Vorstellungen unseres Kunden zum Projektstart, wurde somit schnell und effizient mit unserer Arbeit begonnen. Eine Herausforderung war definitiv der erste Meilenstein im Projekt, welcher durch einen bereits festgelegten Messeauftritt als harte Deadline vorgegeben war und erfolgreich sogar noch vor der vorgegebenen Deadline erreicht werden konnte. Anschließend wurden verbleibende Änderungswünsche und Fehlerquellen vor einer finalen Abnahme des Kunden nachgearbeitet. Die UI/UX Anforderungen sowie die Vorgaben für ein Corporate Design wurden zur vollen Zufriedenheit des Kunden umgesetzt, sodass die Web UI nun durch die moderne und elegante webbasierte UI einen deutlichen Mehrwert für das System unseres Kunden darstellt.