b2in/public/_cabinet/_docs/b2in-displays.md
2026-04-10 17:18:17 +02:00

386 lines
19 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 35 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. 5060% 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` | `moebel` bestimmt die Gewichtung in der Rotation |
| `media_type` | Dropdown | `video` | `image` |
| `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 812 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` | `slide` | `crossfade` Übergangseffekt zwischen Items. Standard: crossfade. |
| `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:
1. Playlist laden (API-Call)
2. Nur aktive Items filtern (is_active === true)
3. Items nach sort_order sortieren
4. 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)
5. Erstes Item anzeigen
6. Bei Video: Warten bis Video endet → nächstes Item
7. Bei Bild: duration_seconds abwarten → nächstes Item
8. Am Ende der Playlist: Von vorne beginnen
9. 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:
1. Aktuelles Textfeld ausblenden (fade-out, 400ms)
2. Neuen Text setzen
3. Neues Textfeld einblenden (fade-in, 400ms)
4. 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), 4355 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:0022: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 atom` am Anfang der Datei (für schnellen Start)
- Empfohlene Bitrate: 58 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. 810 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 (12x/Tag) | Playlist rotiert dauerhaft |
| **Polling-Intervall** | 30 Sekunden | 60 Sekunden |
| **Hardware** | Android-Tablet 810" | TV/Monitor 4355" + Media Player |
| **CMS-Komplexität** | 12 einfache Felder | Globale Settings + Playlist-Repeater |