Interactive wimmelbild

Together with intolight and neongrau, we implemented an interactive wimmelbild about the Internet of Things as a web application.

The Challenge

Turning an interactive exhibit into a high-performance web application that is optimized for all common screen sizes and complies with accessibility standards.

The Client

The Barkhausen Institute is an independent research institute in Dresden, which works closely with the Technical University of Dresden and focuses on the core fields of the Internet of Things.

In the course of advancing digitization, the Internet of Things (IoT for short) is increasingly coming into focus. IoT systems bring great benefits and can facilitate and optimize our everyday life in many ways, but they also pose new challenges for data protection and data security. The Barkhausen Institute in Dresden is researching this, too. With intolight and neongrau, the institute developed an interactive exhibit about the interaction of IoT systems in the future. The artwork comes from the artist Robert Richter.

From exhibit to web application

In order to make the wimmelbild available online, the Barkhausen Institute commissioned the implementation of the exhibit as a web application. This is where we came in. Based on the concept of intolight and neongrau, we developed an interactive application in which free navigation and zooming is possible (similar to Google Maps).

Various animated action points (scenarios) on the picture provide information on certain aspects of IoT systems as texts and short animated videos. The content is available in both German and English.

The entire application is optimized for all screen sizes as well and can therefore be easily used on smartphones and tablets.

The IoT World can be viewed online on the website of the Barkhausen Institute.

Technical implementation

For the technical implementation we chose our favorite framework Vue.js. We also made this our first project using Vue 3, which was freshly released back then. So we created a high-performance server-less single page application (SPA) in which the data is accessed via the API of the Barkhausen Institute. We implemented the design by neongrau with TailwindCSS.

Tell us about your project projekte@phmu.de