From 1c013c72411173504d147e46c41f824f43584b41 Mon Sep 17 00:00:00 2001
From: Yotam Mann <yotammann@gmail.com>
Date: Thu, 13 Mar 2014 20:03:14 -0400
Subject: [PATCH] mader the fader

---
 examples/pingPongDelay.html                   |  36 +++--
 src/GUI/GUI.Bar.js                            |  55 +++++++
 src/GUI/GUI.Bars.js                           |  37 -----
 src/GUI/GUI.Fader.js                          | 134 ++++++++++++++++++
 src/GUI/GUI.LinFader.js                       |   0
 src/GUI/GUI.LogFader.js                       | 119 ++++++++++++++++
 src/GUI/GUI.Meter.js                          |  55 +++++++
 src/GUI/GUI.js                                |  43 +++++-
 src/components/Meter.js                       |   6 +-
 src/core/AudioUnit.js                         |  77 ++++++----
 src/core/Master.js                            |  17 +++
 .../GUI.scssc                                 | Bin 3322 -> 9417 bytes
 style/GUI.css                                 |  73 +++++++++-
 style/GUI.scss                                |  94 +++++++++++-
 14 files changed, 652 insertions(+), 94 deletions(-)
 create mode 100644 src/GUI/GUI.Bar.js
 delete mode 100644 src/GUI/GUI.Bars.js
 create mode 100644 src/GUI/GUI.Fader.js
 create mode 100644 src/GUI/GUI.LinFader.js
 create mode 100644 src/GUI/GUI.LogFader.js
 create mode 100644 src/core/Master.js
diff --git a/examples/pingPongDelay.html b/examples/pingPongDelay.html
index 3e01a7c2..9b6d7f16 100644
--- a/examples/pingPongDelay.html
+++ b/examples/pingPongDelay.html
@@ -6,8 +6,9 @@
 
 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 	<script type="text/javascript" src="../src/core/AudioUnit.js"></script>
-	<script type="text/javascript" src="../src/components/Player.js"></script>
+	<script type="text/javascript" src="../src/core/Master.js"></script>
 	<script type="text/javascript" src="../src/components/Meter.js"></script>
+	<script type="text/javascript" src="../src/components/Player.js"></script>
 	<script type="text/javascript" src="../src/components/Envelope.js"></script>
 	<script type="text/javascript" src="../src/components/LFO.js"></script>
 	<script type="text/javascript" src="../src/components/Noise.js"></script>
@@ -17,19 +18,31 @@
 	<script type="text/javascript" src="../src/effects/PingPongDelay.js"></script>
 	<script type="text/javascript" src="../src/components/Microphone.js"></script>
 	<script type="text/javascript" src="../src/GUI/GUI.js"></script>
-	<script type="text/javascript" src="../src/GUI/GUI.Bars.js"></script>
+	<script type="text/javascript" src="../src/GUI/GUI.Bar.js"></script>
 	<script type="text/javascript" src="../src/GUI/GUI.Meter.js"></script>
+	<script type="text/javascript" src="../src/GUI/GUI.Fader.js"></script>
 </head>
 <body>
 	<style type="text/css">
 		#meter {
-			width: 100%;
+			width: auto;
 			text-align: center;
-			font-size: 10px;
+			float: right;
+			position: absolute;
+			bottom: 10px;
+			right: 10px;
+		}
+
+		#fader {
+			position: absolute;
+			bottom: 10px;
+			right: 100px;
+			width: auto;
 		}
 	</style>
 	<div id='Instructions'>Press 'e'</div>
 	<div id='meter'></div>
+	<div id='fader'></div>
 	<script type="text/javascript">
 		var player = new AudioUnit.Player("../audio/A3.mp3");
 		var meter = new AudioUnit.Meter(2);
@@ -37,26 +50,21 @@
 		var lfo = new AudioUnit.LFO(undefined, 1, .5, 1);
 		var noise = new AudioUnit.Noise();
 		var feedbackDelay = new AudioUnit.PingPongDelay(.25);
-		var bars = new AudioUnit.GUI.Bars(document.body);
-		// var meterGui = new WebAudio.GUI.Meter($("#meter")[0], meter);
+		var meterGui = new AudioUnit.GUI.Meter($("#meter"), meter, "master", 20);
+		var fader = new AudioUnit.GUI.Fader($("#fader"), 0, 20, "master gain", 20);
 		
 		noise.connect(env);
 		env.connect(feedbackDelay);
 		feedbackDelay.setFeedback(.5);
-		feedbackDelay.toSpeakers();
-		// feedbackDelay.connect(meter);
+		feedbackDelay.toMaster();
 
-		noise.setVolume(.4);
+		//the master output meter
+		AudioUnit.Master.connect(meter);
 
 		player.load(function(){
 			// player.loop(0, 0, 1);
 			player.loop();
 		});
