removed all hardcoded stuff; buttons are now named by their folder names

debd · Sep 30, 2013 · f12048a · f12048a
1 parent ccdd77a
commit f12048a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ Demonstration video coming soon.
   `$ node oscbridge.js -port 4344`
 - Start Processing    
   `/kinect-carousel/kinect/kinect.pde`
-- Add folders with images (the name doesn't matter) to `/kinect-carousel/client/img` to initiate as many carousels as folders. Don't put files directly in `/kinect-carousel/client/img`, they won't be considered
+- Add folders with images (the name doesn't matter) to `/kinect-carousel/client/img` to initiate as many carousels as folders. Don't put files directly in `/kinect-carousel/client/img`, they won't be included
 - Open client on localhost/webserver (PHP must be enabled)  
   `/kinect-carousel/client/index.html`
 - Have fun!

diff --git a/client/css/style.css b/client/css/style.css
@@ -22,7 +22,7 @@ body, html {
     height:100%;
 }
 
-.wrapper {
+#wrapper {
     height:100%;
     -webkit-transition: -webkit-transform 1s;
 }
@@ -49,7 +49,7 @@ body, html {
     z-index: 1000;
 }
 
-    #cursor .timer {
+    #cursor #timer {
         position: relative;
         z-index: 1001;
         display: none;
@@ -84,7 +84,6 @@ body, html {
     #navigation button {
         position: absolute;
         z-index: 11000;
-        width:33.3%;
         height:150px;
         left:0;
         font-family: 'HelveticaNeueLTPro-BlkCn', 'Helvetica', 'Arial', sans-serif;
@@ -105,7 +104,7 @@ body, html {
         color:#FF5500;
     }
 
-.timer {
+#timer {
     position:relative;
     font-size: 50px;
     width:1em;
@@ -114,7 +113,7 @@ body, html {
     text-indent: -99999px;
 }
 
-.timer > .percent {
+#timer > .percent {
     position: absolute;
     top: 1.05em;
     left: 0;
@@ -123,18 +122,18 @@ body, html {
     text-align:center;
 }
 
-.timer > #slice {
+#timer > #slice {
     position:absolute;
     width:1em;
     height:1em;
     clip:rect(0px,1em,1em,0.5em);
 }
 
-.timer > #slice.gt50 {
+#timer > #slice.gt50 {
     clip:rect(auto, auto, auto, auto);
 }
 
-.timer > #slice > .pie {
+#timer > #slice > .pie {
     border: 0.1em solid #c0c0c0;
     position:absolute;
     width:0.8em; /* 1 - (2 * border width) */
@@ -145,7 +144,7 @@ body, html {
     border-radius:0.5em;
 }
 
-.timer > #slice > .pie.fill {
+#timer > #slice > .pie.fill {
     -moz-transform:rotate(180deg) !important;
     -webkit-transform:rotate(180deg) !important;
     -o-transform:rotate(180deg) !important;

diff --git a/client/index.html b/client/index.html
@@ -8,16 +8,13 @@
 
 <body>
 
-    <div class="wrapper"></div>
+    <div id="wrapper"></div>
 
     <div id="cursor">
-        <div class="timer"></div>
+        <div id="timer"></div>
     </div>
 
     <div id="navigation">
-        <button data-type="switch" data-target="0" class="active">1</button>
-        <button data-type="switch" data-target="1">2</button>
-        <button data-type="switch" data-target="2">3</button>
         <div id="left"></div>
         <div id="right"></div>        
     </div>

diff --git a/client/js/lib.js b/client/js/lib.js
@@ -7,7 +7,8 @@ var $cursor,
     $screen,
     $buttons,
     $timer,
-    $wrapper;
+    $wrapper,
+    $navigation;
 
 // global vars
 var carousels = [],                                         // carousel object
@@ -282,7 +283,7 @@ function handleButtonClick($obj) {
         // calculate translation to move to next carousel
         var top = $screen.eq(c).css('top');
 
-        $('.wrapper').css({'-webkit-transform':'translate3D(0,-'+top+',0)'});
+        $wrapper.css({'-webkit-transform':'translate3D(0,-'+top+',0)'});
     }
 }
 
@@ -315,7 +316,8 @@ function insertRandomImages(images) {
 
 $(function() {
 
-    $wrapper = $('.wrapper');
+    $wrapper = $('#wrapper');
+    $navigation = $('#navigation');
 
     // build image carousel html
     $.ajax({
@@ -328,10 +330,16 @@ $(function() {
 
                 // reset random var for each carousel (folder = carousel)
                 random = 0;
+
+                // insert carousel container
                 $wrapper.append('<div class="screen"><div class="container"><div class="carousel"></div></div></div>');
 
+                // insert images
                 insertRandomImages(images);
 
+                // insert button 
+                $navigation.append('<button data-type="switch" data-target=" ' + key + '" class="active">' + key + '</button>');
+
             });
         }
     });
@@ -344,7 +352,7 @@ $(function() {
     $previous = $('#previous');
     $next = $('#next');    
     $screen = $('.screen');
-    $buttons = $('#navigation').find('button');
+    $buttons = $navigation.find('button');
     $timer = $('.timer');
     navigation_left_width = $('#left').width();
     navigation_right_width = $('#right').width();    
@@ -365,9 +373,11 @@ $(function() {
         };
     }
 
+    // set width and margin of each button
+    var b = window_width / $buttons.length;
     $buttons.each(function(i) {
-        var l = i * $(this).width();
-        $(this).css({'left':l});
+        var l = i * b;
+        $(this).css({'width':b,'left':l});
     });
 
 });

diff --git a/client/php/dir.php b/client/php/dir.php
@@ -36,13 +36,11 @@ function read_all_files($root = '.'){
 $array = array();
 $dirs = read_all_files('../img');
 
-$i = 0;
 foreach ($dirs['dirs'] as $dir) {
-
     $images = read_all_files($dir);
-
-    $array[$i] = $images['files'];
-    $i++;
+    $dirname = substr($dir, 7);
+    $dirname = substr($dirname, 0, -1);
+    $array[$dirname] = $images['files'];
 }
 
 echo json_encode($array);