Leinwand gestalten

Eine Leinwand fasst viele Elemente in einer einzigen Browserquelle zusammen. Texte, Bilder, Balken und die Anzeigen deiner Funktionen legst du frei auf die Fläche, ganz ohne Code.

Leinwand anlegen

1. Öffne die Bibliothek und klicke oben auf ＋ Eigenes Overlay. Leinwand ist schon gewählt.
2. Gib einen Namen ein und klicke auf Anlegen. Ohne Namen heißt sie „Neue Leinwand“. Sie steht danach im Menü unter Overlays, ein Klick öffnet sie wieder.

Eine Leinwand entsteht auch beim Hinzufügen einer Funktion, wenn du unter Wo soll es erscheinen? die Karte Neue Leinwand wählst.

Im Designer gestalten

1. Die Seite der Leinwand ist aufgebaut wie die einer Funktion. Unter Aussehen stehen die Karte, der Link, die Auflösung und darunter der Designer. Links im Designer stehen die Elemente, in der Mitte die Leinwand, rechts die Eigenschaften und die Ebenen.
2. Tippe ein Element an oder ziehe es auf die Leinwand. Es erscheint an der Stelle und ist gleich ausgewählt.
3. Verschiebe es mit der Maus und ändere die Größe an den Griffen. Ausrichthilfen lassen es an Rändern, Mitte und anderen Elementen einrasten.
4. Stelle rechts Text, Farben, Schrift und Animation ein. Die Leinwand zeigt jede Änderung sofort.
5. Speichern unter dem Designer und den Link wie bei jedem Overlay in OBS einfügen. Ungespeichertes meldet die Seite, bevor du sie verlässt.

Elemente

• Text: beliebiger Text, auch mit Variablen wie {{tode}} und Werten deiner Funktionen wie {{countdown.rest}}.
• Bild und Video: aus deinen Dateien. Hochladen geht direkt am Feld.
• Form: Fläche mit Farbe, Ecken und Rahmen, zum Beispiel als Hintergrund für einen Text.
• Balken: zeigt Fortschritt von 0 bis zu einem Ziel.
• Zähler: eine Zahl mit Beschriftung, meistens aus einer Variable.
• Timer: läuft rückwärts, für eine Dauer oder bis zu einer Uhrzeit.
• Liste: ein Eintrag je Zeile.
• Funktionen: die Anzeige einer Funktion, zum Beispiel Alerts, Goal oder Glücksrad. Inhalte und Regeln stellst du auf der Seite der Funktion ein. Zur Funktion bringt dich hin.

Funktionen platzieren

Eine Funktion füllt die ganze Leinwand. Wählst du sie aus, zeigt die Leinwand statt eines Rahmens ihre Teile mit eigenen Griffen, beim Glücksrad zum Beispiel das Rad und die Aufgaben.

1. Wähle die Funktion auf der Leinwand oder in den Ebenen.
2. Zieh einen Teil an seinen Platz oder an einer Ecke größer oder kleiner. Beim Loslassen stellt sich die Ecke von selbst ein.
3. Die Position speichert sofort an der Funktion, auch für ihren eigenen Link. Speichern brauchst du dafür nicht.
4. Strg+Z nimmt sie zurück wie jede andere Änderung.

Das geht genauso in der Vorschau der Funktion, mehr unter Per Ziehen platzieren.

Code-Ebene

In den Elementen steht die Gruppe Code mit Code. Eine Code-Ebene ist ein eigenes kleines Overlay mit HTML, CSS und JS an ihrem Platz auf der Leinwand.

1. Ziehe Code auf die Leinwand. Die Ebene bringt ein kleines Beispiel mit.
2. Rechts schreibst du in den Reitern HTML, CSS und JS deinen Code. Rückgängig geht wie bei jeder anderen Änderung.
3. Speichern. Erst dann zeigt die Leinwand den neuen Code. Bis dahin steht dort ein Hinweis.

Dein JS bekommt die Daten der Leinwand und ihre Variablen. Für häufige Aufgaben gibt es fertige Hilfen unter RIWIUS.ui, zum Beispiel RIWIUS.ui.queue für Ereignisse nacheinander, RIWIUS.ui.show zum Einblenden mit den Animationen der Leinwand und RIWIUS.ui.text für Platzhalter wie {user} und {{tode}}. Die ganze Liste steht unter Code bearbeiten im Reiter Hilfe.