-		setInterval(function(){
-			// var text = meter.getVolume(0).toFixed(3);
-			// text += " "+meter.getVolume(1).toFixed(3)
-			// $("#meter").html(text);
-		}, 100);
 
 		$(document).keydown(function(e){
 			if (e.which == 69){
diff --git a/src/GUI/GUI.Bar.js b/src/GUI/GUI.Bar.js
new file mode 100644
index 00000000..b58501a4
--- /dev/null
+++ b/src/GUI/GUI.Bar.js
@@ -0,0 +1,55 @@
+///////////////////////////////////////////////////////////////////////////////
+//
+//	BAR
+//
+// 	bars for meters and other UI elements
+///////////////////////////////////////////////////////////////////////////////
+
+//@param {Element} container
+//@param {number=} segments
+AudioUnit.GUI.Bar = function(container, segments){
+	//extend GUI
+	AudioUnit.GUI.call(this);
+
+	//vars
+	this.element = this.createElement();
+	this.segmentCount = this.defaultArg(segments, 10);
+	this.segments = new Array(this.segmentCount);
+	this.label = this.createElement();
+
+	//create the segments
+	for (var i = 0; i < this.segmentCount; i++){
+		var segment = this.createElement();
+		if (i === 0){
+			this.setClass(segment, "segment peak");
+		} else if (i < this.segmentCount * .3){
+			this.setClass(segment, "segment high");
+		} else {
+			this.setClass(segment, "segment normal");
+		}
+		this.appendChild(this.element, segment);
+		this.segments[this.segmentCount - i - 1] = segment;
+	}
+
+	this.setClass(this.element, "bar");
+	this.setClass(this.label, "label");
+	//add it to the container
+	this.appendChild(container, this.element);
+	this.appendChild(this.element, this.label);
+}
+
+AudioUnit.extend(AudioUnit.GUI.Bar, AudioUnit.GUI);
+
+//@param {number} val (0-1)
+AudioUnit.GUI.Bar.prototype.setLevel = function(val){
+	val *= this.segmentCount;
+	for (var i = 0; i < this.segmentCount; i++){
+		var seg = this.segments[i];
+		seg.style.opacity = Math.max(Math.min(val - i, 1), 0);
+	}
+}
+
+//@param {string} str
+AudioUnit.GUI.Bar.prototype.setLabel = function(str){
+	this.label.textContent = str;
+}
\ No newline at end of file
diff --git a/src/GUI/GUI.Bars.js b/src/GUI/GUI.Bars.js
deleted file mode 100644
index ad95262e..00000000
--- a/src/GUI/GUI.Bars.js
+++ /dev/null
@@ -1,37 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-//
-//	BARS
-//
-// 	bars for meters and other UI elements
-///////////////////////////////////////////////////////////////////////////////
-
-//@param {Element} container
-//@param {number=} segments
-AudioUnit.GUI.Bars = function(container, segments){
-	//extend GUI
-	AudioUnit.GUI.call(this);
-
-	//vars
-	this.element = document.createElement("div");
-	this.segmentCount = this.defaultArg(segments, 10);
-	this.segments = new Array(this.segmentCount);
-
-	//create the segments
-	for (var i = 0; i < this.segmentCount; i++){
-		var segment = document.createElement("div");
-		if (i === 0){
-			segment.className = "segment peak";
-		} else if (i < this.segmentCount * .3){
-			segment.className = "segment high";
-		} else {
-			segment.className = "segment normal";
-		}
-		this.element.appendChild(segment);
-		this.segments[i] = segment;
-	}
-	this.element.className = "bar";
-	//add it to the container
-	container.appendChild(this.element);
-}
-
-AudioUnit.extend(AudioUnit.GUI.Bars, AudioUnit.GUI);
\ No newline at end of file
diff --git a/src/GUI/GUI.Fader.js b/src/GUI/GUI.Fader.js
new file mode 100644
index 00000000..f3330ad7
--- /dev/null
+++ b/src/GUI/GUI.Fader.js
@@ -0,0 +1,134 @@
+///////////////////////////////////////////////////////////////////////////////
+//
+//	FADER
+//
+///////////////////////////////////////////////////////////////////////////////
+
+AudioUnit.GUI.Fader = function(container, minOutput, maxOutput, label, segments){
+	//extend GUI
+	AudioUnit.GUI.call(this);
+
+	//components
+	this.element = this.createElement();
+	this.track = this.createElement();
+	this.slider = this.createElement("input");
+	this.slider.type = "range";
+	this.textInput = this.createElement("input");
+	this.textInput.type = "text";
+	
+	this.isDragging = false;
+
+	this.min = this.defaultArg(minOutput, 0);
+	this.max = this.defaultArg(maxOutput, 1);
+	this.scaling = "log";
+	
+	this.bars = new AudioUnit.GUI.Bar(this.track, segments);
+
+	//set it
+	this.setClass(this.element, "fader");
+	this.setClass(this.track, "track");
+	this.setClass(this.slider, "slider");
+	this.setClass(this.textInput, "label");
+	this.appendChild(container, this.element);
+	this.appendChild(this.element, this.track);
+	this.appendChild(this.track, this.slider);
+	this.appendChild(this.element, this.textInput);
+	
+	// this.onAnimationFrame(this.followValue, this);
+	this._setupEvents();
+	this.setLevel(this.min);
+}
+
+AudioUnit.extend(AudioUnit.GUI.Fader, AudioUnit.GUI);
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype.onchange = function(){};
+
+
+//set the level of the 
+AudioUnit.GUI.Fader.prototype.setLevel = function(level){
+	this._setText(level);
+	this._setSlider(level);
+};
+
+///////////////////////////////////////////////////////////////////////////////
+//	SCALING VALUES
+///////////////////////////////////////////////////////////////////////////////
+
+AudioUnit.GUI.Fader.prototype._onchangeText = function(e){
+	var val = parseFloat(this.textInput.value);
+	this.setLevel(val);
+}
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype._onchangeSlider = function(){
+	var scaledVal = this._scale(this.slider.value / 100)
+	var val = this.interpolate(scaledVal, this.min, this.max);
+	this.setLevel(val);
+};
+
+
+//@param {number} val 
+AudioUnit.GUI.Fader.prototype._setText = function(val){
+	if (val < 10){
+		this.textInput.value = val.toFixed(3);
+	} else if (val < 100){
+		this.textInput.value = val.toFixed(2);
+	} else {
+		this.textInput.value = parseInt(val, 10);
+	}
+	this.onchange(val);
+}
+
+AudioUnit.GUI.Fader.prototype._setSlider = function(val){
+	//scale it to the slider range
+	var normed = this.normalize(val, this.min, this.max);
+	var scaled = this._inverseScale(normed);
+	this.slider.value = scaled * 100;
+	this.bars.setLevel(scaled);
+}
+
+
+//input a value between 0-1
+AudioUnit.GUI.Fader.prototype._inverseScale = function(x){
+	switch(this.scaling){
+		case "lin" : 
+			return parseFloat(x);
+		case "log" : 
+			return this.gainToLogScale(x);
+		case "exp" : 
+			return this.gainToPowScale(x);
+	}
+}
+
+//input a value between 0-1
+AudioUnit.GUI.Fader.prototype._scale = function(x){
+	switch(this.scaling){
+		case "lin" : 
+			return parseFloat(x);
+		case "log" : 
+			return this.gainToPowScale(x);
+		case "exp" : 
+			return this.gainToLogScale(x);
+	}		
+}
+
+///////////////////////////////////////////////////////////////////////////////
+//	INTERACTIONS
+///////////////////////////////////////////////////////////////////////////////
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype._setupEvents = function(){
+	this.textInput.onchange = this._onchangeText.bind(this);
+	this.slider.onchange = this._onchangeSlider.bind(this);
+	this.slider.onmousedown = this._mousedown.bind(this);
+	this.slider.onmouseup = this._mouseup.bind(this);
+};
+
+AudioUnit.GUI.Fader.prototype._mousedown = function(e){
+	this.isDragging = true;
+}
+
+AudioUnit.GUI.Fader.prototype._mouseup = function(e){
+	this.isDragging = false;
+}
\ No newline at end of file
diff --git a/src/GUI/GUI.LinFader.js b/src/GUI/GUI.LinFader.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/GUI/GUI.LogFader.js b/src/GUI/GUI.LogFader.js
new file mode 100644
index 00000000..68681789
--- /dev/null
+++ b/src/GUI/GUI.LogFader.js
@@ -0,0 +1,119 @@
+
+
+AudioUnit.GUI.ParamFader = function(container, connectTo, minOutput, maxOutput, label, scaling, segments){
+	//extend GUI
+	AudioUnit.GUI.call(this);
+
+	//components
+	this.element = this.createElement();
+	this.track = this.createElement();
+	this.slider = this.createElement("input");
+	this.slider.type = "range";
+	this.textInput = this.createElement("input");
+	this.textInput.type = "text";
+	this.watch = connectTo;
+	if (connectTo.output && connectTo.output.gain instanceof AudioParam){
+		this.watch = connectTo.output.gain;
+	}
+	this.isDragging = false;
+	this.min = this.defaultArg(minOutput, 0);
+	this.max = this.defaultArg(maxOutput, 1);
+	this.scaling = this.defaultArg(scaling, "log");
+	
+	this.bars = new AudioUnit.GUI.Bar(this.track, segments);
+
+	//set it
+	this.setClass(this.element, "fader");
+	this.setClass(this.track, "track");
+	this.setClass(this.slider, "slider");
+	this.setClass(this.textInput, "label");
+	this.appendChild(container, this.element);
+	this.appendChild(this.element, this.track);
+	this.appendChild(this.track, this.slider);
+	this.appendChild(this.element, this.textInput);
+	this.onAnimationFrame(this.followValue, this);
+
+	this._setupEvents();
+
+	this._setInitial();
+}
+
+AudioUnit.extend(AudioUnit.GUI.Fader, AudioUnit.GUI);
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype.onchange = function(){};
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype._onchange = function(){
+	var val = this.slider.value / 100;
+	this.bars.setLevel(val);
+	var scaled = this.interpolate(this._scale(val), this.min, this.max);
+	this.textInput.value = scaled.toFixed(3);
+	this.watch.value = scaled;
+	this.onchange(scaled);
+};
+
+AudioUnit.GUI.Fader.prototype._onchangeText = function(e){
+	var val = parseFloat(this.textInput.value);
+	this.slider.value = this._inverseScale(this.normalize(val, this.min, this.max)) * 100;
+	this._onchange();
+}
+
+//called 60fps
+AudioUnit.GUI.Fader.prototype.followValue = function(){
+	if (!this.isDragging){
+		var normalized = this._inverseScale(this.normalize(this.watch.value, this.min, this.max)) * 100;
+		if (normalized !== this.slider.value){
+			this.slider.value = normalized;
+		}
+	}
+}
+
+//sets the initial values
+AudioUnit.GUI.Fader.prototype._setInitial = function(){
+	var val = this.watch.value;
+	this.slider.value = this._inverseScale(this.normalize(val, this.min, this.max)) * 100;
+	this.textInput.value = val.toFixed(3);
+	this.bars.setLevel(this.slider.value / 100);
+}
+
+
+//input a value between 0-1
+AudioUnit.GUI.Fader.prototype._inverseScale = function(x){
+	switch(this.scaling){
+		case "lin" : 
+			return parseFloat(x);
+		case "log" : 
+			return this.gainToLogScale(x);
+		case "exp" : 
+			return this.gainToPowScale(x);
+	}
+}
+
+//input a value between 0-1
+AudioUnit.GUI.Fader.prototype._scale = function(x){
+	switch(this.scaling){
+		case "lin" : 
+			return parseFloat(x);
+		case "log" : 
+			return this.gainToPowScale(x);
+		case "exp" : 
+			return this.gainToLogScale(x);
+	}		
+}
+
+//called when the value has changed
+AudioUnit.GUI.Fader.prototype._setupEvents = function(){
+	this.textInput.onchange = this._onchangeText.bind(this);
+	this.slider.onchange = this._onchange.bind(this);
+	this.slider.onmousedown = this._mousedown.bind(this);
+	this.slider.onmouseup = this._mouseup.bind(this);
+};
+
+AudioUnit.GUI.Fader.prototype._mousedown = function(e){
+	this.isDragging = true;
+}
+
+AudioUnit.GUI.Fader.prototype._mouseup = function(e){
+	this.isDragging = false;
+}
\ No newline at end of file
diff --git a/src/GUI/GUI.Meter.js b/src/GUI/GUI.Meter.js
index e69de29b..ac327dcc 100644
--- a/src/GUI/GUI.Meter.js
+++ b/src/GUI/GUI.Meter.js
@@ -0,0 +1,55 @@
+
+//@param {Element} container
+//@param {AudioUnit.Meter} meter
+//@param {string=} label
+//@param {number=} segments
+AudioUnit.GUI.Meter = function(container, meter, label, segments){
+	AudioUnit.GUI.call(this);
+
+	//components
+	this.meter = meter;
+	this.element = this.createElement();
+	this.bars = new Array(this.meter.channels);
+	this.label = this.createElement();
+
+	//add the bars
+	for (var i = 0; i < this.meter.channels; i++){
+		var bar = new AudioUnit.GUI.Bar(this.element, segments);
+		this.bars[i] = bar;
+	}
+
+	//set it up
+	this.setClass(this.element, "meter");
+	this.setClass(this.label, "label");
+	this.setLabel(this.defaultArg(label, ""));
+	this.onAnimationFrame(this.update, this);
+	this.onSlowUpdate(this.labelUpdate, this);
+	this.appendChild(container, this.element);
+	this.appendChild(this.element, this.label);
+}
+
+AudioUnit.extend(AudioUnit.GUI.Meter, AudioUnit.GUI);
+
+AudioUnit.GUI.Meter.prototype.update = function(){
+	for (var channel = 0, channelCount = this.meter.channels; channel < channelCount; channel++){
+		var volume = this.meter.getLevel(channel);
+		this.bars[channel].setLevel(this.gainToLogScale(volume));
+	}
+}
+
+AudioUnit.GUI.Meter.prototype.labelUpdate = function(){
+	for (var channel = 0, channelCount = this.meter.channels; channel < channelCount; channel++){
+		var db = this.meter.getDb(channel);
+		if (db < -100){
+			db = "-inf"
+		} else {
+			db = db.toFixed(1);
+		}
+		this.bars[channel].setLabel(db);
+	}
+}
+
+//@param {string} str
+AudioUnit.GUI.Meter.prototype.setLabel = function(str){
+	this.label.textContent = str;
+}
\ No newline at end of file
diff --git a/src/GUI/GUI.js b/src/GUI/GUI.js
index a74e005b..27122de1 100644
--- a/src/GUI/GUI.js
+++ b/src/GUI/GUI.js
@@ -47,12 +47,15 @@ window.requestAnimFrame = (function(){
 
 	function doSlowUpdate(){
 		setTimeout(doSlowUpdate, 250);
+		for (var i = 0; i < _onSlowUpdateCallbacks.length; i++){
+			var cback = _onSlowUpdateCallbacks[i];
+			cback.callback.call(cback.context);
+		}
 	}
 	doSlowUpdate();
 
 	function doFastUpdate(){
 		global.requestAnimFrame(doFastUpdate);
-		//remove from the updates
 		for (var i = 0; i < _onFastUpdateCallbacks.length; i++){
 			var cback = _onFastUpdateCallbacks[i];
 			cback.callback.call(cback.context);
@@ -74,7 +77,7 @@ window.requestAnimFrame = (function(){
 			context : this.defaultArg(ctx, global),
 			id : id
 		}
-		_onFastUpdate.push(callback);
+		_onFastUpdateCallbacks.push(callbackObj);
 	}
 
 	//callback gets envoked at 60fps
@@ -87,7 +90,7 @@ window.requestAnimFrame = (function(){
 			context : this.defaultArg(ctx, global),
 			id : id
 		}
-		_onSlowUpdateCallbacks.push(callback);
+		_onSlowUpdateCallbacks.push(callbackObj);
 	}
 
 	AudioUnit.GUI.prototype.remove = function(){
@@ -122,6 +125,36 @@ window.requestAnimFrame = (function(){
 		}
 	}
 
+	//@param {Element} container
+	//@param {Element} element
+	AudioUnit.GUI.prototype.appendChild = function(container, element){
+		this._getElement(container).appendChild(this._getElement(element));
+	}
+
+	//@param {string=} type
+	AudioUnit.GUI.prototype.createElement = function(type){
+		type = this.defaultArg(type, "div");
+		return document.createElement(type);
+	}
+
+	//@param {Element} element
+	//@param {Element} unwraps jquery if necessary
+	AudioUnit.GUI.prototype._getElement = function(el){
+		if (typeof jQuery !== 'undefined' && el instanceof jQuery){
+			return el[0];
+		} else if (el.element && meterGui.element instanceof HTMLElement){
+			return el.element
+		} else {
+			return el;
+		}
+	}
+
+	//@param {Element} element
+	//@param {string} className
+	AudioUnit.GUI.prototype.setClass = function(element, className){
+		this._getElement(element).className = className;
+	}
+
 
 	///////////////////////////////////////////////////////////////////////////
 	//	BORROW SOME METHODS
@@ -131,6 +164,10 @@ window.requestAnimFrame = (function(){
 	AudioUnit.GUI.prototype.equalPowerGain = AudioUnit.prototype.equalPowerGain;
 	AudioUnit.GUI.prototype.dbToGain = AudioUnit.prototype.dbToGain;
 	AudioUnit.GUI.prototype.gainToDb = AudioUnit.prototype.gainToDb;
+	AudioUnit.GUI.prototype.gainToLogScale = AudioUnit.prototype.gainToLogScale;
+	AudioUnit.GUI.prototype.gainToPowScale = AudioUnit.prototype.gainToPowScale;
+	AudioUnit.GUI.prototype.interpolate = AudioUnit.prototype.interpolate;
+	AudioUnit.GUI.prototype.normalize = AudioUnit.prototype.normalize;
 
 
 	//give it to the window
diff --git a/src/components/Meter.js b/src/components/Meter.js
index db1984bf..9c6099a7 100644
--- a/src/components/Meter.js
+++ b/src/components/Meter.js
@@ -28,7 +28,7 @@ AudioUnit.Meter = function(channels){
 	//signal just passes
 	this.input.connect(this.output);
 	this.input.connect(this.jsNode);
-	this.toSpeakers(this.jsNode);
+	this.toMaster(this.jsNode);
 }
 
 AudioUnit.extend(AudioUnit.Meter, AudioUnit);
@@ -36,7 +36,7 @@ AudioUnit.extend(AudioUnit.Meter, AudioUnit);
 
 //@param {number=} channel
 //@returns {number}
-AudioUnit.Meter.prototype.getVolume = function(channel){
+AudioUnit.Meter.prototype.getLevel = function(channel){
 	channel = this.defaultArg(channel, 0);
 	var vol = this.volume[channel];
 	if (vol < .001){
@@ -49,7 +49,7 @@ AudioUnit.Meter.prototype.getVolume = function(channel){
 //@param {number=} channel
 //@returns {number} the channel volume in decibels
 AudioUnit.Meter.prototype.getDb = function(channel){
-	return this.gainToDb(this.getVolume(channel));
+	return this.gainToDb(this.getLevel(channel));
 }
 
 // @returns {boolean} if the audio has clipped in the last 500ms
diff --git a/src/core/AudioUnit.js b/src/core/AudioUnit.js
index 377ec478..73643b4b 100644
--- a/src/core/AudioUnit.js
+++ b/src/core/AudioUnit.js
@@ -71,11 +71,22 @@
 
 	//@param {AudioParam | AudioUnit} unit
 	AudioUnit.prototype.connect = function(unit){
-		if (unit.input && unit.input instanceof GainNode){
-			this.output.connect(unit.input);
-		} else {
-			this.output.connect(unit);
+		this._connect(this, unit);
+	}
+
+	//@private internal connect
+	//@param {AudioNode | AudioUnit} from
+	//@param {AudioNode | AudioUnit} to
+	AudioUnit.prototype._connect = function(A, B){
+		var compA = A;
+		if (A.output && A.output instanceof GainNode){
+			compA = A.output;
 		}
+		var compB = B;
+		if (B.input && B.input instanceof GainNode){
+			compB = B.input;
+		} 
+		compA.connect(compB);
 	}
 	
 	//connect together an array of units in series
@@ -85,11 +96,7 @@
 			var currentUnit = arguments[0];
 			for (var i = 1; i < arguments.length; i++){
 				var toUnit = arguments[i];
-				if (toUnit.input && toUnit.input instanceof GainNode){
-					currentUnit.connect(toUnit.input);
-				} else {
-					currentUnit.connect(toUnit);
-				}
+				this._connect(currentUnit, toUnit);
 				currentUnit = toUnit;
 			}
 		}
@@ -168,12 +175,43 @@
 		return  20 * (Math.log(gain) / Math.LN10);
 	}
 
-	//@param {AudioParam|AudioUnit=} unit
-	AudioUnit.prototype.toSpeakers = function(unit){
-		unit = this.defaultArg(unit, this.output);
-		unit.connect(audioContext.destination);
+	//@param {number} gain
+	//@returns {number} gain (decibel scale but betwee 0-1)
+	AudioUnit.prototype.gainToLogScale = function(gain) {
+		return  Math.max(this.normalize(this.gainToDb(gain), -60, 0), 0);
 	}
 
+	//@param {number} gain
+	//@returns {number} gain (decibel scale but betwee 0-1)
+	AudioUnit.prototype.gainToPowScale = function(gain) {
+		return this.dbToGain(this.interpolate(gain, -60, 0));
+	}
+
+	//@param {number} input 0-1
+	AudioUnit.prototype.interpolate = function(input, outputMin, outputMax){
+		return input*(outputMax - outputMin) + outputMin;
+	}
+
+	//@returns {number} 0-1
+	AudioUnit.prototype.normalize = function(input, inputMin, inputMax){
+		//make sure that min < max
+		if (inputMin > inputMax){
+			var tmp = inputMax;
+			inputMax = inputMin;
+			inputMin = tmp;
+		} else if (inputMin == inputMax){
+			return 0;
+		}
+		return (input - inputMin) / (inputMax - inputMin);
+	}
+
+	//@param {AudioParam|AudioUnit=} unit
+	AudioUnit.prototype.toMaster = function(unit){
+		unit = this.defaultArg(unit, this.output);
+		this._connect(unit, AudioUnit.Master);
+	}
+
+
 	///////////////////////////////////////////////////////////////////////////
 	//	STATIC METHODS
 	///////////////////////////////////////////////////////////////////////////
@@ -184,19 +222,6 @@
 		A.prototype.constructor = A;
 	}
 
-	AudioUnit.muteAll = function(){
-
-	}
-
-	AudioUnit.unmuteAll = function(){
-
-	}
-
-
-	AudioUnit.setGlobalVolume = function(){
-		
-	}
-
 	//make it global
 	global.AudioUnit = AudioUnit;
 
diff --git a/src/core/Master.js b/src/core/Master.js
new file mode 100644
index 00000000..66899130
--- /dev/null
+++ b/src/core/Master.js
@@ -0,0 +1,17 @@
+(function(){
+	///////////////////////////////////////////////////////////////////////////
+	//	MASTER OUTPUT
+	///////////////////////////////////////////////////////////////////////////
+
+	var Master = function(){
+		//extend audio unit
+		AudioUnit.call(this);
+
+		this.input.connect(this.output);
+		this.output.connect(this.context.destination);
+	}
+
+	AudioUnit.extend(Master, AudioUnit);
+
+	AudioUnit.Master = new Master();
+})();
\ No newline at end of file
diff --git a/style/.sass-cache/94addee548438c16ebb6101835ce44ecde2da331/GUI.scssc b/style/.sass-cache/94addee548438c16ebb6101835ce44ecde2da331/GUI.scssc
index 247aa81f8573795380bad36435443f230a7cb91f..b4cbeeb3bf814eba7efbfd8edadead736d3284f9 100644
GIT binary patch
literal 9417
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

literal 3322
zcmbtW%W~T`6m>csnWQAUR{W@)I;9!6wP#`tWw%xXY}iScO{NohveCi=k&uL%Bvg{B
z?RvWDk7V7i$fx8(+C?uwkRnCN<4jhffO~**56;EKS^KozvCX4b)MLbaMWU-?W7zF<
z&(BYXv`c>+oOZr{(RJMp?RJ0YkTZJby>MyACIj!x_*~;?w@2a_p^J!8gx+wTyyhM?
z(3+FbVB(X6TA%&<$O+gD3(X`VVayW7!=FO$f(7*Ga1!wejgs5v=3xQ@$9IN)a!m(U
zEIFA)BQuXn!%UxrltkDxAw1xJJ~);?H1c7a|795M0f|gtZDil=n2rJ(CSvfKdC3@=
zXZGX<8~T{C(Ktcox%?N9XvD&k0Z$ShAoElX@(FQSa*IqG;vE*c{?wxjbW?H9&9>b+
zkB@O>_x6O6D?wpE+^bQ<r=fS^a-T=YjHtIDehl0e$8$Kf5nTWYc@z+TF=zyS2n7b5
z;EtK^MKtW!IodDU<&|*7&vYm((?Et3l7L#<GwGE}@M>S5Gup3Un+%nZLCjXL-mh6Z
zRqp_J1=XEDh(Dzq?WEiH+=xvQgnnUhqT@y%eEg(5^Oi)641B7iZ3ncYQS5RM?ov{0
zX0FA$m4BnA!zaSq@!bmKA{@$AIbPH8x}^(mLvZ^0g|mq_U@ohjj7=|zSUA!FoZL<*
zT4x^Ehz%KyaKoxA%PTNezi8cw>4Zciful8Iun*0rHXOn8GQJHHa)Y#xUUO_Ta9xSD
zIafJCDcs<=nJSVp&(kZWs&>%s$qwdPI)02dE7Y|NjkoZ2{=I|0ERk!S6ifA^sp<Dn
zgSjQtbVWxmP}A`|we^`nKbn_u4=<Qo!pl&+i~=u1@KWP7)N;lozRU{k0t_FE%hv`k
z!8H^2SNp<>8d!1Zf!cXU#jSR3RdvlzeJZO@dP&#@+z4AmFb-9yi#rh<-UM1;%^1o?
z%)}g7s>rBMU13=Ck_Q3l(ch;ubg2e+#gO?_*4T<%py>oO7(n&)Yx&*L%h4IIh7ZL2
zv-#C~3|bJ)q710ecslqEwzje9yb*u-G;#$otw)m@WB@9T@8s6$l6&(@zVxBpY4Wns
zM3%6QAc}V{IQ}ZFt<^r9WTDOs*#$DIv@}%}y6g&~jMGwXRg6|o8%71Gi3TzQKCS>;
zrQTA-i(WIsZ&vUP)m|#dnq9zcNgPrVrOuEydTI@Q@lBq3WzD&wx7R%K;Iah$w(*{g
zp9lly6_9gC)!EK1nBA7Ir@|O@wB>};fXWN-avHJ(tYXz-+!!`((HvL)`A={LYw?Id
z!zI2|mlLtr7wtH3$?^ck!H)_rDdK%trzN|4*3kj5fuC~xwT4Yg(B6<H!ItnJaDQgt
zL*cAPf8%dB{<em{lgX*5qmpYN2JjEWG}MzKU0dv1vRkcWx2^e(UpYlhyZ~nBzbDR7
z{ue3llv0+@2w=Kf%6oT7-tS6ztEjoW--*=<c~>!@q{0;QRyZ}Ii|37yLk@qM9Ch`;
znJM!0K1IYs33AvkDYCyrk@qD<RMeaz@5O2bMXH#^iYQ#Bh~x!|$l*^@#7JLnGeNA9
zAiHIYq|ZP|;-DnS!4gS6lq6A6bCP@zs}&@vVirrHaB8)>Vg{nf2@plve1p~C^M8U9
Bd`<uW

diff --git a/style/GUI.css b/style/GUI.css
index 8fd0dabe..8786d5da 100644
--- a/style/GUI.css
+++ b/style/GUI.css
@@ -1,12 +1,20 @@
+.label {
+  font-family: monospace;
+  text-align: center;
+  width: 100%; }
+
+/*=============================================================================
+	BAR
+=============================================================================*/
+.bar {
+  pointer-events: none; }
+
 .bar .segment {
   width: 30px;
   height: 6px;
-  margin-bottom: 2px;
-  opacity: 0;
-  -webkit-transition: opacity 0.016s linear;
-  -moz-transition: opacity 0.016s linear;
-  -o-transition: opacity 0.016s linear;
-  transition: opacity 0.016s linear; }
+  margin: 2px;
+  opacity: 1;
+  /*@include transitionAndTime(opacity, .016s);*/ }
 
 .bar .segment.peak {
   background-color: red; }
@@ -16,3 +24,56 @@
 
 .bar .segment.normal {
   background-color: green; }
+
+.meter .bar .label {
+  font-size: 10px; }
+
+/*=============================================================================
+	METER
+=============================================================================*/
+.meter {
+  display: table;
+  border: 1px solid black;
+  border-radius: 3px; }
+
+.meter .label {
+  clear: both;
+  font-size: 15px; }
+
+.meter .bar {
+  position: relative;
+  float: left; }
+
+/*=============================================================================
+	FADER
+=============================================================================*/
+.fader {
+  width: 40px;
+  display: table;
+  border: 1px solid black;
+  border-radius: 3px; }
+
+.fader .track {
+  position: relative;
+  width: auto;
+  height: auto;
+  margin: 0px; }
+
+.fader .slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  top: 0px;
+  left: 0px;
+  -webkit-appearance: slider-vertical; }
+
+.fader input.label {
+  padding: 0px;
+  border: 0px;
+  font-size: 10px;
+  height: 15px; }
+
+.fader .bar .segment {
+  width: 40px;
+  background-color: black; }
diff --git a/style/GUI.scss b/style/GUI.scss
index e874c4e9..10fee2a0 100644
--- a/style/GUI.scss
+++ b/style/GUI.scss
@@ -1,3 +1,5 @@
+$fastUpdateTime : .1s;
+
 @mixin transitionAndTime($property, $time){
 	-webkit-transition: $property $time linear;  
 	-moz-transition: $property $time linear;  
@@ -5,16 +7,33 @@
 	transition: $property $time linear;  
 }
 
+$unitWidth : 30px;
+
+@mixin borderStyle{
+	border: 1px solid black;
+	border-radius: 3px;
+}
+
+.label {
+	font-family: monospace;
+	text-align: center;	
+	width: 100%;
+}
+
+/*=============================================================================
+	BAR
+=============================================================================*/
+
 .bar {
-	
+	pointer-events: none;
 }
 
 .bar .segment {
-	width: 30px;
+	width: $unitWidth;
 	height: 6px;
-	margin-bottom: 2px;
-	opacity: 0;
-	@include transitionAndTime(opacity, .016s);
+	margin: 2px;
+	opacity: 1;
+	/*@include transitionAndTime(opacity, .016s);*/
 }
 
 .bar .segment.peak {
@@ -28,3 +47,68 @@
 .bar .segment.normal {
 	background-color: green;
 }
+
+.meter .bar .label {
+	font-size: 10px;
+}
+
+/*=============================================================================
+	METER
+=============================================================================*/
+
+.meter {
+	display: table;
+	@include borderStyle;
+}
+
+.meter .label {
+	clear: both;
+	font-size: 15px;
+}
+
+.meter .bar {
+	position: relative;
+	float: left;
+}
+
+/*=============================================================================
+	FADER
+=============================================================================*/
+
+$faderWidth: 40px;
+
+.fader {
+	width: $faderWidth;
+	display: table;
+	@include borderStyle;
+}
+
+.fader .track {
+	position: relative;
+	width: auto;
+	height: auto;
+	margin: 0px;
+}
+
+.fader .slider {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	top: 0px;
+	left: 0px;
+	 -webkit-appearance: slider-vertical;
+}
+
+.fader input.label {
+	padding: 0px;
+	border: 0px;
+	font-size: 10px;
+	height: 15px;
+}
+
+.fader .bar .segment {
+	width: $faderWidth;
+	background-color: black;
+}
+
