[major] Moved more files around, fixed some latent bugs. Updated UI /…

… UX. Added more code comments.
Marak · May 8, 2011 · 2c0f8e3 · 2c0f8e3
1 parent f0cf5a1
commit 2c0f8e3
Show file tree

Hide file tree

Showing 28 changed files with 422 additions and 109 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -7,10 +7,6 @@ JSONLoops is a multi-user audio sequencer reminiscent of Fruityloops. Audio play
 
 This is Alpha software which was created for NYC Music Hack Day 2011. We won best collaborative project. This library works and is awesome. It could be epic if we all work on it. 
 
-# KickStarter!!
-
-We are currently trying to raise money to make JSONloops a "real" project, instead of just a proof of concept. Please visit: [http://www.kickstarter.com/projects/1141308765/jsonloops-open-source-real-time-multiuser-audio-se?ref=live](http://www.kickstarter.com/projects/1141308765/jsonloops-open-source-real-time-multiuser-audio-se?ref=live) to read more.
-
 # Video Demo
 
 [http://www.youtube.com/watch?v=MSZLLgel6Gs](http://www.youtube.com/watch?v=MSZLLgel6Gs)

diff --git a/bin/server b/bin/server
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-require.paths.unshift(require('path').join(__dirname, '..', 'lib'));
+require.paths.unshift(require('path').join(__dirname, '..',  'lib'));
 
 var util = require('util'),
     colors = require('colors'),

diff --git a/lib/JSONloops.js b/lib/JSONloops.js
@@ -35,7 +35,6 @@ JSONloops.start = function (options) {
 
   var DNode = require('dnode');
 
-  console.log(options);
 
   // Start up the Connect server for browser clients
   server.listen(Number(options.port));
@@ -56,15 +55,17 @@ JSONloops.start = function (options) {
     var uri  = v[0],
         port = v[1];
 
-    console.log(port);
+    console.log(uri, port);
 
+    /*
     DNode.connect(uri, Number(port) + 100, function (remote) {
       
       sequencer.on('step', function(){
         remote.step(sequencer.song);
       });
         
     });
+    */
 
   });
 
@@ -147,7 +148,7 @@ function LoopServer (client, con) {
     console.log('remote stepping')
 
     // Check if we have a bi-directional connection with current client, if not, create a new one
-    sequencer.create_mix(song);
+    //sequencer.create_mix(song);
   }
 
 }
diff --git a/lib/JSONloops/kits/drums.js b/lib/JSONloops/kits/drums.js
@@ -1,13 +1,13 @@
 // simple drum kit
 exports.drums = {
-  kick : '/wavs/kick.wav',
-  snare : '/wavs/snare.wav',
-  tick : '/wavs/tick.wav',
-  tom : '/wavs/tom.wav',
-  bell : '/wavs/bell.wav',
-  bongobig : '/wavs/bongobig.wav',
-  bongosmall : '/wavs/bongosmall.wav',
-  piano : '/wavs/piano.wav',
-  ride : '/wavs/ride.wav',
-  tambourine : '/wavs/tambourine.wav'  
+  kick : './wavs/kick.wav',
+  snare : './wavs/snare.wav',
+  tick : './wavs/tick.wav',
+  tom : './wavs/tom.wav',
+  bell : './wavs/bell.wav',
+  bongobig : './wavs/bongobig.wav',
+  bongosmall : './wavs/bongosmall.wav',
+  piano : './wavs/piano.wav',
+  ride : './wavs/ride.wav',
+  tambourine : './wavs/tambourine.wav'  
 };
diff --git a/lib/JSONloops/looper.js b/lib/JSONloops/looper.js
@@ -77,7 +77,13 @@ Looper.prototype.set_beat = function(track, measure, beat, wav) {
   var length = this.song[track][0].length;
   this.song[track][measure][beat] = [wav];
   var where = parseInt(measure*length, 10) + parseInt(beat,10);
-  this.theMix[where].push(wav);
+
+  if(wav === "./wavs/rest.wav"){
+    this.theMix[where] = wav;
+  }
+  else {
+    this.theMix[where] = [wav];
+  }
 };
 
 // This is a float (0-1)
@@ -119,7 +125,6 @@ Looper.prototype.create_mix = function ( song ) {
       }
     }
   }
