| 12345678 |
- $(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=5,_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);});}
- _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});}
- function setupMap(){console.log('setupMap');_mapout=L.map('mapout',{center:_map_pin_coordinates,zoom:_mapout_zoom,zoomControl:false,attributionControl:false});L.tileLayer.provider(_mapout_provider).addTo(_mapout);_mapout_pin=L.marker(_map_pin_coordinates,{icon:_mapicon}).addTo(_mapout);_mapin=L.map('mapin',{center:_map_pin_coordinates,zoom:_mapin_zoom,zoomControl:false,attributionControl:false});L.tileLayer.provider(_mapin_provider).addTo(_mapin);_mapin_pin=L.marker(_map_pin_coordinates,{icon:_mapicon}).addTo(_mapin);};function moveMapPin(c){_mapout.setView(c,_mapout_zoom);_mapout_pin.setLatLng(c);_mapout_pin.update(c);_mapin.setView(c,_mapin_zoom);_mapin_pin.setLatLng(c);_mapin_pin.update(c);};function setupVideoEvents(){_$video.on("click",onClickVid);};function onClickVid(e){console.log("onClickVid",e);if(_video.paused){_video.play();}else{_video.pause();}};function play(millis){requestAnimationFrame(play);if(!_video.paused){moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);moveMapPin(_frames[vt2f(_video.currentTime)].gps);}}
- function vt2f(ct){return Math.round(ct/(1/_fps));}
- init();});
|
