bachir/HeHe-Centiped
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated ui and script BUGY

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-06-30 23:53:33 +02:00
parent 7a3a72b7dc
commit 94b8d8f31e
7 changed files with 94 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/public_html/css/dist/styles.min.css
Vendored
+1
View File
@@ -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%}
www/public_html/css/styles.css
+8 -15
View File
@@ -4,7 +4,8 @@ html, body {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; } height: 100%;
background-color: black; }
#root { #root {
position: relative; position: relative;
@@ -23,19 +24,11 @@ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; } overflow: hidden; }
#pictures .frame { #pictures video {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%; }
background-size: cover; #pictures video source:not(.1080p) {
background-position: center; display: none; }
background-repeat: no-repeat;
opacity: 0;
transition: opacity 100 ease-in-out; }
#pictures .frame.current {
opacity: 1; }
#timeline { #timeline {
position: absolute; position: absolute;
@@ -46,7 +39,7 @@ html, body {
margin: 1% 0 1% 32%; margin: 1% 0 1% 32%;
height: 3em; height: 3em;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: 5px; } border-radius: 2px; }
#map { #map {
position: absolute; position: absolute;
@@ -57,4 +50,4 @@ html, body {
margin: 1%; margin: 1%;
height: 40%; height: 40%;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: 5px; } border-radius: 2px; }
www/public_html/index.php
+15 -10
View File
@@ -5,6 +5,7 @@
<title>Hehe rover - lot explorer</title> <title>Hehe rover - lot explorer</title>
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css" media="screen" charset="utf-8"> <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" media="screen" charset="utf-8">
<link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/styles.css" media="screen" charset="utf-8"> <link rel="stylesheet" href="css/styles.css" media="screen" charset="utf-8">
</head> </head>
<body> <body>
@@ -13,28 +14,32 @@
<h1>Lot Explorer</h1> <h1>Lot Explorer</h1>
</header> </header>
<section id="pictures"> <section id="pictures">
<!-- add timelapse pictures --> <video autoplay poster="">
<!-- <img src="pictures/hehe-20160612-175853.jpg" alt="" /> --> <!-- <source class="240p" src="videos/timelaps-240p.mp4" type="video/mp4">
<!-- <?php //include('timelaps.inc.php') ?> --> <source class="360p" src="videos/timelaps-360p.mp4" type="video/mp4">
<video autoplay poster="posterimage.jpg"> <source class="480p" src="videos/timelaps-480p.mp4" type="video/mp4">
<source src="videos/timelaps-240p.mp4" type="video/mp4"> <source class="720p" src="videos/timelaps-720p.mp4" type="video/mp4"> -->
<source src="videos/timelaps-360p.mp4" type="video/mp4"> <source class="1080p" src="videos/timelaps-1080p.mp4" type="video/mp4">
<source src="videos/timelaps-480p.mp4" type="video/mp4">
<source src="videos/timelaps-720p.mp4" type="video/mp4">
<source src="videos/timelaps-1080p.mp4" type="video/mp4">
</video> </video>
</section> </section>
<!-- // pictures -->
<section id="timeline"> <section id="timeline">
<!-- add viz.js here --> <!-- add viz.js here -->
</section> </section>
<!-- timeline -->
<section id="map"> <section id="map">
<!-- add leaflet map here --> <!-- add leaflet map here -->
<!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d --> <!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
</section> </section>
<!-- map -->
</div> </div>
<!-- root -->
<script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script> <script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="js/script.js" charset="utf-8"></script> <script src="bower_components/vis/dist/vis.min.js"></script>
<script src="js/dist/script.min.js" charset="utf-8"></script>
</body> </body>
</html> </html>
www/public_html/js/dist/script.min.js
Vendored
+4
View File
@@ -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();});
www/public_html/js/script.js
+59 -13
View File
@@ -1,27 +1,73 @@
$(document).ready(function() { $(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(){ function init(){
console.log("Init"); console.log("Init");
// preload all pictures before launching // preload all pictures before launching
setTimeout(function(){ // setTimeout(function(){
play(); // play();
}, 5000); // }, 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){ function play(millis){
requestAnimationFrame(play); requestAnimationFrame(play);
now = Date.now(); // now = Date.now();
delta = now - then; // delta = now - then;
//
if(delta > interval){ // if(delta > interval){
$(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current'); // then = now -(delta % interval);
// }
then = now -(delta % interval);
}
} }
www/public_html/scss/styles.scss
+7 -17
View File
@@ -3,6 +3,7 @@ html, body{
margin: 0; padding: 0; margin: 0; padding: 0;
overflow: hidden; overflow: hidden;
width:100%; height:100%; width:100%; height:100%;
background-color: black;
} }
#root{ #root{
@@ -21,21 +22,10 @@ html, body{
overflow: hidden; overflow: hidden;
// border: 1px solid blue; // border: 1px solid blue;
.frame{ video {
position:absolute; top:0; left:0; width:100%; height:100%;
width: 100%; height:100%; source:not(.1080p){
background-size: cover; display:none;
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;
} }
} }
@@ -45,7 +35,7 @@ html, body{
position: absolute; z-index: 9; position: absolute; z-index: 9;
bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em; bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
background-color: rgba(255, 255, 255, 0.6); 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; position: absolute; z-index: 9;
bottom:0; left:0; width:30%; margin:1%; height:40%; bottom:0; left:0; width:30%; margin:1%; height:40%;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: 5px; border-radius: 2px;
} }
www/public_html/timelaps.inc.php
-12
View File
@@ -1,12 +0,0 @@
<?php
$imgs = glob("pictures/*.jpg");
foreach ($imgs as $key => $value):
$class = "frame frame-$key";
if($key == 0) $class .= " current";
?>
<div class="<?php print $class; ?>" style="background-image:url('<?php print $value ?>');" alt="" /></div>
<?php endforeach;