From 1dfd58f8d7782a2d2284b21553ea8334b7ba9950 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 27 Jun 2016 14:43:54 +0200 Subject: [PATCH] html structure draft and first try of js time laps --- www/css/styles.css | 60 +++++++++++++++++++++++++++++++++++++++++++ www/index.html | 23 ----------------- www/index.php | 33 ++++++++++++++++++++++++ www/js/script.js | 32 +++++++++++++++++++++++ www/pict-converter.sh | 4 +++ www/scss/styles.scss | 57 ++++++++++++++++++++++++++++++++++++++++ www/timelaps.inc.php | 12 +++++++++ 7 files changed, 198 insertions(+), 23 deletions(-) create mode 100644 www/css/styles.css delete mode 100644 www/index.html create mode 100644 www/index.php create mode 100644 www/js/script.js create mode 100755 www/pict-converter.sh create mode 100644 www/scss/styles.scss create mode 100644 www/timelaps.inc.php diff --git a/www/css/styles.css b/www/css/styles.css new file mode 100644 index 0000000..5a3f8b7 --- /dev/null +++ b/www/css/styles.css @@ -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; } diff --git a/www/index.html b/www/index.html deleted file mode 100644 index 2e29ce4..0000000 --- a/www/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Hehe rover - lot explorer - - -
- -
- -
-
- -
-
- - -
- -
- - diff --git a/www/index.php b/www/index.php new file mode 100644 index 0000000..2755b50 --- /dev/null +++ b/www/index.php @@ -0,0 +1,33 @@ + + + + + Hehe rover - lot explorer + + + + + +
+ +
+ + + +
+
+ +
+
+ + +
+ +
+ + + + + diff --git a/www/js/script.js b/www/js/script.js new file mode 100644 index 0000000..c9744e5 --- /dev/null +++ b/www/js/script.js @@ -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(); + +}); diff --git a/www/pict-converter.sh b/www/pict-converter.sh new file mode 100755 index 0000000..402b5f4 --- /dev/null +++ b/www/pict-converter.sh @@ -0,0 +1,4 @@ +#!/bin/sh + + +ffmpeg -r 6 -i pictures/hehe-%04d-%04d.jpg -an -vcodec copy timelaps.avi diff --git a/www/scss/styles.scss b/www/scss/styles.scss new file mode 100644 index 0000000..df17ab6 --- /dev/null +++ b/www/scss/styles.scss @@ -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; +} diff --git a/www/timelaps.inc.php b/www/timelaps.inc.php new file mode 100644 index 0000000..718f563 --- /dev/null +++ b/www/timelaps.inc.php @@ -0,0 +1,12 @@ + $value): + $class = "frame frame-$key"; + if($key == 0) $class .= " current"; + ?> + +
+ +