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

added inc/dec players.. icons.

Browse source
This commit is contained in:
Dooho Yi 2020-05-19 20:03:52 +09:00
parent 6848c6a3a4
commit 652ef978cf
3 changed files with 56 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/1/conductor/imgs/minus.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 91.8 92.6" xmlns="http://www.w3.org/2000/svg"><path fill="#1E1E1E" d="M46.3,3.6c-23.5,0-42.5,19-42.5,42.5c0,23.5,19,42.5,42.5,42.5c23.5,0,42.5-19,42.5-42.5 C88.9,22.7,69.8,3.6,46.3,3.6z M76.4,53.3H15.3c-2.1,0-3.9-1.8-3.9-3.9v-6.4c0-2.1,1.8-3.9,3.9-3.9h61.1c2.1,0,3.9,1.8,3.9,3.9v6.4 C80.3,51.5,78.6,53.3,76.4,53.3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 344 B

1
public/1/conductor/imgs/plus.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 91.8 92.6" xmlns="http://www.w3.org/2000/svg"><path fill="#1E1E1E" d="M46.3,3.6c-23.5,0-42.5,19-42.5,42.5s19,42.5,42.5,42.5c23.5,0,42.5-19,42.5-42.5S69.8,3.6,46.3,3.6z M72.8,52.9H53v19.8c0,2-1.6,3.6-3.6,3.6h-6.2c-2,0-3.6-1.6-3.6-3.6V52.9H19.8c-2,0-3.6-1.6-3.6-3.6v-6.2c0-2,1.6-3.6,3.6-3.6h19.8 V19.7c0-2,1.6-3.6,3.6-3.6h6.2c2,0,3.6,1.6,3.6,3.6v19.8h19.8c2,0,3.6,1.6,3.6,3.6v6.2C76.4,51.2,74.8,52.9,72.8,52.9z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 436 B

74
public/1/conductor/index.js
View file

