Home Explore Help
Sign In
bachir
/
HeHe-Centiped
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

html structure draft and first try of js time laps

Bachir Soussi Chiadmi 8 years ago
parent
8218678f90
commit
1dfd58f8d7
7 changed files with 198 additions and 23 deletions
Unified View Show Diff Stats
  1. 60 0
      www/css/styles.css
  2. 0 23
      www/index.html
  3. 33 0
      www/index.php
  4. 32 0
      www/js/script.js
  5. 4 0
      www/pict-converter.sh
  6. 57 0
      www/scss/styles.scss
  7. 12 0
      www/timelaps.inc.php

+ 60 - 0
www/css/styles.css
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; }

+ 0 - 23
www/index.html
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>

+ 33 - 0
www/index.php
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>

+ 32 - 0
www/js/script.js
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();
 
+
 
+});

+ 4 - 0
www/pict-converter.sh
View File 

@@ -0,0 +1,4 @@
 
+#!/bin/sh
 
+
 
+
 
+ffmpeg -r 6 -i pictures/hehe-%04d-%04d.jpg -an -vcodec copy timelaps.avi

+ 57 - 0
www/scss/styles.scss
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;
 
+}

+ 12 - 0
www/timelaps.inc.php
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;