diff --git a/www/public_html/css/dist/styles.min.css b/www/public_html/css/dist/styles.min.css new file mode 100644 index 0000000..9305996 --- /dev/null +++ b/www/public_html/css/dist/styles.min.css @@ -0,0 +1 @@ +#pictures,body,html{position:relative;overflow:hidden}#pictures,#pictures video,#root,body,html{width:100%;height:100%}#map,#timeline{position:absolute;z-index:9;bottom:0;left:0;background-color:rgba(255,255,255,.6);border-radius:2px}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{position:absolute;z-index:10;top:0;left:0}#pictures{z-index:5}#pictures video source:not(.1080p){display:none}#timeline{width:67%;margin:1% 0 1% 32%;height:3em}#map{width:30%;margin:1%;height:40%} \ No newline at end of file diff --git a/www/public_html/css/styles.css b/www/public_html/css/styles.css index 5a3f8b7..0cc3087 100644 --- a/www/public_html/css/styles.css +++ b/www/public_html/css/styles.css @@ -4,7 +4,8 @@ html, body { padding: 0; overflow: hidden; width: 100%; - height: 100%; } + height: 100%; + background-color: black; } #root { position: relative; @@ -23,19 +24,11 @@ html, body { width: 100%; height: 100%; overflow: hidden; } - #pictures .frame { - position: absolute; - top: 0; - left: 0; + #pictures video { width: 100%; - height: 100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - opacity: 0; - transition: opacity 100 ease-in-out; } - #pictures .frame.current { - opacity: 1; } + height: 100%; } + #pictures video source:not(.1080p) { + display: none; } #timeline { position: absolute; @@ -46,7 +39,7 @@ html, body { margin: 1% 0 1% 32%; height: 3em; background-color: rgba(255, 255, 255, 0.6); - border-radius: 5px; } + border-radius: 2px; } #map { position: absolute; @@ -57,4 +50,4 @@ html, body { margin: 1%; height: 40%; background-color: rgba(255, 255, 255, 0.6); - border-radius: 5px; } + border-radius: 2px; } diff --git a/www/public_html/index.php b/www/public_html/index.php index 0e94f2a..b0d9b89 100644 --- a/www/public_html/index.php +++ b/www/public_html/index.php @@ -5,6 +5,7 @@ Hehe rover - lot explorer + @@ -13,28 +14,32 @@

Lot Explorer

- - - -
+ +
+ +
+ + - + + diff --git a/www/public_html/js/dist/script.min.js b/www/public_html/js/dist/script.min.js new file mode 100644 index 0000000..1f4537e --- /dev/null +++ b/www/public_html/js/dist/script.min.js @@ -0,0 +1,4 @@ + +$(document).ready(function(){var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar;function init(){console.log("Init");getMetaData();setupTimeline();};function getMetaData(){console.log('getMetaData');$.ajax({dataType:"json",url:'metadata/frames.json',success:setUpData});console.log('getMetaData END');};function setUpData(data){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:data.frames[i],end:,});}};function setupTimeline(){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'}]);_timeline=new vis.Timeline(_timeline_container,items,{});} +function play(millis){requestAnimationFrame(play);} +init();}); \ No newline at end of file diff --git a/www/public_html/js/script.js b/www/public_html/js/script.js index c9744e5..dc30b59 100644 --- a/www/public_html/js/script.js +++ b/www/public_html/js/script.js @@ -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); + + // setTimeout(function(){ + // play(); + // }, 5000); + getMetaData(); + setupTimeline(); }; + 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'); + }; + + function setUpData(data){ + 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: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){ - $(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current'); - - then = now -(delta % interval); - } + // now = Date.now(); + // delta = now - then; + // + // if(delta > interval){ + // then = now -(delta % interval); + // } } diff --git a/www/public_html/scss/styles.scss b/www/public_html/scss/styles.scss index df17ab6..b3eeea2 100644 --- a/www/public_html/scss/styles.scss +++ b/www/public_html/scss/styles.scss @@ -3,6 +3,7 @@ html, body{ margin: 0; padding: 0; overflow: hidden; width:100%; height:100%; + background-color: black; } #root{ @@ -21,21 +22,10 @@ html, body{ overflow: hidden; // border: 1px solid blue; - .frame{ - position:absolute; top:0; left:0; - width: 100%; height:100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - // background-clip: border-box; - // background-color: green; - - // border: 1px solid red; - // background-image: url(); - opacity: 0; - transition: opacity 100 ease-in-out; - &.current{ - opacity: 1; + video { + width:100%; height:100%; + source:not(.1080p){ + display:none; } } @@ -45,7 +35,7 @@ html, body{ position: absolute; z-index: 9; bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em; background-color: rgba(255, 255, 255, 0.6); - border-radius: 5px; + border-radius: 2px; } @@ -53,5 +43,5 @@ html, body{ position: absolute; z-index: 9; bottom:0; left:0; width:30%; margin:1%; height:40%; background-color: rgba(255, 255, 255, 0.6); - border-radius: 5px; + border-radius: 2px; } diff --git a/www/public_html/timelaps.inc.php b/www/public_html/timelaps.inc.php deleted file mode 100644 index 718f563..0000000 --- a/www/public_html/timelaps.inc.php +++ /dev/null @@ -1,12 +0,0 @@ - $value): - $class = "frame frame-$key"; - if($key == 0) $class .= " current"; - ?> - -
- -