|
@@ -1,27 +1,73 @@
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
- var fps = 2, now, then = Date.now(), interval = 1000/fps, delta;
|
|
|
+ var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar;
|
|
|
|
|
|
function init(){
|
|
|
console.log("Init");
|
|
|
// preload all pictures before launching
|
|
|
-
|
|
|
- setTimeout(function(){
|
|
|
- play();
|
|
|
- }, 5000);
|
|
|
- };
|
|
|
|
|
|
- function play(millis){
|
|
|
- requestAnimationFrame(play);
|
|
|
+ // setTimeout(function(){
|
|
|
+ // play();
|
|
|
+ // }, 5000);
|
|
|
+ getMetaData();
|
|
|
+ setupTimeline();
|
|
|
+ };
|
|
|
|
|
|
- now = Date.now();
|
|
|
- delta = now - then;
|
|
|
+ function getMetaData(){
|
|
|
+ console.log('getMetaData');
|
|
|
+ // $.getJSON('metadata/frame.json',function(data){
|
|
|
+ // setUpData(data.frames)
|
|
|
+ // });
|
|
|
+ $.ajax({
|
|
|
+ dataType:"json",
|
|
|
+ url:'metadata/frames.json',
|
|
|
+ success:setUpData
|
|
|
+ });
|
|
|
+ console.log('getMetaData END');
|
|
|
+ };
|
|
|
|
|
|
- if(delta > interval){
|
|
|
- $(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current');
|
|
|
+ function setUpData(data){
|
|
|
+ console.log("setUpData");
|
|
|
+ console.log("data", data);
|
|
|
|
|
|
- then = now -(delta % interval);
|
|
|
+ var frame;
|
|
|
+ for (var i in data.frames) {
|
|
|
+ console.log(data.frames[i]);
|
|
|
+ _tl_data_ar.push({
|
|
|
+ start:data.frames[i],
|
|
|
+ end:,
|
|
|
+ });
|
|
|
}
|
|
|
+ };
|
|
|
+
|
|
|
+ function setupTimeline(){
|
|
|
+
|
|
|
+ // Create a DataSet (allows two way data-binding)
|
|
|
+ var items = new vis.DataSet([
|
|
|
+ {id: 1, content: 'item 1', start: '2016-06-20'},
|
|
|
+ {id: 2, content: 'item 2', start: '2016-06-14'},
|
|
|
+ {id: 3, content: 'item 3', start: '2016-06-18'},
|
|
|
+ {id: 4, content: 'item 4', start: '2016-06-16', end: '2015-06-19'},
|
|
|
+ {id: 5, content: 'item 5', start: '2016-06-25'},
|
|
|
+ {id: 6, content: 'item 6', start: '2016-06-27', type: 'point'}
|
|
|
+ ]);
|
|
|
+
|
|
|
+ // Configuration for the Timeline
|
|
|
+ // var options = {};
|
|
|
+
|
|
|
+ // Create a Timeline
|
|
|
+ _timeline = new vis.Timeline(_timeline_container, items, {});
|
|
|
+ }
|
|
|
+
|
|
|
+ function play(millis){
|
|
|
+ requestAnimationFrame(play);
|
|
|
+
|
|
|
+ // now = Date.now();
|
|
|
+ // delta = now - then;
|
|
|
+ //
|
|
|
+ // if(delta > interval){
|
|
|
+ // then = now -(delta % interval);
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
|