Skip to content

Commit a50fd9a

Browse files
fquirinfquirin
authored
Merge pull request #22 from SEPIA-Framework/dev
Client v0.20.0 release version
2 parents 5e8d7d3 + 278c618 commit a50fd9a

22 files changed

+886
-348
lines changed

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: [fquirin]

‎config.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<?xml version='1.0' encoding='utf-8'?>
2-
<widget id="org.example.sepia.app.web" version="0.19.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
2+
<widget id="org.example.sepia.app.web" version="0.20.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
33
<name>S.E.P.I.A.</name>
44
<description>
55
Prototype of S.E.P.I.A. framework client

‎www/css/sepiaFW-frames.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@
6060
/*overflow-y: overlay;*/
6161
-webkit-overflow-scrolling: touch;
6262
}
63+
.sepiaFW-frames-page.flat {
64+
padding: 0;
65+
overflow: hidden;
66+
}
6367
.sepiaFW-frames-page a {
6468
color: #4ec48f;
6569
}
@@ -79,6 +83,15 @@
7983
color: #fff !important;
8084
}
8185

86+
.sepiaFW-frames-page iframe {
87+
border: 0;
88+
}
89+
90+
.sepiaFW-frames-page .full-size {
91+
width: 100%;
92+
height: 100%;
93+
}
94+
8295
.sepiaFW-frames-page .info-text {
8396
color: #4ec48f;
8497
margin: 12px 0;

‎www/css/sepiaFW-style.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ html.dark {
6969
background-color: #000;
7070
background-image: none;
7171
}
72+
html.dark-frame {
73+
background-color: #000 !important;
74+
background-image: none !important;
75+
}
7276
body {
7377
/*font-family: 'Roboto', sans-serif;*/
7478
font-family: sans-serif;
@@ -477,6 +481,11 @@ body {
477481
text-align: center;
478482
z-index: 10;
479483
}
484+
@media (max-height: 530px) {
485+
#sepiaFW-login-box {
486+
top: 4%;
487+
}
488+
}
480489
#sepiaFW-login-box h2 {
481490
font-weight: normal;
482491
}
@@ -535,6 +544,28 @@ body {
535544
color: inherit !important;
536545
margin: 4px 0 0 0 !important;
537546
}
547+
#sepiaFW-login-help-btn {
548+
position: absolute;
549+
bottom: -50px;
550+
right: calc(50% - 24px);
551+
height: auto;
552+
width: auto !important;
553+
background: transparent !important;
554+
display: none;
555+
}
556+
html.light-skin #sepiaFW-login-help-btn {
557+
color: #111 !important;
558+
}
559+
html.dark-skin #sepiaFW-login-help-btn {
560+
color: #eee !important;
561+
}
562+
/*@media (max-height: 480px) {
563+
#sepiaFW-login-help-btn {
564+
position: fixed;
565+
bottom: 0;
566+
right: 0;
567+
}
568+
}*/
538569

539570
#sepiaFW-main-window input, #sepiaFW-main-window button, #sepiaFW-main-window article {
540571
border-radius: 3px;

