diff --git a/components/prompter.md b/components/prompter.md new file mode 100644 index 0000000..881353a --- /dev/null +++ b/components/prompter.md @@ -0,0 +1,18 @@ +--- +noindex: false +comments: false +#author: HaPe +#author_tools: hape +#level: beginner +#article_type: info +#date: 2019-10-28 +last_updated: 2019-10-28 +title: Komponente Teleprompter +description: 'iStream Tools - Komponente Teleprompter' +keywords: 'suggestions todo erweiterungen ideen' + +--- + +# Teleprompter einrichten + + diff --git a/components/setup.md b/components/setup.md new file mode 100644 index 0000000..d190722 --- /dev/null +++ b/components/setup.md @@ -0,0 +1,79 @@ +--- +noindex: false +comments: false +#author: HaPe +#author_tools: hape +#level: beginner +#article_type: info +#date: 2019-10-28 +last_updated: 2019-10-28 +title: Komponenten einrichten (allgemein) +description: 'iStream Tools - Komponenten einrichten (allgemein)' +keywords: 'suggestions todo erweiterungen ideen' + +--- + +# Komponenten einrichten (allgemein) + +
+Wie schon auf der [Übersichtsseite](/docs/) erklärt, folgen alle Apps dem gleichen Workflow. Hier + wird nun etwas detailierter beschrieben, wie man die verschiedenen Dialoge erreicht und was man + damit machen kann. So muss in den Beschreibungen zu den Apps, nicht mehr auf diese Dinge + eingegangen werden. +
+ + + +## Testmodus + +Jede App befindet sich, wenn sie angewählt wird, im Setupmodus. Das heisst, alle Aktionen führen zu + einer Änderung der Konfiguration und wird **in den meisten Fällen** automatisch gespeichert. + Klickst Du auf einen Content-/Play-Button, dann führt Dich das zu einem Dialog, indem Du den + Schalter bzw. den Content anpassen kannst. Klickst Du auf einen Standardbutton, dann führt Dich + das zu einem Dialog, in dem Du den Schalter anpassen kannst. Das ist die Standardvorgehensweise. + +Bei jeder App gibt es auch den sogenannten Testmodus. Um den Testmodus zu aktivieren, musst Du nur + den Schalter `Testmodus` rechts oben aktivieren. Wenn Du den Testmodus aktiviert hast, dann wird + bei einem Klick auf einen Content- / Play-Button der jeweilige Content in der Vorschau (linke + Seite) angezeigt bzw. abgespielt. Wenn der Testmodus aktiviert ist, wird der Schalter blau + dargestellt. + +- Bei den Slides wird der jeweilige Slide angezeigt. +- Bei den Videoplayer wird das Video abgespielt. +- Bei den Audioplayer wird der Sound abgespielt. +- Die Standardbuttons haben ihre Funktion. + +## Setup + +Der Schalter Setup, rechts oben, dient der generellen Konfiguration der aktuell ausgewählten + Anwendung. Hier können Standardwerte festgelegt werden. Die Beschriftung des App-Buttons kann + geändert werden. Die aktuell ausgewählte Anwendung kann gelöscht werden. + + + +WARN: **Achtung: der Löschvorgang wird direkt ohne weitere Nachfrage UNWIDERRUFLICH durchgeführt** + +## Upload + +Das Feld Upload wird da angezeigt, wo Medien auf den Server übertragen werden können. Man kann die + Dateien per Drag n Drop in dem Uploadfeld ablegen oder man kann mit einem Klick auf das Uploadfeld + einen Auswahldialog starten. Der Upload beginnt in jedem Fall automatisch. Sobald die Datei(en) + fehlerfrei übertragen wurden, wird für die Datei ein neuer Content- / Play-Button angezeigt oder + entsprechend angezeigt. + +## Plus-Button + +Der Plus-Button befindet sich im unteren Bereich. Mit diesem Button können neue Anwendungen des + jeweiligen angelegt werden. Die Konfiguration und wie solche Anwendungen wieder gelöscht werden + können, wurde weiter oben bei **Setup** beschrieben. + +Es gibt einige Apps wie z.B. Slides und Ticker, bei denen du noch einen Plus-Button sehen kannst. + Mit diesem Plus-Button werden neue Slides bzw. neue Tickertexte angelegt. + +## Vorschau + +Der Bereich für die Vorschau wird durch das Grid (grau / weisse Kacheln) dargestellt. Sofern visuell + etwas dargestellt werden kann, wird es in diesem Bereich angezeigt. In der Vorschau werden die + Inhalte verkleinert im passenden Verhältnis zueinander angezeigt. Die Vorschau entspricht nicht + immer pixelgenau dem wie es eingerichtet ist. Für eine exakte Kontrolle sollte die App in einem + Browserfenster oder direkt in der Encodersoftware geöffnet werden. diff --git a/components/slides.md b/components/slides.md new file mode 100644 index 0000000..99774cb --- /dev/null +++ b/components/slides.md @@ -0,0 +1,117 @@ +--- +noindex: false +comments: false +#author: HaPe +#author_tools: hape +#level: beginner +#article_type: info +#date: 2019-10-28 +last_updated: 2019-10-28 +title: Komponente Slides +description: 'iStream Tools - Komponente Slides' +keywords: 'suggestions todo erweiterungen ideen' + +--- + +# Slides einrichten + +
+Die Slides sind vielseitig. Du kannst mit den Slides eine Präsentation (wie MS-Powerpoint, OO-Impress, Apple-Presenter) + gestalten und über die Console steuern oder per Autoplay ablaufen lassen. Du kannst damit aber auch Deine Lowerthirds + oder andere Effekte gestalten und in Deinem Stream einbinden. +
+ +## Slides einrichten + +Um ein Slideset einzurichten einfach ein vorhandenes Slideset auswählen oder mit dem Add-Button ein neues Slideset + anlegen. Danach findest Du in etwa folgende Übersicht. + + + +Rechts oben ist der Setup-Button, mit dem das Slideset konfiguriert werden kann. Daneben der Schalter für den Testmode. + Im Testmode kannts Du die Slides in der Vorschau (links) abrufen. + +Im Setupmodus (Testmode ist NICHT aktiviert) kommst du über die einzelnen Schalter an die jeweilige Konfiguration. Im + Testmode steuerst Du mit den gleichen Schalter die Vorschau. + +## Konfiguration des Slidesets + +Nachdem Du den Setup-Button (rechts oben) angeklickt hast, öffnet sich folgender Dialog. + + + +Du kannst hier das Slideset umbenennen, die Grösse des Slidesets festlegen Schriftarten einrichten, bei Bedarf das + Autoplay aktivieren und einrichten, sowie Schriftgrösse, Hintergrundfarbe und Schriftfarbe festlegen. + +Es gibt zwei Möglichkeiten um die eigenen Schriftarten festzulegen. + +1. Du suchst Dir bei https://fonts.google.com oder einem ähnlichen Dienst eine Schriftart aus und kopierst den + zur Verfügung gestellten Code des Dienstes in das jeweilige Feld `Schriftart`. +2. Du suchst Dir eine auf Deinem System installierte Schriftart aus und gibst in das jeweilige Feld `Schriftart` den + Namen der ausgewählten Schriftart ein. + +## Slide anlegen / einrichten + +Um einen Slide (eine Folie, eine Seite) anzulegen klickst Du auf den Add-Button und wählst dann diesen neu erstellten + Schalter aus. Ein Dialog wird geöffnet, der wie der folgende Screenshot ausschaut. + + + +Oben auf der linken Seite findest Du die Einstellungen für den Schalter, der dir später in der Console angezeigt wird. + Du kannst den Titel der auf dem Schalter angezeigt wird festlegen und dem Schalter eine Farbe zuordnen. + +Unter der Farbauswahlbox für den Schalter, findest Du 6 Felder, in denen Du sogenannte Koordinaten eingeben kannst. Die + Slides werden in einen virtuellen 3D Raum positioniert. Jeder Slide kann also individuell in diesem 3D Raum platziert + werden. Wenn von einem Slide zu einem anderen Slide gewechselt wird, wandert der Viewport, durch diesen 3D Raum, zu + dem neuen Slide. Diese Bewegung simuliert einen Flug durch den 3D Raum und erzeugt tolle Übergangseffekte. + +- Die X-Achse ist die horizontale Koordinate (link/rechts) +- Die Y-Achse ist die vertikale Koordinate (hoch/runter) +- Die Z-Achse ist die Tiefe (vor/zurück) + +Auf der rechten Seite des Dialog ist der Texteditor. Damit kann der Slide gestaltet werden. Die einfachste Art ist per + Markdown-Language. Das ist eine vereinfachte Auszeichnungssprache, die im Internet weit verbreitet ist. Sie wird z.B. + auf Gitlab.com oder in so ziemlich jedem Wiki (z.B. Wikipedia) verwendet. Man braucht sich bei Markdown nicht um + das HTML dahinter kümmern, das übernimmt ein Parser, der aus Markdown HTML macht. Wer möchte, oder spezielle + Anforderungen hat, kann auch HTML und CSS verwenden. Als Einstiegshilfe sind in der Toolbar einige Schalter enthalten, + mit denen die wichtigsten Textelemente generiert werden. + +Um Deinen Slide auszuschmücken kannst Du Bilder per Drag n Drop, Emojies, Font-Icons über einen Shortcut und weitere + Formatierungen wie z.B. Farbcodes per BBCode, einfügen. + +- Für einen Emoji verwende einfach den Namen des Emojie eingeschlossen in Doppelpunkte `:nerd:` +- Für ein Font-Icon verwedest Du ebenfalls die Doppelpunkte mit dem Code für das Icon. `:fas-cog:`, `:far-save:` oder + `:fab-facebook-square:` + +Welchen Code Du verwenden kannst, findest Du für Emojies auf https://unicode.org/emoji/charts/emoji-list.html Du kannst + auf dieser Seite in der Spalte `CLDR Short Name` den Namen rauskopieren und verwenden. Evtl. Leerzeichen werden + mit einem Bindestrich ersetzt. so wird aus dem Namen `grinning face` der Code `:grinning-face:` + +Die Font-Icons kannst Du auf der Seite https://fontawesome.com/icons?d=gallery aussuchen. Auf streamtool.net wird zur + Zeit die Version 5.4.1 verwendet. Es gibt bei der Suche nach Icons keine Unterscheidung zwischen Free und Pro Version. + Es wird alles angezeigt. Auf Streamtool.net können nur die `solid`, `regular` und `brand` Varianten verwendet werden. + Auf der Suchseite sind diese Icons dunkel, während die Pro-Varianten grau dargestellt werden. + +Wenn Du ein Icon ausgesucht hast gehst Du auf die Detailseite, indem Du das gewünschte Icon anklickst, und suchst Dir + dort den Namen und die Variante raus. Ein Beispiel für ein solid-Icon `fas-cog` ein regular-Icon `far-save` und ein + brand-Icon `fab-facebook-square`. + +Um z.B. ein oder mehrere Worte mit einer anderen Schriftfarbe hervorzuheben, kannst Du einen BBCode + `[color=red]Wörter in rot[/color]` (Wörter in rot) verwenden. Du kannst Hexcodes + `#ff0000` und oder RGB- / RGBA-Anweisungen verwenden z.B. `rgba(255,0,0,0.6)`. + +Zusammengefasst: +- Der Editor unterstützt Markdown (Das wird auch entsprechend angezeigt). +- HTML mit Styleangaben (CSS) und Class wird unterstützt. +- Emojies und Font-Icons werden unterstützt. +- Bilder werden per Drag n Drop und / oder als Hintergrundbild unterstützt. +- BBCode wird ebenfalls unterstützt. *(z.Zt. Keine Listenelemente)* + +Ebenfalls in der Toolbar enthalten sind die Buttons für den Zugriff auf den Mediamanager für dieses Slideset und ein + weiterer Dialog mit dem der aktuelle Slide detailiert gestylt werden kann. Siehe folgenden Screenshot. + + + +Hier können noch einmal Schriftgrösse, Schriftfarbe und Hintergrundfarbe speziell für den aktuellen Slide eingerichtet + werden. Ausserdem der Abstand vom Rand des Slides zum Inhalt des Slides. Ausserdem kann die Textausrichtung festgelegt + werden und es kann ein Hintergrundbild eingerichtet werden. diff --git a/components/soundeffects.md b/components/soundeffects.md new file mode 100644 index 0000000..06d7405 Binary files /dev/null and b/components/soundeffects.md differ diff --git a/components/ticker.md b/components/ticker.md new file mode 100644 index 0000000..339b9c8 --- /dev/null +++ b/components/ticker.md @@ -0,0 +1,80 @@ +--- +noindex: false +comments: false +#author: HaPe +#author_tools: hape +#level: beginner +#article_type: info +#date: 2019-10-28 +last_updated: 2019-10-28 +title: Komponente Ticker +description: 'iStream Tools - Komponente Ticker' +keywords: 'suggestions todo erweiterungen ideen' + +--- + +# Ticker einrichten + +
+Mit der Ticker Komponente kannst Du eine Laufschrift in Deinen Stream integrieren. Einfach Text eintragen, nach Bedarf + noch ein paar Einstellungen vornehmen und über eine Browserquelle in OBS einbinden. Fertig! +
+ +Um einen Ticker einzurichten wählst Du einen bereits vorhandenen Ticker aus oder erstellst + mit dem Add-Button einen neuen Ticker und wählst anschliessend diesen aus. + +Es stehen Dir nun folgende Einstellungen zur Verfügung: + + + +**Über die generelle Konfiguration: (Schalter `Setup` - rechts oben)** + +- Den Namen des Tickers anpassen. +- Die Schriftart auswählen +- Die Geschwindigkeit festelgen +- Schriftgrösse +- Hintergrund-, Schrift- und Randfarbe + +**Schriftart auswählen** + +Es gibt zwei Möglichkeiten um eine eigene Schriftart festzulegen. + +1. Du suchst Dir bei https://fonts.google.com oder einem ähnlichen Dienst eine Schriftart aus und kopierst den + zur Verfügung gestellten Code des Dienstes in das Feld `Schriftart`. +2. Du suchst Dir eine auf Deinem System installierte Schriftart aus und gibst in das Feld `Schriftart` den Namen + der ausgewählten Schriftart ein. + +**Über den Ticker-Button selbst (der erste heisst `Default`)** + +- Den Namen und die Farbe des Schalters festlegen +- Den Text bearbeiten +- Die einzelne Komponente löschen + +**Text bearbeiten** + +Es ist ein normales Textfeld. Es zeigt keine Formatierungen an. Du kannst aber normale HTML-Tags verwenden um Teile + des Textes in der Laufschrift **FETT** (`FETT`) oder *KURSIV* (`KURSIV`) darzustellen. + +Ausserdem kannst Du Emojies und Font-Icons über einen Shortcut einfügen. + +- Für einen Emoji verwende einfach den Namen des Emojie eingeschlossen in Doppelpunkte `:nerd:` +- Für ein Font-Icon verwedest Du ebenfalls die Doppelpunkte mit dem Code für das Icon. `:fas-cog:`, `:far-save:` oder + `:fab-facebook-square:` + +Welchen Code Du verwenden kannst, findest Du für Emojies auf https://unicode.org/emoji/charts/emoji-list.html Du kannst + auf dieser Seite in der Spalte `CLDR Short Name` den Namen rauskopieren und verwenden. Evtl. Leerzeichen werden + mit einem Bindestrich ersetzt. so wird aus dem Namen `grinning face` der Code `:grinning-face:` + +Die Font-Icons kannst Du auf der Seite https://fontawesome.com/icons?d=gallery aussuchen. Auf streamtool.net wird zur + Zeit die Version 5.4.1 verwendet. Es gibt bei der Suche nach Icons keine Unterscheidung zwischen Free und Pro Version. + Es wird alles angezeigt. Auf Streamtool.net können nur die `solid`, `regular` und `brand` Varianten verwendet werden. + Auf der Suchseite sind diese Icons dunkel, während die Pro-Varianten grau dargestellt werden. + +Wenn Du ein Icon ausgesucht hast gehst Du auf die Detailseite, indem Du das gewünschte Icon anklickst, und suchst Dir + dort den Namen und die Variante raus. Ein Beispiel für ein solid-Icon `fas-cog` ein regular-Icon `far-save` und ein + brand-Icon `fab-facebook-square`. + +## in die Encodersoftware einbinden + +Der Ticker kann auf der Seite Links leicht am Namen identifiziert werden. Einfach die zugrhörige Url kopieren und in + der Encodersoftware eine Browsersource einrichten. Die Höhe des Tickers ist `44px`.