19 KiB
B2in Schaufenster-Display – Entwicklungskonzept
Status: Entwicklungsvorlage | Februar 2026
1. Projektübersicht
1.1 Zweck
Ein großformatiges Display im Schaufenster des CABINET Stores in Bielefeld zeigt B2in-Content im Hochformat (9:16). Ziel: Laufkundschaft in 3–5 Sekunden eine klare Botschaft vermitteln – B2in als Marke für internationale Immobilien und exklusive Einrichtungskonzepte. Das Display läuft parallel zum CABINET-Schaufenster und ist eigenständig gebrandet.
1.2 Technischer Ansatz
Die Anzeige wird als Webapp unter einer Subdomain ( Subdomain (cabinet.b2in.eu/info <- live / [https://b2in.test/_cabinet](https://b2in.test/_cabinet)/info ← testserver) bereitgestellt. Ein Smart TV mit android greift im Vollbildmodus über den Browser darauf zu. Inhalte (Videos, Bilder, Texte) werden über das B2in-Backend (CMS) gepflegt und rotieren automatisch.
1.3 Branding
Ausschließlich B2in-Branding. Kein CABINET-Logo, kein Azizi, keine Partnerlogos. Der Frame zeigt: B2in-Logo, Claim "Connecting Design & Property", Marcel Scheibe als Person, b2in.de und QR-Code.
2. Display-Architektur
2.1 Formatierung
Das Display steht im 9:16 Hochformat (Portrait). Das Videomaterial liegt im 16:9 Querformat vor. Daraus ergibt sich ein natürlicher Split:
┌─────────────────────────┐ │ HEADER │ ← Fester Bereich: Logo + Claim │ B2in · Claim │ ├─────────────────────────┤ │ │ │ │ ← Oberer Leerraum (Gradient zum Video) │ ┌───────────────────┐ │ │ │ │ │ │ │ VIDEO / BILD │ │ ← 16:9 Content-Bereich (rotierend) │ │ (16:9) │ │ │ │ │ │ │ └───────────────────┘ │ │ │ ← Unterer Leerraum (Gradient zum Text) │ │ ├─────────────────────────┤ │ TEXTFELD │ ← Rotierender Text (Headline + Subline) │ Headline + Subline │ ├─────────────────────────┤ │ FOOTER │ ← Fester Bereich: Name + URL + QR │ Marcel Scheibe · QR │ └─────────────────────────┘
2.2 Bereiche im Detail
| # | Bereich | Inhalt | Verhalten |
|---|---|---|---|
| 1 | Header | B2in-Logo (links) + Claim "Connecting Design & Property" (rechts). | Fest. Steht permanent, unabhängig vom Content. |
| 2 | Content-Bereich | 16:9 Video (MP4) oder Einzelbild (JPG/PNG). Nimmt ca. 50–60% der Screenhöhe ein. Oben und unten Gradient-Übergang zum dunklen Hintergrund. | Rotiert automatisch. Reihenfolge und Dauer per CMS steuerbar. |
| 3 | Textfeld | Headline (max. 40 Zeichen) + Subline (max. 80 Zeichen). Passt sich dem aktuellen Content an. | Wechselt synchron mit dem Video/Bild. Sanfte Fade-Transition. |
| 4 | Footer | "Marcel Scheibe" (Name) + "b2in.de" (URL) + QR-Code (rechts). | Fest. Steht permanent. |
3. Content-Rotation (Playlist-System)
3.1 Konzept
Das Display zeigt eine Playlist von Content-Items, die automatisch durchrotieren. Jedes Item besteht aus einem Medienelement (Video oder Bild) plus passendem Text.
3.2 Gewichtung
Die Rotation folgt einer definierten Gewichtung:
| Kategorie | Anteil | Beispiel-Content |
|---|---|---|
| Immobilien | ~70% | Dubai-Projekte, internationale Lifestyle-Aufnahmen, Architektur |
| Möbel / Einrichtung | ~30% | Lokale Händler-Highlights, Einrichtungskonzepte, Interior-Design |
Die Gewichtung wird über ein category-Feld pro Item gesteuert. Das Frontend berechnet die Rotation so, dass die Verteilung über einen Durchlauf eingehalten wird (z. B. bei 10 Items: 7× Immobilien, 3× Möbel).
3.3 Content-Item Struktur
Jedes Playlist-Item hat folgende Eigenschaften:
| Feld | Typ | Beschreibung |
|---|---|---|
id |
Auto | Eindeutige ID |
title |
Text (intern) | Interner Name zur Identifikation im CMS (wird nicht angezeigt) |
category |
Dropdown | immobilien |
media_type |
Dropdown | video |
media_file |
Upload (MP4/JPG/PNG) | Mediendatei. Videos: MP4, H.264, max. 1080p. Bilder: JPG/PNG, min. 1920x1080. |
media_url |
URL (optional) | Alternative zu Upload: Externe Video-/Bild-URL. Wird bevorzugt wenn vorhanden. |
headline |
Text | Max. 40 Zeichen. Wird im Textfeld angezeigt. |
subline |
Text | Max. 80 Zeichen. Erklärender Text unter der Headline. |
duration_seconds |
Zahl | Anzeigedauer in Sekunden. Für Bilder: empfohlen 8–12 Sek. Für Videos: wird ignoriert, Dauer ergibt sich aus Videolänge. |
sort_order |
Zahl | Reihenfolge in der Playlist. Niedrigste Zahl zuerst. |
is_active |
Toggle | Aktiv/Inaktiv. Inaktive Items werden übersprungen. |
3.4 Beispiel-Playlist
| # | Titel (intern) | Kategorie | Typ | Headline | Subline | Dauer |
|---|---|---|---|---|---|---|
| 1 | Dubai Skyline Video | immobilien | video | Internationale Immobilien — Ihr Einstieg. | Beratung, Begleitung und Vermittlung. Persönlich. Transparent. | (Video) |
| 2 | Dubai Villa Rendering | immobilien | image | Ihr Zuhause. Weltweit. | Von Dubai bis Europa – wir finden Ihre Immobilie. | 10s |
| 3 | Möbel Showroom | moebel | image | Exklusive Einrichtung — Lokal. Für Sie. | Kuratierte Möbelkonzepte von lokalen Fachhändlern. | 10s |
| 4 | Dubai Pool Lifestyle | immobilien | video | Dubai. Lissabon. Und morgen? | Internationale Immobilien als Kapitalanlage. | (Video) |
| 5 | Dubai Apartment Tour | immobilien | video | Neubau ab 3.000 €/m² | Wertsteigerung. Steuervorteile. Persönliche Begleitung. | (Video) |
| 6 | Interior Design Mood | moebel | image | Lokale Händler. Echte Stücke. | Ausstellungsstücke und Designmöbel aus Ihrer Region. | 10s |
| 7 | Dubai Cityscape Drone | immobilien | video | Ihr Immobilien-Dolmetscher. | Marcel Scheibe begleitet Sie durch den gesamten Kaufprozess. | (Video) |
4. CMS-Felder (B2in-Backend)
Im B2in-Backend wird ein eigener Bereich „B2in Display" angelegt mit zwei Ebenen: globale Einstellungen und die Playlist-Items.
4.1 Globale Einstellungen
| Feldname | Typ | Beschreibung |
|---|---|---|
display_active |
Toggle | Master-Schalter. Wenn deaktiviert, zeigt das Display einen Standby-Screen (nur Logo). |
footer_name |
Text | Name im Footer. Standard: "Marcel Scheibe" |
footer_url |
Text | URL im Footer. Standard: "b2in.de" |
qr_code_image |
Upload (PNG/SVG) | QR-Code Asset für den Footer. |
rotation_weight_immobilien |
Zahl (%) | Soll-Anteil Immobilien-Content. Standard: 70. |
rotation_weight_moebel |
Zahl (%) | Soll-Anteil Möbel-Content. Standard: 30. |
default_image_duration |
Zahl (Sek.) | Standard-Anzeigedauer für Bilder, wenn beim Item nichts eingetragen. Standard: 10. |
transition_type |
Dropdown | fade |
transition_duration_ms |
Zahl | Dauer der Transition in Millisekunden. Standard: 800. |
4.2 Playlist-Items
Wiederholbare Einträge (Repeater-Feld oder eigene Collection), Felder wie in Abschnitt 3.3 definiert.
4.3 Zeichenlimit-Hinweise für Marcel
Im CMS sollten bei den Textfeldern visuelle Hinweise erscheinen:
- Headline: Zähler „12/40 Zeichen" – wird rot ab 35
- Subline: Zähler „45/80 Zeichen" – wird rot ab 70
- Begründung: Auf dem Display müssen die Texte in 3 Sekunden lesbar sein. Längere Texte werden nicht gelesen.
5. API-Endpoint
5.1 Endpoint-Struktur
GET /api/b2in-display/playlist
Response (JSON):
json
{ "settings": { "display_active": true, "footer_name": "Marcel Scheibe", "footer_url": "b2in.de", "qr_code_url": "/assets/qr-b2in.svg", "rotation_weights": { "immobilien": 70, "moebel": 30 }, "default_image_duration": 10, "transition": { "type": "crossfade", "duration_ms": 800 } }, "items": [ { "id": 1, "category": "immobilien", "media_type": "video", "media_url": "/media/display/dubai-skyline.mp4", "headline": "Internationale Immobilien — Ihr Einstieg.", "subline": "Beratung, Begleitung und Vermittlung. Persönlich. Transparent.", "duration_seconds": null, "sort_order": 1, "is_active": true }, { "id": 2, "category": "moebel", "media_type": "image", "media_url": "/media/display/showroom-lokal.jpg", "headline": "Exklusive Einrichtung — Lokal. Für Sie.", "subline": "Kuratierte Möbelkonzepte von lokalen Fachhändlern.", "duration_seconds": 10, "sort_order": 3, "is_active": true } ], "updated_at": "2026-02-26T14:30:00Z" }
5.2 Update-Mechanismus (Polling)
Gleicher Ansatz wie beim CABINET Info-Tablet:
1. Lightweight Check (alle 60 Sekunden):
GET /api/b2in-display/check
json
{ "updated_at": "2026-02-26T14:30:00Z" }
2. Full Fetch (nur bei Änderung): Wenn Timestamp abweicht → komplette Playlist neu laden. Laufendes Video wird zu Ende gespielt, dann greift die neue Playlist.
Warum 60 statt 30 Sekunden? Das Display zeigt eine Playlist, keine Echtzeit-Infos. Wenn Marcel ein neues Video hochlädt, ist eine Verzögerung von maximal 60 Sekunden völlig akzeptabel.
6. Frontend-Logik
6.1 Playlist-Engine
Das Frontend implementiert eine einfache Playlist-Engine:
`Ablauf:
- Playlist laden (API-Call)
- Nur aktive Items filtern (is_active === true)
- Items nach sort_order sortieren
- Gewichtung anwenden:
- Items nach Kategorie gruppieren
- Rotation so mischen, dass die %-Verteilung eingehalten wird
- Beispiel bei 70/30: I, I, M, I, I, I, M, I, I, M (bei 10 Items)
- Erstes Item anzeigen
- Bei Video: Warten bis Video endet → nächstes Item
- Bei Bild: duration_seconds abwarten → nächstes Item
- Am Ende der Playlist: Von vorne beginnen
- Zwischen Items: Transition (crossfade/fade/slide)`
6.2 Video-Handling
| Aspekt | Spezifikation |
|---|---|
| Format | MP4, H.264 Codec, max. 1080p (1920x1080) |
| Autoplay | Videos starten automatisch, gemutet (Browser-Policy). Ton ist nicht relevant für Schaufenster-Display. |
| Ladezeit | Videos werden im Hintergrund vorgeladen (nächstes Item in der Playlist wird gepreloaded während das aktuelle läuft). |
| Fehlerfälle | Wenn ein Video nicht lädt (404, Netzwerkfehler): Item überspringen, nächstes anzeigen. Fehler loggen. |
| Loop | Kein Loop pro Video. Jedes Video spielt einmal, dann kommt das nächste Playlist-Item. |
6.3 Bild-Handling
| Aspekt | Spezifikation |
|---|---|
| Format | JPG oder PNG, min. 1920x1080 Pixel |
| Skalierung | object-fit: cover – Bild füllt den 16:9-Bereich, wird bei Bedarf beschnitten. |
| Dauer | Aus duration_seconds des Items oder default_image_duration aus den globalen Settings. |
| Ken-Burns-Effekt (optional) | Langsamer Zoom-In während der Anzeigedauer. Macht statische Bilder lebendiger. Per CSS-Animation, kein JavaScript nötig. |
6.4 Text-Synchronisation
Headline und Subline wechseln synchron mit dem Media-Content:
- Aktuelles Textfeld ausblenden (fade-out, 400ms)
- Neuen Text setzen
- Neues Textfeld einblenden (fade-in, 400ms)
- Timing: Text-Transition startet 200ms vor dem Media-Wechsel, damit beides gleichzeitig erscheint.
7. Technische Stabilität & Kiosk-Betrieb
7.1 Hardware-Setup
| Komponente | Empfehlung |
|---|---|
| Display | TV/Monitor im Hochformat (9:16), 43–55 Zoll. Full HD ausreichend (1080x1920 in Portrait). LED/LCD mit hoher Helligkeit (min. 350 nits, ideal 500+ nits für Schaufenster mit Sonneneinstrahlung). |
| Media Player | Dedizierter Android-Stick oder -Box (z. B. Amazon Fire TV Stick 4K, Xiaomi Mi Box, oder professionell: BrightSign). Alternativ: Smart TV mit Browser. |
| Kiosk-Software | Fully Kiosk Browser (wenn Android). Bei BrightSign: eigene Kiosk-Funktionalität. |
| Halterung | VESA-Wandhalterung, Portrait-Montage. Ggf. mit Blickwinkelschutz-Folie wenn das Display zu nah an der Scheibe steht. |
| Stromversorgung | Dauerstrom. Optional: Zeitschaltuhr oder Smart Plug für automatisches Ein/Aus (z. B. 07:00–22:00). |
| WLAN | Stabiles Store-WLAN. Bei Verbindungsproblemen: LAN-Adapter als Fallback. |
7.2 Webapp-seitige Stabilität
| Maßnahme | Beschreibung |
|---|---|
| Auto-Reload | Kompletter Page-Reload alle 6 Stunden. Räumt Speicher auf – besonders wichtig bei Video-Wiedergabe, die Memory Leaks verursachen kann. |
| Video-Memory-Management | Nach jedem Video: src des Video-Elements leeren und neu setzen, damit der Browser den Speicher freigibt. Kein Stapeln von Video-Elementen. |
| Offline-Fallback | Wenn API nicht erreichbar: Letzte Playlist aus localStorage abspielen. Kein schwarzer Bildschirm. |
| Connection-Recovery | Polling-Fehler 3x hintereinander → 5 Min. Pause → erneut versuchen. Nach 30 Min. ohne Verbindung → Page-Reload. |
| Lokaler Cache | Playlist-JSON wird in localStorage gespeichert. Mediendateien werden im Browser-Cache gehalten (Cache-Control Headers serverseitig setzen, z. B. max-age=86400). |
| Standby-Modus | Optionaler CMS-Toggle: Wenn display_active = false, zeigt die Webapp nur das B2in-Logo auf dunklem Hintergrund. Kein Content, kein Textfeld. |
| Error-Overlay | Bei kritischen Fehlern (keine Playlist, kein Media): Dezentes B2in-Logo auf dunklem Hintergrund. Niemals ein Browser-Fehlerbild oder weißer Screen. |
| Automatischer Playlist-Neustart | Wenn die Playlist durchgelaufen ist und das nächste Polling eine Änderung zeigt: Neue Playlist nahtlos übernehmen. |
7.3 Performance-Hinweise
- Videos sollten für Web optimiert sein: MP4, H.264, AAC Audio (auch wenn gemutet),
moov atomam Anfang der Datei (für schnellen Start) - Empfohlene Bitrate: 5–8 Mbit/s für 1080p
- Bilder sollten als WebP oder komprimiertes JPG vorliegen (max. 500 KB pro Bild)
- Preloading: Immer das nächste Item vorladen, während das aktuelle abgespielt wird
8. Frontend-Spezifikation
8.1 Technologie
- HTML/CSS/JS (Vanilla). Kein Framework nötig.
- Responsive für gängige Display-Auflösungen im 9:16 Portrait (1080x1920, 720x1280)
8.3 Transitions zwischen Items
| Transition-Typ | Beschreibung |
|---|---|
fade |
Aktuelles Item blendet aus (opacity 1→0), neues blendet ein (opacity 0→1). |
crossfade |
Neues Item blendet über dem aktuellen ein. Sanfter, da kein schwarzer Zwischenzustand. Empfohlen. |
slide |
Aktuelles Item gleitet nach links raus, neues kommt von rechts rein. |
Standard: crossfade mit 800ms. Per CMS änderbar.
9. Leitplanken für Content-Pflege
Diese Regeln sollten im CMS als Hinweistext sichtbar sein:
✓ Ja, so machen wir es:
- Ein Item, eine Botschaft. Jedes Playlist-Item hat eine klare Aussage: Immobilien ODER Möbel.
- Texte kurz halten. Headline max. 40 Zeichen, Subline max. 80 Zeichen. Was in 3 Sekunden nicht gelesen werden kann, wird nicht gelesen.
- Nur B2in-Content. Keine Partnerlogos im Video/Bild. Kein Azizi-Branding. Kein CABINET.
- Hochwertige Medien. Nur professionelles Video-/Bildmaterial. Keine Handy-Fotos, keine Screenshots.
- Regelmäßig aktualisieren. Playlist mindestens quartalsweise prüfen. Abgelaufene Projekte rausnehmen.
✗ Das vermeiden wir:
- Zu viele Items. Max. 8–10 Items in der Playlist. Mehr führt zu langer Rotation, Wiederholung wird selten.
- Text im Video. Wenn das Video bereits Text enthält, Headline und Subline reduzieren oder leer lassen – sonst doppelt sich die Information.
- Preislisten oder Grundrisse. Das Display weckt Neugier, es informiert nicht. Details gehören auf die Website.
- Verschiedene Botschaften mischen. Kein Item, das gleichzeitig Dubai, Möbel und CABINET bewirbt.
10. Umsetzungs-Checkliste
| # | Aufgabe | Verantwortlich | Status |
|---|---|---|---|
| 1 | CMS-Bereich "B2in Display" anlegen: Globale Settings + Playlist-Repeater (Abschnitt 4) | Backend-Entwicklung | Offen |
| 2 | API-Endpoint /api/b2in-display/playlist + /check implementieren (Abschnitt 5) |
Backend-Entwicklung | Offen |
| 3 | Media-Upload-Funktion im CMS (MP4 + JPG/PNG) mit Größen-Validierung | Backend-Entwicklung | Offen |
| 4 | Frontend-Webapp mit Playlist-Engine bauen (Abschnitt 6) | Frontend-Entwicklung | Offen |
| 5 | Video-Preloading + Memory-Management implementieren (Abschnitt 6.2 + 7.2) | Frontend-Entwicklung | Offen |
| 6 | Polling-Mechanismus + Offline-Fallback + Auto-Reload (Abschnitt 5.2 + 7.2) | Frontend-Entwicklung | Offen |
| 7 | Subdomain einrichten + SSL + Deployment | DevOps | Offen |
| 8 | Display-Hardware beschaffen + montieren (Abschnitt 7.1) | Marcel / Hardware | Offen |
| 9 | Kiosk-Software einrichten (Fully Kiosk oder BrightSign) | Technik | Offen |
| 10 | QR-Code generieren (Ziel: b2in.de) + als Asset hinterlegen | Design | Offen |
| 11 | Initiales Video-/Bildmaterial aufbereiten (Format, Komprimierung, Qualität) | Content / Design | Offen |
| 12 | Beispiel-Playlist im CMS anlegen + End-to-End-Test | QA | Offen |
| 13 | Installation im Store: Position, Helligkeit, Blickwinkel, WLAN-Stabilität | Marcel + Technik | Offen |
Anhang A: Zusammenfassung der Auto-Logiken
Folgende Dinge passieren automatisch, ohne dass Marcel etwas pflegen muss:
- Playlist rotiert endlos durch alle aktiven Items
- Gewichtung (70/30) wird automatisch aus den Kategorien berechnet
- Videos starten automatisch (gemutet) und gehen nach Ende zum nächsten Item
- Bilder werden nach definierter Dauer gewechselt
- Polling prüft alle 60 Sekunden auf CMS-Änderungen
- Bei Playlist-Änderung: Laufendes Item wird zu Ende gespielt, dann greift neue Playlist
- Auto-Reload alle 6 Stunden für Speicher-Hygiene
- Offline: Letzte Playlist läuft weiter aus dem Cache
- Bei Video-Fehler: Item wird übersprungen, kein schwarzer Screen
- Standby-Modus bei
display_active = false: Nur Logo auf dunklem Hintergrund
Anhang B: Unterschiede zum CABINET Info-Tablet
| Aspekt | CABINET Info-Tablet | B2in Display |
|---|---|---|
| Zweck | Store-Information | Marken-/Content-Anzeige |
| Branding | CABINET | B2in |
| Content-Typ | Text/Daten (statisch) | Video/Bild (Playlist) |
| Interaktion | Keine | Keine |
| Update-Frequenz | Bei Bedarf (1–2x/Tag) | Playlist rotiert dauerhaft |
| Polling-Intervall | 30 Sekunden | 60 Sekunden |
| Hardware | Android-Tablet 8–10" | TV/Monitor 43–55" + Media Player |
| CMS-Komplexität | 12 einfache Felder | Globale Settings + Playlist-Repeater |