updated tutorial

Author: fquirin

www/img/tutorial/always-on-mode.png

@@ -38,6 +38,9 @@ <h3>Tutorial - Seite 2 von 5</h3>
 			Es gibt 2 weitere Ansichten, in denen du mit S.E.P.I.A. interagieren kannst, das <b>Chat-Fenster</b> und das <b>Ergebnis-Fenster</b>. 
 			Beide können über die die Kontrollen in der Navigationsleiste (Oben) erreicht werden oder durch <b>Swipen vom Rand des Bildschirms</b> (wie z.B. im iOS Browser).
 			</p>
+			<p>
+			Sollte diese Art der Navigation ein Problem sein für deinen Bildschirm, z.B. weil andere Steuerungselemente die Swipe-Zonen überlagern, gibt es in den Einstellungen noch einen alternativen Modus <b>'Touch-bar controls'</b>.
+			</p>
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
 			</p>
@@ -53,8 +56,10 @@ <h3>Tutorial - Seite 3 von 5</h3>
 			</div><br>
 			<p>
 			Manche Antworten werden als <b>'Karten (cards)'</b> direkt im Chat angezeigt. Wenn es mehrere Ergebnisse gibt wie zum Beispiel verschiedene Nachrichtenanbieter werden diese zur besseren Übersicht im Ergebnis-Fenster präsentiert.
-			Wie im Screenshot zu sehen können manche Karten durch einen Tap auf das Icon <b>zu deinem Startbildschirm (My-View) hinzugefügt werden</b> (einfach ausprobieren ^^).<br>
-			Bei Nachrichten-Karten geht dies ebenfalls, hier ist allerdings ein press-and-hold auf den Vorschautext des Artikels nötig.
+			</p>
+			<p>
+			Wie im Screenshot zu sehen, kann durch einen Tap auf das linke Icon für die meisten Karten <b>ein Kontext-Menü geöffnet werden</b>. 
+			Dieses Kontext-Menü hat verschiedene Buttons z.B. um die Karte zu deinem Startbildschirm (My-View) hinzuzufügen, sie mit anderen Usern zu teilen, Musik auf einem deiner anderen Geräte abzuspielen und so weiter (einfach ausprobieren ^^).
 			</p>
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
@@ -89,10 +94,13 @@ <h3>Tutorial - Seite 4 von 5</h3>
 		<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-tutorial-page sepiaFW-carousel-pane'>
 			<h3>Tutorial - Seite 5 von 5</h3>
 			<p>
-			Es gibt noch viele weitere Dinge zu entdecken in S.E.P.I.A. wie zum Beispiel Chats mit Usern auf deinem Server (Gruppe oder privat), Audiostreams abspielen (z.B. Radiomusik), eigene Sprachbefehle definieren, verschiedene 'Skins' um den Look der App zu ändern und Gamepad Support um Aktionen auszuführen. Am besten guckst du dir in Ruhe die ganzen Menüs an und spielst einfach mit allen Buttons :-).
+			Es gibt noch viele weitere Dinge zu entdecken in S.E.P.I.A. wie zum Beispiel Chats mit Usern auf deinem Server (Gruppe oder privat), Audiostreams abspielen (z.B. Radiomusik), <b>eigene Sprachbefehle definieren</b>, verschiedene 'Skins' um den Look der App zu ändern und Gamepad Support um Aktionen auszuführen. Am besten guckst du dir in Ruhe die ganzen Menüs an und spielst einfach mit allen Buttons :-).
 			Ein guter Ort um damit anzufangen ist das <b>Shortcuts Menü</b> unten links (<i>Hinweis: im Demo-Modus sind nicht alle Shortcuts Funktionen belegt</i>).
 			</p>
 			<p><u>Always-On Modus:</u></p>
+			<div style="width:100%; text-align:center;">
+				<img src="img/tutorial/always-on-mode.png" alt="SEPIA Avatar for always-on mode" style="max-width:200px; padding: 8px; border-radius: 10px;">
+			</div>
 			<p>
 			Der Always-On Modus kann via <b>Shortcuts Menü aktiviert werden</b> oder mittels zweifach-Tap auf den Zurück-Button (in Android).
 			Es ist ein spezieller Modus mit einem minimalistischen Interface, welches auf mobilen Geräten <b>verhindert, dass sich der Bildschirm ausschaltet</b>. Auf diese Weise kann S.E.P.I.A. dauerhaft aktiv bleiben und Befehle empfangen, ähnlich wie ein Smart-Speaker.
@@ -106,9 +114,14 @@ <h3>Tutorial - Seite 5 von 5</h3>
 				<button id="tutorial-test-popup">Pop-Up Test</button>
 			</p>
 			<p>
+			Falls du die <b>Wake-Word Erkennung</b> und/oder deinen <b>eigenen SEPIA STT Server</b> nutzt, führe bitte zunächst das <b>'Microphone setup'</b> aus um sicherzustellen, dass die Aufnahmequalität passt.
+			</p><p style="display: flex; justify-content: center;">
+				<span style="border:1px solid; padding:4px;">Einstellungen &#8594; Allgemein &#8594; Mediengeräte</span>
+			</p>
+			<p>
 			Bevor du dich einloggst versichere dich, dass du den <b>richtigen S.E.P.I.A. Server benutzt</b>. Du kannst den Server im Log-In Menü einstellen (drücke dazu den Pfeil am Boden der Login-Box) oder in der App über:<br>
 			</p><p style="display: flex; justify-content: center;">
