|
|
@@ -1,76 +1,119 @@
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
- var _video = document.getElementById('video'), _fps = 24;
|
|
|
- var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar=[], _tl_items;
|
|
|
+ var _frames, _frames_length;
|
|
|
+ var _$timelaps = $('#timelaps'), _$video = $("#timelapsvid"), _video = document.getElementById('timelapsvid'), _fps = 12, _vid_current_time;
|
|
|
+ var _timeline, _timeline_container = document.getElementById('timeline'),
|
|
|
+ _tl_data_ar = [], _tl_items, _tl_start, _tl_end;
|
|
|
|
|
|
function init(){
|
|
|
console.log("Init");
|
|
|
- // preload all pictures before launching
|
|
|
|
|
|
- // setTimeout(function(){
|
|
|
- // play();
|
|
|
- // }, 5000);
|
|
|
- getMetaData();
|
|
|
- // setupTimeline();
|
|
|
+ loadData();
|
|
|
};
|
|
|
|
|
|
- function getMetaData(){
|
|
|
- console.log('getMetaData');
|
|
|
+ function loadData(){
|
|
|
+ console.log('loadData');
|
|
|
// $.getJSON('metadata/frame.json',function(data){
|
|
|
// setUpData(data.frames)
|
|
|
// });
|
|
|
$.ajax({
|
|
|
dataType:"json",
|
|
|
url:'metadata/frames.json',
|
|
|
+ cache: false,
|
|
|
success:setUpData
|
|
|
});
|
|
|
console.log('getMetaData END');
|
|
|
};
|
|
|
|
|
|
- function setUpData(data){
|
|
|
+ function setUpData(d){
|
|
|
console.log("setUpData");
|
|
|
- // console.log("data", data);
|
|
|
-
|
|
|
- var frame;
|
|
|
- for (var i in data.frames) {
|
|
|
- console.log(data.frames[i]);
|
|
|
- _tl_data_ar.push({
|
|
|
- start:new Date(data.frames[i].time),
|
|
|
- id:data.frames[i].frame
|
|
|
- });
|
|
|
- }
|
|
|
+ _frames = d.frames;
|
|
|
+ // console.log(_frames);
|
|
|
+
|
|
|
+ // for (var i in _frames) {
|
|
|
+ // // console.log(data.frames[i]);
|
|
|
+ // _tl_data_ar.push({
|
|
|
+ // start:new Date(_frames[i].datetime),
|
|
|
+ // id:_frames[i].id
|
|
|
+ // });
|
|
|
+ // }
|
|
|
|
|
|
- setupTimeline();
|
|
|
+ // console.log("_frames[_frames.length]",_frames[_frames.length-1]);
|
|
|
+
|
|
|
+ _tl_start= new Date(_frames[0].datetime);
|
|
|
+ _tl_end= new Date(_frames[_frames.length-1].datetime);
|
|
|
+ // console.log('_tl_start : '+_tl_start+" | _tl_end"+_tl_end);
|
|
|
+
|
|
|
+ initDataReady();
|
|
|
};
|
|
|
|
|
|
+ function initDataReady(){
|
|
|
+ console.log("initDataReady");
|
|
|
+ setupTimeline();
|
|
|
+ setupVideoEvents();
|
|
|
+
|
|
|
+ play();
|
|
|
+ }
|
|
|
+
|
|
|
function setupTimeline(){
|
|
|
|
|
|
// Create a DataSet (allows two way data-binding)
|
|
|
- _tl_items = new vis.DataSet(_tl_data_ar);
|
|
|
+ // _tl_items = new vis.DataSet(_tl_data_ar);
|
|
|
|
|
|
// Configuration for the Timeline
|
|
|
// var options = {};
|
|
|
|
|
|
// Create a Timeline
|
|
|
- _timeline = new vis.Timeline(_timeline_container, _tl_items, {});
|
|
|
+ _timeline = new vis.Timeline(_timeline_container, [], {
|
|
|
+ height:'50px',
|
|
|
+ showCurrentTime:false,
|
|
|
+ start:_tl_start,
|
|
|
+ end:_tl_end,
|
|
|
+ stack:false
|
|
|
+ });
|
|
|
+
|
|
|
+ _timeline.addCustomTime(_tl_start, "videotime");
|
|
|
|
|
|
- _timeline.on('select', onSelectTimelineItem)
|
|
|
+ _timeline.on('click', onClickTimeline)
|
|
|
}
|
|
|
|
|
|
- function onSelectTimelineItem(props){
|
|
|
- console.log("onSelectTimelineItem", props);
|
|
|
- seekVideoTo(props.items[0]);
|
|
|
+ function onClickTimeline(props){
|
|
|
+ console.log("onClickTimeline", props.time);
|
|
|
+ // seekVideoTo(props.items[0]);
|
|
|
};
|
|
|
|
|
|
- function seekVideoTo(f){
|
|
|
- console.log("seekVideoTo frame", f);
|
|
|
- _video.pause();
|
|
|
- _video.currentTime = f/_fps;
|
|
|
+ function moveTimelineCursor(date){
|
|
|
+ _timeline.setCustomTime(date, "videotime", {animation:false});
|
|
|
+ _timeline.moveTo(date, {animation:false});
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupVideoEvents(){
|
|
|
+ // console.log("setupVideoEvents");
|
|
|
+ _$video.on("click", onClickVid);
|
|
|
+ };
|
|
|
+
|
|
|
+ function onClickVid(e){
|
|
|
+ console.log("onClickVid",e);
|
|
|
+ if(_video.paused){
|
|
|
+ _video.play();
|
|
|
+ }else{
|
|
|
+ _video.pause();
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
+ // function seekVideoTo(f){
|
|
|
+ // console.log("seekVideoTo frame", f);
|
|
|
+ // _video.pause();
|
|
|
+ // _video.currentTime = f/_fps;
|
|
|
+ // };
|
|
|
+
|
|
|
function play(millis){
|
|
|
requestAnimationFrame(play);
|
|
|
+ // console.log("_video.playing",_video.paused);
|
|
|
|
|
|
+ if (!_video.paused) {
|
|
|
+ moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);
|
|
|
+ }
|
|
|
// now = Date.now();
|
|
|
// delta = now - then;
|
|
|
//
|
|
|
@@ -81,6 +124,14 @@ $(document).ready(function() {
|
|
|
|
|
|
|
|
|
|
|
|
+ /* helpers */
|
|
|
+
|
|
|
+ function vt2f(ct){
|
|
|
+ // console.log("Video Time 2 frame");
|
|
|
+ return Math.round(ct/(1/_fps));
|
|
|
+ // console.log("frame", frame);
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
init();
|
|
|
|
Bachir Soussi Chiadmi