Skip to content

Commit 33d613b

Browse files
fquirinfquirin
committed
tweaked demo-mode a bit and added simple clock widget
1 parent 2533795 commit 33d613b

File tree

8 files changed

+273
-10
lines changed

8 files changed

+273
-10
lines changed

‎www/scripts/sepiaFW.embedded.nlu.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@ function sepiaFW_build_embedded_nlu(){
4848
if (text.match(/(^http(s|):)/i)){
4949
getOpenLinkCmd(nluResult, text);
5050

51+
//Chat with custom action or card
52+
}else if (text.match(/^(action|card) /i)){
53+
getActionOrCardCmd(nluResult, text);
54+
}else if (text.match(/^(custom view|my widget)(:|) /i)){
55+
getActionOrCardCmd(nluResult, text.replace(/^(custom view|my widget)(:|) /i, "action ").toLowerCase());
56+
5157
//Lists
5258
}else if (text.match(/(list|todo)/i)){
5359
getListCmd(nluResult, text);
@@ -75,12 +81,8 @@ function sepiaFW_build_embedded_nlu(){
7581
//Websearch
7682
}else if (text.match(/(search|find|such(e|)|finde|link)\b/i)){
7783
getOpenLinkCmd(nluResult, text);
78-
79-
//Chat with custom action or card
80-
}else if (text.match(/^(action|card) /i)){
81-
getActionOrCardCmd(nluResult, text);
8284
}
83-
85+
8486
return nluResult;
8587
}else{
8688
SepiaFW.debug.info("Embedded.Nlu - offline NLU cannot handle data-type: " + dataType);

‎www/scripts/sepiaFW.embedded.services.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,9 @@ function sepiaFW_build_embedded_services(){
377377
onSpeechToTextInputHandler: "handleSttData", onChatOutputHandler: "handleChatOutput"
378378
}
379379
}); },
380+
"clock": function(){ return Services.buildCustomActionInfo("open_frames_view", { //test relative link and view itself
381+
info: {pageUrl: "xtensions/custom-data/views/clock.html"}
382+
}); },
380383
"custom_event_btn_1": function(){ return Services.buildCustomActionInfo("button_custom_event", {
381384
title: "Test", name: "test", data: {"button": 1}
382385
}); },

‎www/scripts/sepiaFW.frames.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ function sepiaFW_build_frames(){
3434
}else{
3535
resPageUrl = pageUrl;
3636
}
37+
if (resPageUrl && SepiaFW.client.isDemoMode()){
38+
resPageUrl = resPageUrl.replace("<assist_server>", "xtensions/custom-data");
39+
}
3740
resPageUrl = SepiaFW.config.replacePathTagWithActualPath(resPageUrl);
3841
return resPageUrl;
3942
}

‎www/scripts/sepiaFW.ui.cards.embed.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function sepiaFW_build_ui_cards_embed(){
2222
function getPlayerWidget(widget){
2323
var wUrl = playerWidgets[widget];
2424
if (wUrl && SepiaFW.client.isDemoMode()){
25-
wUrl = wUrl.replace("<assist_server>", "<custom_data>");
25+
wUrl = wUrl.replace("<assist_server>", "xtensions/custom-data");
2626
}
2727
return wUrl;
2828
}

‎www/scripts/sepiaFW.ui.customButtons.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ function sepiaFW_build_ui_custom_buttons(sepiaSessionId){
113113
SepiaFW.offline.createCustomButton("My Radio", "music_note", "dummy;;info=my_radio_dummy", SepiaFW.local.g('myRadioDemoBtn'), lang),
114114
SepiaFW.offline.createCustomButton("Media Player", "play_circle_outline", "dummy;;info=my_music_dummy", SepiaFW.local.g('myMusicPlayerDemoBtn'), lang),
115115
SepiaFW.offline.createCustomButton("My News", "local_library", "dummy;;info=my_news_dummy", SepiaFW.local.g('myNewsDemoBtn'), lang),
116-
SepiaFW.offline.createCustomButton("To-Do List", "list", "dummy;;info=my_todo_list_dummy", SepiaFW.local.g('myToDoDemoBtn'), lang)
116+
SepiaFW.offline.createCustomButton("To-Do List", "list", "dummy;;info=my_todo_list_dummy", SepiaFW.local.g('myToDoDemoBtn'), lang),
117+
SepiaFW.offline.createCustomButton("Custom View", "schedule", "dummy;;info=my_frames_view_dummy", "Custom view: Clock", lang)
117118
];
118119
}
119120
return offlineCustomButtonObjects;

‎www/xtensions/custom-data/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@
22

33
You can put own data here and call it inside the app for example via `SepiaFW.files.fetch("<custom_data>"/...)`.
44