@ -20,8 +20,8 @@ $(document).ready(function() {
SVGImport_size1('./imgs/arrow-circle-left.svg'), SVGImport_size1('./imgs/arrow-circle-left.svg'),
SVGImport_size1('./imgs/hand-point-right-regular.svg'), SVGImport_size1('./imgs/hand-point-right-regular.svg'),
SVGImport_size1('./imgs/listen-icon.svg'), SVGImport_size1('./imgs/listen-icon.svg'),
SVGImport_size1('./imgs/iconmonstr-plus-4.svg'), SVGImport_size1('./imgs/plus.svg'),
SVGImport_size1('./imgs/iconmonstr-minus-4.svg'), SVGImport_size1('./imgs/minus.svg'),
SVGImport_size1('./imgs/faster.svg'), SVGImport_size1('./imgs/faster.svg'),
SVGImport_size1('./imgs/slower.svg'), SVGImport_size1('./imgs/slower.svg'),
//clap //clap
@ -324,7 +324,7 @@ $(document).ready(function() {
//screen #3 - beach page #1 //screen #3 - beach page #1
changeScreen(3); changeScreen(3);
new Path.Rectangle([0, 0], vs).fillColor = '#333'; new Path.Rectangle([0, 0], vs).fillColor = '#555';
//title - text //title - text
new PointText({ new PointText({
@ -346,14 +346,16 @@ $(document).ready(function() {
children: [ children: [
//play button //play button
new Path.Rectangle({ new Path.Rectangle({
name: 'play_btn',
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.5, vssw * 0.7], size: [vssw * 1.5, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function(event) { onMouseDown: function(event) {
var par = this.parent; var par = this.parent;
par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
@ -384,14 +386,16 @@ $(document).ready(function() {
}), }),
//stop button //stop button
new Path.Rectangle({ new Path.Rectangle({
name: 'stop_btn',
point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function() { onMouseDown: function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
@ -457,7 +461,7 @@ $(document).ready(function() {
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
strokeColor: new Color({ strokeColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
@ -485,12 +489,20 @@ $(document).ready(function() {
_init: function() { _init: function() {
this._player.loop = true; this._player.loop = true;
this._player.retrigger = true; this._player.retrigger = true;
var ff = faster.clone().addTo(project); // iconifying...
ff.fitBounds(this.children.faster_btn.bounds); var fast = faster.clone().addTo(project);
ff.fillColor = "orange"; fast.fitBounds(this.children.faster_btn.bounds);
var ss = slower.clone().addTo(project); fast.fillColor = "orange";
ss.fitBounds(this.children.slower_btn.bounds); var slow = slower.clone().addTo(project);
ss.fillColor = "lime"; slow.fitBounds(this.children.slower_btn.bounds);
slow.fillColor = "lime";
var player_increase = plus.clone().addTo(project);
player_increase.fitBounds(this.children.play_btn.bounds);
player_increase.fillColor = "cyan";
var player_decrease = minus.clone().addTo(project);
player_decrease.fitBounds(this.children.stop_btn.bounds);
player_decrease.fillColor = "teal";
// positioning numberboxes...
this.children.playcounter.fitBounds(this.children.playcounterbox.bounds); this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds); this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
this.children.speedcounter.content = Number.parseFloat(1).toFixed(1); this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
@ -541,7 +553,7 @@ $(document).ready(function() {
//screen #4 - beach page #2 //screen #4 - beach page #2
changeScreen(4); changeScreen(4);
new Path.Rectangle([0, 0], vs).fillColor = '#333'; new Path.Rectangle([0, 0], vs).fillColor = '#555';
//title - text //title - text
new PointText({ new PointText({
@ -563,14 +575,16 @@ $(document).ready(function() {
children: [ children: [
//play button //play button
new Path.Rectangle({ new Path.Rectangle({
name: 'play_btn',
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.5, vssw * 0.7], size: [vssw * 1.5, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function(event) { onMouseDown: function(event) {
var par = this.parent; var par = this.parent;
par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
@ -601,14 +615,16 @@ $(document).ready(function() {
}), }),
//stop button //stop button
new Path.Rectangle({ new Path.Rectangle({
name: 'stop_btn',
point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function() { onMouseDown: function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
@ -629,14 +645,16 @@ $(document).ready(function() {
}), }),
//faster button //faster button
new Path.Rectangle({ new Path.Rectangle({
name: 'faster_btn',
point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function() { onMouseDown: function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
@ -667,14 +685,16 @@ $(document).ready(function() {
}), }),
//slower button //slower button
new Path.Rectangle({ new Path.Rectangle({
name: 'slower_btn',
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.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.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ strokeColor: new Color({
hue: getRandom(120, 250), hue: getRandom(120, 180),
saturation: 1, saturation: 1,
brightness: 1 brightness: 1
}), }),
strokeWidth : vssw * 0.03,
onMouseDown: function() { onMouseDown: function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
@ -698,6 +718,20 @@ $(document).ready(function() {
_init: function() { _init: function() {
this._player.loop = true; this._player.loop = true;
this._player.retrigger = true; this._player.retrigger = true;
// iconifying...
var fast = faster.clone().addTo(project);
fast.fitBounds(this.children.faster_btn.bounds);
fast.fillColor = "orange";
var slow = slower.clone().addTo(project);
slow.fitBounds(this.children.slower_btn.bounds);
slow.fillColor = "lime";
var player_increase = plus.clone().addTo(project);
player_increase.fitBounds(this.children.play_btn.bounds);
player_increase.fillColor = "cyan";
var player_decrease = minus.clone().addTo(project);
player_decrease.fitBounds(this.children.stop_btn.bounds);
player_decrease.fillColor = "teal";
// positioning numberboxes...
this.children.playcounter.fitBounds(this.children.playcounterbox.bounds); this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds); this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
this.children.speedcounter.content = Number.parseFloat(1).toFixed(1); this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);