Ebenen

Die Liste Ebenen zeigt alle Elemente, das vorderste oben. Als JSON stehen sie unter Code bearbeiten (⋯ an der Karte) im Reiter Ebenen. Ziehe eine Zeile oder nutze ↑ Nach vorn und ↓ Nach hinten, um die Reihenfolge zu ändern. Das Auge blendet ein Element beim Laden aus, das Schloss schützt es vor versehentlichem Verschieben. Liegen Elemente übereinander, wählt ein zweiter Klick auf dieselbe Stelle das Element darunter.

Mehrere Elemente

• Umschalt oder Strg beim Klick auf der Leinwand nimmt ein Element zur Auswahl hinzu oder wieder heraus.
• Ziehe auf einer freien Stelle der Leinwand einen Rahmen auf. Alles, was er berührt, ist dann ausgewählt.
• In der Liste Ebenen wählt Umschalt alle Zeilen bis zur zuletzt angeklickten, Strg einzelne dazu.

Mehrere Elemente verschiebst du gemeinsam mit der Maus oder den Pfeiltasten. Rechts stehen dann nur Aktionen für alle: Sichtbar beim Laden, Gesperrt, Knöpfe zum Ausrichten (links, mittig, rechts, oben, mittig, unten) ab zwei Elementen, zum gleichmäßigen Verteilen ab drei, Duplizieren und Löschen. Eine Gruppe zählt dabei als ein Element, gesperrte bleiben stehen. Rückgängig macht jeden Schritt wieder rückgängig.

Gruppen

Wähle mehrere Elemente und klicke auf ▣ Gruppieren. Ein Klick auf der Leinwand wählt dann immer die ganze Gruppe. In der Liste steht die Gruppe mit ihrem Namen, die Elemente eingerückt darunter. Auge und Schloss der Gruppe gelten für alle ihre Elemente. Ein einzelnes Element einer Gruppe wählst du in der Liste aus.

Den Namen änderst du rechts, wenn die Gruppe ausgewählt ist. Ziehst du ein Element in der Liste aus der Gruppe heraus, gehört es nicht mehr dazu. Gruppe auflösen macht wieder einzelne Elemente daraus. In OBS sieht alles genauso aus wie ohne Gruppe.

Nur zeigen, wenn

Ein Element kann nur unter einer Bedingung erscheinen, zum Beispiel solange die Happy Hour läuft. Klicke unter Nur zeigen, wenn auf ＋ Bedingung und wähle eine Variable, den Vergleich und den Wert. Jede weitere Bedingung muss ebenfalls gelten. ist an heißt, die Variable hat einen Wert und ist nicht 0, leer, nein oder aus. Die Variablen setzen deine Regeln.

Eine Bedingung, die sich nicht in diese Zeilen fassen lässt, steht dort als Text und bleibt so bearbeitbar.

Animationen

Jedes Element hat eine Animation zum Einblenden und eine zum Ausblenden, dazu die Dauer. ▶ Abspielen zeigt sie gleich auf der Leinwand. ▶ Vorschau abspielen oben blendet alles wie beim Start in OBS ein und spielt Beispieldaten der Funktionen ab.

Tastatur

• Pfeiltasten verschieben um einen Pixel, mit Umschalt um zehn.
• Entf löscht, Strg+D dupliziert, Esc hebt die Auswahl auf.
• Strg+A wählt alle Elemente aus.
• Strg+G gruppiert die Auswahl, Strg+Umschalt+G löst die Gruppe auf.
• Strg+Z macht rückgängig, Strg+Y stellt wieder her.
• Alt beim Ziehen schaltet die Ausrichthilfen aus. Umschalt an einem Griff hält das Seitenverhältnis.

Größe in OBS

Unter dem Link wählst du bei Auflösung die Größe der Browserquelle, zum Beispiel 1920 × 1080, 2560 × 1440 oder 3840 × 2160. Sie wirkt sofort. Die Leinwand behält ihr Layout und wird nur schärfer. Trage in OBS dieselbe Breite und Höhe ein.

Auf dem Handy

Elemente auswählen und Eigenschaften ändern geht auch auf dem Handy. Lage und Größe stellst du dort über die Zahlen ein. Ziehen und Größe ändern mit dem Finger gehen ab Tablet-Breite.

Jede Leinwand zählt im Tarif einmal, ihre Elemente zählen nicht.