more responsive design.

public/1/conductor/index.html

@@ -80,10 +80,6 @@
     </div>
 
     <canvas id="screen" resize style="z-index:0"></canvas>
-    <div id="objstring1" class="objstring fw7 courier f3 white" style="z-index:1">들리는 상처들의 믹스</div>
-    <div id="objstring3" class="objstring fw7 courier f3 white" style="z-index:-1">연결 확인</div>
-    <div id="objstring4" class="objstring fw7 courier f3 white" style="z-index:-1">믹스 #1</div>
-    <div id="objstring5" class="objstring fw7 courier f3 white" style="z-index:-1">믹스 #2</div>
   </body>
 
 </html>

public/1/conductor/index.js

@@ -177,12 +177,12 @@ $(document).ready(function() {
     var netstat = new Path.Circle({
       center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
       radius: vssw / 4,
-      fillColor: 'hotpink',
-      strokeWidth: 2,
-      strokeColor: 'gray',
-      dashArray: [4, 4],
+      fillColor: '#51D0FD',
+      strokeWidth: vssw * 0.03,
+      strokeColor: '#FFE40A',
+      dashArray: [vssw * 0.05, vssw * 0.05],
       onFrame: function(event) {
-        this.rotate(1);
+        this.rotate(0.2);
       }
     });
     netstat.fillColor.alpha = 0;
@@ -204,7 +204,7 @@ $(document).ready(function() {
     aprev.scale(vssw * 1.5);
     aprev.position = [0, 0]; //reset position, before relative positioning !!
     aprev.translate([vssw, vssw * 1.8]);
-    aprev.fillColor = 'pink';
+    aprev.fillColor = '#FFE40A';
     aprev._socket = socket;
     aprev._isactive = false;
     aprev._activate = function() {
@@ -226,7 +226,7 @@ $(document).ready(function() {
     anext.scale(vssw * 1.5);
     anext.position = [0, 0]; //reset position, before relative positioning !!
     anext.translate([vssw * 9, vssw * 1.8]);
-    anext.fillColor = 'pink';
+    anext.fillColor = '#FFE40A';
     anext._socket = socket;
     anext._isactive = false;
     anext._activate = function() {
@@ -244,17 +244,28 @@ $(document).ready(function() {
     };
 
     //title background
-    new Path.Rectangle({
+    var titlebox = new Path.Rectangle({
       point: [vssw * 2, vssw * 1],
       size: [vssw * 6, vssw * 1.5],
       fillColor: 'white',
-      radius: 30,
-    }).opacity = 0.3;
+      radius: vssw * 0.8,
+      opacity: 0.3,
+    });
 
     //screen #1 - 'home'
     changeScreen(1);
     new Path.Rectangle([0, 0], vs).fillColor = '#999';
 
+    //title - text
+    new PointText({
+      point: titlebox.bounds.center,
+      content: '  사운드-랩 § soundLab  ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em',
+    }).fitBounds(titlebox.bounds);
+
     //hello, screen.
     phonehand.addTo(project);
     phonehand.scale(vsw / 1.5);
@@ -263,28 +274,38 @@ $(document).ready(function() {
 
     //screen #2 - check
     changeScreen(2);
-    new Path.Rectangle([0, 0], vs).fillColor = '#393';
+    new Path.Rectangle([0, 0], vs).fillColor = '#05C183';
+
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '          연결 확인          ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
 
     //TODO: info text.
     new PointText({
       content: "네트워크 테스트!",
       point: view.center + [-vssw * 3, -vssw * 2],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'gold'
     });
     new PointText({
       content: "사운드 테스트!",
       point: view.center + [-vssw * 3, vssw * 0],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'pink'
     });
     new PointText({
       content: "동그라미 터치!",
       point: view.center + [-vssw * 3, vssw * 2],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'red'
     });
     new Path.Circle({
@@ -301,6 +322,16 @@ $(document).ready(function() {
     changeScreen(3);
     new Path.Rectangle([0, 0], vs).fillColor = '#333';
 
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '           믹스 #1           ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
+
     //
     for (var row = 0; row < 7; row++) {
       for (var col = 0; col < 1; col++) {
@@ -313,7 +344,7 @@ $(document).ready(function() {
             new Path.Rectangle({
               point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
-              size: [vssw * 1.6, vssw * 0.7],
+              size: [vssw * 1.5, vssw * 0.7],
               fillColor: new Color({
                 hue: getRandom(20, 60),
                 saturation: 1,
@@ -324,6 +355,7 @@ $(document).ready(function() {
                 par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
                 par._playcount++;
                 par.children.playcounter.content = '' + par._playcount;
+                par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                 //
                 par._socket.emit('sound', {
                   name: par._key,
@@ -332,9 +364,23 @@ $(document).ready(function() {
                 });
               }
             }),
+            //playcounterbox
+            new Path.Rectangle({
+              name: 'playcounterbox',
+              point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //playcounter
+            new PointText({
+              name: 'playcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
             //stop button
             new Path.Rectangle({
-              point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5],
+              point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
               size: [vssw * 1.6, vssw * 0.7],
               fillColor: new Color({
@@ -349,6 +395,9 @@ $(document).ready(function() {
                   par._playcount--;
                   par.children.playcounter.content = '' + par._playcount;
                 }
+                if (par._players.length == 0) {
+                  par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                }
                 //
                 par._socket.emit('sound', {
                   name: par._key,
@@ -357,18 +406,9 @@ $(document).ready(function() {
                 });
               }
             }),
-            //playcounter
-            new PointText({
-              name: 'playcounter',
-              content: '' + 0,
-              point: [vssw * 4.8, row * vssw * 1.4 + vssw * 3.5 + vssw * 0.6],
-              fillColor: 'white',
-              fontSize: '2em',
-              fontWeight: 'bold'
-            }),
             //faster button
             new Path.Rectangle({
-              point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5],
+              point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
               size: [vssw * 1.6, vssw * 0.7],
               fillColor: new Color({
@@ -380,6 +420,7 @@ $(document).ready(function() {
                 var par = this.parent;
                 if (par._players.length > 0) {
                   par._players[par._players.length - 1].playbackRate.value += 0.2;
+                  par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
                 }
                 //
                 par._socket.emit('sound', {
@@ -389,6 +430,20 @@ $(document).ready(function() {
                 });
               }
             }),
+            //speedcounterbox
+            new Path.Rectangle({
+              name: 'speedcounterbox',
+              point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //speedcounter
+            new PointText({
+              name: 'speedcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
             //slower button
             new Path.Rectangle({
               point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
@@ -403,6 +458,7 @@ $(document).ready(function() {
                 var par = this.parent;
                 if (par._players.length > 0) {
                   par._players[par._players.length - 1].playbackRate.value -= 0.2;
+                  par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
                 }
                 //
                 par._socket.emit('sound', {
@@ -421,6 +477,9 @@ $(document).ready(function() {
           _init: function() {
             this._player.loop = true;
             this._player.retrigger = true;
+            this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
+            this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
+            this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
             //socket io event handling..
             var that = this;
             this._socket.on('sound', function(msg) {
@@ -429,19 +488,25 @@ $(document).ready(function() {
                   that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
                   that._playcount++;
                   that.children.playcounter.content = '' + that._playcount;
+                  that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                 } else if (msg.action == 'stop') {
                   if (that._players.length > 0) {
                     (that._players.shift()).stop();
                     that._playcount--;
                     that.children.playcounter.content = '' + that._playcount;
                   }
+                  if (that._players.length == 0) {
+                    that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  }
                 } else if (msg.action == 'faster') {
                   if (that._players.length > 0) {
                     that._players[that._players.length - 1].playbackRate.value += 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 } else if (msg.action == 'slower') {
                   if (that._players.length > 0) {
                     that._players[that._players.length - 1].playbackRate.value -= 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 }
               }
@@ -453,7 +518,7 @@ $(document).ready(function() {
         new PointText({
           point: c.firstChild.bounds.topLeft + [0, -5],
           content: Object.keys(beach_sounds)[idx],
-          fontSize: '1em',
+          fontSize: vssw * 0.35,
           fontWeight: 'bold',
           fillColor: 'white'
         });
@@ -464,6 +529,16 @@ $(document).ready(function() {
     changeScreen(4);
     new Path.Rectangle([0, 0], vs).fillColor = '#333';
 
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '           믹스 #2           ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
+
     //
     for (var row = 0; row < 7; row++) {
       for (var col = 0; col < 1; col++) {
@@ -476,7 +551,7 @@ $(document).ready(function() {
             new Path.Rectangle({
               point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
-              size: [vssw * 1.6, vssw * 0.7],
+              size: [vssw * 1.5, vssw * 0.7],
               fillColor: new Color({
                 hue: getRandom(20, 60),
                 saturation: 1,
@@ -487,6 +562,7 @@ $(document).ready(function() {
                 par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
                 par._playcount++;
                 par.children.playcounter.content = '' + par._playcount;
+                par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                 //
                 par._socket.emit('sound', {
                   name: par._key,
@@ -495,9 +571,23 @@ $(document).ready(function() {
                 });
               }
             }),
+            //playcounterbox
+            new Path.Rectangle({
+              name: 'playcounterbox',
+              point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //playcounter
+            new PointText({
+              name: 'playcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
             //stop button
             new Path.Rectangle({
-              point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5],
+              point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
               size: [vssw * 1.6, vssw * 0.7],
               fillColor: new Color({
@@ -512,6 +602,9 @@ $(document).ready(function() {
                   par._playcount--;
                   par.children.playcounter.content = '' + par._playcount;
                 }
+                if (par._players.length == 0) {
+                  par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                }
                 //
                 par._socket.emit('sound', {
                   name: par._key,
@@ -520,18 +613,9 @@ $(document).ready(function() {
                 });
               }
             }),
-            //playcounter
-            new PointText({
-              name: 'playcounter',
-              content: '' + 0,
-              point: [vssw * 4.8, row * vssw * 1.4 + vssw * 3.5 + vssw * 0.6],
-              fillColor: 'white',
-              fontSize: '2em',
-              fontWeight: 'bold'
-            }),
             //faster button
             new Path.Rectangle({
-              point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5],
+              point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
               radius: vssw * 0.4,
               size: [vssw * 1.6, vssw * 0.7],
               fillColor: new Color({
@@ -543,6 +627,7 @@ $(document).ready(function() {
                 var par = this.parent;
                 if (par._players.length > 0) {
                   par._players[par._players.length - 1].playbackRate.value += 0.2;
+                  par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
                 }
                 //
                 par._socket.emit('sound', {
@@ -552,6 +637,20 @@ $(document).ready(function() {
                 });
               }
             }),
+            //speedcounterbox
+            new Path.Rectangle({
+              name: 'speedcounterbox',
+              point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
+              size: [vssw * 0.6, vssw * 0.8],
+            }),
+            //speedcounter
+            new PointText({
+              name: 'speedcounter',
+              content: '' + 0,
+              fillColor: 'white',
+              fontSize: '2em',
+              fontWeight: 'bold'
+            }),
             //slower button
             new Path.Rectangle({
               point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
@@ -566,6 +665,7 @@ $(document).ready(function() {
                 var par = this.parent;
                 if (par._players.length > 0) {
                   par._players[par._players.length - 1].playbackRate.value -= 0.2;
+                  par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
                 }
                 //
                 par._socket.emit('sound', {
@@ -584,6 +684,9 @@ $(document).ready(function() {
           _init: function() {
             this._player.loop = true;
             this._player.retrigger = true;
+            this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
+            this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
+            this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
             //socket io event handling..
             var that = this;
             this._socket.on('sound', function(msg) {
@@ -592,19 +695,25 @@ $(document).ready(function() {
                   that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
                   that._playcount++;
                   that.children.playcounter.content = '' + that._playcount;
+                  that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
                 } else if (msg.action == 'stop') {
                   if (that._players.length > 0) {
                     (that._players.shift()).stop();
                     that._playcount--;
                     that.children.playcounter.content = '' + that._playcount;
                   }
+                  if (that._players.length == 0) {
+                    that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
+                  }
                 } else if (msg.action == 'faster') {
                   if (that._players.length > 0) {
                     that._players[that._players.length - 1].playbackRate.value += 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 } else if (msg.action == 'slower') {
                   if (that._players.length > 0) {
                     that._players[that._players.length - 1].playbackRate.value -= 0.2;
+                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
                   }
                 }
               }
@@ -616,7 +725,7 @@ $(document).ready(function() {
         new PointText({
           point: c.firstChild.bounds.topLeft + [0, -5],
           content: Object.keys(beach_sounds)[idx],
-          fontSize: '1em',
+          fontSize: vssw * 0.35,
           fontWeight: 'bold',
           fillColor: 'white'
         });

public/1/index.html

@@ -80,9 +80,6 @@
     </div>
 
     <canvas id="screen" resize style="z-index:0"></canvas>
-    <div id="objstring1" class="objstring fw7 courier f3 white" style="z-index:1">들리는 상처들의 믹스</div>
-    <div id="objstring3" class="objstring fw7 courier f3 white" style="z-index:-1">연결 확인</div>
-    <div id="objstring4" class="objstring fw7 courier f3 white" style="z-index:-1">믹스</div>
   </body>
 
 </html>

public/1/index.js

@@ -24,7 +24,7 @@ $(document).ready(function() {
     SVGImport_size1('./imgs/iconmonstr-minus-4.svg'),
     //clap
     AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"),
-    //sounds page 1 ==> 7
+    //beach_sounds page 1 ==> 7
     AudioImport("./audio/2011_2011.mp3"),
     AudioImport("./audio/2011_벨.mp3"),
     AudioImport("./audio/2011_숲.mp3"),
@@ -32,7 +32,7 @@ $(document).ready(function() {
     AudioImport("./audio/2011_헤비레인.mp3"),
     AudioImport("./audio/고요6.mp3"),
     AudioImport("./audio/고요7.mp3"),
-    //sounds page 2 ==> 7
+    //beach_sounds page 2 ==> 7
     AudioImport("./audio/검은산_뚜루.mp3"),
     AudioImport("./audio/검은산_다급.mp3"),
     AudioImport("./audio/검은산_부엉.mp3"),
@@ -193,12 +193,12 @@ $(document).ready(function() {
     var netstat = new Path.Circle({
       center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
       radius: vssw / 4,
-      fillColor: 'hotpink',
-      strokeWidth: 2,
-      strokeColor: 'gray',
-      dashArray: [4, 4],
+      fillColor: '#51D0FD',
+      strokeWidth: vssw * 0.03,
+      strokeColor: '#FFE40A',
+      dashArray: [vssw * 0.05, vssw * 0.05],
       onFrame: function(event) {
-        this.rotate(1);
+        this.rotate(0.2);
       }
     });
     netstat.fillColor.alpha = 0;
@@ -220,7 +220,7 @@ $(document).ready(function() {
     aprev.scale(vssw * 1.5);
     aprev.position = [0, 0]; //reset position, before relative positioning !!
     aprev.translate([vssw, vssw * 1.8]);
-    aprev.fillColor = 'pink';
+    aprev.fillColor = '#FFE40A';
     aprev._socket = socket;
     aprev._isactive = false;
     aprev._activate = function() {
@@ -242,7 +242,7 @@ $(document).ready(function() {
     anext.scale(vssw * 1.5);
     anext.position = [0, 0]; //reset position, before relative positioning !!
     anext.translate([vssw * 9, vssw * 1.8]);
-    anext.fillColor = 'pink';
+    anext.fillColor = '#FFE40A';
     anext._socket = socket;
     anext._isactive = false;
     anext._activate = function() {
@@ -260,17 +260,28 @@ $(document).ready(function() {
     };
 
     //title background
-    new Path.Rectangle({
+    var titlebox = new Path.Rectangle({
       point: [vssw * 2, vssw * 1],
       size: [vssw * 6, vssw * 1.5],
       fillColor: 'white',
-      radius: 30,
-    }).opacity = 0.3;
+      radius: vssw * 0.8,
+      opacity: 0.3,
+    });
 
     //screen #1 - 'home'
     changeScreen(1);
     new Path.Rectangle([0, 0], vs).fillColor = '#999';
 
+    //title - text
+    new PointText({
+      point: titlebox.bounds.center,
+      content: '  사운드-랩 § soundLab  ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em',
+    }).fitBounds(titlebox.bounds);
+
     //hello, screen.
     phonehand.addTo(project);
     phonehand.scale(vsw / 1.5);
@@ -279,28 +290,38 @@ $(document).ready(function() {
 
     //screen #2 - check
     changeScreen(2);
-    new Path.Rectangle([0, 0], vs).fillColor = '#393';
+    new Path.Rectangle([0, 0], vs).fillColor = '#05C183';
+
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '          연결 확인          ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
 
     //TODO: info text.
     new PointText({
       content: "네트워크 테스트!",
       point: view.center + [-vssw * 3, -vssw * 2],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'gold'
     });
     new PointText({
       content: "사운드 테스트!",
       point: view.center + [-vssw * 3, vssw * 0],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'pink'
     });
     new PointText({
       content: "동그라미 터치!",
       point: view.center + [-vssw * 3, vssw * 2],
       fontWeight: 'bold',
-      fontSize: '2em',
+      fontSize: vssw * 1.0,
       fillColor: 'red'
     });
     new Path.Circle({
@@ -317,6 +338,16 @@ $(document).ready(function() {
     changeScreen(3);
     new Path.Rectangle([0, 0], vs).fillColor = '#333';
 
+    //title - text
+    new PointText({
+      point: [vssw * 2, vssw * 1],
+      content: '           믹스 #1           ',
+      fillColor: 'white',
+      fontFamily: 'AppleGothic, Sans-serif',
+      fontWeight: 'bold',
+      fontSize: '3em'
+    }).fitBounds(titlebox.bounds);
+
     iconsound.addTo(project);
     //iconsound.scale(vsw / 1.5);
     iconsound.scale(vsw / 2.5);