Skip to content

Commit

Permalink
Hallelujah! Fixed last serious bugs with UI rework.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cwilso
cwilso committed Jun 16, 2012
1 parent df6258e commit 4b4158f
Show file tree
Hide file tree
Showing 10 changed files with 620 additions and 367 deletions.
Binary file added img/analyser-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ico-stop.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
137 changes: 78 additions & 59 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
<script src="js/dragging.js"></script>
<script src="js/analyser.js"></script>
<script>
if (window != window.top)
document.write("<style>#header {display:none}</style>")
</script>
</head>
<body>
<div id="main" class="container">
Expand All @@ -26,60 +31,34 @@
<a href="#">Add Audio Source</a>
<div class="sub-menu">
<ul>
<li><a href="#">Drums Audio Buffer Source</a></li>
<li><a href="#" onclick="createAudioBufferSource(null)">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="createOscillator()">Oscillator</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Add Module</a>
<div class="sub-menu">
<ul>
<li><a href="#">Biquad Filter</a></li>
<li><a href="#">Delay Node</a></li>
<li><a href="#">Dynamics Compressor</a></li>
<li><a href="#">Gain Node</a></li>
<li><a href="#">Hall Impulse Convolver</a></li>
<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="#">Spectrum Analyser</a></li>
-->
<li><a href="#" onclick="createAnalyser()">Analyser</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<section id="modules" class="container">
<!-- Audio buffer source -->
<div style="left:50px; top: 150px;" class="module audio-buffer-source has-footer has-loop">
<div class="content">
<h6>Audio Buffer Source</h6>
<img src="img/ico-play.gif" alt="Audio play icon" />
</div>
<footer>
<div class="loop">
<label><input type="checkbox" /> Loop</label>
</div>
<select>
<option>woofer.wav</option>
</select>
</footer>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

<!-- Analyser -->
<div style="left:300px; top: 150px;" class="module analyser">
<div class="content">
<h6>Analyser</h6>
<img src="img/ico-analyser.gif" alt="Analyzer graph" />
</div>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

<!-- Biquad filter -->
<!--
<div style="left:600px; top: 150px;" class="module biquad-filter has-footer">
<div class="content">
<h6>Biquad Filter</h6>
Expand Down Expand Up @@ -114,8 +93,9 @@ <h6>Biquad Filter</h6>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

-->
<!-- Convolver -->
<!--
<div style="left:825px; top: 150px;" class="module convolver has-footer">
<div class="content">
<h6>Convolver</h6>
Expand All @@ -131,25 +111,9 @@ <h6>Convolver</h6>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

<!-- Delay -->
<div style="left:50px; top: 450px;" class="module delay">
<div class="content">
<h6>Delay</h6>
<div class="control-group last">
<div class="slider-info">
<span class="label">Delay Time</span>
<span class="value">6.55</span>
</div>
<div class="slider"></div>
</div>
</div>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

-->
<!-- Dynamics compressor -->
<!--
<div style="left:300px; top: 450px;" class="module biquad-filter">
<div class="content">
<h6>Dynamics Compressor</h6>
Expand Down Expand Up @@ -193,8 +157,10 @@ <h6>Dynamics Compressor</h6>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>
-->

<!-- Gain -->
<!--
<div style="left:525px; top: 450px;" class="module gain">
<div class="content">
<h6>Gain</h6>
Expand All @@ -210,9 +176,10 @@ <h6>Gain</h6>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>

-->
<!-- Oscillator -->
<!-- <div style="left:750px; top: 450px;" class="module oscillator has-footer">
<!--
<div style="left:750px; top: 450px;" class="module oscillator has-footer">
<div class="content">
<h6>Oscillator</h6>
<div class="control-group">
Expand Down Expand Up @@ -243,6 +210,58 @@ <h6>Oscillator</h6>
<a href="#" class="close">x</a>
</div>
-->
<!-- Delay -->
<!--
<div style="left:50px; top: 450px;" class="module delay">
<div class="content">
<h6>Delay</h6>
<div class="control-group last">
<div class="slider-info">
<span class="label">Delay Time</span>
<span class="value">6.55</span>
</div>
<div class="slider"></div>
</div>
</div>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>
-->
<!-- Audio buffer source -->
<!--
<div style="left:50px; top: 150px;" class="module audio-buffer-source has-footer has-loop">
<div class="content">
<h6>Audio Buffer Source</h6>
<img src="img/ico-play.gif" alt="Audio play icon" />
</div>
<footer>
<div class="loop">
<label><input type="checkbox" /> Loop</label>
</div>
<select>
<option>woofer.wav</option>
</select>
</footer>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>
-->

<!-- Analyser -->
<!--
<div style="left:300px; top: 150px;" class="module analyser">
<div class="content">
<h6>Analyser</h6>
<img src="img/ico-analyser.gif" alt="Analyzer graph" />
</div>
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-output"><span>&nbsp;</span></div>
<a href="#" class="close">x</a>
</div>
-->

</section>
</div> <!-- /#main -->

Expand Down
11 changes: 6 additions & 5 deletions js/analyser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@ var CANVAS_WIDTH = 150;
var CANVAS_HEIGHT = 120;

