Anleitung: Comic-Coworking-Liste
Etwa fünf Minuten. Du brauchst ein kostenloses StreamElements-Konto und deine persönlichen Dateien von unserer Lizenzseite (Link in deinem Etsy-Download, halte deine Bestellnummer bereit).
Bevor du anfängst
- Ein kostenloses StreamElements-Konto, angemeldet mit deinem Kanal (Twitch, Kick oder YouTube).
- Die Einrichtung auf der Lizenzseite: Nach Bestellnummer und Kanal zeigt sie einen Kopierknopf je Reiter (HTML, CSS, JS, Fields). Dein Lizenzschlüssel steckt schon im Code. Alles gibt es dort auch als ZIP (Rückfall).
- Einen Computer mit Chrome, Edge oder Firefox. Auf dem Handy klappt der StreamElements-Editor schlecht.
Welche Version hast du?
Tasklist only (nur Liste): To-do-Liste für den Chat und Pomodoro-Timer. Tasklist with Dieter (Liste mit Dieter): dasselbe, dazu Dackel Dieter in seiner Ecke unter der Liste. Die Version hast du auf Etsy gewählt, die Lizenzseite gibt dir genau dieses Widget. Alles auf dieser Seite gilt für beide, außer dem Teil über Dieter.
Die Liste in StreamElements einrichten
-
Overlays öffnen
Melde dich auf streamelements.com an und klicke links im Menü auf Overlays.
-
1080p-Overlay öffnen oder anlegen
Nimm das Overlay deiner Coworking-Szene, oder klicke auf New overlay, wähle 1080p (1920 × 1080) und klicke auf Start.
-
Custom widget hinzufügen
Klicke auf Add widget (das +), dann auf Static / Custom und Custom widget. Oben links erscheint eine kleine Box.
-
Code-Editor öffnen
Das neue Widget ist ausgewählt: Klicke links auf Open editor. Du siehst fünf Reiter: HTML CSS JS Fields Data.
-
Alle vier Reiter ersetzen
Für HTML, CSS, JS und Fields: den passenden Knopf auf der Lizenzseite drücken (zum Beispiel Copy HTML) oder die Datei aus dem ZIP kopieren, in den Reiter klicken, mit Strg + A (Mac: Cmd + A) alles markieren, löschen und einfügen. Data bleibt, wie er ist; dann Done.
Alle vier ersetzen, auch wenn ein Reiter gut aussieht. StreamElements füllt CSS und JS mit einem Beispiel-Widget.
-
Box platzieren
Öffne Position, size and style. Ein guter Start am rechten Rand: Breite 520, Höhe 960, Position 1360 / 60. Die Liste reicht bis zum unteren Rand der Box und blättert um, wenn sie voll ist. Nur der Timer: Breite 520, Höhe 110.
-
Speichern und testen
Klicke auf Save. Dann ein paarmal Test: add a task, dazu Test: complete a task und Test: start the timer / next phase. Test: clear the list leert sie wieder.
Testknöpfe wirken nach dem ersten Speichern und nur im Editor.
Chatbefehle
Zuschauer: !task 20 Seiten lesen trägt eine Aufgabe ein (auch !add, !todo). !done hakt die erste offene eigene Aufgabe ab, !done 2 die zweite, !done lesen findet sie am Text, !done all erledigt alle. !remove nimmt die zuletzt eingetragene eigene Aufgabe zurück. Standardmäßig bis zu 3 offene Aufgaben je Zuschauer.
Du und deine Mods: !tasks done entfernt erledigte Aufgaben, !tasks clear leert die Liste, !tasks lock und !tasks unlock schließen und öffnen sie für Zuschauer (du kannst weiter eintragen), !tasks remove Name löscht die Aufgaben eines Zuschauers.
Timer: !timer start, !timer pause, !timer skip (nächste Phase), !timer reset (zurück zur ersten Fokusphase, die Liste bleibt), !timer focus 50 (auch break und long).
Alle Befehlswörter und wer sie nutzen darf, stehen unter Task list und Pomodoro timer, mehrere Wörter je Befehl mit Komma. Das funktioniert genauso in deinem Twitch-, Kick- und YouTube-Chat.
Dieter (nur in der Version Liste mit Dieter)
Dieters Ecke sitzt unter der Liste in derselben Box; lass die Box mindestens 520 × 700 groß. Position of Dieter's corner setzt sie über den Timer. Show in this widget → Only Dieter's corner zeigt ihn allein, für eine zweite Kopie des Widgets irgendwo im Bild.
In der Fokusphase schläft er. Beginnt die Pause, steht er auf, die Leiste darunter zeigt den Rückblick (geschaffte Aufgaben, das neue Ding, die fleißigste Person) und Neues erscheint. When Dieter gets up: in der Pause, zusätzlich kurz bei jeder Aufgabe, oder nie.
Seine Ecke wächst mit jeder erledigten Aufgabe, über alle Streams: Hundebett bei 10, Decke bei 25, Leselampe bei 50, Bücherregal bei 100, Pflanze bei 150, Namensschild bei 250, Lichterkette bei 400. !tasks setcount 120 setzt den Zähler, !tasks resetcount fängt neu an.
Das Overlay in OBS einfügen
- Öffne in deiner Overlay-Liste auf StreamElements das Menü … des Overlays und klicke auf Copy URL. Behalte diesen Link für dich: Er enthält einen Schlüssel zu deinem Konto.
- Wähle in OBS Studio deine Szene, klicke unter Sources auf + und wähle Browser. Füge den Link bei URL ein und stelle Width 1920 und Height 1080 ein.
- Timer oben, Liste an der Seite? Füge das Widget ein zweites Mal ein und stelle Show in this widget bei einem auf Only the timer, beim anderen auf Only the list. Beide teilen sich Liste und Timer.
Streamlabs Desktop: Add Source → Browser Source, derselbe Link, dieselben Einstellungen.
Weitere Einstellungen
Klicke im Overlay-Editor von StreamElements auf das Widget; links erscheinen die Einstellungen. Nach Änderungen auf Save klicken.
| Einstellung | Was sie macht |
|---|---|
| Language of the labels | Titel und Timer-Phasen auf Englisch, Deutsch, Español, Português oder Français. |
| Title of the list | Eigener Titel, oder AUFGABEN in deiner Sprache. |
| Open tasks per viewer / Maximum length of a task | 1 bis 20 offene Aufgaben je Zuschauer, du selbst bis 20; 20 bis 150 Zeichen. |
| Completed tasks | Nach unten, an ihrem Platz bleiben oder nach 8 Sekunden verschwinden. |
| Focus / Break / Long break / Long break after | Längen in Minuten und nach wie vielen Runden die lange Pause kommt (0 = nie). |
| Start the next phase automatically | Aus: Der Timer wartet nach jeder Phase auf !timer start. |
| Sound when a phase ends | Optional eine eigene Tondatei, in StreamElements hochgeladen. |
| Seconds per page | Wie lange jede Seite steht, wenn die Liste länger ist als die Box. |
| Color theme | Klassische, Nacht- oder Pastellfarben deines Stils. |
| Calm mode | Kein Aufspringen des Hakens, weicheres Leuchten bei Neon. |
Hilfe
Es erscheint nichts
- Alle vier Reiter ersetzt und Save geklickt?
- Box groß genug, zum Beispiel 520 × 960?
- OBS-Browserquelle in 1920 × 1080 mit dem Link dieses Overlays?
!task tut nichts
Prüfe Who can add tasks und das Befehlswort. Jeder Zuschauer hat standardmäßig 3 offene Aufgaben. Eine gesperrte Liste nimmt nur deine eigenen: !tasks unlock.
Der Timer startet nicht
!timer dürfen standardmäßig nur du und deine Mods. Show the pomodoro timer muss an sein.
Dieter schläft weiter
Er steht auf, wenn eine Pause beginnt, der Timer muss also laufen. Ohne Timer steht er auf, wenn ein neues Ding frei wird.
Kommst du nicht weiter?
Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenne deinen Stil, deine Version, dein Streaming-Programm und was du siehst; ein Bildschirmfoto des Editors hilft. Schick uns nie deinen Overlay-Link.
Updates
Updates für Version 1.x installieren sich beim Laden des Overlays selbst; deine Einstellungen und deine Liste bleiben. Nur wenn der Editor einen Update-Hinweis zeigt:
- Öffne das Overlay in StreamElements, klicke auf das Widget und dann auf Open editor.
- Ersetze HTML, CSS, JS und Fields durch die neuen Dateien, genau wie in Schritt 5.
- Data nicht anfassen: Dort liegen deine Einstellungen.
- Klicke auf Done und Save.
Aktuelle Version: 1.0.0.