Inicio Explorar Axuda
Iniciar sesión
bachir
/
HeHe-Centiped
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

updated ui and script BUGY

Bachir Soussi Chiadmi %!s(int64=8) %!d(string=hai) anos
pai
7a3a72b7dc
achega
94b8d8f31e
Modificáronse 7 ficheiros con 90 adicións e 67 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 0 0
      www/public_html/css/dist/styles.min.css
  2. 8 15
      www/public_html/css/styles.css
  3. 15 10
      www/public_html/index.php
  4. 1 0
      www/public_html/js/dist/script.min.js
  5. 59 13
      www/public_html/js/script.js
  6. 7 17
      www/public_html/scss/styles.scss
  7. 0 12
      www/public_html/timelaps.inc.php

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
www/public_html/css/dist/styles.min.css


+ 8 - 15
www/public_html/css/styles.css
Ver ficheiro 

@@ -4,7 +4,8 @@ html, body {
 
   padding: 0;
 
   overflow: hidden;
 
   width: 100%;
 
-  height: 100%; }
 
+  height: 100%;
 
+  background-color: black; }
 
 
 #root {
 
   position: relative;
 
@@ -23,19 +24,11 @@ html, body {
 
   width: 100%;
 
   height: 100%;
 
   overflow: hidden; }
 
-  #pictures .frame {
 
-    position: absolute;
 
-    top: 0;
 
-    left: 0;
 
+  #pictures video {
 
     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; }
 
+    height: 100%; }
 
+    #pictures video source:not(.1080p) {
 
+      display: none; }
 
 
 #timeline {
 
   position: absolute;
 
@@ -46,7 +39,7 @@ html, body {
 
   margin: 1% 0 1% 32%;
 
   height: 3em;
 
   background-color: rgba(255, 255, 255, 0.6);
 
-  border-radius: 5px; }
 
+  border-radius: 2px; }
 
 
 #map {
 
   position: absolute;
 
@@ -57,4 +50,4 @@ html, body {
 
   margin: 1%;
 
   height: 40%;
 
   background-color: rgba(255, 255, 255, 0.6);
 
-  border-radius: 5px; }
 
+  border-radius: 2px; }

+ 15 - 10
www/public_html/index.php
Ver ficheiro 

@@ -5,6 +5,7 @@
 
     <title>Hehe rover - lot explorer</title>
 
 
     <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">
 
   </head>
 
   <body>
 
@@ -13,28 +14,32 @@
 
         <h1>Lot Explorer</h1>
 
       </header>
 
       <section id="pictures">
 
-        <!-- add timelapse pictures -->
 
-        <!-- <img src="pictures/hehe-20160612-175853.jpg" alt="" /> -->
 
-        <!-- <?php //include('timelaps.inc.php') ?> -->
 
-        <video autoplay poster="posterimage.jpg">
 
-          <source src="videos/timelaps-240p.mp4" type="video/mp4">
 
-          <source src="videos/timelaps-360p.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 autoplay poster="">
 
+          <!-- <source class="240p" src="videos/timelaps-240p.mp4" type="video/mp4">
 
+          <source class="360p" src="videos/timelaps-360p.mp4" type="video/mp4">
 
+          <source class="480p" src="videos/timelaps-480p.mp4" type="video/mp4">
 
+          <source class="720p" src="videos/timelaps-720p.mp4" type="video/mp4"> -->
 
+          <source class="1080p" src="videos/timelaps-1080p.mp4" type="video/mp4">
 
         </video>
 
       </section>
 
+      <!-- // pictures -->
 
+
 
       <section id="timeline">
 
         <!-- add viz.js here -->
 
       </section>
 
+      <!-- timeline -->
 
+
 
       <section id="map">
 
         <!-- add leaflet map here -->
 
         <!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
 
       </section>
 
+      <!-- map -->
 
 
     </div>
 
+    <!-- root -->
 
 
     <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>
 
 </html>

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 1 - 0
www/public_html/js/dist/script.min.js


+ 59 - 13
www/public_html/js/script.js
Ver ficheiro 

@@ -1,27 +1,73 @@
 
 $(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(){
 
     console.log("Init");
 
     // preload all pictures before launching
 
-    
-    setTimeout(function(){
 
-      play();
 
-    }, 5000);
 
-  };
 
 
-  function play(millis){
 
-    requestAnimationFrame(play);
 
+    // setTimeout(function(){
 
+    //   play();
 
+    // }, 5000);
 
+    getMetaData();
 
+    setupTimeline();
 
+  };
 
 
-    now = Date.now();
 
-    delta = now - then;
 
+  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');
 
+  };
 
 
-    if(delta > interval){
 
-      $(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current');
 
+  function setUpData(data){
 
+    console.log("setUpData");
 
+    console.log("data", data);
 
 
-      then = now -(delta % interval);
 
+    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){
 
+    requestAnimationFrame(play);
 
+
 
+    // now = Date.now();
 
+    // delta = now - then;
 
+    //
 
+    // if(delta > interval){
 
+    //   then = now -(delta % interval);
 
+    // }
 
   }

+ 7 - 17
www/public_html/scss/styles.scss
Ver ficheiro 

@@ -3,6 +3,7 @@ html, body{
 
   margin: 0; padding: 0;
 
   overflow: hidden;
 
   width:100%; height:100%;
 
+  background-color: black;
 
 }
 
 
 #root{
 
@@ -21,21 +22,10 @@ html, body{
 
   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;
 
+  video {
 
+    width:100%; height:100%;
 
+    source:not(.1080p){
 
+      display:none;
 
     }
 
   }
 
 
@@ -45,7 +35,7 @@ html, body{
 
   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;
 
+  border-radius: 2px;
 
 }
 
 
 
@@ -53,5 +43,5 @@ html, body{
 
   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;
 
+  border-radius: 2px;
 
 }

+ 0 - 12
www/public_html/timelaps.inc.php
Ver ficheiro 

@@ -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;

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio