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

html structure draft and first try of js time laps

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-06-27 14:43:54 +02:00
parent 8218678f90
commit 1dfd58f8d7
7 changed files with 198 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/css/styles.css
+60
View File
@@ -0,0 +1,60 @@
html, body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%; }
#root {
position: relative;
width: 100%;
height: 100%; }
#header {
position: absolute;
z-index: 10;
top: 0;
left: 0; }
#pictures {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
overflow: hidden; }
#pictures .frame {
position: absolute;
top: 0;
left: 0;
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; }
#timeline {
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; }
#map {
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; }
www/index.html
-23
View File
@@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hehe rover - lot explorer</title>
</head>
<body>
<div class="root">
<section id="pictures">
<!-- add timelapse pictures -->
</section>
<section id="timeline">
<!-- add viz.js here -->
</section>
<section id="map">
<!-- add leaflet map here -->
<!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
</section>
</div>
</body>
</html>
www/index.php
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="css/styles.css" media="screen" charset="utf-8">
</head>
<body>
<div id="root">
<header id="header">
<h1>Lot Explorer</h1>
</header>
<section id="pictures">
<!-- add timelapse pictures -->
<!-- <img src="pictures/hehe-20160612-175853.jpg" alt="" /> -->
<?php include('timelaps.inc.php') ?>
</section>
<section id="timeline">
<!-- add viz.js here -->
</section>
<section id="map">
<!-- add leaflet map here -->
<!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
</section>
</div>
<script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>
www/js/script.js
+32
View File
@@ -0,0 +1,32 @@
$(document).ready(function() {
var fps = 2, now, then = Date.now(), interval = 1000/fps, delta;
function init(){
console.log("Init");
// preload all pictures before launching
setTimeout(function(){
play();
}, 5000);
};
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);
}
}
init();
});
www/pict-converter.sh
Executable
+4
View File
@@ -0,0 +1,4 @@
#!/bin/sh
ffmpeg -r 6 -i pictures/hehe-%04d-%04d.jpg -an -vcodec copy timelaps.avi
www/scss/styles.scss
+57
View File
@@ -0,0 +1,57 @@
html, body{
position: relative;
margin: 0; padding: 0;
overflow: hidden;
width:100%; height:100%;
}
#root{
position: relative;
width:100%; height:100%;
}
#header{
position: absolute; z-index: 10;
top:0; left:0;
}
#pictures{
position: relative; z-index: 5;
width:100%; height:100%;
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;
}
}
}
#timeline{
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;
}
#map{
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;
}
www/timelaps.inc.php
+12
View File
@@ -0,0 +1,12 @@
<?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;