-  console.log(beats);
   this.theMix = beats;
 };
 
@@ -141,7 +146,7 @@ Looper.prototype.step = function () {
       var set = toPlay[self.position], i, l = set.length;
       // For every track in the song, play every beat
       for(i = 0; i<l; i++){
-        play.sound(__dirname + set[i], self.volume);
+        play.sound(set[i], self.volume);
       }
 
       // Since we have played a step, increase the position

diff --git a/package.json b/package.json
@@ -1,26 +1,13 @@
 {
-  "name": "JSONloops",
-  "description": "a real-time multiuser audio sequencer",
-  "version": "0.1.1",
-  "homepage": "https://github.com/Marak/JSONloops",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/Marak/JSONloops.git"
-  },
-  "author": "Marak Squires <marak.squires@gmail.com>",
-  "directories": {
-    "lib": "lib"
+  "name": "jsonloops",
+  "subdomain": "jsonloops",
+  "scripts": {
+    "start": "server.js"
   },
   "dependencies": {
     "irrklang": ">= 0.0.1",
-    "connect":  ">= 1.0.0",
+    "connect": ">= 1.0.0",
     "dnode": ">= 0.6.x"
   },
-  "scripts": {
-   "start":"server.js"
-  }
-  "engines": {
-    "node": "*"
-  }
-}
-
+  "version": "0.0.0-4"
+}
diff --git a/public/css/index.css b/public/css/index.css
@@ -126,18 +126,21 @@ h1 {
 	padding-bottom: 20px;
 }
 
+#sequencer-container.col {
+  cursor: pointer;
+}
+
+#sounds-inline img {
+  cursor: pointer;
+}
+
 #sounds, #extras {
 	width: 100%;
 }
 
 #sounds-container-dynamic {
 	display: none;
-	position: absolute;
-	top: 0px;
 	top: 0px;
-	height: 77px;
-	width: 90px;
-	padding: 20px;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 
@@ -147,12 +150,24 @@ h1 {
 	box-shadow: 0px 3px 17px #aaa;
 	overflow-x: hidden;	
 	overflow-y: auto;	
+	padding-bottom: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ position: absolute;
+ padding-top: 5px;
+}
+
+.close {
+    cursor: pointer;
+    height: 60px;
+    left: 303px;
+    position: relative;
+    width: 60px;
 }
 
 div::-webkit-scrollbar, div::-webkit-scrollbar {
-  -webkit-border-radius: 10px;
-	width: 8px;
-	height: 8px;
+  -webkit-border-radius: 5px;
+	height: 70px;
 }
 
 div::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb {
@@ -213,29 +228,27 @@ div::-webkit-scrollbar-thumb {
 }
 
 #zoom, #bpm, #masterVolume {
-	height: 2px;
-	color: #000;
-	position: absolute;
-	top: 22px;
+  color: #000000;
+  height: 20px;
+  position: absolute;
+  top: 6px;
+  width: 200px;
 }
 
 #zoom {
-	left: 145px;
-	width: 100px;	
+	left: 160px;
 }
 
 #masterVolume {
-	width: 100px;	
-	left: 260px;
+  left: 345px;
 }
 
 #bpm {
-	width: 100px;	
-	left: 375px;
+	left: 530;
 }
 
 #zoom .ui-slider-handle, #bpm .ui-slider-handle, #masterVolume .ui-slider-handle {
-	height: 10px;
+	height: 30px;
 	width: 10px;
 	background: #222;
 	border: 1px solid #6e6e6e;		
@@ -253,37 +266,44 @@ div::-webkit-scrollbar-thumb {
 }
 
 #zoomLabel {
