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

testing new style..

Browse source
This commit is contained in:
Dooho Yi 2020-07-10 23:03:19 +09:00
parent 0f68a377da
commit 1d918d74ea
8 changed files with 162 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/sample/audio/01.mp3
View file

Binary file not shown.

BIN
public/sample/audio/02.mp3
View file

Binary file not shown.

BIN
public/sample/audio/03.mp3
View file

Binary file not shown.

BIN
public/sample/audio/04.mp3
View file

Binary file not shown.

BIN
public/sample/audio/05.mp3
View file

Binary file not shown.

BIN
public/sample/audio/06.mp3
View file

Binary file not shown.

221
public/sample/index.html
View file

@ -1,85 +1,156 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- libraries --> <!-- libraries -->
<link type="text/css" rel="stylesheet" href="./lib/tachyons-4.9.1.min.css" /> <link type="text/css" rel="stylesheet" href="./lib/tachyons-4.9.1.min.css" />
<link type="text/css" rel="stylesheet" href="./lib/colors-2.2.0.min.css" /> <link type="text/css" rel="stylesheet" href="./lib/colors-2.2.0.min.css" />
<link type="text/css" rel="stylesheet" href="./lib/loading-animation.css" /> <link type="text/css" rel="stylesheet" href="./lib/loading-animation.css" />
<script type="text/javascript" src="./lib/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./lib/paper-full-v0.11.5.min.js"></script> <script type="text/javascript" src="./lib/paper-full-v0.11.5.min.js"></script>
<script type="text/javascript" src="./lib/Tone-reserved.min.js"></script> <script type="text/javascript" src="./lib/Tone-reserved.min.js"></script>
<script type="text/javascript" src="./lib/p5.min-v0.6.1.js"></script> <script type="text/javascript" src="./lib/p5.min-v0.6.1.js"></script>
<script type="text/javascript" src="./lib/p5.sound.min-v0.3.7.js"></script> <script type="text/javascript" src="./lib/p5.sound.min-v0.3.7.js"></script>
<script type="text/javascript" src="./lib/socket.io-v2.1.1.slim.js"></script> <script type="text/javascript" src="./lib/socket.io-v2.1.1.slim.js"></script>
<script type="text/javascript" src="./lib/hammer-v2.0.8.min.js"></script> <script type="text/javascript" src="./lib/hammer-v2.0.8.min.js"></script>
<script type="text/javascript" src="./lib/lodash-full-v4.17.10.min.js"></script> <script type="text/javascript" src="./lib/lodash-full-v4.17.10.min.js"></script>
<script type="text/javascript" src="./lib/util.js"></script> <script type="text/javascript" src="./lib/util.js"></script>
<!-- code --> <!-- code -->
<script type="text/paperscript" src="./index.js" canvas="screen"></script> <script type="text/paperscript" src="./index.js" canvas="screen"></script>
<style> <style>
canvas { html,
/* eliminating the gap between 2 canvases --> https://stackoverflow.com/a/8600771 */ body {
display: block; /* height: 100%; */
} }
body { /* Scale canvas with resize attribute to full size */
/* https://stackoverflow.com/a/47709903 */ canvas[resize] {
/* overscroll-behavior: contain; */ width: 100%;
} height: 100%;
}
body { #wrapper {
/* https://stackoverflow.com/a/41480220 */ height: 57vh;
/* https://github.com/hammerjs/hammer.js/issues/1050#issuecomment-267595556 */ }
position: fixed; </style>
width: 100%; </head>
height: 100%;
overflow: hidden;
/* touch-action: none !important; */
}
canvas#screen { <body class="pa3">
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
/* buttermilk */
background-color: #3333ff;
}
.objstring { <div id="wrapper" class="w-100 center">
position: fixed; <canvas id="screen" resize></canvas>
top: 2.5em; </div>
left: 4em;
/* non-clickable element (pass-through) */
pointer-events:none;
}
/* #objstring { <div>
overflow-wrap: break-word; <p>
word-wrap: break-word; <!-- ####### YAY, I AM THE SOURCE EDITOR! #########-->
hyphens: none; <h1 style="color: #5e9ca0;">You can edit <span style="color: #2b2301;">this demo</span> text!</h1>
} */ <h2 style="color: #2e6c80;">How to use the editor:</h2>
</style> <p>Paste your documents in the visual editor on the left or your HTML code in the source editor in the right. <br />Edit any of the two areas and see the other changing in real time.&nbsp;</p>
</head> <p>Click the <span style="background-color: #2b2301; color: #fff; display: inline-block; padding: 3px 10px; font-weight: bold; border-radius: 5px;">Clean</span> button to clean your source code.</p>
<h2 style="color: #2e6c80;">Some useful features:</h2>
<body class=""> <ol style="list-style: none; font-size: 14px; line-height: 32px; font-weight: bold;">
<!-- full page layout : page loading screen --> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/01-interactive-connection.png" alt="interactive connection" width="45" /> Interactive source editor</li>
<div class="vh-100 w-100 absolute top-0 left-0 bg-light-blue" id="page-loading" style="z-index:2"> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/02-html-clean.png" alt="html cleaner" width="45" /> HTML Cleaning</li>
<div class="cf w-100 top-0"> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/03-docs-to-html.png" alt="Word to html" width="45" /> Word to HTML conversion</li>
<div class="dt vh-100 w-100 absolute top-0 left-0 animationStripes"> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/04-replace.png" alt="replace text" width="45" /> Find and Replace</li>
<div class="dtc v-mid tc white monaco"> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/05-gibberish.png" alt="gibberish" width="45" /> Lorem-Ipsum generator</li>
<h1 class="f3 f1-ns"> <li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/6-table-div-html.png" alt="html table div" width="45" /> Table to DIV conversion</li>
Loading..........!? </ol>
</h1> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
</div> <h2 style="color: #2e6c80;">Cleaning options:</h2>
</div> <table class="editorDemoTable">
</div> <thead>
</div> <tr>
<td>Name of the feature</td>
<canvas id="screen" resize style="z-index:0"></canvas> <td>Example</td>
</body> <td>Default</td>
</tr>
</thead>
<tbody>
<tr>
<td>Remove tag attributes</td>
<td><img style="margin: 1px 15px;" src="images/smiley.png" alt="laughing" width="40" height="16" /> (except <strong>img</strong>-<em>src</em> and <strong>a</strong>-<em>href</em>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove inline styles</td>
<td><span style="color: green; font-size: 13px;">You <strong style="color: blue; text-decoration: underline;">should never</strong>&nbsp;use inline styles!</span></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove classes and IDs</td>
<td><span id="demoId">Use classes to <strong class="demoClass">style everything</strong>.</span></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove all tags</td>
<td>This leaves <strong style="color: blue;">only the plain</strong> <em>text</em>. <img style="margin: 1px;" src="images/smiley.png" alt="laughing" width="16" height="16" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove successive &amp;nbsp;s</td>
<td>Never use non-breaking spaces&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to set margins.</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove empty tags</td>
<td>Empty tags should go!</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove tags with one &amp;nbsp;</td>
<td>This makes&nbsp;no sense!</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove span tags</td>
<td>Span tags with <span style="color: green; font-size: 13px;">all styles</span></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove images</td>
<td>I am an image: <img src="images/smiley.png" alt="laughing" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove links</td>
<td><a href="https://html-online.com">This is</a> a link.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove tables</td>
<td>Takes everything out of the table.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Replace table tags with structured divs</td>
<td>This text is inside a table.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove comments</td>
<td>This is only visible in the source editor <!-- HELLO! --></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Encode special characters</td>
<td><span style="color: red; font-size: 17px;">&hearts;</span> <strong style="font-size: 20px;">☺ ★</strong> &gt;&lt;</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Set new lines and text indents</td>
<td>Organize the tags in a nice tree view.</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p><strong>&nbsp;</strong></p>
<p><strong>Save this link into your bookmarks and share it with your friends. It is all FREE! </strong><br /><strong>Enjoy!</strong></p>
<p><strong>&nbsp;</strong></p> </p>
</div>
</body>
</html> </html>

247
public/sample/index.js
View file

@ -4,9 +4,6 @@
$(document).ready(function() { $(document).ready(function() {
//networking - socket.io
var socket = io('https://sound-mix.herokuapp.com');
//metrics related to 'view size' //metrics related to 'view size'
// 'coarse' // 'coarse'
var vs = view.size; var vs = view.size;
@ -82,83 +79,12 @@ $(document).ready(function() {
'07': [], '07': [],
}; };
//screen changer
var nscreen = 3;
var screens = [];
var screen_names = {};
screen_names['start'] = 1;
screen_names['check'] = 2;
screen_names['sound'] = 3;
var curscreen;
for (var idx = 0; idx < nscreen; idx++) {
screens.push(new Layer());
}
function changeScreen(page) {
//pagination buttons
aprev._activate();
anext._activate();
//
if (page < 1) page = 1;
if (page > nscreen) page = nscreen;
curscreen = page;
for (var idx = 0; idx < nscreen; idx++) {
//
if (idx == page - 1) {
screens[idx].bringToFront();
top.bringToFront();
//
screens[idx].activate();
} else {
screens[idx].sendToBack();
}
}
//pagination buttons
if (curscreen == 1) {
aprev._deactivate();
}
if (curscreen == nscreen) {
anext._deactivate();
}
}
function nextScreen() {
if (curscreen + 1 <= nscreen) {
curscreen++;
changeScreen(curscreen);
}
}
function prevScreen() {
if (curscreen - 1 > 0) {
curscreen--;
changeScreen(curscreen);
}
}
function changeScreenByName(pagename) {
changeScreen(screen_names[pagename]);
}
function getScreenNameNext() {
if (curscreen + 1 <= nscreen) {
return Object.keys(screen_names)[curscreen + 1 - 1];
} else {
return Object.keys(screen_names)[curscreen - 1];
}
}
function getScreenNamePrev() {
if (curscreen - 1 > 0) {
return Object.keys(screen_names)[curscreen - 1 - 1];
} else {
return Object.keys(screen_names)[curscreen - 1];
}
}
//top layer //top layer
var top = new Layer(); // new Layer() will be automatically activated at the moment. var top = new Layer(); // new Layer() will be automatically activated at the moment.
//networking - socket.io
var socket = io(window.location.protocol + "//" + window.location.host);
//net. connection marker //net. connection marker
var netstat = new Path.Circle({ var netstat = new Path.Circle({
center: view.bounds.topRight + [-vssw / 2, +vssw / 2], center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
@ -185,147 +111,11 @@ $(document).ready(function() {
}); });
}); });
//page change - prev. page
aprev.addTo(project);
aprev.scale(vssw * 1.5);
aprev.position = [0, 0]; //reset position, before relative positioning !!
aprev.translate([vssw, vssw * 1.8]);
aprev.fillColor = '#FFE40A';
aprev._socket = socket;
aprev._isactive = false;
aprev._activate = function() {
this._isactive = true;
this.opacity = 1;
}
aprev._deactivate = function() {
this._isactive = false;
this.opacity = 0.3;
}
aprev.onClick = function() {
if (this._isactive == true) {
prevScreen();
}
};
//page change - next. page
anext.addTo(project);
anext.scale(vssw * 1.5);
anext.position = [0, 0]; //reset position, before relative positioning !!
anext.translate([vssw * 9, vssw * 1.8]);
anext.fillColor = '#FFE40A';
anext._socket = socket;
anext._isactive = false;
anext._activate = function() {
this._isactive = true;
this.opacity = 1;
}
anext._deactivate = function() {
this._isactive = false;
this.opacity = 0.3;
}
anext.onClick = function() {
if (this._isactive == true) {
nextScreen();
}
};
//title background
var titlebox = new Path.Rectangle({
point: [vssw * 2, vssw * 1],
size: [vssw * 6, vssw * 1.5],
fillColor: 'white',
radius: vssw * 0.8,
opacity: 0.3,
});
//screen #1 - 'home' //screen #1 - 'home'
changeScreen(1);
new Path.Rectangle([0, 0], vs).fillColor = '#999';
//title - text //✧*｡٩(ˊᗜˋ*)و✧*｡
new PointText({
point: titlebox.bounds.center,
content: '✧*｡٩(ˊᗜˋ*)و✧*｡',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em',
}).fitBounds(titlebox.bounds);
//hello, screen. new Path.Rectangle([0, 0], vs).fillColor = new Color(1, 0.95, 0.71, 0.5); // buttermilk
logo.addTo(project);
logo.scale(vsw / 1.5);
logo.position = view.center;
//logo.position.y -= vssh;
//screen #2 - check
changeScreen(2);
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: vssw * 1.0,
fillColor: 'gold'
});
new PointText({
content: "사운드 테스트!",
point: view.center + [-vssw * 3, vssw * 0],
fontWeight: 'bold',
fontSize: vssw * 1.0,
fillColor: 'pink'
});
new PointText({
content: "동그라미 터치!",
point: view.center + [-vssw * 3, vssw * 2],
fontWeight: 'bold',
fontSize: vssw * 1.0,
fillColor: 'red'
});
new Path.Circle({
center: view.center,
radius: vsw / 4,
fillColor: 'white',
opacity: 0.5,
onClick: function() {
clap.play();
}
});
//global panning variable
//NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
var pan_width_pool = [1000, 2000, 3000, 4000, 8000, 80000];
var pan_speed_pool = [0, 10, 30, 50, 80, 200, 400, 1200];
var cur_pan_width_idx = pan_width_pool.length - 1;
var cur_pan_speed_idx = 0;
var cur_pan_width = 0;
var cur_pan_speed = 0;
//screen #3 - sound page
changeScreen(3);
new Path.Rectangle([0, 0], vs).fillColor = '#555';
//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 row = 0; row < 7; row++) {
@ -340,7 +130,7 @@ $(document).ready(function() {
name: 'play_btn', name: 'play_btn',
children: [ children: [
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 0.8, row * vssw * 1.4 + vssw * 1.2],
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({ fillColor: new Color({
@ -368,14 +158,14 @@ $(document).ready(function() {
//playcounterbox //playcounterbox
new Path.Rectangle({ new Path.Rectangle({
name: 'playcounterbox', name: 'playcounterbox',
point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.3, row * vssw * 1.4 + vssw * 1.2],
size: [vssw * 0.6, vssw * 0.8], size: [vssw * 0.6, vssw * 0.8],
}), }),
//playcounter //playcounter
new PointText({ new PointText({
name: 'playcounter', name: 'playcounter',
content: '' + 0, content: '' + 0,
fillColor: 'white', fillColor: 'black',
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold' fontWeight: 'bold'
}), }),
@ -384,7 +174,7 @@ $(document).ready(function() {
name: 'stop_btn', name: 'stop_btn',
children: [ children: [
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.9, row * vssw * 1.4 + vssw * 1.2],
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({ fillColor: new Color({
@ -418,7 +208,7 @@ $(document).ready(function() {
name: 'faster_btn', name: 'faster_btn',
children: [ children: [
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 5.0, row * vssw * 1.4 + vssw * 1.2],
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({
@ -427,7 +217,7 @@ $(document).ready(function() {
brightness: 1 brightness: 1
}), }),
strokeWidth: vssw * 0.03, strokeWidth: vssw * 0.03,
fillColor: "#555" fillColor: new Color(1, 1, 1, 0.5)
}), }),
faster.clone() faster.clone()
], ],
@ -448,14 +238,14 @@ $(document).ready(function() {
//speedcounterbox //speedcounterbox
new Path.Rectangle({ new Path.Rectangle({
name: 'speedcounterbox', name: 'speedcounterbox',
point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 6.6, row * vssw * 1.4 + vssw * 1.2],
size: [vssw * 0.6, vssw * 0.8], size: [vssw * 0.6, vssw * 0.8],
}), }),
//speedcounter //speedcounter
new PointText({ new PointText({
name: 'speedcounter', name: 'speedcounter',
content: '' + 0, content: '' + 0,
fillColor: 'white', fillColor: 'black',
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold' fontWeight: 'bold'
}), }),
@ -464,7 +254,7 @@ $(document).ready(function() {
name: 'slower_btn', name: 'slower_btn',
children: [ children: [
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 7.8, row * vssw * 1.4 + vssw * 1.2],
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({
@ -473,7 +263,7 @@ $(document).ready(function() {
brightness: 1 brightness: 1
}), }),
strokeWidth: vssw * 0.03, strokeWidth: vssw * 0.03,
fillColor: "#555" fillColor: new Color(1, 1, 1, 0.5)
}), }),
slower.clone() slower.clone()
], ],
@ -505,9 +295,7 @@ $(document).ready(function() {
this._player.retrigger = true; this._player.retrigger = true;
// set icons // set icons
this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds); this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds);
this.children.play_btn.children[1].fillColor = "#555";
this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds); this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds);
this.children.stop_btn.children[1].fillColor = "#555";
this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds); this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds);
this.children.faster_btn.children[1].fillColor = "orange"; this.children.faster_btn.children[1].fillColor = "orange";
this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds); this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds);
@ -559,14 +347,11 @@ $(document).ready(function() {
content: Object.keys(sounds)[idx], content: Object.keys(sounds)[idx],
fontSize: vssw * 0.55, fontSize: vssw * 0.55,
fontWeight: 'bold', fontWeight: 'bold',
fillColor: 'white' fillColor: 'black'
}); });
} }
} }
//home
changeScreen(1);
//reveal the curtain. //reveal the curtain.
$('#page-loading').css('z-index', -1); $('#page-loading').css('z-index', -1);