From e77c0393a9a7ad579a55d04cd94bfbb0b922a5e9 Mon Sep 17 00:00:00 2001
From: Jonas Blumer <jonas.blumer@entwicklungspark.com>
Date: Thu, 3 Dec 2015 17:32:05 +0100
Subject: [PATCH] added volume slider and labels for sliders

---
 index.html       | 12 ++++++++----
 public/client.js | 46 ++++++++++++++++++++++++++++++++++++++++------
 public/style.css | 37 ++++++++++++++++++++++++++++++++++---
 3 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 5ed045b..747fc4c 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,15 @@
 <body>
     <center><h1>JDRUMMER XPRIENCE</h1></center>
     <div id="container">
-        <table id="steps">
-        </table>
-        <input type="range" id="bpm" min="100" max="180" value="120" step="1" name="bpm" list="bpm">
-        <input type="checkbox" class="css-checkbox checkbox" id="hearTheWorld" style="color:#3d3d3d"/> <label for="hearTheWorld" class="css-label" style="padding-left:30px;">hear the world! <span id="userCount"></span></label>
+        <span id="sequencer">
+            <table id="steps">
+            </table>
+            <input type="range" id="bpm" min="100" max="180" value="120" step="1" name="bpm" list="bpm">
+            <input type="checkbox" class="css-checkbox checkbox" id="hearTheWorld" style="color:#3d3d3d"/> <label for="hearTheWorld" class="css-label" style="padding-left:30px;">hear the world! <span id="userCount"></span></label>
+        </span>
+        <div id="ready">you ready?</div>
     </div>
+    
 <br />
 <audio id="bd" preload="auto">
     <source src="sounds/bd.mp3"></source>
diff --git a/public/client.js b/public/client.js
index 5dd5394..af36f35 100644
--- a/public/client.js
+++ b/public/client.js
@@ -2,12 +2,17 @@ var stepPos = 0;
        
 var iosocket = io.connect();
 var externalGrid = null;
+var playInit = false;
 
 $(function(){
 
     generateSteps();
     
     iosocket.on('connect', function () {
+        $('#ready').bind('click', function(){
+            switchActive();
+            playSound();
+        });
 
     }); 
 
@@ -34,7 +39,7 @@ $(function(){
     iosocket.on('clearExternalData', function(){
         externalGrid = null;
     });
-*/
+    */
 
     iosocket.on('updateUserCount', function(userCount){
         userCount--;
@@ -71,7 +76,7 @@ function generateSteps(){
             }
             $('#row'+i).append(
                 '<div class="styled-select">'+
-                    '<select>'+
+                    '<select id="selectRow'+i+'">'+
                         '<option value="bd">Kick</option>'+
                         '<option value="cowbell">Cowbell</option>'+
                         '<option value="cymbal">Cymbal</option>'+
@@ -89,8 +94,25 @@ function generateSteps(){
                     '</select>'+
                 '</div>'
              );
-            $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">');
 
+            switch(i){
+                case 0:
+                    $('#selectRow'+i).val('bd');
+                break;
+                case 1:
+                    $('#selectRow'+i).val('snare');
+                break;
+                case 2:
+                    $('#selectRow'+i).val('hhc');
+                break;
+                case 3:
+                    $('#selectRow'+i).val('ht');
+                break;
+            }
+            
+            $('#row'+i).append('<input type="range" id="volumeRow'+i+'" min="0" max="1.0" value="0.8" step="0.01" name="power" list="sounds"><span class="tip">volume</span>');
+            $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds"><span class="tip">sample&nbsp;speed</span>');
+            
             $('#steps').append('</div>');
         }else{
             $('#steps').append('<tr>');
@@ -105,11 +127,12 @@ function generateSteps(){
 function playSound(){
     for (var i = 0; i < 4; i++){
         if($('.step'+stepPos)[i].checked){
-            $('body').css('background-color', randomColor());
+            //$('body').css('background-color', randomColor());
             var sound = $('#row'+i+' select').val();
             this[sound].pause();
             this[sound].currentTime = 0;
             this[sound].playbackRate = $('#pitchRow'+i).val();
+            this[sound].volume = $('#volumeRow'+i).val();
             this[sound].play();
             //iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound});
         }
@@ -121,7 +144,12 @@ function getAllSteps(){
     for(var i = 0; i < 4; i++){
         grid [i] = new Array(16);
         for(var j = 0; j < 16; j++){
-            grid[i][j] = $('.step' + j + '.row' + i).is(":checked") ? {sound: $('#row'+i+' select').val(), rate: $('#pitchRow'+i).val()} : '0'; 
+            grid[i][j] = $('.step' + j + '.row' + i).is(":checked") ?   {
+                                                                            sound: $('#row'+i+' select').val(), 
+                                                                            rate: $('#pitchRow'+i).val(), 
+                                                                            volume: $('#volumeRow'+i).val()
+                                                                        } 
+                                                                    : '0'; 
         }
     }
     iosocket.emit('grid', grid);
@@ -139,7 +167,8 @@ function playExternalSound(){
                     if(stepPos == j){
                         this[externalGrid[i][j].sound].pause();
                         this[externalGrid[i][j].sound].currentTime = 0;
-                        this[externalGrid[i][j].sound].playbackRate =  externalGrid[i][j].rate;                  
+                        this[externalGrid[i][j].sound].playbackRate =  externalGrid[i][j].rate;           
+                        this[externalGrid[i][j].sound].volume =  externalGrid[i][j].volume;      
                         this[externalGrid[i][j].sound].play();
                     }
                 }            
@@ -148,6 +177,11 @@ function playExternalSound(){
     }
 }
 
+function switchActive(){
+    $('#sequencer').css('display', 'block');
+    $('#ready').css('display', 'none');
+}
+
 function randomColor(){
     var value = Math.random() * 0xFF | 0;
     var grayscale = (value << 16) | (value << 8) | value;
diff --git a/public/style.css b/public/style.css
index 7f293a9..4bc04b0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,17 +4,26 @@ body{
     background-color:#1c1a1a;
     font-family: 'Codystar', cursive;
     color:#9d0000;
+    -webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-o-user-select: none;
+user-select: none;
 }
 
 #container{
-    width: 520px;
+    width: 650px;
     margin:auto;
     background-color: #d3d3d3;
     padding: 10px;
     border-radius: 12px;
     -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
--moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+}
+
+#sequencer{
+    display:none;
 }
 
 .beatIndicator{
@@ -94,3 +103,25 @@ td{
 #bpm{
     width:100%;
 }
+
+
+#ready{
+    padding:10px;
+    cursor: pointer; cursor: hand;
+    background-color: #b8b8b8;
+    width:5px;
+    margin:auto;
+    width:80px;
+    text-align: center;
+    border:2px solid #3d3d3d;
+    border-radius: 12px;
+
+}
+
+.tip{
+    color: #1c1a1a!important;
+    font-size: 12px;
+
+    
+}
+
-- 
GitLab