‎www/device-site.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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>Device Local Site</h3>
6+
<p>Here you can configure the local site (location) data for this device. Note that this data will be stored independently from user logins.</p>
7+
<div id="sepiaFW-device-site-settings" class="group-container">
8+
<div class="group">
9+
<label>Location:</label>
10+
<div id="sepiaFW-device-site-location-box" data-device-site="location"></div>
11+
</div>
12+
<div class="group">
13+
<label>Type:</label>
14+
<div id="sepiaFW-device-site-type-box" data-device-site="type"></div>
15+
</div>
16+
<div class="group">
17+
<label>Name:</label>
18+
<div id="sepiaFW-device-site-name-box" data-device-site="name"></div>
19+
</div>
20+
<div class="group">
21+
<label>Index:</label>
22+
<div id="sepiaFW-device-site-index-box" data-device-site="index"></div>
23+
</div>
24+
<div class="group">
25+
<label>Updates:</label>
26+
<div id="sepiaFW-device-site-updates-box" data-device-site="updates"></div>
27+
</div>
28+
<div class="group" style="justify-content: center;">
29+
<button id="SepiaFW-device-site-store" onclick="SepiaFW.frames.currentScope.store()">Store settings</button>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
<div id="sepiaFW-frames-nav-bar" class='sepiaFW-layer-header'>
36+
<button id="sepiaFW-frames-close" class='entry'>
37+
<i class="material-icons md-btn2">&#xE5CD;</i>
38+
</button>
39+
<!--<button id="sepiaFW-frames-show-prev-page" class='entry'>
40+
<i class="material-icons md-btn2">keyboard_arrow_left</i><span data-localize="back">back</span>
41+
</button>
42+
<button id="sepiaFW-frames-show-next-page" class='entry'>
43+
<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
44+
</button>-->
45+
<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div></div>
46+
</div>
47+
<script>
48+
$('#sepiaFW-frame-carousel').find('[data-localize]').each(function(){
49+
$(this).html(SepiaFW.local.g(this.dataset.localize));
50+
});
51+
52+
//Data
53+
SepiaFW.config.deviceLocalSiteOptions = {
54+
location: [
55+
{ "value": "", "name": "Not assigned" },
56+
{ "value": "home", "name": "Home" }
57+
//,{ "value": "mobile", "name": "Mobile" }
58+
],
59+
type: [
60+
{ "value": "", "name": "Not assigned" },
61+
{ "value": "room", "name": "Room" }
62+
],
63+
name: [
64+
{ "value": "unassigned", "name": "Not assigned" },
65+
{ "value": "livingroom", "name": "Living room" },
66+
{ "value": "diningroom", "name": "Dining room" },
67+
{ "value": "kitchen", "name": "Kitchen" },
68+
{ "value": "bedroom", "name": "Bedroom" },
69+
{ "value": "bath", "name": "Bath" },
70+
{ "value": "study", "name": "Study room" },
71+
{ "value": "office", "name": "Office" },
72+
{ "value": "childsroom", "name": "Child's room" },
73+
{ "value": "garage", "name": "Garage" },
74+
{ "value": "basement", "name": "Basement" },
75+
{ "value": "garden", "name": "Garden" },
76+
{ "value": "shack", "name": "Shack" },
77+
{ "value": "hallway", "name": "Hallway" },
78+
{ "value": "other", "name": "Other" }
79+
],
80+
updates: [
81+
{ "value": "off", "name": "Off" }
82+
//, { "value": "auto", "name": "Automatic" }
83+
]
84+
//, index: undefined, //free input, e.g. numbers: 1, 2, 212, ...
85+
};
86+
//TODO: we should load this data from server
87+
88+
//Define scope
89+
SepiaFW.frames.currentScope = {
90+
91+
onFinishSetup: function(){
92+
$('#sepiaFW-device-site-settings').find('[data-device-site]').each(function(){
93+
var tag = this.dataset.deviceSite;
94+
var options = SepiaFW.config.deviceLocalSiteOptions[tag];
95+
var eleId = "sepiaFW-device-site-settings-" + tag;
96+
if (options){
97+
this.appendChild(SepiaFW.ui.build.optionSelector(eleId, options, options[0], function(ele){})); //console.log(ele.value);
98+
}else{
99+
this.innerHTML = "<input id='" + eleId + "' style='max-width: 100px;' placeholder='" + tag + "'>";
100+
}
101+
});
102+
},
103+
104+
onOpen: function(){
105+
var siteData = SepiaFW.config.getDeviceLocalSiteData();
106+
$('#sepiaFW-device-site-settings-location').val(siteData.location);
107+
$('#sepiaFW-device-site-settings-type').val(siteData.type);
108+
$('#sepiaFW-device-site-settings-name').val(siteData.name);
109+
$('#sepiaFW-device-site-settings-index').val(siteData.index);
110+
$('#sepiaFW-device-site-settings-updates').val(siteData.updates);
111+
},
112+
113+
store: function(){
114+
var siteData = {
115+
location: $('#sepiaFW-device-site-settings-location').val(),
116+
type: $('#sepiaFW-device-site-settings-type').val(),
117+
name: $('#sepiaFW-device-site-settings-name').val(),
118+
index: $('#sepiaFW-device-site-settings-index').val() || "",
119+
updates: $('#sepiaFW-device-site-settings-updates').val()
120+
};
121+
//console.log(siteData);
122+
SepiaFW.config.setDeviceLocalSiteData(siteData);
123+
SepiaFW.ui.showPopup(SepiaFW.local.g("done"));
124+
}
125+
}
126+
</script>

‎www/dynamic-frame.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
Page 1
6+
</div>
7+
</div>
8+
</div>
9+
<div id="sepiaFW-frames-nav-bar" class='sepiaFW-layer-header'>
10+
<button id="sepiaFW-frames-close" class='entry'>
11+
<i class="material-icons md-btn2">close</i>
12+
</button>
13+
<!--<button id="sepiaFW-frames-show-prev-page" class='entry'>
14+
<i class="material-icons md-btn2">keyboard_arrow_left</i><span data-localize="back">back</span>
15+
</button>
16+
<button id="sepiaFW-frames-show-next-page" class='entry'>
17+
<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
18+
</button>-->
19+
<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div></div>
20+
</div>
21+
<script>
22+
$('#sepiaFW-frame-carousel').find('[data-localize]').each(function(){
23+
$(this).html(SepiaFW.local.g(this.dataset.localize));
24+
});
25+
//Define scope
26+
SepiaFW.frames.currentScope = {
27+
//Load scope (default method)
28+
load: function(){
29+
}
30+
}
31+
SepiaFW.frames.currentScope.load();
32+
</script>

