doohoyi/sound-walk-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update layout

Browse source
This commit is contained in:
Dooho Yi 2018-09-16 09:52:30 +09:00
parent 3d1080132d
commit a6596daa35
4 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/conductor/index.html
View file

@ -27,7 +27,7 @@
body { body {
/* https://stackoverflow.com/a/47709903 */ /* https://stackoverflow.com/a/47709903 */
overscroll-behavior: contain; /* overscroll-behavior: contain; */
} }
body { body {
@ -37,7 +37,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
touch-action: none !important; /* touch-action: none !important; */
} }
canvas#screen { canvas#screen {
@ -51,7 +51,7 @@
.objstring { .objstring {
position: fixed; position: fixed;
top: 3.3em; top: 2.5em;
left: 4em; left: 4em;
/* non-clickable element (pass-through) */ /* non-clickable element (pass-through) */
pointer-events:none; pointer-events:none;

42
public/conductor/index.js
View file

@ -257,9 +257,9 @@ $(document).ready(function() {
//page change - prev. page //page change - prev. page
aprev.addTo(project); aprev.addTo(project);
aprev.scale(vsw / 4); aprev.scale(vssw * 1.5);
aprev.position = [0, 0]; //reset position, before relative positioning !! 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.fillColor = 'pink';
aprev._socket = socket; aprev._socket = socket;
aprev._isactive = false; aprev._isactive = false;
@ -279,9 +279,9 @@ $(document).ready(function() {
//page change - next. page //page change - next. page
anext.addTo(project); anext.addTo(project);
anext.scale(vsw / 4); anext.scale(vssw * 1.5);
anext.position = [0, 0]; //reset position, before relative positioning !! 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.fillColor = 'pink';
anext._socket = socket; anext._socket = socket;
anext._isactive = false; anext._isactive = false;
@ -301,8 +301,8 @@ $(document).ready(function() {
//title background //title background
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 2, vssw * 1.5], point: [vssw * 2, vssw * 1],
size: [vssw * 6, vssw * 2], size: [vssw * 6, vssw * 1.5],
fillColor: 'white', fillColor: 'white',
radius: 30, radius: 30,
}).opacity = 0.3; }).opacity = 0.3;
@ -328,10 +328,10 @@ $(document).ready(function() {
for (var col = 0; col < 2; col++) { for (var col = 0; col < 2; col++) {
var idx = row * 2 + col; var idx = row * 2 + col;
var c = new Path.Circle({ var c = new Path.Circle({
center: [col * vssw * 3 + vssw * 3, row * vssw * 3 + vssw * 6], center: [col * vssw * 3.5 + vssw * 2.5, row * vssw * 3.5 + vssw * 4 + vssw * 2.5],
radius: vssw * 0.8, radius: vssw * 1,
fillColor: new Color({ fillColor: new Color({
hue: getRandom(0, 180), hue: getRandom(30, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
@ -346,7 +346,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.bounds.topLeft + [0, -5], point: c.bounds.topLeft + [0, -5],
content: group_names[idx], content: group_names[idx],
fontSize: '1em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
fillColor: c.fillColor fillColor: c.fillColor
}); });
@ -406,7 +406,7 @@ $(document).ready(function() {
center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5], center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5],
radius: vssw * 0.8, radius: vssw * 0.8,
fillColor: new Color({ fillColor: new Color({
hue: getRandom(0, 180), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
@ -471,7 +471,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.firstChild.bounds.topLeft + [0, -5], point: c.firstChild.bounds.topLeft + [0, -5],
content: btn_names[idx], content: btn_names[idx],
fontSize: '2em', fontSize: '1.5em',
fontWeight: 'bold', fontWeight: 'bold',
fillColor: c.firstChild.fillColor fillColor: c.firstChild.fillColor
}); });
@ -669,9 +669,9 @@ $(document).ready(function() {
children: [ children: [
//play button //play button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -692,9 +692,9 @@ $(document).ready(function() {
}), }),
//stop button //stop button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 250),
saturation: 1, saturation: 1,
@ -719,16 +719,16 @@ $(document).ready(function() {
new PointText({ new PointText({
name: 'playcounter', name: 'playcounter',
content: '' + 0, 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', fillColor: 'white',
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold' fontWeight: 'bold'
}), }),
//faster button //faster button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -749,9 +749,9 @@ $(document).ready(function() {
}), }),
//slower button //slower button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 250),
saturation: 1, saturation: 1,

6
public/index.html
View file

@ -27,7 +27,7 @@
body { body {
/* https://stackoverflow.com/a/47709903 */ /* https://stackoverflow.com/a/47709903 */
overscroll-behavior: contain; /* overscroll-behavior: contain; */
} }
body { body {
@ -37,7 +37,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
touch-action: none !important; /* touch-action: none !important; */
} }
canvas#screen { canvas#screen {
@ -51,7 +51,7 @@
.objstring { .objstring {
position: fixed; position: fixed;
top: 3.3em; top: 2.5em;
left: 4em; left: 4em;
/* non-clickable element (pass-through) */ /* non-clickable element (pass-through) */
pointer-events:none; pointer-events:none;

42
public/index.js
View file

@ -257,9 +257,9 @@ $(document).ready(function() {
//page change - prev. page //page change - prev. page
aprev.addTo(project); aprev.addTo(project);
aprev.scale(vsw / 4); aprev.scale(vssw * 1.5);
aprev.position = [0, 0]; //reset position, before relative positioning !! 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.fillColor = 'pink';
aprev._socket = socket; aprev._socket = socket;
aprev._isactive = false; aprev._isactive = false;
@ -279,9 +279,9 @@ $(document).ready(function() {
//page change - next. page //page change - next. page
anext.addTo(project); anext.addTo(project);
anext.scale(vsw / 4); anext.scale(vssw * 1.5);
anext.position = [0, 0]; //reset position, before relative positioning !! 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.fillColor = 'pink';
anext._socket = socket; anext._socket = socket;
anext._isactive = false; anext._isactive = false;
@ -301,8 +301,8 @@ $(document).ready(function() {
//title background //title background
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 2, vssw * 1.5], point: [vssw * 2, vssw * 1],
size: [vssw * 6, vssw * 2], size: [vssw * 6, vssw * 1.5],
fillColor: 'white', fillColor: 'white',
radius: 30, radius: 30,
}).opacity = 0.3; }).opacity = 0.3;
@ -328,10 +328,10 @@ $(document).ready(function() {
for (var col = 0; col < 2; col++) { for (var col = 0; col < 2; col++) {
var idx = row * 2 + col; var idx = row * 2 + col;
var c = new Path.Circle({ var c = new Path.Circle({
center: [col * vssw * 3 + vssw * 3, row * vssw * 3 + vssw * 6], center: [col * vssw * 3.5 + vssw * 2.5, row * vssw * 3.5 + vssw * 4 + vssw * 2.5],
radius: vssw * 0.8, radius: vssw * 1,
fillColor: new Color({ fillColor: new Color({
hue: getRandom(0, 180), hue: getRandom(30, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
@ -346,7 +346,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.bounds.topLeft + [0, -5], point: c.bounds.topLeft + [0, -5],
content: group_names[idx], content: group_names[idx],
fontSize: '1em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
fillColor: c.fillColor fillColor: c.fillColor
}); });
@ -406,7 +406,7 @@ $(document).ready(function() {
center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5], center: [col * vssw * 2.5 + vssw * 2, row * vssw * 2.3 + vssw * 5.5],
radius: vssw * 0.8, radius: vssw * 0.8,
fillColor: new Color({ fillColor: new Color({
hue: getRandom(0, 180), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
@ -471,7 +471,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.firstChild.bounds.topLeft + [0, -5], point: c.firstChild.bounds.topLeft + [0, -5],
content: btn_names[idx], content: btn_names[idx],
fontSize: '2em', fontSize: '1.5em',
fontWeight: 'bold', fontWeight: 'bold',
fillColor: c.firstChild.fillColor fillColor: c.firstChild.fillColor
}); });
@ -616,9 +616,9 @@ $(document).ready(function() {
children: [ children: [
//play button //play button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -639,9 +639,9 @@ $(document).ready(function() {
}), }),
//stop button //stop button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 250),
saturation: 1, saturation: 1,
@ -666,16 +666,16 @@ $(document).ready(function() {
new PointText({ new PointText({
name: 'playcounter', name: 'playcounter',
content: '' + 0, 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', fillColor: 'white',
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold' fontWeight: 'bold'
}), }),
//faster button //faster button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -696,9 +696,9 @@ $(document).ready(function() {
}), }),
//slower button //slower button
new Path.Rectangle({ 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, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.8], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 250),
saturation: 1, saturation: 1,