-	position: absolute;
-	top: 5px;
-	left: 175px;
-	color: #666;
-	font-size: 10px;
-	width: 200px;	
+  color: #666666;
+  font-size: 10px;
+  left: 170px;
+  position: absolute;
+  top: 10px;
+  width: 200px;
+  z-index: 10;
 }
 
 #masterVolumeLabel {
-	color: #666;	
-	position: absolute;
-	font-size: 10px;	
-	top: 5px;
-	left: 290px;	
-	width: 200px;
+  color: #666666;
+  font-size: 10px;
+  left: 390px;
+  position: absolute;
+  top: 10px;
+  width: 200px;
+  z-index: 10;
 }
 
 
 #bpmLabel {
-	color: #666;	
-	position: absolute;
-	font-size: 10px;	
-	top: 5px;
-	left: 405px;	
-	width: 200px;
+  color: #666666;
+  font-size: 10px;
+  left: 615px;
+  position: absolute;
+  top: 10px;
+  width: 200px;
+  z-index: 10;
 }
 
 #controls {
-	position: absolute;
-	top: 13px;
-	left: 200px;
+  left: 145px;
+  position: absolute;
+  top: 15px;
+}
+
+#controls .ui-slider {
+ width: 160px;
 }
 
 #titles {

diff --git a/public/img/close-button.png b/public/img/close-button.png
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,8 @@
 <link rel="stylesheet" href="js/vendor/jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
 <script src="js/vendor/jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/vendor/jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/vendor/jquery.dragscroller.js" type="text/javascript" charset="utf-8"></script>
+
 <script type="text/javascript" src="/dnode.js"></script>
 <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" title="no title" charset="utf-8">
 <script type="text/javascript" src="js/JSONloops.js"></script>
@@ -26,7 +28,6 @@
       <span id="bpmLabel">BPM <span id="bpmLevel">180</span></span>
       <div id="bpm"></div>            
     </div>
-    <h1>JSONLoops</h1>
   </div>
   <!-- div id="extra-controls">
     <div id="extras-container">
@@ -71,44 +72,31 @@ <h1>JSONLoops</h1>
 
   <div id="sounds-container-dynamic">
 
+    <img class="close" src="./img/close-button.png" alt="close kit"></img>
     <!-- this section could be auto-generated based on kit -->
     <table id="sounds-inline" border="0" cellpadding="0" cellspacing="0">
       <tbody>
         <tr>
           <td class=""><a name="rest"><img src="img/rest.png"></a></td>
-        </tr>
-        <tr>
           <td class=""><a name="kick"><img src="img/kick.png"></a></td>
-        </tr>
-        <tr>          
           <td class=""><a name="snare"><img src="img/snare.png"></a></td>
-        </tr>
-        <tr>                    
           <td class=""><a name="tick"><img src="img/tick.png"></a></td>
         </tr>
         <tr>           
           <td class=""><a name="tom"><img src="img/tom.png" name="tom" title="Tom"></a></td>
-        </tr>
-        <tr>           
+
           <td class=""><a name="crash"><img src="img/crash.png" name="crash" title="Crash"></a></td>
-        </tr>
-        <tr>
+
           <td class=""><a name="ride"><img src="img/ride.png" name="ride" title="Ride"></a></td>
-        </tr>
-        <tr>
+
           <td class=""><a name="piano"><img src="img/piano.png" name="pianorole" title="Piano Role"></a></td>
         </tr>
         <tr>
           <td class=""><a name="bell"><img src="img/bell.png" name="bell" title="Cow Bell"></a></td>
-        </td>        
-        <tr>
           <td class=""><a name="tambourine"><img src="img/tambourine.png" name="tambourine" title="Tambourine"></a></td>
-        </td>
-        <tr>
           <td class=""><a name="bongosmall"><img src="img/bongosmall.png" name="bongosmall" title="Small Bongo"></a></td>
-        </td>
-        <tr>
           <td class=""><a name="bongobig"><img src="img/bongobig.png" name="bongobig" title="Large Bongo"></a></td>        
+        <tr>
         </td>
       </tbody>
     </table>