Skip to content

Commit 09c3507

Browse files
UtopiahUtopiah
committed
start
0 parents  commit 09c3507

8 files changed

+613
-0
lines changed

‎client-side-preview.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
4+
<script src="gallery-via-json-noprocess.js"></script>
5+
</head>
6+
<body>
7+
<a-scene>
8+
<a-sky gallery-via-json></a-sky>
9+
</a-scene>
10+
</body>
11+
</html>

‎gallery-via-json-noprocess.js

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
AFRAME.registerComponent('gallery-via-json', {
2+
init: function () {
3+
// Create our stylesheet
4+
// Create our stylesheet
5+
var style = document.createElement('style');
6+
style.innerHTML =
7+
'.gallery {' +
8+
'background: transparent;' +
9+
'margin: auto;' +
10+
'text-align: center;' +
11+
'position: absolute;' +
12+
'bottom: 0px;' +
13+
'width: 100%;' +
14+
'padding: 5px 0;' +
15+
'}' +
16+
'.scrolling { ' +
17+
'overflow-x: scroll;' +
18+
'overflow-y: hidden;' +
19+
'height: 112px;' +
20+
'white-space:nowrap' +
21+
'} ' +
22+
'.scrolling .thumb img { ' +
23+
'height: 100%; ' +
24+
'min-width: 100%; ' +
25+
'top: 50%; ' +
26+
'left: 50%; ' +
27+
'position: absolute; ' +
28+
'transform: translate(-50%,-50%); ' +
29+
'} ' +
30+
'.scrolling .thumb { ' +
31+
'width: 100px; ' +
32+
'height: 80px; ' +
33+
'overflow: hidden; ' +
34+
'position: relative; ' +
35+
'margin: 5px; ' +
36+
'width: 100px; ' +
37+
'border: 1px solid #fff;' +
38+
'box-shadow: 1px 1px 5px rgba(0,0,0,0.5); ' +
39+
'opacity: 0.7;' +
40+
'max-height: 80px;' +
41+
'cursor: pointer;' +
42+
'display:inline-block;' +
43+
'*display:inline;' +
44+
'*zoom:1;' +
45+
'vertical-align:top;' +
46+
'}' +
47+
'.scrolling .thumb:hover, .scrolling .thumb.active {' +
48+
'box-shadow: 1px 1px 10px rgba(0,0,0,0.25);' +
49+
'opacity: 1;' +
50+
'transform: scale(1.1);' +
51+
'}';
52+
53+
// Get the first script tag
54+
var ref = document.querySelector('script');
55+
56+
// Insert our new styles before the first script tag
57+
ref.parentNode.insertBefore(style, ref);
58+
59+
60+
var i = 0;
61+
if(window.location.hash) {
62+
i = Number( window.location.hash.replace("#image","") );
63+
}
64+
var el = this.el;
65+
var files;
66+
var timer;
67+
var thumb = "";
68+
69+
var enablePreview = AFRAME.utils.getUrlParameter('enable-preview');
70+
var preventTimer = AFRAME.utils.getUrlParameter('disable-timer');
71+
72+
var url = AFRAME.utils.getUrlParameter('json-file');
73+
if (!url){
74+
var msg = "Error: Specify json-file parameter in URL!";
75+
var errorMsg = document.createElement("a-entity");
76+
errorMsg.setAttribute("text", "value", msg);
77+
errorMsg.setAttribute("position", "0.2 0 -0.5");
78+
errorMsg.setAttribute("text", "color", "red");
79+
setTimeout( () => { AFRAME.scenes[0].camera.el.appendChild(errorMsg); }, 1000)
80+
console.error(msg);
81+
return;
82+
}
83+
84+
function setupPreviews(){
85+
var gallery = document.createElement("div")
86+
gallery.classList.add("gallery");
87+
document.body.appendChild(gallery)
88+
var previews = document.createElement("div")
89+
previews.classList.add("scrolling");
90+
gallery.appendChild(previews)
91+
92+
/* for now delegated to css stylesheet
93+
94+
previews.style.position = "absolute";
95+
previews.style.bottom = "0px";
96+
previews.style.left = "0px";
97+
previews.style.height = "100px";
98+
//previews.style.width = files.length * 110 + "px";
99+
previews.style.overflowX = "auto";
100+
previews.style.whiteSpace = "nowrap";
101+
//previews.style.width = "100%";
102+
//previews.style.overflowX = "scroll";
103+
//previews.style.overflowY = "hidden";
104+
*/
105+
106+
for (var imageIdx in files){
107+
var file = files[imageIdx];
108+
var imageEl = document.createElement("img");
109+
imageEl.src = path+thumb+file;
110+
imageEl.setAttribute("fullpath", path+file);
111+
imageEl.setAttribute("index", imageIdx);
112+
imageEl.classList.add("thumb");
113+
imageEl.onclick = function(){
114+
i = this.getAttribute("index");
115+
updateSky();
116+
}
117+
previews.appendChild(imageEl);
118+
119+
/* for now delegated to css stylesheet
120+
imageEl.style.margin = "5px";
121+
imageEl.style.width = "100px";
122+
imageEl.onmouseover = function(){
123+
this.style.boxShadow = "5px 5px";
124+
}
125+
imageEl.onmouseleave = function(){
126+
this.style.boxShadow = "";
127+
}
128+
*/
129+
}
130+
}
131+
132+
function setupPreview(){
133+
var preview = document.createElement("a-image");
134+
preview.setAttribute("position", "1 0 -2");
135+
preview.setAttribute("rotation", "0 -30 0");
136+
preview.setAttribute("id", "preview");
137+
preview.setAttribute("visible", false);
138+
preview.setAttribute("src", path+thumb+files[(i+1)]);
139+
setTimeout( () => { AFRAME.scenes[0].camera.el.appendChild(preview); }, 1000)
140+
}
141+
142+
function updateSky(){
143+
document.querySelectorAll(".scrolling img").forEach( (e) => e.classList.remove("active") )
144+
window.location = "#image" + i;
145+
el.setAttribute("src", path+files[i]);
146+
var previewEl = document.querySelector('.scrolling img[index="'+i+'"]')
147+
if (previewEl) previewEl.style.opacity = 0.7;
148+
el.classList.add("active");
149+
}
150+
151+
var instructions = document.createElement("a-entity");
152+
instructions.setAttribute("text", "value", "<- previous, next ->, ^ first, v last\nSPACE pause/start\n? help");
153+
instructions.setAttribute("position", "0.2 0 -0.3");
154+
if (AFRAME.utils.device.isMobile ()) {
155+
instructions.setAttribute("text", "value", "Diaporama starting...");
156+
instructions.setAttribute("position", "0.2 0 -1");
157+
}
158+
instructions.setAttribute("id", "instructions");
159+
setTimeout( () => { AFRAME.scenes[0].camera.el.appendChild(instructions); }, 1000)
160+
161+
var message = document.createElement("a-entity");
162+
message.setAttribute("text", "value", "");
163+
message.setAttribute("position", "0.2 0 -0.5");
164+
message.setAttribute("id", "message");
165+
message.setAttribute("visible", "false");
166+
message.setAttribute("text", "opacity", "0.6");
167+
setTimeout( () => { AFRAME.scenes[0].camera.el.appendChild(message); }, 1000)
168+
169+
var path = url.replace(/[a-zA-Z]*.json/,'');
170+
var interval = Number( AFRAME.utils.getUrlParameter('interval') );
171+
if (interval < 1) interval = 5;
172+
173+
myFetch(url).then( (r)=>{ displayGallery(r) } )
174+
175+
function displayGallery(json){
176+
files = json;
177+
updateSky();
178+
if (!preventTimer)
179+
timer = startTimer();
180+
if (enablePreview)
181+
setupPreview();
182+
setupPreviews();
183+
}
184+
185+
function startTimer(){
186+
return setInterval( () => {
187+
document.querySelector("#instructions").setAttribute("visible", false);
188+
i++;
189+
if (i > files.length-1) i = 0;
190+
updateSky();
191+
if (enablePreview) setTimeout( () => {
192+
document.querySelector("#preview").setAttribute("visible", true);
193+
document.querySelector("#preview").setAttribute("src", path+thumb+files[(i+1)]);
194+
setTimeout( () => {
195+
document.querySelector("#preview").setAttribute("visible", false);
196+
}, 2000);
197+
}, interval * 1000 - (interval * 1000 / 5) )
198+
}, interval * 1000)
199+
}
200+
201+
function showTemporaryMessage(text){
202+
document.querySelector("#message").setAttribute("visible", true);
203+
document.querySelector("#message").setAttribute("text", "value", text);
204+
setTimeout( () => {
205+
document.querySelector("#message").setAttribute("visible", false);
206+
// could also do an animation
207+
}, 1000)
208+
}
209+
210+
document.onkeydown = checkKey;
211+
function checkKey(e) {
212+
e = e || window.event;
213+
//console.log('key:' + e.key + '.')
214+
document.querySelector("#instructions").setAttribute("visible", false);
215+
switch (e.key){
216+
case ' ':
217+
if (!timer){
218+
timer = startTimer();
219+
showTemporaryMessage("Restarting diaoporama\n(" + interval + "s interval)" );
220+
} else {
221+
showTemporaryMessage("Paused diaoporama");
222+
clearInterval(timer);
223+
timer = 0;
224+
}
225+
break;
226+
case '?':
227+
document.querySelector("#instructions").setAttribute("visible", "true");
228+
break;
229+
case 'ArrowUp':
230+
showTemporaryMessage("Going to the beginning");
231+
i = 0;
232+
updateSky();
233+
break;
234+
case 'ArrowDown':
235+
showTemporaryMessage("Going to the end");
236+
i = files.length-1;
237+
updateSky();
238+
break;
239+
case 'ArrowLeft':
240+
showTemporaryMessage("Previous image");
241+
i--;
242+
if (i<0) i=files.length-1;
243+
updateSky();
244+
break;
245+
case 'ArrowRight':
246+
showTemporaryMessage("Next image");
247+
i++;
248+
if (i > files.length-1) i =0;
249+
updateSky();
250+
break;
251+
}
252+
}
253+
254+
255+
function myFetch(url) {
256+
return new Promise((resolve, reject) => {
257+
const xhr = new XMLHttpRequest();
258+
xhr.open("GET", url);
259+
xhr.responseType = 'json';
260+
xhr.onload = () => resolve(xhr.response);
261+
xhr.onerror = () => reject(xhr.statusText);
262+
xhr.send();
263+
});
264+
}
265+
266+
}
267+
});

0 commit comments

Comments
 (0)