Network Switch Augmented Reality Labeling

Eine intuitive Web-App, die es Netzwerktechnikern ermöglicht, physische Netzwerkgeräte schnell und eindeutig über QR-Codes im Browser zu identifizieren. So entsteht eine unmittelbare Verbindung zwischen digitaler Dokumentation und realer Infrastruktur, die Orientierung schafft, Fehler reduziert und den Arbeitsalltag spürbar erleichtert.

Text
Möglichkeit über Augmented Reality für Live-Video-Streams zur Echtzeit-Beschriftung der Netzwerkgeräte

Ausgangslage

In kleinen und grossen Unternehmen sind heutzutage oft sehr komplexe Computer Netzwerke vorhanden, mit verschiedenen VLANs, Subnetzen etc. Dies macht die Arbeit an Netzwerk-Geräte oft sehr mühsam, wenn ein Netzwerk Engineer zunächst herausfinden muss, auf welchen Netzwerk-Ports welches VLAN ist. Oft werden Netzwerkgeräte gelabelt oder manuell dokumentiert, was zu Verwechslungen führen kann, wenn die Dokumentation nicht nachgezogen wurde.

Zielsetzung

Eine webbasierte Anwendung ermöglicht es Netzwerktechnikern, mit einem einfachen Foto eines Netzwerkschranks sofort relevante Informationen zu den darin befindlichen Geräten wie Switches, Routern oder Servern abzurufen. Die App erkennt die Geräte automatisch auf dem Bild und ergänzt dieses visuell mit wichtigen technischen Daten. So wird die Wartung vor Ort deutlich vereinfacht ohne manuelle Suche oder Zugriff auf separate Dokumentationen.

Switch Labeling
                            
                        
Als Beispiel haben wir hier einen 24 Ports Netzwerkswitch, welcher im System als WSJ-03
                            bekannt ist. Ein QR-Code links auf der Front ermöglicht die digitale Identifikation.
QR-Codes als Informationsanker
                            
                        
Jedes Netzwerkgerät im Schrank ist mit einem individuellen QR-Code versehen. Dieser dient als
                            eindeutiger Identifier und ermöglicht den Zugriff auf Zusatzinformationen wie Gerätebild,
                            Schrankbild und Schrankposition.
Web GUI
                            
                        
Die Benutzeroberfläche der Web-App zeigt über erkannte QR-Codes die zugehörigen
                            Netzwerkgeräte, deren Position im Schrank sowie belegte und freie Ports übersichtlich an.
                            Zusätzlich können Bilder angezeigt und verwaltet werden.

Ergebnisse

Die entwickelte Web-Applikation ermöglicht die schnelle Identifikation und Visualisierung von Netzwerkgeräten auf Basis eines einfachen Fotos. Über automatisch generierte QR-Codes lassen sich Geräte eindeutig zuordnen und mit Detailinformationen anreichern und das direkt im Browser und ohne zusätzliche Software.

Live-Scan von QR-Codes über die Kamera direkt im Browser.
Automatisches Abrufen von Geräteinformationen.
Visuelle Darstellung der Portbelegung über klickbare Buttons.
Darstellung und Verwaltung von Geräte- und Schrankbildern.
QR-Code-Generator zur einfachen Erweiterung der Infrastruktur.
Responsives Design für mobile Nutzung in Technikräumen.

Die Lösung wurde mit offenen Webtechnologien realisiert, um eine flexible, erweiterbare und plattformunabhängige Anwendung zu schaffen. Sie unterstützt Netzwerktechniker bei der schnellen, visuellen Zuordnung von Geräten im Feld und reduziert die Fehleranfälligkeit manueller Prozesse. In den Evaluationen wurde die Anwendung von Dozenten der FHNW als intuitiv, funktional und praxisnah bewertet. Besonders hervorgehoben wurden die klare visuelle Rückmeldung beim Scannen sowie die unmittelbare Verknüpfung physischer Geräte mit ihren digitalen Informationen.

Technische Schlüsselbegriffe

ReactJavaScript-Bibliothek zur Entwicklung komponentenbasierter, dynamischer Webanwendungen im Frontend
TypeScriptTypsichere Erweiterung von JavaScript zur besseren Strukturierung und Wartbarkeit des Frontends
FastAPIModernes Python-Webframework zur schnellen Entwicklung performanter REST-APIs im Backend
REST-APISchnittstelle zur Abfrage gerätespezifischer Daten aus dem Backend auf Basis eindeutiger Identifikatoren
HTML5Browserbasierter Kamerazugriff zur medienunabhängigen QR-Code-Erkennung ohne native App
ZXingOpen-Source-Bibliothek zur Echtzeit-Erkennung und Dekodierung von QR-Codes im Browser
QR-Code-LabelingVerwendung von maschinenlesbaren QR-Codes zur eindeutigen Identifikation
Datei-MappingZuweisung und Verwaltung von Dateien über ein strukturiertes Pfadsystem im Backend
Responsive WebdesignAnpassung der Benutzeroberfläche an verschiedene Bildschirmgrössen für mobile und stationäre Geräte

Team

Arian Sejdiu
Rinor Shala

Betreuerin
Christopher Scherb
Luc Heitz