updated tutorial and demo-mode (including new list features)

Author: fquirin

www/img/tutorial/controls.png

@@ -36,6 +36,14 @@ function sepiaFW_build_embedded_services(){
 			//Lists
 			if (nluResult.command == "lists"){
 				serviceResult = Services.lists(nluInput, nluResult);
+			
+			//Other
+			}else{
+				var answerText = SepiaFW.local.g('notPossibleInDemoMode');
+				serviceResult = Services.buildServiceResult(
+					nluInput.user, nluInput.language, 
+					nluResult.command, answerText, '', '', ''
+				);
 			}
 		}
 		return serviceResult;

www/img/tutorial/list-functions.png

@@ -89,8 +89,8 @@ function sepiaFW_build_strings(){
 	StringsDE.data_privacy = 'Datenschutz';
 	StringsDE.tutorial = 'Tutorial';
 	//Offline demo texts
-	StringsDE.demoMode = 'Du befindest dich im Demo-Modus! In diesem Modus kannst du die Einstellungen ändern (z.B. host-name), das Tutorial anschauen und mit dem Interface spielen. Um auf deinen Assistenten zuzugreifen melde dich bitte zuerst an.';
-	StringsDE.notPossibleInDemoMode = 'Sorry aber das geht nicht im Demo-Modus.';
+	StringsDE.demoMode = 'Du befindest dich im Demo-Modus! In diesem Modus kannst du die Einstellungen ändern (z.B. hostname), das Tutorial anschauen und mit manchen(!) Teilen des Interfaces spielen. Um auf deinen Assistenten zuzugreifen melde dich bitte zuerst an.';
+	StringsDE.notPossibleInDemoMode = 'Sorry aber das geht noch nicht im Demo-Modus.';
 	StringsDE.demoModeBtn = 'Demo-Modus';
 	StringsDE.myNewsDemoBtn = 'Öffne meine persönlichen News';
 	StringsDE.myRadioDemoBtn = 'Starte mein Lieblingsradio';
@@ -179,8 +179,8 @@ function sepiaFW_build_strings(){
 	StringsEN.data_privacy = 'Data privacy';
 	StringsEN.tutorial = 'Tutorial';
 	//Offline demo texts
-	StringsEN.demoMode = 'You are in demo-mode! This mode only allows you to change settings (e.g. host-name), check out the tutorial and play a bit with the UI. To get access to your assistant please log-in first.';
-	StringsEN.notPossibleInDemoMode = 'Sorry this is not possible in demo-mode.';
+	StringsEN.demoMode = 'You are in demo-mode! This mode only allows you to change settings (e.g. hostname), check out the tutorial and play with some(!) parts of the UI. To get access to your assistant please log-in first.';
+	StringsEN.notPossibleInDemoMode = 'Sorry this is not yet possible in demo-mode.';
 	StringsEN.demoModeBtn = 'Demo-Mode';
 	StringsEN.myNewsDemoBtn = 'Open my personal news';
 	StringsEN.myRadioDemoBtn = 'Start my favorite radio station';

www/scripts/sepiaFW.embedded.services.js

@@ -68,23 +68,23 @@ function sepiaFW_build_offline(){
 
 	//Build a list with custom or dummy data
 	Offline.buildListCardInfoDummy = function(id, title, section, indexType, group, listData){
-		if (!title) title = "My List";
+		if (!title) title = "Demo To-Do List";
 		if (!section) section = "productivity";
 		if (!indexType) indexType = "todo";
 		if (!group) group = "todo";
 		var type = "userDataList";
 		var dateAdded = new Date().getTime();
 		var id = id || ("ABCD" + dateAdded); 	//usually this is defined by database id generator
 		var data = listData || [{
-			"name": "Checked entry 1", "checked": true, "dateAdded": dateAdded
+			"name": "Make screenshots", "checked": true, "dateAdded": dateAdded
 		}, {
-			"name": "Open entry 1", "checked": false, "dateAdded": dateAdded
+			"name": "Write tutorial text", "checked": true, "dateAdded": dateAdded
 		}, {
-			"name": "Open entry 2", "checked": false, "dateAdded": dateAdded
+			"name": "Update data", "checked": false, "state": "inProgress", "dateAdded": dateAdded
 		}, {
-			"name": "Checked entry 2", "checked": false, "dateAdded": dateAdded
+			"name": "Make offline demo-services", "checked": false, "state": "inProgress", "dateAdded": dateAdded
 		}, {
-			"name": "Open entry 3", "checked": false, "dateAdded": dateAdded
+			"name": "Connect shortcut-menu buttons", "checked": false, "dateAdded": dateAdded
 		}];
 		var user = "userid";
 

www/scripts/sepiaFW.local.js

@@ -2,66 +2,112 @@
 	<div class='sepiaFW-carousel-pane-container'>
 		<!-- Page 1 -->
 		<div id="sepiaFW-frame-page-1" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
-			<h3>Tutorial - Page 1 of 3</h3>
+			<h3>Tutorial - Page 1 of 5</h3>
 			<p>
-			Welcome to the S.E.P.I.A. app for browser, iOS and Android! :-)
-			In this little tutorial you will learn the basics to get started with your personal assistant.
+			Welcome to the <a href="https://sepia-framework.github.io/" target="_blank">S.E.P.I.A.</a> app for browser, iOS and Android! :-)
+			In this little tutorial you will learn the <b>basics to get started</b> with your personal assistant.
 			</p>
 			Here is an overview of the controls:
 			<div style="width:100%; text-align:center;">
 				<img src="img/tutorial/controls.png" alt="SEPIA basic controls" style="max-width:75%;">
 			</div>
-			Some buttons have a long-press action assigned as well like the shortcuts (settings) and the mic (audio-input reset).
+			Some buttons have a press-and-hold (long-press) action assigned as well like the shortcuts (settings) and the mic (audio-input reset).
 			<p>
-			If you want to ask S.E.P.I.A. a question just press the mic or type in the chat field, send and wait for your answer.
-			Sometimes when you encounter problems with the mic and it gets stuck in "gray"-mode you can release it with a long-press.
+			If you want to ask S.E.P.I.A. a question <b>just tap the mic or type in the chat field</b>, send the message and wait for your answer.
+			On rare occasions your mic might get stuck in "gray"-mode. If that happens you can release it with a long-press on the mic itself.
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Proceed to <b>next page</b></span>
 			</p>
 		</div>
 		<!-- Page 2 -->
 		<div id="sepiaFW-frame-page-2" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
-			<h3>Tutorial - Page 2 of 3</h3>
+			<h3>Tutorial - Page 2 of 5</h3>
 			<p>
-			When you start S.E.P.I.A. you usually end up in your start-screen (sometimes called 'my-view').
-			This view will show you personal info like upcoming reminders or recommendations based on the time of day.
-			You can fill this screen with results you get from from chatting with S.E.P.I.A. (more about this later).
+			When you start S.E.P.I.A. you usually end up in your personal start-screen a.k.a <b>'my view'</b>.
+			This view will show you <b>personal info</b> like upcoming reminders, custom buttons or recommendations based on the time of day.
+			You can fill this screen with results you get by chatting with S.E.P.I.A. (more about this later).
 			</p>
 			<div style="width:100%; text-align:center;">
 				<img src="img/tutorial/swipe-views.png" alt="SEPIA swipe control" style="max-width:40%;">
 			</div>
 			<p>
-			There are 2 more main views to interact with S.E.P.I.A., the chat view and the results view. 
-			You can reach them with the control on the top or by swiping from the edges of the screen (similar to iOS safari navigation).
+			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 navigation).
 			</p>
 			<p style="display: block; text-align: right;">
 				<span data-proceed-btn>Proceed to <b>next page</b></span>
 			</p>
 		</div>
 		<!-- Page 3 -->
 		<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
-			<h3>Tutorial - Page 3 of 3</h3>
+			<h3>Tutorial - Page 3 of 5</h3>
 			<p>
 			Here you can see a typical chat with S.E.P.I.A.:
 			</p><br>
 			<div style="width:100%; text-align:center;">
-				<img src="img/tutorial/chat-sample.png" alt="SEPIA swipe control" style="max-width:75%; border:1px solid black; padding:8px;">
+				<img src="img/tutorial/chat-sample.png" alt="SEPIA cards sample" style="max-width:75%; border:1px solid black; padding:8px;">
 			</div><br>
 			<p>
-			Some answers will be given as 'cards' directly inside the chat. If the results are bigger like a news overview they will instead be shown inside the extra results view.
-			As noted in the screen-shot some of the cards (just try them ^^) can be added to your personal start-screen by pressing the icon.
+			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.
+			As noted in the screen-shot 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 style="display: block; text-align: right;">
+				<span data-proceed-btn>Proceed to <b>next page</b></span>
+			</p>
+		</div>
+		<!-- Page 4 -->
+		<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
+			<h3>Tutorial - Page 4 of 5</h3>
+			<p>
+			When you ask S.E.P.I.A. to add stuff to your to-do or shopping lists you will see a card like this:
+			</p><br>
+			<div style="width:100%; text-align:center;">
+				<img src="img/tutorial/list-functions.png" alt="SEPIA list functions" style="max-width:75%; border:1px solid black; padding:8px;">
+			</div><br>
+			<p>
+			Depending on the list type each item can have <b>2-3 different states</b>. For to-do-lists tap the check-button to switch between open (no color), in-progress (yellow) and done (green).
+			</p>
+			<p>
+			Items in your list can be moved by activating the drag & drop mode. To do this <b>press-and-hold the check-button</b>. The list item will quickly flash and become grayish.
+			Release the check-button and <b>then use it again to drag the item</b> around, drop it at its new position or even move it to a different list. 
+			After 3s of inactivity the drag & drop mode will automatically switch off.
+			</p>
+			<p>
+			Modifications to the list are <b>not saved automatically</b> and you can undo them simply by reloading the list. If changes are detected the <b>save-button</b> will appear in the upper-left corner.
+			Press it to make all changes permanent.
+			</p>
+			<p style="display: block; text-align: right;">
+				<span data-proceed-btn>Proceed to <b>next page</b></span>
+			</p>
+		</div>
+		<!-- Page 5 -->
+		<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-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), playing radio music, teaching your own commands, using gamepads to trigger actions or changing skins (the look) 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 (please note that this menu might not fully work in demo-mode yet).
+			</p>
+			<p><u>Always-On mode:</u></p>
+			<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.
 			</p>
 			<p><u>Final steps:</u></p>
