-
Notifications
You must be signed in to change notification settings - Fork 146
/
Copy pathindex.html
184 lines (145 loc) · 6.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<title>JEELIZ VTO WIDGET INTEGRATION DEMO</title>
<meta charset='utf-8' />
<!-- Forbid resize on pinch with IOS Safari: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<!-- INCLUDE MAIN SCRIPT: -->
<script src='dist/JeelizVTOWidget.js'></script>
<!-- For icons adjust fame or resize canvas -->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Font for the header only: -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!-- main stylesheet: -->
<link rel='stylesheet' href='css/JeelizVTOWidget.css' />
<script>
let _isResized = false;
function test_resizeCanvas() {
// halves the height:
let halfHeightPx = Math.round(window.innerHeight / 2).toString() + 'px';
const domWidget = document.getElementById('JeelizVTOWidget');
domWidget.style.maxHeight = (_isResized) ? 'none' : halfHeightPx;
_isResized = !_isResized;
}
function get_initialSKU(){
// look if a SKU is provided as a URL parameters:
const queryString = window.location.search;
const URLParams = new URLSearchParams(queryString);
const sku = URLParams.get('sku') || 'rayban_aviator_or_vertFlash';
console.log('Initial SKU =', sku);
return sku;
}
function get_isShadow(){
const queryString = window.location.search;
const URLParams = new URLSearchParams(queryString);
return URLParams.get('isHideShadow') ? false : true;
}
// entry point:
function main() {
JEELIZVTOWIDGET.start({
isShadow: get_isShadow(),
sku: get_initialSKU(),
searchImageMask: 'https://appstatic.jeeliz.com/jeewidget/images/target512.jpg',
searchImageColor: 0xeeeeee,
callbackReady: function(){
console.log('INFO: JEELIZVTOWIDGET is ready :)');
// add a LUT to change video rendering:
//JEELIZVTOWIDGET.set_LUT('images/LUTs/LUTGrayscale.png');
//JEELIZVTOWIDGET.set_LUT('images/LUTs/LUTImprove.jpg');
},
onError: function(errorLabel){ // this function catches errors, so you can display custom integrated messages
alert('An error happened. errorLabel =' + errorLabel)
switch(errorLabel) {
case 'WEBCAM_UNAVAILABLE':
// the user has no camera, or does not want to share it.
break;
case 'NOFILE':
// the user send an image, but it is not here
break;
case 'WRONGFILEFORMAT':
// the user upload a file which is not an image or corrupted
break;
case 'INVALID_SKU':
// the provided SKU does not match with a glasses model
break;
case 'FALLBACK_UNAVAILABLE':
// we cannot switch to file upload mode. browser too old?
break;
case 'PLACEHOLDER_NULL_WIDTH':
case 'PLACEHOLDER_NULL_HEIGHT':
// Something is wrong with the placeholder
// (element whose id='JeelizVTOWidget')
break;
case 'FATAL':
default:
// a bit error happens:(
break;
} // end switch
} // end onError()
}) // end JEELIZVTOWIDGET.start call
} // end main()
function load_modelBySKU(){
const sku = prompt('Please enter a glasses model SKU:', 'rayban_wayfarer_havane_marron');
if (sku){
JEELIZVTOWIDGET.load(sku);
}
}
window.addEventListener('load', main);
</script>
</head>
<body>
<div class='content'>
<div class='header'>
<div class="headerTitle">
Jeeliz VTO Widget
</div>
</div>
<!-- Please keep the same element IDs so that JEELIZVTOWIDGET can extract them from the DOM -->
<!-- BEGIN JEELIZVTOWIDGET -->
<!--
div with id='JeelizVTOWidget' is the placeholder
you need to size and position it according to where the VTO widget should be
if you resize it, the widget will be automatically resized
-->
<div id='JeelizVTOWidget'>
<!-- MAIN CANVAS: -->
<!--
canvas with id='JeelizVTOWidgetCanvas' is the canvas where the VTO widget will be rendered
it should have CSS attribute position: absolute so that it can be resized without
changing the total size of the placeholder
-->
<canvas id='JeelizVTOWidgetCanvas'></canvas>
<div class='JeelizVTOWidgetControls JeelizVTOWidgetControlsTop'>
<!-- ADJUST BUTTON: -->
<button id='JeelizVTOWidgetAdjust'>
<div class="buttonIcon"><i class="fas fa-arrows-alt"></i></div>Adjust
</button>
<!-- RESIZE WIDGET BUTTON: -->
<button id='buttonResizeCanvas' onclick='test_resizeCanvas();'>
<div class="buttonIcon"><i class="fas fa-sync-alt"></i></div>Resize widget
</button>
</div>
<!-- CHANGE MODEL BUTTONS: -->
<div class='JeelizVTOWidgetControls' id='JeelizVTOWidgetChangeModelContainer'>
<button onclick="JEELIZVTOWIDGET.load('rayban_aviator_or_vertFlash')">Model 1</button>
<button onclick="JEELIZVTOWIDGET.load('rayban_round_cuivre_pinkBrownDegrade')">Model 2</button>
<button onclick="load_modelBySKU()">by SKU</button>
</div>
<!-- BEGIN ADJUST NOTICE -->
<div id='JeelizVTOWidgetAdjustNotice'>
Move the glasses to adjust them.
<button class='JeelizVTOWidgetBottomButton' id='JeelizVTOWidgetAdjustExit'>Quit</button>
</div>
<!-- END AJUST NOTICE -->
<!-- BEGIN LOADING WIDGET (not model) -->
<div id='JeelizVTOWidgetLoading'>
<div class='JeelizVTOWidgetLoadingText'>
LOADING...
</div>
</div>
<!-- END LOADING -->
</div>
</div>
</body>
</html>