diff --git a/www/.gitignore b/www/.gitignore index f3abae4..4357d1e 100644 --- a/www/.gitignore +++ b/www/.gitignore @@ -4,6 +4,7 @@ public_html/videos/*.mp4 public_html/videos/*.ogg public_html/videos/*.webm public_html/metadata/*.json +public_html/assets/*.xcf logs/*.log tmp_metadata tmp_videos diff --git a/www/public_html/assets/lagare.png b/www/public_html/assets/lagare.png new file mode 100644 index 0000000..92272e5 Binary files /dev/null and b/www/public_html/assets/lagare.png differ diff --git a/www/public_html/css/dist/styles.min.css b/www/public_html/css/dist/styles.min.css index c2bfcf4..5d20991 100644 --- a/www/public_html/css/dist/styles.min.css +++ b/www/public_html/css/dist/styles.min.css @@ -1 +1 @@ -#timelaps,body,html{position:relative;overflow:hidden}#root,#timelaps,body,html{width:100%;height:100%}#mapin,#mapout{width:23.5%;height:10%;background-color:rgba(255,255,255,.6)}#mapin,#mapout,#timeline{position:absolute;z-index:9;bottom:0;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;display:none}#timelaps{z-index:5}#timelaps video#timelapsvid{position:absolute;top:0;left:0;width:100%;height:100%}@media (min-aspect-ratio:16 / 9){#timelaps video#timelapsvid{height:200%;top:-50%}}@media (max-aspect-ratio:16 / 9){#timelaps video#timelapsvid{width:200%;left:-50%}}#mapout{left:0;margin:1% .5% 1% 1%}#mapin{left:25%;margin:1% .5%}#timeline{right:0;width:48%;margin:1% 1% 1% .5%;padding:.5%;height:8.3%;background-color:rgba(15,15,15,.8)}#timeline .vis-background,#timeline .vis-background.vis-horizontal,#timeline .vis-background.vis-vertical,#timeline .vis-panel.vis-bottom,#timeline .vis-panel.vis-center,#timeline .vis-panel.vis-top,#timeline .vis-time-axis,#timeline .vis-timeline{border:none}#timeline .vis-text{color:#827f7f}#timeline .vis-custom-time.videotime{background-color:#2781cc} \ No newline at end of file +#timelaps,body,html{position:relative;overflow:hidden}#root,#timelaps,body,html{width:100%;height:100%}#mapin,#mapout{width:23.5%;height:10%;background-color:rgba(255,255,255,.6)}#mapin,#mapout,#timeline{position:absolute;z-index:9;bottom:0;border-radius:2px}#header,body.teasing #mapin,body.teasing #mapout,body.teasing #timelaps{display:none}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{position:absolute;z-index:10;top:0;left:0}#timelaps{z-index:5}#timelaps video#timelapsvid{position:absolute;top:0;left:0;width:100%;height:100%}@media (min-aspect-ratio:16 / 9){#timelaps video#timelapsvid{height:200%;top:-50%}}@media (max-aspect-ratio:16 / 9){#timelaps video#timelapsvid{width:200%;left:-50%}}#mapout{left:0;margin:1% .5% 1% 1%}#mapin{left:25%;margin:1% .5%}#timeline{right:0;width:48%;margin:1% 1% 1% .5%;padding:.5%;height:8.3%;background-color:rgba(15,15,15,.8)}#teaser,#teaser .layer{width:100%;height:100%;top:0;left:0;position:absolute}#timeline .vis-background,#timeline .vis-background.vis-horizontal,#timeline .vis-background.vis-vertical,#timeline .vis-panel.vis-bottom,#timeline .vis-panel.vis-center,#timeline .vis-panel.vis-top,#timeline .vis-time-axis,#timeline .vis-timeline{border:none}#timeline .vis-text{color:#827f7f}#timeline .vis-custom-time.videotime{background-color:#2781cc}#teaser{z-index:50;background-color:#000;background-image:url(../assets/lagare.png);background-size:cover;background-repeat:no-repeat}#teaser .layer{background-color:rgba(0,0,0,.7)}#teaser .popup{position:absolute;background-color:rgba(0,0,0,.8);width:20%;left:50%;top:45%;margin-left:-10%;border-radius:4px}#teaser .popup h1{color:#fff;text-align:center;font-family:monospace} \ No newline at end of file diff --git a/www/public_html/css/styles.css b/www/public_html/css/styles.css index ad31f90..c9ada5c 100644 --- a/www/public_html/css/styles.css +++ b/www/public_html/css/styles.css @@ -83,3 +83,37 @@ html, body { color: #827f7f; } #timeline .vis-custom-time.videotime { background-color: #2781cc; } + +#teaser { + position: absolute; + z-index: 50; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + background-image: url(../assets/lagare.png); + background-size: cover; + background-repeat: no-repeat; } + #teaser .layer { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.7); } + #teaser .popup { + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + width: 20%; + left: 50%; + top: 45%; + margin-left: -10%; + border-radius: 4px; } + #teaser .popup h1 { + color: #fff; + text-align: center; + font-family: monospace; } + +body.teasing #timelaps, body.teasing #mapin, body.teasing #mapout { + display: none; } diff --git a/www/public_html/index.php b/www/public_html/index.php index dd6fa2d..c35ea94 100644 --- a/www/public_html/index.php +++ b/www/public_html/index.php @@ -14,7 +14,7 @@ header("Pragma: no-cache"); - +
diff --git a/www/public_html/js/dist/script.min.js b/www/public_html/js/dist/script.min.js index 1db7b90..2b90baf 100644 --- a/www/public_html/js/dist/script.min.js +++ b/www/public_html/js/dist/script.min.js @@ -1,5 +1,5 @@ -$(document).ready(function(){var _frames;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;var _mapout,_mapout_zoom=7,_mapout_pin,_mapout_provider="CartoDB.DarkMatter";var _mapin,_mapin_zoom=15,_mapin_pin,_mapin_provider="CartoDB.DarkMatter";var _map_pin_coordinates;var _mapicon=L.icon({iconUrl:'assets/icon.svg',iconSize:[20,20],iconAnchor:[10,10]});function init(){console.log("Init");loadData();};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;for(i in _frames){_frames[i].gps=_frames[i].gps.split(',').map(function(a){return parseFloat(a);});} +$(document).ready(function(){var _frames;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;var _mapout,_mapout_zoom=7,_mapout_pin,_mapout_provider="CartoDB.DarkMatter";var _mapin,_mapin_zoom=15,_mapin_pin,_mapin_provider="CartoDB.DarkMatter";var _map_pin_coordinates;var _mapicon=L.icon({iconUrl:'assets/icon.svg',iconSize:[20,20],iconAnchor:[10,10]});function init(){console.log("Init");tease();};function tease(){};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;for(i in _frames){_frames[i].gps=_frames[i].gps.split(',').map(function(a){return parseFloat(a);});} _tl_start=new Date(_frames[0].datetime);_tl_end=new Date(_frames[_frames.length-1].datetime);_map_pin_coordinates=_frames[0].gps;console.log(_map_pin_coordinates);initDataReady();};function initDataReady(){console.log("initDataReady");setupTimeline();setupMap();setupVideoEvents();play();setTimeout(function(){_video.play();},2000);} function setupTimeline(){_timeline=new vis.Timeline(_timeline_container,[],{showCurrentTime:false,start:_tl_start,end:_tl_end,stack:false});_timeline.addCustomTime(_tl_start,"videotime");_timeline.on('click',onClickTimeline)} function onClickTimeline(props){console.log("onClickTimeline",props.time);};function moveTimelineCursor(date){_timeline.setCustomTime(date,"videotime",{animation:false});_timeline.moveTo(date,{animation:false});} diff --git a/www/public_html/js/script.js b/www/public_html/js/script.js index 1669609..c06d531 100644 --- a/www/public_html/js/script.js +++ b/www/public_html/js/script.js @@ -22,8 +22,12 @@ $(document).ready(function() { function init(){ console.log("Init"); + tease(); + // loadData(); + }; + + function tease(){ - loadData(); }; function loadData(){ diff --git a/www/public_html/scss/styles.scss b/www/public_html/scss/styles.scss index e88b097..c4f7820 100644 --- a/www/public_html/scss/styles.scss +++ b/www/public_html/scss/styles.scss @@ -82,3 +82,33 @@ html, body{ background-color: #2781cc; } } + +#teaser{ + position:absolute; z-index: 50; + top:0; left:0; width:100%; height:100%; + background-color: #000; + background-image: url(../assets/lagare.png); + background-size: cover; + background-repeat: no-repeat; + .layer{ + position: absolute; + width:100%; height:100%; + top:0; left:0; + background-color: rgba(0,0,0,0.7); + } + .popup{ + position: absolute; + background-color: rgba(0,0,0,0.8); + width:20%; left:50%; top:45%; margin-left: -10%; + border-radius: 4px; + h1{ + color: #fff; + text-align: center; + font-family: monospace; + } + } +} + +body.teasing{ + #timelaps, #mapin, #mapout{display: none;} +}