Dateien hochladen nach „components“

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
+
+<img src="/images/prompter-setup-1.png">

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)
+
+<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.

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
+
+<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.

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
+
+<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`.