From a6596daa3559f24d314649c53d8f0847582aaee8 Mon Sep 17 00:00:00 2001 From: Dooho Yi Date: Sun, 16 Sep 2018 09:52:30 +0900 Subject: [PATCH] update layout --- public/conductor/index.html | 6 +++--- public/conductor/index.js | 42 ++++++++++++++++++------------------- public/index.html | 6 +++--- public/index.js | 42 ++++++++++++++++++------------------- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/public/conductor/index.html b/public/conductor/index.html index d30138f..423fa44 100644 --- a/public/conductor/index.html +++ b/public/conductor/index.html @@ -27,7 +27,7 @@ body { /* https://stackoverflow.com/a/47709903 */ - overscroll-behavior: contain; + /* overscroll-behavior: contain; */ } body { @@ -37,7 +37,7 @@ width: 100%; height: 100%; overflow: hidden; - touch-action: none !important; + /* touch-action: none !important; */ } canvas#screen { @@ -51,7 +51,7 @@ .objstring { position: fixed; - top: 3.3em; + top: 2.5em; left: 4em; /* non-clickable element (pass-through) */ pointer-events:none; diff --git a/public/conductor/index.js b/public/conductor/index.js index 927bf25..df0f7c3 100644 --- a/public/conductor/index.js +++ b/public/conductor/index.js @@ -257,9 +257,9 @@ $(document).ready(function() { //page change - prev. page aprev.addTo(project); - aprev.scale(vsw / 4); + aprev.scale(vssw * 1.5); aprev.position = [0, 0]; //reset position, before relative positioning !! - aprev.translate([vssw, vssw * 2.5]); + aprev.translate([vssw, vssw * 1.8]); aprev.fillColor = 'pink'; aprev._socket = socket; aprev._isactive = false; @@ -279,9 +279,9 @@ $(document).ready(function() { //page change - next. page anext.addTo(project); - anext.scale(vsw / 4); + anext.scale(vssw * 1.5); anext.position = [0, 0]; //reset position, before relative positioning !! - anext.translate([vssw * 9, vssw * 2.5]); + anext.translate([vssw * 9, vssw * 1.8]); anext.fillColor = 'pink'; anext._socket = socket; anext._isactive = false; @@ -301,8 +301,8 @@ $(document).ready(function() { //title background new Path.Rectangle({ - point: [vssw * 2, vssw * 1.5], - size: [vssw * 6, vssw * 2], + point: [vssw * 2, vssw * 1], + size: [vssw * 6, vssw * 1.5], fillColor: 'white', radius: 30, }).opacity = 0.3; @@ -328,10 +328,10 @@ $(document).ready(function() { for (var col = 0; col < 2; col++) { var idx = row * 2 + col; var c = new Path.Circle({ - center: [col * vssw * 3 + vssw * 3, row * vssw * 3 + vssw * 6], - radius: vssw * 0.8, + center: [col * vssw * 3.5 + vssw * 2.5, row * vssw * 3.5 + vssw * 4 + vssw * 2.5], + radius: vssw * 1, fillColor: new Color({ - hue: getRandom(0, 180), + hue: getRandom(30, 180), saturation: 1, brightness: 1 }), @@ -346,7 +346,7 @@ $(document).ready(function() { new PointText({ point: c.bounds.topLeft + [0, -5], content: group_names[idx], - fontSize: '1em', + fontSize: '2em', fontWeight: 'bold', fillColor: c.fillColor }); @@ -406,7 +406,7 @@ $(document).ready(function() { center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5], radius: vssw * 0.8, fillColor: new Color({ - hue: getRandom(0, 180), + hue: getRandom(20, 60), saturation: 1, brightness: 1 }), @@ -471,7 +471,7 @@ $(document).ready(function() { new PointText({ point: c.firstChild.bounds.topLeft + [0, -5], content: btn_names[idx], - fontSize: '2em', + fontSize: '1.5em', fontWeight: 'bold', fillColor: c.firstChild.fillColor }); @@ -669,9 +669,9 @@ $(document).ready(function() { children: [ //play button new Path.Rectangle({ - point: [vssw * 0.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -692,9 +692,9 @@ $(document).ready(function() { }), //stop button new Path.Rectangle({ - point: [vssw * 2.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(120, 250), saturation: 1, @@ -719,16 +719,16 @@ $(document).ready(function() { new PointText({ name: 'playcounter', content: '' + 0, - point: [vssw * 4.8, row * vssw * 1.5 + vssw * 4.5 + vssw * 0.7], + 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.5 + vssw * 4.5], + point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -749,9 +749,9 @@ $(document).ready(function() { }), //slower button new Path.Rectangle({ - point: [vssw * 7.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(120, 250), saturation: 1, diff --git a/public/index.html b/public/index.html index d30138f..423fa44 100644 --- a/public/index.html +++ b/public/index.html @@ -27,7 +27,7 @@ body { /* https://stackoverflow.com/a/47709903 */ - overscroll-behavior: contain; + /* overscroll-behavior: contain; */ } body { @@ -37,7 +37,7 @@ width: 100%; height: 100%; overflow: hidden; - touch-action: none !important; + /* touch-action: none !important; */ } canvas#screen { @@ -51,7 +51,7 @@ .objstring { position: fixed; - top: 3.3em; + top: 2.5em; left: 4em; /* non-clickable element (pass-through) */ pointer-events:none; diff --git a/public/index.js b/public/index.js index a1cb0d8..587b086 100644 --- a/public/index.js +++ b/public/index.js @@ -257,9 +257,9 @@ $(document).ready(function() { //page change - prev. page aprev.addTo(project); - aprev.scale(vsw / 4); + aprev.scale(vssw * 1.5); aprev.position = [0, 0]; //reset position, before relative positioning !! - aprev.translate([vssw, vssw * 2.5]); + aprev.translate([vssw, vssw * 1.8]); aprev.fillColor = 'pink'; aprev._socket = socket; aprev._isactive = false; @@ -279,9 +279,9 @@ $(document).ready(function() { //page change - next. page anext.addTo(project); - anext.scale(vsw / 4); + anext.scale(vssw * 1.5); anext.position = [0, 0]; //reset position, before relative positioning !! - anext.translate([vssw * 9, vssw * 2.5]); + anext.translate([vssw * 9, vssw * 1.8]); anext.fillColor = 'pink'; anext._socket = socket; anext._isactive = false; @@ -301,8 +301,8 @@ $(document).ready(function() { //title background new Path.Rectangle({ - point: [vssw * 2, vssw * 1.5], - size: [vssw * 6, vssw * 2], + point: [vssw * 2, vssw * 1], + size: [vssw * 6, vssw * 1.5], fillColor: 'white', radius: 30, }).opacity = 0.3; @@ -328,10 +328,10 @@ $(document).ready(function() { for (var col = 0; col < 2; col++) { var idx = row * 2 + col; var c = new Path.Circle({ - center: [col * vssw * 3 + vssw * 3, row * vssw * 3 + vssw * 6], - radius: vssw * 0.8, + center: [col * vssw * 3.5 + vssw * 2.5, row * vssw * 3.5 + vssw * 4 + vssw * 2.5], + radius: vssw * 1, fillColor: new Color({ - hue: getRandom(0, 180), + hue: getRandom(30, 180), saturation: 1, brightness: 1 }), @@ -346,7 +346,7 @@ $(document).ready(function() { new PointText({ point: c.bounds.topLeft + [0, -5], content: group_names[idx], - fontSize: '1em', + fontSize: '2em', fontWeight: 'bold', fillColor: c.fillColor }); @@ -406,7 +406,7 @@ $(document).ready(function() { center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5], radius: vssw * 0.8, fillColor: new Color({ - hue: getRandom(0, 180), + hue: getRandom(20, 60), saturation: 1, brightness: 1 }), @@ -471,7 +471,7 @@ $(document).ready(function() { new PointText({ point: c.firstChild.bounds.topLeft + [0, -5], content: btn_names[idx], - fontSize: '2em', + fontSize: '1.5em', fontWeight: 'bold', fillColor: c.firstChild.fillColor }); @@ -616,9 +616,9 @@ $(document).ready(function() { children: [ //play button new Path.Rectangle({ - point: [vssw * 0.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -639,9 +639,9 @@ $(document).ready(function() { }), //stop button new Path.Rectangle({ - point: [vssw * 2.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(120, 250), saturation: 1, @@ -666,16 +666,16 @@ $(document).ready(function() { new PointText({ name: 'playcounter', content: '' + 0, - point: [vssw * 4.8, row * vssw * 1.5 + vssw * 4.5 + vssw * 0.7], + 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.5 + vssw * 4.5], + point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -696,9 +696,9 @@ $(document).ready(function() { }), //slower button new Path.Rectangle({ - point: [vssw * 7.8, row * vssw * 1.5 + vssw * 4.5], + point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.8], + size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ hue: getRandom(120, 250), saturation: 1,