-			<p>If you are using the browser-version <b>please allow microphone access, pop-ups and notifications</b> to ensure everything is working as intended.
+			<p><b>Please allow S.E.P.I.A. to access the microphone, show pop-ups (browser-version) and send notifications</b> so that every service can work as intended. 
+			You can test it using the following buttons:
 			</p><p style="display: flex; justify-content: center;">
 				<button id="tutorial-test-mic">Test Mic</button>
 				<button id="tutorial-test-note">Test Note</button>
 				<button id="tutorial-test-popup">Test Pop-Up</button>
 			</p>
 			<p>
-			Before you log-in make sure you are using the <b>correct SEPIA server</b>. You can set the server during log-in (drop-down menu) or go to:<br>
+			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;">Menu &#8594; Page 2 &#8594; Hostname</span>
+				<span style="border:1px solid; padding:4px;">Settings menu &#8594; Page 2 &#8594; Hostname</span>
+			</p>
+			<p>
+			If you 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-installation-and-setup" target="_blank">online help</a>.
 			</p>
 		</div>
 	</div>
@@ -76,7 +122,7 @@ <h3>Tutorial - Page 3 of 3</h3>
 	<button id="sepiaFW-frames-show-next-page" class='entry'>
 		<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
 	</button>
-	<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></div>
+	<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></div>
 </div>
 <script>
 	$('[data-localize]').each(function(){