Donation & Tip Goal Overlay – Fortschrittsbalken mit Multi-Zielen & Top-Supporters #97

New issue

Open

opened 2026-07-15 21:15:10 +02:00 by frank · 0 comments

frank commented

2026-07-15 21:15:10 +02:00

Owner

Kontext

Donation/Sub/Follower-Goals gehören zu den am häufigsten genutzten Widgets auf Streamlabs und StreamElements. Sie zeigen der Community den Fortschritt zu einem Ziel und motivieren zu weiterer Unterstützung.

Streamertool hat aktuell kein Goal-Widget als Overlay – Streamer müssen auf externe Dienste (Streamlabs, Ko-fi) ausweichen. Mit der anstehenden Ko-fi/Patreon-Integration (#61–#66) und dem bestehenden Event-Bus ist jetzt der perfekte Zeitpunkt für ein eigenes Goal-Widget.

Ziel

Goal Overlay Widget mit Multi-Ziel-Typen, konfigurierbaren Fortschrittsbalken und Top-Supporter-Anzeige:

1. Goal-Typen

Donation Goal: Fortschritt basierend auf Spendeneingängen (ko-fi, streamelements, eigenes System)
Sub Goal: Anzahl Subs (Tier 1/2/3, gewichtet nach Wert)
Follower Goal: Anzahl Follower
Bit Goal: Anzahl Twitch-Bits
Custom Goal: Manueller Zähler (für Meilensteine, Custom-Events)

2. Fortschritts-Balken (Visualisierung)

Balken-Stile:
- Classic: Horizontaler Balken (Standard)
- Vertical: Senkrechter Balken (für Sidebar-Einbettung)
- Ring/Circle: Kreisdiagramm (für kompakte Overlays)
- Pip-Bar: Einzelne Segmente/Pips (für Gaming-Stil)
- Text-only: Nur "€50 / €100" ohne Balken
Farbverlauf: Einfarbig / Verlauf (primary→secondary) / Mehrfarbig (nach %)
Schwellwerte: Farbe ändert sich bei 25%, 50%, 75%, 100%
Animation: Sanfte Füllung, bei 100% Celebration-Effekt (Glow, kurz aufblitzen)
Echtzeit-Update: Wert aktualisiert sich live via Event-Bus/WebSocket

3. Anzeige-Elemente

Titel: "Unser nächstes Ziel!" / "Donation Goal" / Benutzerdefiniert
Aktueller Wert: "€85" / "1.234 Subs" (formatierbar)
Zielwert: "Ziel: €100" / "von 100" (optional ein-/ausblendbar)
Prozent: "85%" / "noch 15%" (in/neben Balken)
Fortschritts-Emoji: 😅 → 🫠 → 😤 → 🎉 (Emoji ändert sich mit Fortschritt)
Top-Supporters: Liste der letzten X Supporter (optional)
- Name + Betrag + Zeitstempel
- Nur anzeigen, wenn Fortschritt > 0
- Scrollend wenn viele Supporter

4. Multi-Goal & Auto-Rotation

Mehrere Ziele parallel: Donation + Sub + Follower gleichzeitig anzeigbar
Rotation: Ziele werden nacheinander angezeigt (alle X Sekunden wechseln)
Auto-Archiv: Wenn ein Ziel erreicht ist, automatisch zum nächsten wechseln
Priorität: Goal-Reihenfolge (Drag-and-Drop in Admin-UI)
Abgeschlossene Ziele: Grüner Haken + "Ziel erreicht!"-Badge

5. Admin-UI

Goal-Manager: Ziele anlegen/bearbeiten/löschen
- Typ, Titel, Zielwert, Startwert
- Laufzeit (Start/Ende-Datum)
- Aktuellen Wert manuell setzen (für Custom Goals)
Overlay-Konfiguration:
- Balken-Stil, Farben, Größe
- Welche Ziele angezeigt werden (Single/Multi/Rotation)
- Top-Supporter an/aus, max Einträge
Test-Button: Simuliert Fortschritt (z. B. "€5 hinzufügen")
Reset-Button: Goal zurücksetzen oder archivieren

6. Event-Bus Integration

Donations: Event donation.received → Goal aktualisieren
Subs: Event twitch.subscribe → Sub-Goal zählen
Bits: Event twitch.cheer → Bit-Goal zählen
Follows: Event twitch.follow → Follower-Goal zählen
Custom: Event goal.update → Manuelle Updates über Admin-UI/API
Goal erreicht: Event goal.achieved → optionalen Alert auslösen (#78-#87)

7. Overlay-Endpoint

/overlay/goal?id=1 – Einzelnes Ziel
/overlay/goals – Alle Ziele (Rotation/Multi)
URL-Parameter: style, theme, show_supporters
Transparenter Hintergrund (OBS-kompatibel)

Technische Leitplanken

Goals in SQLite (overlay_goals-Tabelle: id, type, title, current, target, start, end, archived)
Event-Bus-Listener für automatische Fortschritts-Updates
Kein externer Service – Goals leben lokal
Ko-fi/Patreon-Integration (#61-#64) publiziert donation.received Events → Goal aktualisiert sich automatisch
Balken-Rendering via CSS (kein Canvas) – einfacher, GPU-beschleunigt

Akzeptanz

5+ Goal-Typen (Donation, Sub, Follower, Bits, Custom) sind anlegbar
5+ Balken-Stile (Classic, Vertical, Ring, Pip, Text-only) funktionieren
Multi-Goal und Auto-Rotation mit konfigurierbarem Intervall
Fortschritt aktualisiert sich live via Event-Bus
Top-Supporters werden angezeigt (optional)
Admin-UI mit Goal-Manager, Konfiguration und Test-Button
"Goal erreicht!"-Event triggert Celebration-Effekt
Overlay als OBS-Browser-Source mit transparentem Hintergrund

Referenzen

StreamElements: Donation Goal, Follower Goal, Sub Goal
Streamlabs: Multi Goal Widget
Twitch: Creator Goals (channel.goals)
Ko-fi: Goal widgets (via #61/#62)

## Kontext Donation/Sub/Follower-Goals gehören zu den am häufigsten genutzten Widgets auf Streamlabs und StreamElements. Sie zeigen der Community den Fortschritt zu einem Ziel und motivieren zu weiterer Unterstützung. Streamertool hat aktuell kein Goal-Widget als Overlay – Streamer müssen auf externe Dienste (Streamlabs, Ko-fi) ausweichen. Mit der anstehenden Ko-fi/Patreon-Integration (#61–#66) und dem bestehenden Event-Bus ist jetzt der perfekte Zeitpunkt für ein eigenes Goal-Widget. ## Ziel **Goal Overlay Widget** mit Multi-Ziel-Typen, konfigurierbaren Fortschrittsbalken und Top-Supporter-Anzeige: ### 1. Goal-Typen - **Donation Goal**: Fortschritt basierend auf Spendeneingängen (ko-fi, streamelements, eigenes System) - **Sub Goal**: Anzahl Subs (Tier 1/2/3, gewichtet nach Wert) - **Follower Goal**: Anzahl Follower - **Bit Goal**: Anzahl Twitch-Bits - **Custom Goal**: Manueller Zähler (für Meilensteine, Custom-Events) ### 2. Fortschritts-Balken (Visualisierung) - **Balken-Stile**: - *Classic*: Horizontaler Balken (Standard) - *Vertical*: Senkrechter Balken (für Sidebar-Einbettung) - *Ring/Circle*: Kreisdiagramm (für kompakte Overlays) - *Pip-Bar*: Einzelne Segmente/Pips (für Gaming-Stil) - *Text-only*: Nur "€50 / €100" ohne Balken - **Farbverlauf**: Einfarbig / Verlauf (primary→secondary) / Mehrfarbig (nach %) - **Schwellwerte**: Farbe ändert sich bei 25%, 50%, 75%, 100% - **Animation**: Sanfte Füllung, bei 100% Celebration-Effekt (Glow, kurz aufblitzen) - **Echtzeit-Update**: Wert aktualisiert sich live via Event-Bus/WebSocket ### 3. Anzeige-Elemente - **Titel**: "Unser nächstes Ziel!" / "Donation Goal" / Benutzerdefiniert - **Aktueller Wert**: "€85" / "1.234 Subs" (formatierbar) - **Zielwert**: "Ziel: €100" / "von 100" (optional ein-/ausblendbar) - **Prozent**: "85%" / "noch 15%" (in/neben Balken) - **Fortschritts-Emoji**: 😅 → 🫠 → 😤 → 🎉 (Emoji ändert sich mit Fortschritt) - **Top-Supporters**: Liste der letzten X Supporter (optional) - Name + Betrag + Zeitstempel - Nur anzeigen, wenn Fortschritt > 0 - Scrollend wenn viele Supporter ### 4. Multi-Goal & Auto-Rotation - **Mehrere Ziele parallel**: Donation + Sub + Follower gleichzeitig anzeigbar - **Rotation**: Ziele werden nacheinander angezeigt (alle X Sekunden wechseln) - **Auto-Archiv**: Wenn ein Ziel erreicht ist, automatisch zum nächsten wechseln - **Priorität**: Goal-Reihenfolge (Drag-and-Drop in Admin-UI) - **Abgeschlossene Ziele**: Grüner Haken + "Ziel erreicht!"-Badge ### 5. Admin-UI - **Goal-Manager**: Ziele anlegen/bearbeiten/löschen - Typ, Titel, Zielwert, Startwert - Laufzeit (Start/Ende-Datum) - Aktuellen Wert manuell setzen (für Custom Goals) - **Overlay-Konfiguration**: - Balken-Stil, Farben, Größe - Welche Ziele angezeigt werden (Single/Multi/Rotation) - Top-Supporter an/aus, max Einträge - **Test-Button**: Simuliert Fortschritt (z. B. "€5 hinzufügen") - **Reset-Button**: Goal zurücksetzen oder archivieren ### 6. Event-Bus Integration - **Donations**: Event `donation.received` → Goal aktualisieren - **Subs**: Event `twitch.subscribe` → Sub-Goal zählen - **Bits**: Event `twitch.cheer` → Bit-Goal zählen - **Follows**: Event `twitch.follow` → Follower-Goal zählen - **Custom**: Event `goal.update` → Manuelle Updates über Admin-UI/API - **Goal erreicht**: Event `goal.achieved` → optionalen Alert auslösen (#78-#87) ### 7. Overlay-Endpoint - `/overlay/goal?id=1` – Einzelnes Ziel - `/overlay/goals` – Alle Ziele (Rotation/Multi) - URL-Parameter: `style`, `theme`, `show_supporters` - Transparenter Hintergrund (OBS-kompatibel) ## Technische Leitplanken - Goals in SQLite (`overlay_goals`-Tabelle: id, type, title, current, target, start, end, archived) - Event-Bus-Listener für automatische Fortschritts-Updates - Kein externer Service – Goals leben lokal - Ko-fi/Patreon-Integration (#61-#64) publiziert `donation.received` Events → Goal aktualisiert sich automatisch - Balken-Rendering via CSS (kein Canvas) – einfacher, GPU-beschleunigt ## Akzeptanz - [ ] 5+ Goal-Typen (Donation, Sub, Follower, Bits, Custom) sind anlegbar - [ ] 5+ Balken-Stile (Classic, Vertical, Ring, Pip, Text-only) funktionieren - [ ] Multi-Goal und Auto-Rotation mit konfigurierbarem Intervall - [ ] Fortschritt aktualisiert sich live via Event-Bus - [ ] Top-Supporters werden angezeigt (optional) - [ ] Admin-UI mit Goal-Manager, Konfiguration und Test-Button - [ ] "Goal erreicht!"-Event triggert Celebration-Effekt - [ ] Overlay als OBS-Browser-Source mit transparentem Hintergrund ## Referenzen - StreamElements: Donation Goal, Follower Goal, Sub Goal - Streamlabs: Multi Goal Widget - Twitch: Creator Goals (channel.goals) - Ko-fi: Goal widgets (via #61/#62)

frank added this to the Overlays & Widgets milestone

2026-07-15 21:15:10 +02:00

frank self-assigned this

2026-07-15 21:15:10 +02:00

frank added the

priority:high

effort:medium

area:overlays

labels

2026-07-15 21:15:42 +02:00