-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (131 loc) · 4.31 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
<!DOCTYPE html>
<html>
<head>
<title>Stereo 3D image viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/svg+xml" href="icons/icon.svg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@steren">
<meta name="twitter:title" content="Stereo 3D image viewer">
<meta name="twitter:image" content="https://stereo-viewer.app/title.png">
<meta property="og:type" content="article">
<meta property="og:title" content="Stereo 3D image viewer">
<meta property="og:image" content="https://stereo-viewer.app/title.png">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#00ff8f">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"author": "Steren Giannini",
"name": "Stereo 3D image viewer",
"image": "https://stereo-viewer.app/title.png"
}
</script>
<!-- Polyfill for WebXR -->
<script src="https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js"></script>
<script>
window.polyfill = new WebXRPolyfill();
</script>
<!-- Load <stereo-img> Web component from CDN-->
<script type="module" src="https://cdn.skypack.dev/stereo-img@1.5.0"></script>
<style>
html {
margin: auto;
line-height: 1.75;
font-size: 1.25em;
font-family: sans-serif;
background-color: #000;
color: #fff;
}
body {
margin: 0;
}
stereo-img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
#zero-state {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
</style>
<link rel="manifest" href="manifest.json">
</head>
<body id="dropbox">
<stereo-img></stereo-img>
<div id="zero-state">
<p id="hint">Drag and drop or select a stereo picture</p>
<input id="file-input" type="file" accept="image/*">
</div>
<!-- TODO: Display UI on top of viewer without blocking viewer interactions-->
<div id="ui">
<!-- TODO: Add radio button for type -->
<!-- TODO: handle navigation in a list of files -->
<!-- <button id="previous">Previous</button> <button id="next">Next</button> -->
</div>
<script>
function hideZeroState() {
document.getElementById('zero-state').style.display = 'none';
}
// Add selected files to dropdown
function handleFiles(files) {
console.log("Handling files:", files);
for (let i = 0; i < files.length; i++) {
let file = files[i];
if (!file.type.startsWith('image/')){ continue }
let reader = new FileReader();
reader.onload = e => { processFile(e.target.result, file.name); };
reader.readAsDataURL(file);
}
}
function processFile(url, name) {
console.log("Processing file:", name);
const stereoImg = document.querySelector('stereo-img');
stereoImg.src = url;
hideZeroState();
}
document.getElementById("file-input").addEventListener("change", (e) => {
handleFiles(e.target.files);
}, false);
// Drag and drop
const dropzone = document.getElementById("dropbox");
dropzone.ondragover = dropzone.ondragenter = (e) => {
e.stopPropagation();
e.preventDefault();
}
dropzone.ondrop = (e) => {
e.stopPropagation();
e.preventDefault();
console.log("Files dropped");
handleFiles(e.dataTransfer.files);
}
//File Handling API, see https://web.dev/file-handling/
if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
launchQueue.setConsumer(async (launchParams) => {
// Nothing to do when the queue is empty.
if (!launchParams.files.length) {
return;
}
console.log("File(s) to Handle (File Handling API)");
// Resolve FileSystemFileHandle array to File array
const files = await Promise.all(launchParams.files.map( (fileHandle) => {return fileHandle.getFile();} ));
handleFiles(files);
});
}
navigator.serviceWorker.register('sw.js')
navigator.serviceWorker.addEventListener('message', event => {
if(event.files) {
handleFiles(event.files);
}
});
</script>
</body>
</html>