function updateAnalyser(e) {
var SPACER_WIDTH = 2;
var BAR_WIDTH = 2;
var SPACER_WIDTH = 1;
var BAR_WIDTH = 1;
var OFFSET = 100;
var CUTOFF = 23;
var numBars = Math.round(CANVAS_WIDTH / SPACER_WIDTH);
var ctx = e.drawingContext;
var canvas = ctx.canvas;
var numBars = Math.round(canvas.width / SPACER_WIDTH);
var freqByteData = new Uint8Array(e.audioNode.frequencyBinCount);

e.audioNode.getByteFrequencyData(freqByteData);
//analyser.getByteTimeDomainData(freqByteData);

ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#F6D565';
ctx.lineCap = 'round';
var multiplier = e.audioNode.frequencyBinCount / numBars;
Expand All @@ -30,7 +31,7 @@ function updateAnalyser(e) {
magnitude = magnitude / multiplier;
var magnitude2 = freqByteData[i * multiplier];
ctx.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)";
ctx.fillRect(i * SPACER_WIDTH, CANVAS_HEIGHT, BAR_WIDTH, -magnitude);
ctx.fillRect(i * SPACER_WIDTH, canvas.height, BAR_WIDTH, -magnitude);
}
}

Expand Down
82 changes: 78 additions & 4 deletions js/dragging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ function whileDraggingConnector(event) {
// the src and dst params are connection point elems, NOT
// the node elems themselves.
function connectNodes( src, dst ) {
var connectorShape = dragObj.connectorShape;
src.className += " connected";
dst.className += " connected";

Expand All @@ -236,13 +237,13 @@ function connectNodes( src, dst ) {
if (!src.outputConnections)
src.outputConnections = new Array();
var connector = new Object();
connector.line = dragObj.connectorShape;
connector.line = connectorShape;
connector.destination = dst;
src.outputConnections.push(connector);

//Make sure the connector line points go from src->dest (x1->x2)
if (!dragObj.input) { // need to flip
var shape = dragObj.connectorShape;
var shape = connectorShape;
var x = shape.getAttributeNS(null, "x2");
var y = shape.getAttributeNS(null, "y2");
shape.setAttributeNS(null, "x2", shape.getAttributeNS(null, "x1"));
Expand All @@ -254,8 +255,9 @@ function connectNodes( src, dst ) {
if (!dst.inputConnections)
dst.inputConnections = new Array();
connector = new Object();
connector.line = dragObj.connectorShape;
connector.line = connectorShape;
connector.source = src;
connector.destination = dst;
dst.inputConnections.push(connector);

// if the source has an audio node, connect them up.
Expand All @@ -265,7 +267,79 @@ function connectNodes( src, dst ) {

if (dst.onConnectInput)
dst.onConnectInput();
dragObj.connectorShape = null;

connectorShape.inputConnection = connector;
connectorShape.destination = dst;
connectorShape.onclick = deleteConnection;

connectorShape = null;
}

function deleteConnection() {
var connections = this.destination.inputConnections;
breakSingleInputConnection( connections, connections.indexOf( this.inputConnection ) );
}

function breakSingleInputConnection( connections, index ) {
var connector = connections[index];
var src = connector.source;

// delete us from their .outputConnections,
src.outputConnections.splice( src.outputConnections.indexOf( connector.destination ), 1);
// call disconnect() on the src,
src.audioNode.disconnect();
// if there's anything left in their outputConnections, re.connect() those nodes.
// TODO: again, this will break due to src resetting.
for (var j=0; j<src.outputConnections.length; j++)
src.audioNode.connect( src.outputConnections[j].destination.audioNode);

// and delete the line
connector.line.parentNode.removeChild( connector.line );

// finally, remove us from the line.
connections.splice( index, 1 );
}

// Disconnect a node from all other nodes connecting to it, or that it connects to.
function disconnectNode( nodeElement ) {
//for all nodes we connect to,
for (var i=0; i<nodeElement.outputConnections.length; i++) {
var connector = nodeElement.outputConnections[i];
// find each dstElement and remove us from the dst.inputConnections,
var connections = connector.destination.inputConnections;
connections.splice( connections.indexOf(nodeElement), 1);
// and delete the line
connector.line.parentNode.removeChild( connector.line );
}
// empty our outputConnections
nodeElement.outputConnections = null;

// then call disconnect() on our audioNode to clear all outbound connections
// (this is what clear the audio connection, for all outbound connections at once)
nodeElement.audioNode.disconnect();

//for all nodes connecting to us - (aka in us.inputConnections)
for (var i=0; i<nodeElement.inputConnections.length; i++) {
var connector = nodeElement.inputConnections[i];
// this is trickier, because we'll have to destroy all their outbound connections.
// TODO: this will suck for source nodes.
var src = connector.source;
var connections = src.outputConnections;
// delete us from their .outputConnections,
connections.splice( connections.indexOf(nodeElement), 1);
// call disconnect() on the src,
src.audioNode.disconnect();
// if there's anything in their outputConnections, re.connect() those nodes.
// TODO: again, this will break due to src resetting.
for (var j=0; j<connections.length; j++)
src.audioNode.connect(connections[i].destination.audioNode);

// and delete the line
connector.line.parentNode.removeChild( connector.line );
}
// empty inputConnections
nodeElement.inputConnections = null;

}

function stopDraggingConnector(event) {
Expand Down
Loading

0 comments on commit 4b4158f

Please sign in to comment.