5 changed files with 294 additions and 0 deletions
Unified View
Diff Options
-
+18 -0components/prompter.md
-
+79 -0components/setup.md
-
+117 -0components/slides.md
-
BINcomponents/soundeffects.md
-
+80 -0components/ticker.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 | |||||
| <img src="/images/prompter-setup-1.png"> | |||||
| @ -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) | |||||
| <div class="lead" markdown="1"> | |||||
| 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. | |||||
| </div> | |||||
| <img src="/images/videoplayer-1.png"> | |||||
| ## 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. | |||||
| <img src="/images/audioplayer-setup.png"> | |||||
| 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. | |||||
| @ -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 | |||||
| <div class="lead" markdown="1"> | |||||
| 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. | |||||
| </div> | |||||
| ## 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. | |||||
| <img src="/images/slides-setup-1.png"> | |||||
| 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. | |||||
| <img src="/images/slides-setup.png"> | |||||
| 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. | |||||
| <img src="/images/slide-edit.png"> | |||||
| 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]` (<span style="color: red;">Wörter in rot</span>) 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. | |||||
| <img src="/images/slide-setup.png"> | |||||
| 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. | |||||
BIN
components/soundeffects.md
BIN
components/soundeffects.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 | |||||
| <div class="lead" markdown="1"> | |||||
| 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! | |||||
| </div> | |||||
| 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: | |||||
| <img src="/images/ticker-setup-1.png"> | |||||
| **Ü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** (`<b>FETT</b>`) oder *KURSIV* (`<i>KURSIV</i>`) 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`. | |||||