5-
NOTE: In mobile apps `<custom_data>/` will access the user-data folder available for your app.
5+
NOTE: In mobile apps `<custom_data>/` will access the system folder available for your app, depending on the package name. For example:
6+
`Android/data/de.bytemind.sepia.app.web/files/`
7+
8+
You should be able to access this folder when you connect your device via USB or use a file browser app though some apps might hide the data :-/.

‎www/xtensions/custom-data/views/clock.html‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
<div id='sepiaFW-frame-carousel' class="sepiaFW-inner-container sepiaFW-carousel">
2+
<style>
3+
#sepiaFW-frame-page-1 {
4+
background-color: #00a99e;
5+
}
6+
.clock-widget {
7+
position: relative;
8+
height: 200px;
9+
width: 200px;
10+
background: white;
11+
box-sizing: border-box;
12+
border-radius: 100%;
13+
border: 10px solid #67d2c8;
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
margin: auto;
20+
cursor: pointer;
21+
}
22+
.clock-widget .clock-tick-top,
23+
.clock-widget .clock-tick-right,
24+
.clock-widget .clock-tick-bottom,
25+
.clock-widget .clock-tick-left {
26+
position: absolute;
27+
background: #262626;
28+
margin: auto;
29+
}
30+
.clock-widget .clock-tick-top {
31+
width: 3px;
32+
height: 8px;
33+
top: 0;
34+
left: 0;
35+
right: 0;
36+
}
37+
.clock-widget .clock-tick-right {
38+
width: 8px;
39+
height: 3px;
40+
top: 0;
41+
bottom: 0;
42+
right: 0;
43+
}
44+
.clock-widget .clock-tick-bottom {
45+
width: 3px;
46+
height: 8px;
47+
left: 0;
48+
right: 0;
49+
bottom: 0;
50+
}
51+
.clock-widget .clock-tick-left {
52+
width: 8px;
53+
height: 3px;
54+
top: 0;
55+
bottom: 0;
56+
left: 0;
57+
}
58+
.clock-widget .clock-face {
59+
height: 6px;
60+
width: 6px;
61+
position: absolute;
62+
left: 0;
63+
right: 0;
64+
top: 0;
65+
bottom: 0;
66+
margin: auto;
67+
background: #262626;
68+
border-radius: 100%;
69+
}
70+
.clock-widget .clock-shadow {
71+
height: 200px;
72+
width: 200px;
73+
position: absolute;
74+
left: 60px;
75+
top: 60px;
76+
transform: rotate(135deg);
77+
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
78+
}
79+
.clock-widget .clock-digital,
80+
.clock-widget .clock-date {
81+
position: absolute;
82+
bottom: 32px;
83+
left: 0;
84+
width: 100%;
85+
text-align: center;
86+
font-weight: bold;
87+
opacity: 0;
88+
transition: opacity 2s;
89+
}
90+
.clock-widget .clock-date {
91+
top: 32px;
92+
bottom: unset;
93+
}
94+
.clock-widget .clock-digital.visible,
95+
.clock-widget .clock-date.visible {
96+
opacity: 1;
97+
}
98+
.clock-widget .clock-hour {
99+
width: 3px;
100+
height: 100%;
101+
position: absolute;
102+
left: 0;
103+
right: 0;
104+
margin: 0 auto;
105+
transition: transform .75s;
106+
}
107+
.clock-widget .clock-hour:before {
108+
position: absolute;
109+
content: "";
110+
background: #262626;
111+
height: 40px;
112+
width: 3px;
113+
top: 50px;
114+
}
115+
.clock-widget .clock-minute {
116+
width: 2px;
117+
height: 100%;
118+
position: absolute;
119+
left: 0;
120+
right: 0;
121+
margin: 0 auto;
122+
transition: transform .75s;
123+
}
124+
.clock-widget .clock-minute:before {
125+
position: absolute;
126+
content: "";
127+
background: #262626;
128+
height: 60px;
129+
width: 2px;
130+
top: 30px;
131+
}
132+
.clock-widget .clock-second {
133+
width: 2px;
134+
height: 100%;
135+
position: absolute;
136+
left: 0;
137+
right: 0;
138+
margin: 0 auto;
139+
/*animation: time 60s infinite linear;*/
140+
transition: transform .75s;
141+
}
142+
.clock-widget .clock-second:before {
143+
position: absolute;
144+
content: "";
145+
background: #fd1111;
146+
height: 45px;
147+
width: 2px;
148+
top: 45px;
149+
}
150+
/*@keyframes time {
151+
to { transform: rotate(360deg); }
152+
}*/
153+
</style>
154+
<div class='sepiaFW-carousel-pane-container'>
155+
<!-- Page 1 -->
156+
<div id="sepiaFW-frame-page-1" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
157+
<div class="clock-widget">
158+
<div class="clock-tick-top"></div>
159+
<div class="clock-tick-right"></div>
160+
<div class="clock-tick-bottom"></div>
161+
<div class="clock-tick-left"></div>
162+
<div class="clock-face"></div>
163+
<div class="clock-shadow"></div>
164+
<div class="clock-date"></div>
165+
<div class="clock-digital"></div>
166+
<div class="clock-hour"></div>
167+
<div class="clock-minute"></div>
168+
<div class="clock-second"></div>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
<div id="sepiaFW-frames-nav-bar" class='sepiaFW-layer-header'>
174+
<button id="sepiaFW-frames-close" class="entry icon-button">
175+
<i class="material-icons md-btn2">close</i>
176+
</button>
177+
<button id="sepiaFW-frames-mic" class="entry icon-button">
178+
<i class="material-icons md-btn2">mic</i>
179+
</button>
180+
<!--<button id="sepiaFW-frames-show-prev-page" class='entry'>
181+
<i class="material-icons md-btn2">keyboard_arrow_left</i><span data-localize="back">back</span>
182+
</button>
183+
<button id="sepiaFW-frames-show-next-page" class='entry'>
184+
<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
185+
</button>-->
186+
<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div></div>
187+
</div>
188+
<script>
189+
//INFO: This is a very simple custom view. To learn more visit:
190+
//https://github.com/SEPIA-Framework/sepia-extensions
191+
192+
$('#sepiaFW-frame-carousel').find('[data-localize]').each(function(){
193+
$(this).html(SepiaFW.local.g(this.dataset.localize));
194+
});
195+
//Define scope
196+
SepiaFW.frames.currentScope = {
197+
//Theme
198+
theme: "dark flat",
199+
200+
//Load scope (default method, kind of like a 'onDocumentReady')
201+
load: function(){
202+
$('#sepiaFW-frames-mic').attr('class', 'entry icon-button'); //start clean
203+
204+
//Code Pen: https://codepen.io/MyXoToD/pen/psLen
205+
//Code Pen Ref.: http://dribbble.com/shots/1015985-Clock
206+
//Tweaks and Javascript: FQ / bytemind.de
207+
208+
var $container = $('#sepiaFW-frame-page-1').find(".clock-widget").first();
209+
var hour = $container.find(".clock-hour")[0];
210+
var minute = $container.find(".clock-minute")[0];
211+
var second = $container.find(".clock-second")[0];
212+
213+
var digital = $container.find(".clock-digital")[0];
214+
var date = $container.find(".clock-date")[0];
215+
var dateTimer;
216+
217+
$container.on("click", function(){
218+
clearTimeout(dateTimer);
219+
date.classList.add("visible");
220+
digital.classList.add("visible");
221+
dateTimer = setTimeout(function(){
222+
date.classList.remove("visible");
223+
digital.classList.remove("visible");
224+
}, 5000);
225+
});
226+
227+
setInterval(function(){
228+
var d = new Date();
229+
var s = d.getSeconds();
230+
var m = d.getMinutes();
231+
var h = d.getHours();
232+
hour.style.transform = "rotate(" + Math.floor(360/12 * h) + "deg)";
233+
minute.style.transform = "rotate(" + Math.floor((h * 360) + (360/60 * m)) + "deg)";
234+
second.style.transform = "rotate(" + Math.floor((m * 360) + (360/60 * s)) + "deg)";
235+
date.textContent = d.toLocaleDateString();
236+
digital.textContent = d.toLocaleTimeString();
237+
}, 1000);
238+
},
239+
onOpen: function(){
240+
241+
},
242+
243+
//Animation state "listener" (listening, speaking, loading, idle, etc.)
244+
onAnimationStateChange: function(animState){
245+
$('#sepiaFW-frames-mic').attr('class', 'entry icon-button state-' + animState);
246+
},
247+
//Custom actions
248+
actionHandler: function(action){
249+
console.error(action);
250+
}
251+
}
252+
SepiaFW.frames.currentScope.load();
253+
</script>

‎www/xtensions/custom-data/views/demo-view.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ <h3>Page 2 - Microphone and chat output</h3>
3131
<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div><div>&nbsp;</div></div>
3232
</div>
3333
<script>
34-
//NOTE: this is a more basic version of "<assist_server>/views/custom-view-demo.html"
35-
3634
//Use this action in your service (or Teach-UI) to trigger the demo frame:
3735
//Action name: "open_frames_view";
3836
//Action data: "info": {"pageUrl": "<custom_data>/views/demo-view.html"}

0 commit comments

Comments
 (0)