-				<span style="border:1px solid; padding:4px;">Einstellungen &#8594; Seite 2 &#8594; Hostname</span>
+				<span style="border:1px solid; padding:4px;">Einstellungen &#8594; Allgemein &#8594; Server Verbindungen</span>
 			</p>
 			<p>
 			Wenn du Fragen hast oder mehr darüber lernen willst, wie man den <b>eigenen, privaten, lokalen S.E.P.I.A. Server</b> installiert schau mal in der <a href="https://github.com/SEPIA-Framework/sepia-docs" target="_blank">online Hilfe</a> vorbei 

www/img/tutorial/chat-sample.png

@@ -38,6 +38,9 @@ <h3>Tutorial - Page 2 of 5</h3>
 			There are 2 more views to interact with S.E.P.I.A., the <b>chat view</b> and the <b>results view</b>. 
 			You can reach them using the controls on the top or by <b>swiping from the edges</b> of the screen (similar to iOS browser navigation).
 			</p>
+			<p>
+			If this type of navigation is a problem for you, for example because other control elements of your screen are blocking the swipe-areas, then there is another mode you can enable via the settings called <b>'Touch-bar controls'</b>.
+			</p>
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Proceed to <b>next page</b></span>
 			</p>
@@ -53,8 +56,10 @@ <h3>Tutorial - Page 3 of 5</h3>
 			</div><br>
 			<p>
 			Some answers will be given as <b>'cards'</b> directly inside the chat view. If there are multiple results like different news outlets for example they will instead be shown inside the results view for a better overview.
-			As noted in the screenshot some of the <b>cards can be added to your personal start-screen (my view)</b> by pressing the icon (just try it out ^^).<br>
-			News-cards can be added as well via a long-press on the preview text of the article.
+			</p>
+			<p>
+			As noted in the screenshot most of the <b>cards have a context menu that can be opened</b> by pressing the left icon. 
+			This context menu can have various different buttons for example to add the card to your personal start-screen (my view), to share it with other users, to send music to one of your other devices and so on (just try it out ^^).
 			</p>
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Proceed to <b>next page</b></span>
@@ -89,10 +94,13 @@ <h3>Tutorial - Page 4 of 5</h3>
 		<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-tutorial-page sepiaFW-carousel-pane'>
 			<h3>Tutorial - Page 5 of 5</h3>
 			<p>
-			There are many more things to discover in S.E.P.I.A. like chatting with users (group or private) on your server, playing audio-streams (e.g. radio music), teaching your own voice-commands, changing skins (the look of the app) or gamepad support to trigger actions, so be sure to check out all the menus and play around with all the buttons :-).
+			There are many more things to discover in S.E.P.I.A. like chatting with users (group or private) on your server, playing audio-streams (e.g. radio music), <b>teaching your own voice-commands</b>, changing skins (the look of the app) or gamepad support to trigger actions, so be sure to check out all the menus and play around with all the buttons :-).
 			A good place to start is the <b>shortcuts menu</b> on the bottom-left (<i>note: in demo-mode not all shortcuts functions might me available</i>).
 			</p>
 			<p><u>Always-On mode:</u></p>
+			<div style="width:100%; text-align:center;">
+				<img src="img/tutorial/always-on-mode.png" alt="SEPIA Avatar for always-on mode" style="max-width:200px; padding: 8px; border-radius: 10px;">
+			</div>
 			<p>
 			The always-on mode can be <b>activated via the shortcuts menu</b> or by a double-tap on the back-button (Android only). 
 			It is a special mode that shows only a very minimalistic interface and <b>prevents the screen from turning off</b> on mobile devices so that S.E.P.I.A. can keep running like a smart-speaker and wait for commands.
@@ -106,9 +114,14 @@ <h3>Tutorial - Page 5 of 5</h3>
 				<button id="tutorial-test-popup">Test Pop-Up</button>
 			</p>
 			<p>
+			If you are using the <b>wake-word detection</b> feature and/or your <b>own SEPIA STT server</b> please run the <b>'Microphone setup'</b> to make sure you have good recording quality.
+			</p><p style="display: flex; justify-content: center;">
+				<span style="border:1px solid; padding:4px;">Settings &#8594; General &#8594; Media devices</span>
+			</p>
+			<p>
 			Before you log-in make sure you are using the <b>correct S.E.P.I.A. server</b>. You can set it in the extended log-in menu itself (press the arrow at the bottom of the box) or go to:<br>
 			</p><p style="display: flex; justify-content: center;">
-				<span style="border:1px solid; padding:4px;">Settings menu &#8594; Page 2 &#8594; Hostname</span>
+				<span style="border:1px solid; padding:4px;">Settings &#8594; General &#8594; Server connections</span>
 			</p>
 			<p>
 			If you have any questions or want to learn how to install <b>your own, private, local S.E.P.I.A. server</b> please visit the <a href="https://github.com/SEPIA-Framework/sepia-docs" target="_blank">online help</a>