diff --git a/README.md b/README.md
index 9162a18..e58ba83 100644
--- 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
index 6e81523..04a21ac 100644
--- 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
index 6785cac..0c12948 100644
--- a/client/index.html
+++ b/client/index.html
@@ -8,16 +8,13 @@
-
+
diff --git a/client/js/lib.js b/client/js/lib.js
index 3ae59d0..06ee33e 100644
--- 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('');
+ // insert images
insertRandomImages(images);
+ // insert button
+ $navigation.append('');
+
});
}
});
@@ -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
index 19a94f7..b5f9e85 100644
--- 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);
\ No newline at end of file