‎www/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ <h2><!--Welcome--><script>SepiaFW.local.w('welcome')</script></h2>
103103
</div>
104104
<!-- extend button -->
105105
<div id="sepiaFW-login-extend-box"><button id="sepiaFW-login-extend-btn"><i class="material-icons md-btn2">arrow_drop_down</i></button></div>
106+
<!-- help button -->
107+
<button id="sepiaFW-login-help-btn" onclick="SepiaFW.ui.actions.openUrlAutoTarget('https://github.com/SEPIA-Framework/sepia-docs#welcome-to-the-documentation-page-for-sepia');"><i class="material-icons md-mnu">help</i></button></div>
106108
</div>
107109
<!-- Main -->
108110
<div id="sepiaFW-main-window" class="sepiaFW-translucent-10 sepiaFW-skin-mod">

‎www/launcher.html‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -71,36 +71,18 @@
7171
padding: 16px;
7272
margin: auto;
7373
}
74-
.labelBlock {
75-
height: 100%;
76-
width: 100%;
77-
display: flex;
78-
align-content: center;
79-
align-items: flex-end;
80-
justify-content: center;
81-
overflow: hidden;
82-
}
83-
.labelBlock label {
84-
font-size: 32px;
85-
font-weight: 300;
86-
color: #beff1a;
87-
}
88-
.inputBlock {
89-
background: #fff;
90-
border: 1px solid #beff1a;
91-
border-radius: 3px;
92-
overflow: hidden
93-
}
94-
.inputBlock input {
95-
background: #fff;
96-
border: 0;
74+
input[type="text"] {
9775
-moz-appearance: none;
9876
-webkit-appearance: none;
9977
appearance: none;
100-
width: 100%;
101-
height: 36px;
102-
padding-left: 8px;
103-
font-size: 18px;
78+
background: transparent;
79+
color: inherit;
80+
border: 0;
81+
border-bottom: 1px solid;
82+
text-align: center;
83+
padding: 5px;
84+
margin-bottom: 5px;
85+
font-size: 14px;
10486
}
10587
.buttonBlock {
10688
display: flex;
@@ -172,6 +154,11 @@ <h3 style="margin: 8px; font-size: 22px;">S.E.P.I.A. App Launcher</h3>
172154
<label style="display:none;">
173155
<input id="sepia-preload-tts" class="sepia-storable" type="checkbox" name="preLoadTts" checked>Pre-load TTS voices<br><em>Can be useful for apps in kiosk-mode</em>
174156
</label>
157+
<label>
158+
<span>Environment: </span>
159+
<br><input id="sepia-custom-environment" class="sepia-storable" type="text" placeholder="default">
160+
<br><em>Set custom environment name (used to detect client abilities)</em>
161+
</label>
175162
<label>
176163
<span>View: </span><select id="sepia-url-param-view" class="sepia-storable">
177164
<option value="">Default (Chat View)</option>
@@ -193,6 +180,7 @@ <h3 style="margin: 8px; font-size: 22px;">S.E.P.I.A. App Launcher</h3>
193180
var isApp = document.getElementById('sepia-url-param-app');
194181
var view = document.getElementById('sepia-url-param-view');
195182
var newWindow = document.getElementById('sepia-open-new-win');
183+
var customEnv = document.getElementById('sepia-custom-environment');
196184
var preLoadTts = document.getElementById('sepia-preload-tts');
197185
var ttsSupported = ("speechSynthesis" in window) && speechSynthesis.getVoices;
198186
if (ttsSupported){
@@ -222,6 +210,11 @@ <h3 style="margin: 8px; font-size: 22px;">S.E.P.I.A. App Launcher</h3>
222210
});
223211
if (window.localStorage.getItem('newWindow') == "false") newWindow.checked = false;
224212

213+
customEnv.addEventListener("change", function(){
214+
window.localStorage.setItem('customEnv', customEnv.value);
215+
});
216+
customEnv.value = window.localStorage.getItem('customEnv') || "";
217+
225218
preLoadTts.addEventListener("change", function(){
226219
window.localStorage.setItem('preLoadTts', preLoadTts.checked);
227220
});
@@ -239,6 +232,9 @@ <h3 style="margin: 8px; font-size: 22px;">S.E.P.I.A. App Launcher</h3>
239232
if (view.value){
240233
url += ("&" + view.value);
241234
}
235+
if (customEnv.value){
236+
url += ("&env=" + customEnv.value);
237+
}
242238
if (newWindow.checked){
243239
var h = Math.min(window.screen.availHeight, 800);
244240
var w = Math.min(window.screen.availWidth, 480);

0 commit comments

Comments
 (0)