Skip to content

Commit 211d862

Browse files
fquirinfquirin
committed
upgraded frames to handle different languages and startet to translate the tutorial
1 parent 9e2c2b1 commit 211d862

File tree

4 files changed

+194
-10
lines changed

4 files changed

+194
-10
lines changed

‎www/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,9 @@ <h2>Active users</h2>
312312
function appSetup(){
313313
//prepare plugins
314314
SepiaFW.buildSepiaFwPlugins();
315+
316+
//set specific language dependent frames (pages)
317+
SepiaFW.frames.setLocalPage('tutorial.html', "de", 'tutorial-de.html');
315318

316319
//set endpoints
317320
var config = new Object();

‎www/scripts/sepiaFW.frames.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,23 @@ function sepiaFW_build_frames(){
1515
var onMessageHandler = undefined; //should receive a message object
1616
var onMissedMessageHandler = undefined; //should be triggered when a message was not visible for user (e.g. because frame was open)
1717
var onSpeechToTextInputHandler = undefined; //should show text (and optionally interrim results) that are generated by STT engine
18+
19+
//local pages map
20+
var localPages = {};
21+
22+
Frames.getLocalOrDefaultPage = function(pageUrl, languageCode){
23+
var localCollection = localPages[pageUrl];
24+
if (localCollection){
25+
return localCollection[languageCode] || pageUrl;
26+
}
27+
return pageUrl;
28+
}
29+
Frames.setLocalPage = function(pageUrl, languageCode, localPage){
30+
var localCollection = localPages[pageUrl];
31+
if (!localCollection) localCollection = {};
32+
localCollection[languageCode] = localPage;
33+
localPages[pageUrl] = localCollection;
34+
}
1835

1936
Frames.open = function(info){
2037
//callbacks?
@@ -76,8 +93,9 @@ function sepiaFW_build_frames(){
7693
}
7794

7895
Frames.setup = function(info, finishCallback){
79-
//get HTML
80-
var framePage = info.pageUrl;
96+
//get HTML - is there a language dependent version?
97+
var framePage = Frames.getLocalOrDefaultPage(info.pageUrl, SepiaFW.config.appLanguage);
98+
8199
//$.get(framePage, function(frameHtml){
82100
SepiaFW.files.fetch(framePage, function(frameHtml){
83101
$('#sepiaFW-frames-view').html(frameHtml);

‎www/tutorial-de.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<div id='sepiaFW-frame-carousel' class="sepiaFW-inner-container sepiaFW-carousel">
2+
<div class='sepiaFW-carousel-pane-container'>
3+
<!-- Page 1 -->
4+
<div id="sepiaFW-frame-page-1" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
5+
<h3>Tutorial - Seite 1 von 5</h3>
6+
<p>
7+
Willkommen zu der <a href="https://sepia-framework.github.io/" target="_blank">S.E.P.I.A.</a> app für Browser, iOS und Android! :-)
8+
In diesem kleinen Tutorial wirst du die <b>Grundlagen</b> lernen um direkt loslegen zu können mit deinem persönlichen Assistenten.
9+
</p>
10+
Hier ein Überblick über die Steuerung:
11+
<div style="width:100%; text-align:center;">
12+
<img src="img/tutorial/controls.png" alt="SEPIA basic controls" style="max-width:75%;">
13+
</div>
14+
Manche Buttons haben auch eine press-and-hold (gedrückt halten) Funktion wie z.B. die 'Shortcuts' (->Einstellungen) und das Mikrophon (->Audio-Input zurücksetzen).
15+
<p>
16+
Wenn du S.E.P.I.A. eine Frage stellen willst <b>drücke einfach das Mikrophon oder tippe ins Chat-Eingabefeld</b>, sende die Nachricht ab und warte auf eine Antwort.
17+
</p><p>
18+
<i>Hinweis: In seltenen Fällen bleibt das Audio-Interface mal stecken im grauen Lade-Modus. Wenn das passiert nutze einfach die press-and-hold Funktion des Mikrophons um es wieder freizugeben.</i>
19+
</p>
20+
<p style="display: block; text-align: right;">
21+
<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
22+
</p>
23+
</div>
24+
<!-- Page 2 -->
25+
<div id="sepiaFW-frame-page-2" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
26+
<h3>Tutorial - Seite 2 von 5</h3>
27+
<p>
28+
Wenn du S.E.P.I.A. startest, landest du meist direkt in deinem persönlichen Startbildschirm alias: <b>'My-View'</b>.
29+
Diese Ansicht zeigt dir <b>persönliche Informationen</b> wie zum Beispiel Erinnerungen, selbst erstellte Buttons oder Empfehlungen basierend auf Ort und Tageszeit.
30+
Du kannst diese Ansicht auch mit Ergebnissen füllen, die du durch den Chat mit S.E.P.I.A. erhälst (mehr dazu später).
31+
</p>
32+
<div style="width:100%; text-align:center;">
33+
<img src="img/tutorial/swipe-views.png" alt="SEPIA swipe control" style="max-width:40%;">
34+
</div>
35+
<p>
36+
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>.
37+
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).
38+
</p>
39+
<p style="display: block; text-align: right;">
40+
<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
41+
</p>
42+
</div>
43+
<!-- Page 3 -->
44+
<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
45+
<h3>Tutorial - Seite 3 von 5</h3>
46+
<p>
47+
Hier siehst du einen typischen Chatverlauf mit S.E.P.I.A.:
48+
</p><br>
49+
<div style="width:100%; text-align:center;">
50+
<img src="img/tutorial/chat-sample.png" alt="SEPIA cards sample" style="max-width:75%; border:1px solid black; padding:8px;">
51+
</div><br>
52+
<p>
53+
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.
54+
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>
55+
Bei Nachrichten-Karten geht dies ebenfalls, hier ist allerdings ein press-and-hold auf den Vorschautext des Artikels nötig.
56+
</p>
57+
<p style="display: block; text-align: right;">
58+
<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
59+
</p>
60+
</div>
61+
<!-- Page 4 -->
62+
<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
63+
<h3>Tutorial - Seite 4 von 5</h3>
64+
<p>
65+
Wenn du S.E.P.I.A. bittest etwas auf deine To-Do oder Shoppingliste zu setzen erscheint eine Karte wie diese:
66+
</p><br>
67+
<div style="width:100%; text-align:center;">
68+
<img src="img/tutorial/list-functions.png" alt="SEPIA list functions" style="max-width:75%; border:1px solid black; padding:8px;">
69+
</div><br>
70+
<p>
71+
Abhängig vom Typ der Liste kann jedes Item <b>2-3 verschiedene Zustände</b> haben. Bei To-Do Listen kann z.B. mittels des linken Check-Buttons zwischen den Zuständen 'offen' (keine Farbe), 'in Bearbeitung' (gelb) und 'erledigt' (grün) umgeschaltet werden.
72+
</p>
73+
<p>
74+
Items in deiner Liste können verschoben werden durch Aktivierung des Drag & Drop-Modus. Dies geschieht durch ein <b>press-and-hold auf den Check-Button</b> eines Items. Das Item blinkt dann kurz auf und bleibt leicht transparent.
75+
Nach der Freigabe kann der Button erneut benutzt werden <b>um das Item auf einen neuen Platz zu ziehen</b> oder in eine neu Liste zu schieben.
76+
Nach 3 Sekunden Inaktivität schaltet sich der Drag & Drop-Modus automatisch aus.
77+
</p>
78+
<p>
79+
Änderungen an der Liste werden <b>nicht automatisch gespeichert</b> und können rückgängig gemacht werden durch ein einfaches Neuladen der Liste. Gibt es Änderungen in der Liste erscheint der <b>Save-Button</b> in der oberen, linken Ecke.
80+
Ein Tap auf diesen Button speichert alle Änderungen permanent ab.
81+
</p>
82+
<p style="display: block; text-align: right;">
83+
<span data-proceed-btn>Auf zur <b>nächsten Seite</b></span>
84+
</p>
85+
</div>
86+
<!-- Page 5 -->
87+
<div id="sepiaFW-frame-page-3" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
88+
<h3>Tutorial - Seite 5 von 5</h3>
89+
<p>
90+
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 :-).
91+
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).
92+
</p>
93+
<p><u>Always-On mode:</u></p>
94+
<p>
95+
The always-on mode can be <b>activated via the shortcuts menu</b> or by a double-tap on the back-button (Android only).
96+
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.
97+
</p>
98+
<p><u>Final steps:</u></p>
99+
<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.
100+
You can test it using the following buttons:
101+
</p><p style="display: flex; justify-content: center;">
102+
<button id="tutorial-test-mic">Test Mic</button>
103+
<button id="tutorial-test-note">Test Note</button>
104+
<button id="tutorial-test-popup">Test Pop-Up</button>
105+
</p>
106+
<p>
107+
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>
108+
</p><p style="display: flex; justify-content: center;">
109+
<span style="border:1px solid; padding:4px;">Settings menu &#8594; Page 2 &#8594; Hostname</span>
110+
</p>
111+
<p>
112+
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>.
113+
</p>
114+
</div>
115+
</div>
116+
</div>
117+
<div id="sepiaFW-frames-nav-bar" class='sepiaFW-layer-header'>
118+
<button id="sepiaFW-frames-close" class='entry'>
119+
<i class="material-icons md-btn2">&#xE5CD;</i>
120+
</button>
121+
<button id="sepiaFW-frames-show-prev-page" class='entry'>
122+
<i class="material-icons md-btn2">keyboard_arrow_left</i><span data-localize="back">back</span>
123+
</button>
124+
<button id="sepiaFW-frames-show-next-page" class='entry'>
125+
<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
126+
</button>
127+
<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></div>
128+
</div>
129+
<script>
130+
$('[data-localize]').each(function(){
131+
$(this).html(SepiaFW.local.g(this.dataset.localize));
132+
});
133+
$('[data-proceed-btn]').each(function(){
134+
$(this).css({"cursor":"pointer"});
135+
$(this).off().on('click', function(){
136+
SepiaFW.frames.uic.next();
137+
});
138+
});
139+
$('#tutorial-test-mic').off().on('click', function(){
140+
if (SepiaFW.speech){
141+
SepiaFW.ui.showPopup('Start speaking...');
142+
SepiaFW.speech.toggleRecognition(
143+
function(msg){ SepiaFW.ui.showPopup('You said: <br>' + msg); },
144+
function(msg){ /*interrim result*/ },
145+
function(msg){ SepiaFW.ui.showPopup('Seems it did not work: <br>' + msg); }
146+
);
147+
}
148+
});
149+
$('#tutorial-test-note').off().on('click', function(){
150+
//simulate 'untrusted' event
151+
SepiaFW.files.fetch('credits.html', function(){
152+
if (SepiaFW.events) SepiaFW.events.showSimpleSilentNotification("S.E.P.I.A. says:", "Hello World! This is a local (offline) notification that can be used for things like messages and alarms.", {});
153+
});
154+
});
155+
$('#tutorial-test-popup').off().on('click', function(){
156+
//simulate 'untrusted' event
157+
SepiaFW.files.fetch('credits.html', function(){
158+
if (SepiaFW.ui.actions) SepiaFW.ui.actions.openUrlAutoTarget("https://sepia-framework.github.io", true);
159+
});
160+
});
161+
</script>

‎www/tutorial.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ <h3>Tutorial - Page 1 of 5</h3>
1111
<div style="width:100%; text-align:center;">
1212
<img src="img/tutorial/controls.png" alt="SEPIA basic controls" style="max-width:75%;">
1313
</div>
14-
Some buttons have a press-and-hold (long-press) action assigned as well like the shortcuts (settings) and the mic (audio-input reset).
14+
Some buttons have a press-and-hold (long-press) action assigned as well like 'shortcuts' (->settings) and 'microphone' (->audio-input reset).
1515
<p>
1616
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.
17-
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.
17+
</p><p>
18+
<i>Note: On some rare occasions your audio-interface might get stuck in the gray loading-mode. If that happens you can release it with a long-press on the mic itself.</i>
19+
</p>
1820
<p style="display: block; text-align: right;">
1921
<span data-proceed-btn>Proceed to <b>next page</b></span>
2022
</p>
@@ -23,16 +25,16 @@ <h3>Tutorial - Page 1 of 5</h3>
2325
<div id="sepiaFW-frame-page-2" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
2426
<h3>Tutorial - Page 2 of 5</h3>
2527
<p>
26-
When you start S.E.P.I.A. you usually end up in your personal start-screen a.k.a <b>'my view'</b>.
27-
This view will show you <b>personal info</b> like upcoming reminders, custom buttons or recommendations based on the time of day.
28+
When you start S.E.P.I.A. the first thing you see is usually your personal start-screen a.k.a <b>'My-View'</b>.
29+
This view will show you <b>personal info</b> like upcoming reminders, custom buttons or recommendations based on your location and the time of day.
2830
You can fill this screen with results you get by chatting with S.E.P.I.A. (more about this later).
2931
</p>
3032
<div style="width:100%; text-align:center;">
3133
<img src="img/tutorial/swipe-views.png" alt="SEPIA swipe control" style="max-width:40%;">
3234
</div>
3335
<p>
3436
There are 2 more views to interact with S.E.P.I.A., the <b>chat view</b> and the <b>results view</b>.
35-
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).
37+
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).
3638
</p>
3739
<p style="display: block; text-align: right;">
3840
<span data-proceed-btn>Proceed to <b>next page</b></span>
@@ -48,8 +50,8 @@ <h3>Tutorial - Page 3 of 5</h3>
4850
<img src="img/tutorial/chat-sample.png" alt="SEPIA cards sample" style="max-width:75%; border:1px solid black; padding:8px;">
4951
</div><br>
5052
<p>
51-
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.
52-
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>
53+
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.
54+
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>
5355
News-cards can be added as well via a long-press on the preview text of the article.
5456
</p>
5557
<p style="display: block; text-align: right;">
@@ -69,7 +71,7 @@ <h3>Tutorial - Page 4 of 5</h3>
6971
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).
7072
</p>
7173
<p>
72-
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.
74+
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 slightly transparent.
7375
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.
7476
After 3s of inactivity the drag & drop mode will automatically switch off.
7577
</p>

0 commit comments

Comments
 (0)