Ein Interaktives Wimmelbild zu Internet of Things

Zusammen mit intolight und neongrau setzten wir ein interaktives Wimmelbild über das Internet der Dinge als Webanwendung um

Projektpartner
Barkhausen Institut Dresden
Zeitraum
Leistungen
Frontend Entwicklung, Testing
Ergebnis
Website

Aus analog wird digital

Im Zuge der fortschreitenden Digitalisierung rückt das Internet of Things (kurz IoT, Internet der Dinge) immer mehr in den Fokus. IoT-Systeme bringen großen Nutzen mit sich und können unseren Alltag in vielerlei Hinsicht erleichtern und optimieren, stellen dabei aber auch Datenschutz und -sicherheit vor neue Herausforderungen. Damit beschäftigt sich auch das Barkhausen Institut in Dresden. Über das Zusammenspiel von IoT-Systemen in der Zukunft entwickelte das Institut mit intolight und neongrau ein interaktives Exponat. Das Artwork stammt vom Künstler Robert Richter.

Vom Exponat zur Webanwendung

Um das Wimmelbild auch online zur Verfügung zu stellen, gab das Barkhausen Institut die Umsetzung des Exponates als Webanwendung in Auftrag. Hier kamen wir ins Spiel. Anhand des Konzeptes von intolight und neongrau entwickelten wir eine interaktive Anwendung, in der man (ähnlich wie bei Google Maps) frei navigieren und zoomen kann.

Verschiedene animierte Aktionspunkte (Szenarien) auf dem Bild bieten Informationen zu bestimmten Aspekten von IoT-Systemen in Form von Texten und kurzen animierten Videos. Dabei sind die Inhalte sowohl auf Deutsch als auch auf Englisch verfügbar.

Die gesamte Anwendung ist zudem für sämtliche Bildschirmgrößen optimiert und lässt sich daher auch auf Smartphones und Tablets problemlos bedienen.

Die IoT-Welt kann online über die Seite des Barkhausen Instituts eingesehen werden.

Technische Umsetzung

Bei der technischen Umsetzung fiel die Wahl auf unser Lieblingsframework Vue.js. Hier setzten wir erstmalig die neue Version Vue 3 ein, die zum damaligen Zeitpunkt frisch veröffentlicht wurde. So erstellten wir eine performante serverlose Single Page Application (SPA), in dem die Daten über die API des Barkhausen Instituts abgerufen werden. Das Design von neongrau setzten wir mit TailwindCSS um.

Ihr Projekt als digitales Wimmelbild?

Ich berate Sie gern zu den Anforderungen und der Umsetzung

Philipp Munzert

Projekte

Weitere Projekte, die wir für unsere Kunden umgesetzt haben.