forked from jeeliz/jeelizGlassesVTOWidget
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
145 lines (118 loc) · 4.94 KB
/
demo.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
<!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='release/JeelizNNCwidget.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/JeeWidget.css' />
<script>
let _isResized = false;
function test_resizeCanvas() {
// halves the height:
let halfHeightPx = Math.round(window.innerHeight / 2).toString() + 'px';
const domWidget = document.getElementById('JeeWidget');
domWidget.style.maxHeight = (_isResized) ? 'none' : halfHeightPx;
_isResized = !_isResized;
}
// entry point:
function main() {
JEEWIDGET.start({
sku: 'rayban_aviator_or_vertFlash',
searchImageMask: 'https://appstatic.jeeliz.com/jeewidget/images/target.png',
searchImageColor: 0xeeeeee,
callbackReady: function(){
console.log('INFO: JEEWIDGET is ready :)');
},
onError: function(errorLabel){ // this function catches errors, so you can display custom integrated messages
alert('An error happened. errorLabel =' + errorLabel)
switch(errorLabel) {
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='JeeWidget')
break;
case 'FATAL':
default:
// a bit error happens:(
break;
} // end switch
} // end onError()
}) // end JEEWIDGET.start call
} // end main()
</script>
</head>
<body onload="main()">
<div class='content'>
<div class='header'>
<div class="headerTitle">
Jeeliz VTO Widget
</div>
</div>
<!-- Please keep the same element IDs so that JEEWIDGET can extract them from the DOM -->
<!-- BEGIN JEEWIDGET -->
<!--
div with id='JeeWidget' 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='JeeWidget'>
<!-- MAIN CANVAS: -->
<!--
canvas with id='JeeWidgetCanvas' 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='JeeWidgetCanvas'></canvas>
<div class='JeeWidgetControls JeeWidgetControlsTop'>
<!-- ADJUST BUTTON: -->
<button id='JeeWidgetAdjust'>
<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='JeeWidgetControls' id='JeeWidgetChangeModelContainer'>
<button onclick="JEEWIDGET.load('rayban_aviator_or_vertFlash')">Model 1</button>
<button onclick="JEEWIDGET.load('rayban_round_cuivre_pinkBrownDegrade')">Model 2</button>
<button onclick="JEEWIDGET.load('rayban_wayfarer_denimNoir_bleuMirroir')">Model 3</button>
</div>
<!-- BEGIN ADJUST NOTICE -->
<div id='JeeWidgetAdjustNotice'>
Move the glasses to adjust them.
<button class='JeeWidgetBottomButton' id='JeeWidgetAdjustExit'>Quit</button>
</div>
<!-- END AJUST NOTICE -->
<!-- BEGIN LOADING WIDGET (not model) -->
<div id='JeeWidgetLoading'>
<div class='JeeWidgetLoadingText'>
LOADING...
</div>
</div>
<!-- END LOADING -->
</div>
</div>
</body>
</html>