TBF Empfangsscreen

Ein digitaler Empfangsscreen für aktuelle Inhalte

Für den Empfang von TBF + Partner habe ich ein Digital-Signage-System entwickelt, das Inhalte auf einem grossen 4K-Display automatisch abspielt und gleichzeitig eine einfache Verwaltung über eine Admin-Oberfläche ermöglicht.

Das Ziel war eine Lösung, die ohne komplexes CMS und ohne Datenbank funktioniert, sich aber trotzdem komfortabel pflegen lässt. Inhalte werden direkt in der Anwendung erstellt, bearbeitet, gruppiert und auf dem Screen ausgegeben.

Meine Rolle

Ich war für die Konzeption und technische Umsetzung des Systems verantwortlich.

Dazu gehörten unter anderem:

• Aufbau des Anzeige- und Verwaltungskonzepts
• Entwicklung der TV-Ansicht für ein 4K-Display
• Entwicklung der Admin-Oberfläche
• Umsetzung von Inhaltsvorlagen für verschiedene Slide-Typen
• Upload- und Dateiverwaltung für Bilder und Videos
• Struktur für Ordner, Sichtbarkeit und Reihenfolge
• Schutz der Admin-Bereiche mit Microsoft-Login
• Vorbereitung für Deployment, Persistenz und Betrieb

Zwei Ansichten, ein System

Die Anwendung besteht aus zwei Bereichen:

• TV-Ansicht: zeigt die freigegebenen Slides automatisch auf dem Empfangsbildschirm
• Admin-Oberfläche: ermöglicht das Erstellen, Bearbeiten, Organisieren und Aktivieren der Inhalte

Die TV-Ansicht ist für die reine Wiedergabe optimiert. Die Admin-Oberfläche ist dagegen ein Arbeitswerkzeug für Personen, die den Screen pflegen und aktualisieren.

Inhalte flexibel pflegen

In der Admin-Oberfläche können neue Slides direkt angelegt werden. Dafür stehen drei Templates zur Verfügung:

• Bild + Text: Bild links, Text rechts, optional mit QR-Code
• Fun Fact: grossflächige Textfolie
• Video: Vollbild-Video mit Ton

Texte können einfach formatiert werden. Die Anzeigedauer pro Slide ist einstellbar, standardmässig auf acht Sekunden.

Der Empfangsscreen aktualisiert sich regelmässig automatisch, sodass Änderungen nicht manuell neu geladen werden müssen.

Inhalte ordnen statt nur sammeln

Ein wichtiger Teil des Projekts war die Strukturierung der Inhalte. Slides lassen sich nicht nur einzeln verwalten, sondern auch in Ordner gruppieren.

Dadurch können zum Beispiel Inhalte für bestimmte Monate, Themen oder Anlässe zusammengefasst werden. Ein oder mehrere Ordner lassen sich aktiv schalten, sodass auf dem Screen nur genau diese ausgewählten Inhalte abgespielt werden.

Zusätzlich können Slides:

• ein- und ausgeblendet werden
• bearbeitet werden
• gelöscht werden
• per Drag & Drop in Ordner verschoben werden

Auch die Reihenfolge der Ordner selbst lässt sich per Drag & Drop anpassen.

Vorschau wie auf dem echten Screen

Jede Slide-Karte in der Admin-Oberfläche enthält eine Live-Vorschau.

Diese Vorschau rendert den Inhalt mit demselben visuellen System wie die TV-Ansicht. Dadurch ist bereits im Verwaltungsbereich sichtbar, wie eine Folie später auf dem Empfangsbildschirm erscheint.

Das erleichtert die Pflege deutlich, weil Inhalte nicht zuerst veröffentlicht werden müssen, um ihre Wirkung zu prüfen.

Einfache Datenstruktur statt CMS mit Datenbank

Die Anwendung arbeitet bewusst ohne Datenbank.

Stattdessen werden die Laufzeitdaten in einer JSON-Datei sowie in einem Upload-Ordner gespeichert. Dazu gehören:

• Slides
• Ordner
• Anzeigeeinstellungen
• Farben und Theme-Angaben
• hochgeladene Bilder und Videos

Diese Architektur hält das System bewusst schlank und reduziert die technische Komplexität, ohne auf die wichtigsten Verwaltungsfunktionen zu verzichten.

Geschützter Admin-Bereich

Die Verwaltungsoberfläche ist nicht öffentlich zugänglich. Der Zugriff erfolgt über das Microsoft-365-Konto der berechtigten Personen.

Dafür habe ich einen Login mit Microsoft Entra ID umgesetzt. Ohne gültige Anmeldung bleiben der Admin-Bereich, die Vorschauansicht und alle schreibenden API-Zugriffe gesperrt.

Freigegeben werden nur E-Mail-Adressen, die explizit als Administratoren hinterlegt sind.

Technische Umsetzung

Das Projekt wurde als leichtgewichtige Webanwendung mit Node.js und Express umgesetzt.

Zum Stack gehören:

• Node.js und Express für Serverlogik und API
• Vanilla HTML, CSS und JavaScript für die Benutzeroberfläche
• Multer für Datei-Uploads
• Microsoft Entra ID für die Anmeldung
• Docker für lokale und produktive Ausführung
• GitLab CI/CD und Docker Swarm für den Betrieb

Die Anwendung verzichtet bewusst auf zusätzliche Frameworks und Datenbanken. Dadurch bleibt sie übersichtlich, schnell verständlich und einfach deploybar.

Für den Dauerbetrieb vorbereitet

Da der Empfangsscreen kontinuierlich genutzt wird, war auch der Betrieb ein wichtiger Teil des Projekts.

Die produktive Version ist so aufgebaut, dass Daten und Uploads nicht im Container selbst liegen, sondern über persistente Volumes erhalten bleiben. So bleiben Inhalte auch nach Deployments oder Container-Neustarts bestehen.

Das verhindert, dass Slides oder Medien unbeabsichtigt überschrieben oder verloren gehen.

Ergebnis

Entstanden ist ein kompaktes Digital-Signage-System, das sich einfach pflegen lässt und gezielt für den Einsatz im Empfangsbereich entwickelt wurde.

Die Lösung verbindet eine grossformatige Bildschirmansicht mit einer klaren Verwaltungsoberfläche und zeigt, wie sich mit einer bewusst schlanken technischen Architektur ein zuverlässiges internes Tool für die tägliche Kommunikation umsetzen lässt.