The interactive display at the Institute for Interactive Technologies
An interactive display in the Institute for Interactive Technologies at FHNW. Visitors can browse the members of the institute, current and past projects, student projects and publications, and explore a 3D model of the institute floor.
The institute in 3D, modelled in Blender and rendered with three.js
How It Works
The content lives in a Strapi headless CMS, so staff can update people, projects and publications without touching the code. The frontend is a Vue 3 and TypeScript single-page app built with Vite. It pulls everything from Strapi's API and renders the institute model with three.js. Both parts run in Docker, and GitLab CI builds and deploys them on the local development server. The display runs on a local NUC with Ubuntu as the main OS. Chrome runs in kiosk mode and shows the Vue application.
History
C. Merz and I had the idea for the display and built the first version in 2022. Two student projects were later carried out on the display, which I supervised: Design and Implementation of Interaction Capabilities for the IIT Display (IP5, 2024) and Supporting collaborative workspace through an interactive display (IP6 bachelor's thesis, 2024-2025). Recently more members of the institute improved the display, its software and its content.
In its current state, with contributions of multiple students and staff members, the display serves as a central hub for showcasing the institute's work and fostering interaction. New features include interactive elements, games, polls, and live demos of institute projects. Institute projects, members and student projects are automatically scraped from the schools or institute websites and imported into the CMS.
Tech Stack
- Frontend: Vue 3, TypeScript, Vite, three.js
- Backend: Strapi 4 headless CMS with a SQL database
- Deployment: Docker, nginx, GitLab CI