Skip to content

Commit d30f343

Browse files
shawLyushawLyu
committed
update the index.html
1 parent 4c0f1f2 commit d30f343

File tree

1 file changed

+335
-0
lines changed

1 file changed

+335
-0
lines changed

‎static/js/video_show.js

+335
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
// For RGB / global clustering results
2+
var video_width = 960;
3+
const VIDEO_ASPECT_RATIO = 16.0 / 9.0;
4+
var display_level = 2;
5+
var video_names = ["room_0"];
6+
7+
var videos = [];
8+
var current_video_idx = 0;
9+
10+
function load_videos() {
11+
for (var i = 0; i < video_names.length; i++) {
12+
videos.push(document.getElementById(video_names[i]));
13+
}
14+
}
15+
16+
window.onload = function() {
17+
resize_canvas();
18+
load_videos();
19+
videos[0].play();
20+
}
21+
22+
/* Synchronize main_results, and its canvas(es) to have the same size. */
23+
function resize_canvas() {
24+
var main_results = document.getElementById('image-compare-canvas');
25+
var width = main_results.offsetWidth;
26+
27+
var height = width / VIDEO_ASPECT_RATIO;
28+
main_results.height = height;
29+
main_results.style.height = height;
30+
31+
video_width = width;
32+
33+
var canvas = document.getElementById('canvas');
34+
canvas.width = width;
35+
canvas.height = height;
36+
canvas.style.width = width;
37+
canvas.style.height = height;
38+
}
39+
40+
// Need to trigger a `resize` when window size changes.
41+
// In particular, need to do resize after content loaded, to define height of the canvas!
42+
// Otherwise, the canvas for main-results display won't work.
43+
window.addEventListener('resize', resize_canvas, false);
44+
document.addEventListener("DOMContentLoaded", function() { resize_canvas(); });
45+
46+
/* Image compare utility. Requires jquery + tabler-icons. */
47+
$(() => {
48+
$(".image-compare").each((_index, parent) => {
49+
const $parent = $(parent);
50+
const before = $parent.data("before-label") || "Before";
51+
const after = $parent.data("after-label") || "After";
52+
$parent.append(
53+
"<div id='image-compare-handle' class='image-compare-handle'><i class='ti ti-arrows-horizontal'></i></div>" +
54+
"<div id='image-compare-before' class='image-compare-before'><div>" +
55+
before +
56+
"</div></div>" +
57+
"<div id='image-compare-after' class='image-compare-after'><div>" +
58+
after +
59+
"</div></div>",
60+
);
61+
});
62+
63+
setInterval(() => {
64+
$(".image-compare").each((_index, parent) => {
65+
const $parent = $(parent);
66+
const $handle = $parent.children(".image-compare-handle");
67+
68+
const currentLeft = $handle.position().left;
69+
70+
// Linear dynamics + PD controller : - )
71+
const Kp = 0.03;
72+
const Kd = 0.2;
73+
74+
let velocity = $parent.data("velocity") || 0;
75+
let targetLeft = $parent.data("targetX");
76+
if (targetLeft !== undefined) {
77+
const padding = 10;
78+
const parentWidth = $parent.width();
79+
if (targetLeft <= padding) targetLeft = 0;
80+
if (targetLeft >= parentWidth - padding) targetLeft = parentWidth;
81+
82+
const delta = targetLeft - currentLeft;
83+
velocity += Kp * delta;
84+
}
85+
velocity -= Kd * velocity;
86+
87+
// Update velocity.
88+
$parent.data("velocity", velocity);
89+
90+
const newLeft = currentLeft + velocity;
91+
$parent.children(".image-compare-handle").css("left", newLeft + "px");
92+
$parent.children(".image-compare-before").width(newLeft + "px");
93+
// $parent.children("img:not(:first-child)").width(newLeft + "px");
94+
95+
// $parent.children(".image-compare-after").style.right = 0;
96+
$parent.children(".image-compare-after").css("left", newLeft + "px");
97+
$parent.children(".image-compare-after").width(video_width - newLeft + "px");
98+
99+
var canvas = document.getElementById('canvas');
100+
var ctx = canvas.getContext('2d');
101+
102+
if (videos.length == 0) load_videos();
103+
104+
const newLeftVideo = newLeft * 960/video_width;
105+
video = videos[current_video_idx];
106+
107+
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
108+
ctx.drawImage(
109+
video,
110+
0, 0, newLeftVideo, 520,
111+
0, 0, newLeft, video_width/VIDEO_ASPECT_RATIO
112+
); // RGB
113+
ctx.drawImage(
114+
video,
115+
960*(display_level+1)+newLeftVideo, 0, 960-newLeftVideo, 520, newLeft,
116+
0, video_width-newLeft, video_width/VIDEO_ASPECT_RATIO
117+
); // cluster visualizations
118+
});
119+
}, 10);
120+
121+
$(".image-compare").bind("mousedown touchstart", (evt) => {
122+
const $parent = $(evt.target.closest(".image-compare"));
123+
$parent.data("dragging", true);
124+
125+
if (evt.type == "mousedown")
126+
$parent.data("targetX", evt.pageX - $parent.offset().left);
127+
else if (evt.type == "touchstart")
128+
$parent.data("targetX", evt.touches[0].pageX - $parent.offset().left);
129+
});
130+
131+
$(document)
132+
.bind("mouseup touchend", () => {
133+
$(".image-compare").each((_index, parent) => {
134+
$(parent).data("dragging", false);
135+
});
136+
})
137+
.bind("mousemove touchmove", (evt) => {
138+
$(".image-compare").each((_index, parent) => {
139+
const $parent = $(parent);
140+
if (!$parent.data("dragging")) return;
141+
142+
if (evt.type == "mousemove")
143+
$parent.data("targetX", evt.pageX - $parent.offset().left);
144+
else if (evt.type == "touchmove")
145+
$parent.data("targetX", evt.touches[0].pageX - $parent.offset().left);
146+
});
147+
});
148+
}, 1000 / 60); // 30fps
149+
150+
/* Switcher. */
151+
// Contains logic for switching between coarse/medium/fine.
152+
$(() => {
153+
$(".switcher").each((switcher_index, switcher) => {
154+
const $switcher = $(switcher);
155+
156+
const $inputContainer = $("<div>", { class: "switcher-labels" });
157+
158+
let $current = null;
159+
160+
$switcher.children().each((switcher_child_index, child) => {
161+
const $child = $(child);
162+
163+
const linkId =
164+
"switcher-group-" +
165+
switcher_index.toString() +
166+
"-" +
167+
switcher_child_index.toString();
168+
const $input = $("<input>", {
169+
type: "radio",
170+
name: "switcher-group-" + switcher_index.toString(),
171+
id: linkId,
172+
checked: switcher_child_index === 2,
173+
click: function () {
174+
// Your onclick event logic goes here
175+
$current.addClass("switcher-hidden");
176+
display_level = switcher_child_index;
177+
178+
$current = $([]);
179+
$.merge($current, $child);
180+
$.merge($current, $input);
181+
$.merge($current, $label);
182+
183+
$current.removeClass("switcher-hidden");
184+
},
185+
});
186+
const $label = $("<label>", {
187+
text: $child.data("switcher-label"),
188+
for: linkId,
189+
});
190+
$inputContainer.append($("<div>").append($input).append($label));
191+
192+
if (switcher_child_index !== 2) {
193+
$child.addClass("switcher-hidden");
194+
$input.addClass("switcher-hidden");
195+
$label.addClass("switcher-hidden");
196+
} else {
197+
$current = $([]);
198+
$.merge($current, $child);
199+
$.merge($current, $input);
200+
$.merge($current, $label);
201+
}
202+
});
203+
204+
const $label = $("<label>", {
205+
text: $switcher.data("switcher-title") + ":",
206+
});
207+
$inputContainer.prepend($label);
208+
209+
$switcher.append($inputContainer);
210+
});
211+
});
212+
213+
function set_play_pause_icon() {
214+
button = document.getElementById('play-btn')
215+
current_video = videos[current_video_idx]
216+
if (current_video.paused) {
217+
button.classList.remove("fa-pause");
218+
button.classList.add("fa-play");
219+
} else {
220+
button.classList.add("fa-pause");
221+
button.classList.remove("fa-play");
222+
}
223+
}
224+
225+
function play_pause() {
226+
current_video = videos[current_video_idx]
227+
if (current_video.paused) {
228+
current_video.play();
229+
} else {
230+
current_video.pause();
231+
}
232+
set_play_pause_icon();
233+
}
234+
function fullscreen() {
235+
current_video = videos[current_video_idx]
236+
current_video.style.visibility = "visible";
237+
const fullscreenElement =
238+
document.fullscreenElement ||
239+
document.mozFullScreenElement ||
240+
document.webkitFullscreenElement ||
241+
document.msFullscreenElement;
242+
if (fullscreenElement) {
243+
exitFullscreen();
244+
} else {
245+
launchIntoFullscreen(current_video);
246+
}
247+
}
248+
249+
function download() {
250+
current_video = videos[current_video_idx]
251+
var link = document.createElement('a');
252+
link.download = video_names[current_video_idx] + '.mp4';
253+
link.href = download_paths[current_video_idx];
254+
link.click();
255+
}
256+
257+
function launchIntoFullscreen(element) {
258+
if (element.requestFullscreen) {
259+
element.requestFullscreen();
260+
} else if (element.mozRequestFullScreen) {
261+
element.mozRequestFullScreen();
262+
} else if (element.webkitRequestFullscreen) {
263+
element.webkitRequestFullscreen();
264+
} else if (element.msRequestFullscreen) {
265+
element.msRequestFullscreen();
266+
} else {
267+
element.classList.toggle('fullscreen');
268+
}
269+
}
270+
271+
function exitFullscreen() {
272+
if (document.exitFullscreen) {
273+
document.exitFullscreen();
274+
} else if (document.mozCancelFullScreen) {
275+
document.mozCancelFullScreen();
276+
} else if (document.webkitExitFullscreen) {
277+
document.webkitExitFullscreen();
278+
}
279+
}
280+
281+
if (document.addEventListener)
282+
{
283+
document.addEventListener('fullscreenchange', exitHandler, false);
284+
document.addEventListener('mozfullscreenchange', exitHandler, false);
285+
document.addEventListener('MSFullscreenChange', exitHandler, false);
286+
document.addEventListener('webkitfullscreenchange', exitHandler, false);
287+
}
288+
289+
function exitHandler()
290+
{
291+
if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
292+
{
293+
current_video = videos[current_video_idx]
294+
current_video.style.visibility = "hidden";
295+
}
296+
}
297+
298+
/* Switcher. */
299+
// Contains logic for switching between coarse/medium/fine.
300+
$(() => {
301+
$(".results-slide-row").each((switcher_index, switcher) => {
302+
const $switcher = $(switcher);
303+
console.log($switcher);
304+
console.log($switcher.children());
305+
306+
$switcher.children().each((switcher_child_index, child) => {
307+
const $child = $(child);
308+
309+
const $input = $("<button>", {
310+
class: "thumbnail-btn",
311+
id: "thumb-" + switcher_index.toString(),
312+
click: function () {
313+
// Your onclick event logic goes here
314+
current_video_idx = switcher_child_index;
315+
current_video = videos[current_video_idx]
316+
current_video.currentTime = 0;
317+
current_video.play();
318+
set_play_pause_icon();
319+
},
320+
});
321+
const $img = $("<img>", {
322+
class: "thumbnails",
323+
alt: "paper",
324+
src: $child.data("img-src"),
325+
});
326+
$input.append($img);
327+
const $label = $("<label>", {
328+
text: $child.data("label"),
329+
class: "thumbnail_label",
330+
});
331+
$input.append($label);
332+
$switcher.append($input);
333+
});
334+
});
335+
});

0 commit comments

Comments
 (0)