Alert-Positionierung & Layout-Konfiguration #78

New issue

Open

opened 2026-07-15 20:41:28 +02:00 by frank · 1 comment

frank commented

2026-07-15 20:41:28 +02:00

Owner

Kontext

Das generische Alert-Overlay (#24) und die Default-Animationen (#26) existieren. Es fehlt eine Positionierungs- und Layout-Konfiguration pro Alert-Typ, damit Streamer Alerts an der gewünschten Stelle im Stream platzieren k\u00f6nnen \u2013 unabh\u00e4ngig von der OBS-Einbettung.

Ziel

Konfigurierbare Position & Layout f\u00fcr jeden Alert-Typ im Overlay:

1. Position (Anchor-System)

Ankerpunkte: Top-Left, Top-Center, Top-Right, Middle-Left, Center, Middle-Right, Bottom-Left, Bottom-Center, Bottom-Right
X/Y-Offset: Pixel-genaue Verschiebung vom Ankerpunkt (positive/negative Werte)
Responsive: Verh\u00e4lt sich bei verschiedenen OBS-Aufl\u00f6sungen konsistent (Prozent vs. Pixel)

2. Animation & Timing

Einblend-Richtung: Von oben, unten, links, rechts, Mitte (Fade), Skalierung
Dauer eingeblendet: Wie lange der Alert sichtbar bleibt (Sekunden)
Einblend-Dauer: Dauer der Einblend-Animation (ms)
Ausblend-Dauer: Dauer der Ausblend-Animation (ms)
Ausblend-Richtung: Getrennt von Einblendung konfigurierbar

3. Queue-Verhalten

Queue-Modus: Parallel (alle gleichzeitig) oder Sequentiell (einer nach dem anderen)
\u00dcberlappungs-Regel: Neuer Alert \u00fcberschreibt alten oder wartet bis alter verschwunden
Max-Queue-L\u00e4nge: Maximal Anzahl wartender Alerts (\u00e4ltere werden verworfen)

4. Admin-UI

Visuelle Vorschau der Position (Miniatur-Overlay mit Markierung)
Vordefinierte Presets: Top-Right (Standard), Bottom-Left, Center (Full Alert), Bottom-Center (Lower Third)
Pro-Alert-Typ speicherbar (Follow, Sub, Raid, Bits haben eigene Position)

Technische Leitplanken

CSS-Transforms & Positionierung via Overlay-HTML (kein Canvas n\u00f6tig)
Persistenz im bestehenden Settings-Modell (JSON-Struktur pro Event-Typ)
Default-Werte: Top-Right, X=0/Y=0, Fade-In 300ms, Anzeige 5s, Fade-Out 300ms, Sequentiell
Integration mit bestehender Event-Bus/Plugin-Architektur

Akzeptanz

Position (9 Ankerpunkte + X/Y-Offset) ist pro Alert-Typ konfigurierbar
Ein-/Ausblend-Richtung, -Dauer und Anzeigedauer sind konfigurierbar
Queue-Modus (Parallel/Sequentiell) funktioniert
Admin-UI mit visueller Positionierungs-Vorschau
Presets k\u00f6nnen geladen und gespeichert werden
OBS Browser Source zeigt Alerts an korrekter Position an

Best-Practices aus der Praxis

Position: Top-Right ist Standard (\u00fcberlappt Kamera/Gesicht nicht), Bottom-Left f\u00fcr Lower-Third-Stil
Dauer: 4-6 Sekunden (kurz genug f\u00fcr Aufmerksamkeit, lang genug zum Lesen)
Animation: Fade/Slide-In 200-400ms, vermeide \u00fcberladene Animationen bei hohem Event-Aufkommen
Queue: Sequentiell in den meisten F\u00e4llen, Parallel nur f\u00fcr Massen-Events (Sub-Bomb)

## Kontext Das generische Alert-Overlay (#24) und die Default-Animationen (#26) existieren. Es fehlt eine **Positionierungs- und Layout-Konfiguration** pro Alert-Typ, damit Streamer Alerts an der gewünschten Stelle im Stream platzieren k\u00f6nnen \u2013 unabh\u00e4ngig von der OBS-Einbettung. ## Ziel Konfigurierbare **Position & Layout** f\u00fcr jeden Alert-Typ im Overlay: ### 1. Position (Anchor-System) - **Ankerpunkte**: Top-Left, Top-Center, Top-Right, Middle-Left, Center, Middle-Right, Bottom-Left, Bottom-Center, Bottom-Right - **X/Y-Offset**: Pixel-genaue Verschiebung vom Ankerpunkt (positive/negative Werte) - **Responsive**: Verh\u00e4lt sich bei verschiedenen OBS-Aufl\u00f6sungen konsistent (Prozent vs. Pixel) ### 2. Animation & Timing - **Einblend-Richtung**: Von oben, unten, links, rechts, Mitte (Fade), Skalierung - **Dauer eingeblendet**: Wie lange der Alert sichtbar bleibt (Sekunden) - **Einblend-Dauer**: Dauer der Einblend-Animation (ms) - **Ausblend-Dauer**: Dauer der Ausblend-Animation (ms) - **Ausblend-Richtung**: Getrennt von Einblendung konfigurierbar ### 3. Queue-Verhalten - **Queue-Modus**: Parallel (alle gleichzeitig) oder Sequentiell (einer nach dem anderen) - **\u00dcberlappungs-Regel**: Neuer Alert \u00fcberschreibt alten oder wartet bis alter verschwunden - **Max-Queue-L\u00e4nge**: Maximal Anzahl wartender Alerts (\u00e4ltere werden verworfen) ### 4. Admin-UI - Visuelle Vorschau der Position (Miniatur-Overlay mit Markierung) - Vordefinierte Presets: Top-Right (Standard), Bottom-Left, Center (Full Alert), Bottom-Center (Lower Third) - Pro-Alert-Typ speicherbar (Follow, Sub, Raid, Bits haben eigene Position) ## Technische Leitplanken - CSS-Transforms & Positionierung via Overlay-HTML (kein Canvas n\u00f6tig) - Persistenz im bestehenden Settings-Modell (JSON-Struktur pro Event-Typ) - Default-Werte: Top-Right, X=0/Y=0, Fade-In 300ms, Anzeige 5s, Fade-Out 300ms, Sequentiell - Integration mit bestehender Event-Bus/Plugin-Architektur ## Akzeptanz - [ ] Position (9 Ankerpunkte + X/Y-Offset) ist pro Alert-Typ konfigurierbar - [ ] Ein-/Ausblend-Richtung, -Dauer und Anzeigedauer sind konfigurierbar - [ ] Queue-Modus (Parallel/Sequentiell) funktioniert - [ ] Admin-UI mit visueller Positionierungs-Vorschau - [ ] Presets k\u00f6nnen geladen und gespeichert werden - [ ] OBS Browser Source zeigt Alerts an korrekter Position an ## Best-Practices aus der Praxis - **Position**: Top-Right ist Standard (\u00fcberlappt Kamera/Gesicht nicht), Bottom-Left f\u00fcr Lower-Third-Stil - **Dauer**: 4-6 Sekunden (kurz genug f\u00fcr Aufmerksamkeit, lang genug zum Lesen) - **Animation**: Fade/Slide-In 200-400ms, vermeide \u00fcberladene Animationen bei hohem Event-Aufkommen - **Queue**: Sequentiell in den meisten F\u00e4llen, Parallel nur f\u00fcr Massen-Events (Sub-Bomb)

frank added this to the Twitch Alerts – Konfiguration & Defaults milestone

2026-07-15 20:41:28 +02:00

frank self-assigned this

2026-07-15 20:41:28 +02:00

frank referenced this issue

2026-07-15 20:41:29 +02:00

Follow-Alert – Konfiguration mit Text, Medien & Position #81

frank added the