Skip to content

Commit

Permalink
Revert "Revert "Revert "Revert "tweaking. Oscillator dynamically crea…
Browse files Browse the repository at this point in the history 
…table.""""

This reverts commit 3a8b306.
  • Loading branch information
@cwilso
cwilso committed Jun 15, 2012
1 parent 3a8b306 commit 30e0910
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 89 deletions.
Binary file added audio/drums.ogg
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ body {
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: inline-block;
position: relative;
position: absolute;
}
.module .content {
background: #fff;
Expand Down
34 changes: 19 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
<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/ui.js"></script>
<script src="js/main.js"></script>
<script src="js/dragging.js"></script>
</head>
<body>
<div id="main" class="container">
Expand All @@ -24,9 +26,9 @@
<a href="#">Add Audio Source</a>
<div class="sub-menu">
<ul>
<li><a href="#">Sine Wave Audio Buffer Source</a></li>
<li><a href="#">Drums Audio Buffer Source</a></li>
<li><a href="#">Audio Buffer Source From URL</a></li>
<li><a href="#">Convolver From Impulse File URL</a></li>
<li><a href="#" onclick="createOscillator()">Oscillator</a></li>
</ul>
</div>
</li>
Expand All @@ -38,8 +40,8 @@
<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 Convolution</a></li>
<li><a href="#">Oscillator</a></li>
<li><a href="#">Hall Impulse Convolver</a></li>
<li><a href="#">Convolver From Impulse File URL</a></li>
<li><a href="#">Spectrum Analyser</a></li>
</ul>
</div>
Expand All @@ -48,7 +50,7 @@
</nav>
<section id="modules" class="container">
<!-- Audio buffer source -->
<div class="module audio-buffer-source has-footer has-loop">
<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" />
Expand All @@ -67,7 +69,7 @@ <h6>Audio Buffer Source</h6>
</div>

<!-- Analyser -->
<div class="module 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" />
Expand All @@ -78,7 +80,7 @@ <h6>Analyser</h6>
</div>

<!-- Biquad filter -->
<div class="module biquad-filter has-footer">
<div style="left:600px; top: 150px;" class="module biquad-filter has-footer">
<div class="content">
<h6>Biquad Filter</h6>
<div class="control-group">
Expand Down Expand Up @@ -114,7 +116,7 @@ <h6>Biquad Filter</h6>
</div>

<!-- Convolver -->
<div class="module convolver has-footer">
<div style="left:825px; top: 150px;" class="module convolver has-footer">
<div class="content">
<h6>Convolver</h6>
</div>
Expand All @@ -131,7 +133,7 @@ <h6>Convolver</h6>
</div>

<!-- Delay -->
<div class="module delay">
<div style="left:50px; top: 450px;" class="module delay">
<div class="content">
<h6>Delay</h6>
<div class="control-group last">
Expand All @@ -148,7 +150,7 @@ <h6>Delay</h6>
</div>

<!-- Dynamics compressor -->
<div class="module biquad-filter">
<div style="left:300px; top: 450px;" class="module biquad-filter">
<div class="content">
<h6>Dynamics Compressor</h6>
<div class="control-group">
Expand Down Expand Up @@ -193,7 +195,7 @@ <h6>Dynamics Compressor</h6>
</div>

<!-- Gain -->
<div class="module gain">
<div style="left:525px; top: 450px;" class="module gain">
<div class="content">
<h6>Gain</h6>
<div class="control-group last">
Expand All @@ -210,7 +212,7 @@ <h6>Gain</h6>
</div>

<!-- Oscillator -->
<div 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 All @@ -230,7 +232,10 @@ <h6>Oscillator</h6>
</div>
<footer>
<select>
<option>Sine</option>
<option>Sawtooth</option>
<option>Square</option>
<option>WaveTable</option>
</select>
</footer>
<div class="node node-input"><span>&nbsp;</span></div>
Expand All @@ -241,11 +246,10 @@ <h6>Oscillator</h6>
</div> <!-- /#main -->

<div id="output">
<div class="node node-input"><span>&nbsp;</span></div>
<div class="node node-input"><span class="node-button">&nbsp;</span></div>
</div> <!-- /#output -->

<!--
<svg id=svgCanvas xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"></svg>
-->

</body>
</html>
145 changes: 91 additions & 54 deletions js/dragging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ var dragObj = new Object();
dragObj.zIndex = 0;
dragObj.lastLit = null;

// Node Dragging functions - these are used for dragging the audio nodes,
// Node Dragging functions - these are used for dragging the audio modules,
// like Destination or AudioSourceBuffer.

function startDraggingNode(event) {
Expand All @@ -11,12 +11,23 @@ function startDraggingNode(event) {

if (event.target.tagName == "SELECT")
return;
el = event.target;

if (el.nodeType == 3) // if it's a text node
el = el.parentNode;
if (el.classList.contains("module-title"))
el = el.parentNode;
if (el.classList.contains("content"))
el = el.parentNode;
if (!el.classList.contains("module"))
return;

dragObj.elNode = event.target;

dragObj.elNode = el;
/*
// If this is a text node, use its parent element.
if ((dragObj.elNode.nodeType == 3)||(dragObj.elNode.className == "analyserCanvas"))
dragObj.elNode = dragObj.elNode.parentNode;
*/

// Get cursor position with respect to the page.
x = event.clientX + window.scrollX;
Expand Down Expand Up @@ -112,6 +123,11 @@ function startDraggingConnector(event) {
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;

// if this is the green or red button, use its parent.
if (dragObj.elNode.classList.contains("node-button"))
dragObj.elNode = dragObj.elNode.parentNode;


// Get the position of the originating connector with respect to the page.
var off = event.target;
x = window.scrollX + 12;
Expand Down Expand Up @@ -157,39 +173,50 @@ function startDraggingConnector(event) {
function whileDraggingConnector(event) {
var x, y;
var toElem = event.toElement;

// Get cursor position with respect to the page.
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;

// Move connector visual line
dragObj.connectorShape.setAttributeNS(null, "x2", x);
dragObj.connectorShape.setAttributeNS(null, "y2", y);

// Move connector visual node
// light up connector point underneath, if any
var str = "" + toElem.className;

if (dragObj.lastLit && (dragObj.lastLit != toElem ) ) {
dragObj.lastLit.className = dragObj.lastLit.unlitClassname;
dragObj.lastLit = null;
}

if (!dragObj.lastLit || (dragObj.lastLit != toElem )) {
if (dragObj.input) {
if (str.indexOf("outputconnector") != -1) {
toElem.unlitClassname = toElem.className;
toElem.className += " canConnect";
dragObj.lastLit = toElem;
}
} else { // first node was an output, so we're looking for an input
if (str.indexOf("inputconnector") != -1) {
toElem.unlitClassname = toElem.className;
toElem.className += " canConnect";
dragObj.lastLit = toElem;
// If this is a text node, use its parent element.
if (toElem.nodeType == 3)
toElem = toElem.parentNode;

if (toElem.classList) { // if we don't have class, we're not a node.
// if this is the green or red button, use its parent.
if (toElem.classList.contains("node-button"))
toElem = toElem.parentNode;

// If we used to be lighting up a node, but we're not over it anymore,
// unlight it.
if (dragObj.lastLit && (dragObj.lastLit != toElem ) ) {
dragObj.lastLit.className = dragObj.lastLit.unlitClassname;
dragObj.lastLit = null;
}

// light up connector point underneath, if any
if (toElem.classList.contains("node")) {
if (!dragObj.lastLit || (dragObj.lastLit != toElem )) {
if (dragObj.input) {
if (toElem.classList.contains("node-output")) {
toElem.unlitClassname = toElem.className;
toElem.className += " canConnect";
dragObj.lastLit = toElem;
}
} else { // first node was an output, so we're looking for an input
if (toElem.classList.contains("node-input")) {
toElem.unlitClassname = toElem.className;
toElem.className += " canConnect";
dragObj.lastLit = toElem;
}
}
}
}
}

event.preventDefault();
event.stopPropagation();
}
Expand Down Expand Up @@ -253,42 +280,52 @@ function stopDraggingConnector(event) {

dragObj.elNode.className = dragObj.elNode.unlitClassname;

var to = event.toElement;
var toElem = event.toElement;

// Get the position of the originating connector with respect to the page.
var off = to;
x = window.scrollX + 12;
y = window.scrollY + 12;
// If this is a text node, use its parent element.
if (toElem.nodeType == 3)
toElem = toElem.parentNode;

while (off) {
x+=off.offsetLeft;
y+=off.offsetTop;
off=off.offsetParent;
}
dragObj.connectorShape.setAttributeNS(null, "x2", x);
dragObj.connectorShape.setAttributeNS(null, "y2", y);
if (toElem.classList) { // if we don't have class, we're not a node.
// if this is the green or red button, use its parent.
if (toElem.classList.contains("node-button"))
toElem = toElem.parentNode;

var str=""+to.className;

// If we're over a connection point, make the connection
if (dragObj.input) {
if (str.indexOf("outputconnector") != -1) {
// can connect!
connectNodes(to, dragObj.elNode);
return;
// Get the position of the originating connector with respect to the page.
var off = toElem;
x = window.scrollX + 12;
y = window.scrollY + 12;

while (off) {
x+=off.offsetLeft;
y+=off.offsetTop;
off=off.offsetParent;
}
dragObj.connectorShape.setAttributeNS(null, "x2", x);
dragObj.connectorShape.setAttributeNS(null, "y2", y);

var str=""+toElem.className;

// If we're over a connection point, make the connection
if (dragObj.input) {
if (toElem.classList.contains("node-output")) {
// can connect!
connectNodes(toElem, dragObj.elNode);
return;
}

} else { // first node was an output, so we're looking for an input
if (str.indexOf("inputconnector") != -1) {
// can connect!
// TODO: first: swap the line endpoints so they're consistently x1->x2
// That makes updating them when we drag nodes around easier.
connectNodes(dragObj.elNode, to);
return;
} else { // first node was an output, so we're looking for an input
if (toElem.classList.contains("node-input")) {
// can connect!
// TODO: first: swap the line endpoints so they're consistently x1->x2
// That makes updating them when we drag nodes around easier.
connectNodes(dragObj.elNode, toElem);
return;
}
}
}

// Otherwise, delete the connector
// Otherwise, delete the line
dragObj.connectorShape.parentNode.removeChild(dragObj.connectorShape);
dragObj.connectorShape = null;
}
Expand Down
Loading

0 comments on commit 30e0910

Please sign in to comment.