AI+D
Project |

Virtual AI+D lab

The ‘Virtual Lab’ was developed as a digital learning space for students and lecturers for hybrid teaching. It combines the functions of a web-based collaborative whiteboard with a playful element.

By providing a variety of illustrations of everyday objects in a work or classroom context, for example: tables, chairs, plants, computers, projectors, coffee cups, presentation screens and much more, each course participant can help to shape the virtual spaces or working environments. Course participants, whether on-site or joining digitally, can thus collaborate to design their workspace and document processes and results. The lecturer can create workstations and provide learning materials in advance.

Concept and First Prototypes

The concept builds on experiences gained from using digital whiteboards in bachelor’s and master’s workshops, where Miro was primarily used as a digital space for organization and discourse. These experiences, combined with feedback from students, gave rise to the idea of a dedicated, “tangible” digital learning space. First, Mark-Jonathan Freyer designed isometric assets and with the help of Ron Mandić visual, functional prototypes were built iteratively: first in Miro, then in tldraw, arriving at the current Excalidraw-based implementation.

Tool Design

Excalidraw’s existing functionality was extended with the ability to embed PDF documents, load the isometric illustration library, preview links, and a sticky note tool. Substantial modifications were made to Excalidraw’s data storage layer to allow rooms and libraries to be loaded persistently from a data server. This enables the tool to be self-hosted and deployed on a custom server. The frontend is a static website. The two backend services (storage server and collaboration server) run as systemd services on Ubuntu server. A reverse proxy (nginx) provides a dedicated subdomain for each backend. The source code is published on GitHub

Screenshot from the virtual AI+D Lab

Screenshot from the virtual AI+D Lab

Screenshot from the virtual AI+D Lab

Screenshot from the virtual AI+D Lab

Screenshot from the virtual AI+D Lab

Ressources