Skip to content

Commit

Permalink
Tweaks for touch.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cwilso
cwilso committed Jan 20, 2013
1 parent 4140e69 commit a4851d4
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 34 deletions.
16 changes: 8 additions & 8 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ body {
z-index: 100;
}
#output .node {
left: -11px;
left: -18px;
margin-top: -11px;
position: absolute;
top: 50%;
Expand Down Expand Up @@ -236,18 +236,18 @@ body {
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0, .5);
cursor: pointer;
height: 22px;
height: 34px;
position: relative;
width: 22px;
width: 34px;
}
.node span {
border-radius: 50%;
display: block;
height: 12px;
height: 24px;
left: 5px;
position: absolute;
top: 5px;
width: 12px;
width: 24px;
}
.node-input span {
background: #67a90d;
Expand Down Expand Up @@ -292,14 +292,14 @@ body {
/* Module nodes */
.module .node {
position: absolute;
margin-top: -11px;
margin-top: -16px;
top: 50%;
}
.module .node-input {
left: -11px;
left: -18px;
}
.module .node-output {
right: -11px;
right: -18px;
}

/* Module close */
Expand Down
23 changes: 11 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<title>Web Audio Playground</title>

Expand All @@ -11,6 +12,7 @@

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/pointerevents.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
<script src="js/dragging.js"></script>
Expand All @@ -31,27 +33,24 @@
<a href="#">Add Audio Source</a>
<div class="sub-menu">
<ul>
<li><a href="#" onclick="createAudioBufferSource(null)">Audio Buffer Source</a></li>
<li><a href="#" id="cabs">Audio Buffer Source</a></li>
<!--
<li><a href="#">Audio Buffer Source From URL</a></li>
--> <li><a href="#" onclick="createOscillator()">Oscillator</a></li>
<li><a href="#" onclick="createLiveInput()">Live Input</a></li>
--> <li><a href="#" id="cosc">Oscillator</a></li>
<li><a href="#" id="cliv">Live Input</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Add Module</a>
<div class="sub-menu">
<ul>
<li><a href="#" onclick="createBiquadFilter()">Biquad Filter</a></li>
<li><a href="#" onclick="createDelay()">Delay Node</a></li>
<li><a href="#" onclick="createDynamicsCompressor()">Dynamics Compressor</a></li>
<li><a href="#" onclick="createGain()">Gain Node</a></li>
<li><a href="#" onclick="createConvolver()">Convolver</a></li>
<!--
<li><a href="#">Convolver From Impulse File URL</a></li>
-->
<li><a href="#" onclick="createAnalyser()">Analyser</a></li>
<li><a href="#" id="cbqf">Biquad Filter</a></li>
<li><a href="#" id="cdel">Delay Node</a></li>
<li><a href="#" id="cdyc">Dynamics Compressor</a></li>
<li><a href="#" id="cgai">Gain Node</a></li>
<li><a href="#" id="ccon">Convolver</a></li>
<li><a href="#" id="cana">Analyser</a></li>
</ul>
</div>
</li>
Expand Down
33 changes: 25 additions & 8 deletions js/dragging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ dragObj.lastLit = null;
// Node Dragging functions - these are used for dragging the audio modules,
// like Destination or AudioSourceBuffer.

function skipDefault(event) {
if (event.target.tagName != "SELECT")
event.preventDefault();
}

function startDraggingNode(event) {
var el;
var x, y;
Expand Down Expand Up @@ -46,8 +51,11 @@ function startDraggingNode(event) {
dragObj.elNode.style.zIndex = ++dragObj.zIndex;

// Capture mousemove and mouseup events on the page.
document.addEventListener("mousemove", whileDraggingNode, true);
document.addEventListener("mouseup", stopDraggingNode, true);
// document.addEventListener("mousemove", skipDefault, true);
// document.addEventListener("mouseup", stopDraggingNode, true);
document.addEventListener( 'pointermove', whileDraggingNode, true );
document.addEventListener( 'pointerup', stopDraggingNode, true );
document.addEventListener( 'pointerleave', stopDraggingNode, true );
event.preventDefault();
}

Expand Down Expand Up @@ -107,8 +115,11 @@ function whileDraggingNode(event) {

function stopDraggingNode(event) {
// Stop capturing mousemove and mouseup events.
document.removeEventListener("mousemove", whileDraggingNode, true);
document.removeEventListener("mouseup", stopDraggingNode, true);
// document.removeEventListener("mousemove", whileDraggingNode, true);
// document.removeEventListener("mouseup", stopDraggingNode, true);
document.removeEventListener( 'pointermove', whileDraggingNode, true );
document.removeEventListener( 'pointerup', stopDraggingNode, true );
document.removeEventListener( 'pointerleave', stopDraggingNode, true );
}

// Connector Dragging functions - these are used for dragging the connectors
Expand Down Expand Up @@ -164,8 +175,11 @@ function startDraggingConnector(event) {
document.getElementById("svgCanvas").appendChild(shape);

// Capture mousemove and mouseup events on the page.
document.addEventListener("mousemove", whileDraggingConnector, true);
document.addEventListener("mouseup", stopDraggingConnector, true);
// document.addEventListener("mousemove", whileDraggingConnector, true);
// document.addEventListener("mouseup", stopDraggingConnector, true);
document.addEventListener( 'pointermove', whileDraggingConnector, true );
document.addEventListener( 'pointerup', stopDraggingConnector, true );
document.addEventListener( 'pointerleave', stopDraggingConnector, true );
event.preventDefault();
event.stopPropagation();
}
Expand Down Expand Up @@ -357,8 +371,11 @@ function disconnectNode( nodeElement ) {

function stopDraggingConnector(event) {
// Stop capturing mousemove and mouseup events.
document.removeEventListener("mousemove", whileDraggingConnector, true);
document.removeEventListener("mouseup", stopDraggingConnector, true);
// document.removeEventListener("mousemove", whileDraggingConnector, true);
// document.removeEventListener("mouseup", stopDraggingConnector, true);
document.removeEventListener( 'pointermove', whileDraggingConnector, true );
document.removeEventListener( 'pointerup', stopDraggingConnector, true );
document.removeEventListener( 'pointerleave', stopDraggingConnector, true );

if (dragObj.lastLit) {
dragObj.lastLit.className = dragObj.lastLit.unlitClassname;
Expand Down
37 changes: 31 additions & 6 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ function createNewModule( nodeType, input, output ) {
tempy = 100;

e.setAttribute("audioNodeType", nodeType );
e.onmousedown=startDraggingNode;
e.addEventListener("mousedown", skipDefault, false);
e.addEventListener( 'pointerdown', startDraggingNode, false );
var content = document.createElement("div");
content.className="content";
e.appendChild(content);
Expand All @@ -45,7 +46,8 @@ function createNewModule( nodeType, input, output ) {
if (input) {
var i=document.createElement("div");
i.className="node node-input ";
i.onmousedown=startDraggingConnector;
i.addEventListener( "mousedown", skipDefault, true );
i.addEventListener( 'pointerdown', startDraggingConnector, false );
i.innerHTML = "<span class='node-button'>&nbsp;</span>";
e.appendChild(i);
e.inputs = i;
Expand All @@ -54,7 +56,8 @@ function createNewModule( nodeType, input, output ) {
if (output) {
var i=document.createElement("div");
i.className="node node-output";
i.onmousedown=startDraggingConnector;
i.addEventListener( "mousedown", skipDefault, true );
i.addEventListener( 'pointerdown', startDraggingConnector, false );
i.innerHTML = "<span class='node-button'>&nbsp;</span>";
e.appendChild(i);
e.outputs = i;
Expand Down Expand Up @@ -466,6 +469,10 @@ function createDelay() {
this.event.preventDefault();
}

function createAudioBufferSourceFromMenu(event) {
createAudioBufferSource(null);
}

function createAudioBufferSource( buffer ) {
var module = createNewModule( "audiobuffersource", false, true );

Expand Down Expand Up @@ -849,6 +856,14 @@ function startLoadingSounds() {
irHallRequest.send();
}

function setClickHandler( id, handler ) {
var el = document.getElementById( id );
if (el) {
el.addEventListener( "mousedown", skipDefault, true );
el.addEventListener( "pointerdown", handler, false );
}
}

// Initialization function for the page.
function init() {
try {
Expand All @@ -858,9 +873,6 @@ function init() {
alert('Web Audio API is not supported in this browser.');
}

if (!audioContext.createOscillator)
alert('Oscillators not supported - you may need to run Chrome Canary.');

initDragDropOfAudioFiles(); // set up page as a drop site for audio files

startLoadingSounds();
Expand All @@ -869,6 +881,19 @@ function init() {
var dest = document.getElementById("output");
dest.audioNode = audioContext.destination;
// stringifyAudio();

setClickHandler( "cabs", createAudioBufferSourceFromMenu );
setClickHandler( "cosc", createOscillator );
setClickHandler( "cliv", createLiveInput );
setClickHandler( "cbqf", createBiquadFilter );
setClickHandler( "cdel", createDelay );
setClickHandler( "cdyc", createDynamicsCompressor );
setClickHandler( "cgai", createGain );
setClickHandler( "ccon", createConvolver );
setClickHandler( "cana", createAnalyser );

// if (navigator.userAgent.indexOf("Android") != -1)
// document.body.style.zoom = "2";
}

window.addEventListener('load', init, false);
6 changes: 6 additions & 0 deletions js/pointerevents.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a4851d4

Please sign in to comment.