Mercurial > hg > webaudioevaluationtool

changeset 1338:6cd9c2bce083

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Interfaces properly handle outside reference objects. Better core.js comment box handling. InterfaceDOM return their presented ID rather than assumed index.
author Nicholas Jillings <nickjillings@users.noreply.github.com>
date Tue, 12 Jan 2016 17:10:39 +0000
parents f85abec24c58
children 259a0cb6e805
files AB.js ape.js core.js mushra.css mushra.js
diffstat 5 files changed, 81 insertions(+), 79 deletions(-) [+]
line wrap: on
line diff
--- a/AB.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/AB.js	Tue Jan 12 17:10:39 2016 +0000
@@ -203,6 +203,10 @@
 		this.getValue = function() {
 			return this.value;	
 		};
+		this.getPresentedId = function()
+	{
+		return this.selector.children[0].textContent;
+	};
 	};
 	
 	this.boxHolders = document.getElementById('box-holders');
--- a/ape.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/ape.js	Tue Jan 12 17:10:39 2016 +0000
@@ -346,12 +346,13 @@
 			outsideReferenceHolderspan = document.createElement('span');
 			outsideReferenceHolderspan.textContent = 'Reference';
 			outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
+			outsideReferenceHolder.setAttribute('track-id',index);
 			
 			var audioObject = audioEngineContext.newTrack(element);
 			
 			outsideReferenceHolder.onclick = function(event)
 			{
-				audioEngineContext.play(audioEngineContext.audioObjects.length-1);
+				audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
 				$('.track-slider').removeClass('track-slider-playing');
 	            $('.comment-div').removeClass('comment-box-playing');
 	            if (event.currentTarget.nodeName == 'DIV') {
@@ -362,17 +363,17 @@
 			};
 			
 			document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
-			return;
+		} else {
+		
+			// Now load each audio sample. First create the new track by passing the full URL
+			var trackURL = audioHolderObject.hostURL + element.url;
+			var audioObject = audioEngineContext.newTrack(element);
+			
+			var node = interfaceContext.createCommentBox(audioObject);
+			// Create a slider per track
+			var sliderNode = new sliderObject(audioObject,interfaceObj);
+			audioObject.bindInterface(sliderNode);
 		}
-		
-		// Now load each audio sample. First create the new track by passing the full URL
-		var trackURL = audioHolderObject.hostURL + element.url;
-		var audioObject = audioEngineContext.newTrack(element);
-		
-		var node = interfaceContext.createCommentBox(audioObject);
-		// Create a slider per track
-		var sliderNode = new sliderObject(audioObject,interfaceObj);
-		audioObject.bindInterface(sliderNode);
 	});
 	
 	// Initialse the interfaceSlider object metrics
@@ -549,7 +550,6 @@
 		trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id;
 		trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id;
 		trackObj.setAttribute('trackIndex',audioObject.id);
-		trackObj.innerHTML = '<span>'+audioObject.id+'</span>';
 		if (this.name != undefined) {
 			trackObj.setAttribute('interface-name',this.name);
 		} else {
@@ -564,6 +564,7 @@
 		this.canvas.appendChild(trackObj);
 		this.sliders.push(trackObj);
 		this.metrics.push(new metricTracker(this));
+		trackObj.innerHTML = '<span>'+(this.metrics.length-1)+'</span>';
 		this.metrics[this.metrics.length-1].initialise(convSliderPosToRate(trackObj));
 		return trackObj;
 	};
@@ -647,6 +648,10 @@
 	this.getValue = function() {
 		return convSliderPosToRate(this.trackSliderObjects[0]);
 	};
+	this.getPresentedId = function()
+	{
+		return this.trackSliderObjects[0].children[0].textContent;
+	};
 }
 
 function buttonSubmitClick()
--- a/core.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/core.js	Tue Jan 12 17:10:39 2016 +0000
@@ -1146,8 +1146,6 @@
 			this.interfaceDOM.enable();
 		}
 		this.onplayGain = decibelToLinear(this.specification.gain)*this.buffer.buffer.playbackGain;
-		
-		this.storeDOM.setAttribute('presentedId',this.id);
 		this.storeDOM.setAttribute('playGain',linearToDecibel(this.onplayGain));
 	};
 	
@@ -1159,6 +1157,7 @@
 		{
 			this.interfaceDOM.enable();
 		}
+		this.storeDOM.setAttribute('presentedId',interfaceObject.getPresentedId());
 	};
     
 	this.loopStart = function() {
@@ -2543,18 +2542,13 @@
 	};
 	
 	this.sortCommentBoxes = function() {
-		var holder = [];
-		while (this.commentBoxes.length > 0) {
-			var node = this.commentBoxes.pop(0);
-			holder[node.id] = node;
-		}
-		this.commentBoxes = holder;
+		this.commentBoxes.sort(function(a,b){return a.id - b.id;});
 	};
 	
 	this.showCommentBoxes = function(inject, sort) {
 		if (sort) {interfaceContext.sortCommentBoxes();}
-		for (var i=0; i<interfaceContext.commentBoxes.length; i++) {
-			inject.appendChild(this.commentBoxes[i].trackComment);
+		for (var box of interfaceContext.commentBoxes) {
+			inject.appendChild(box.trackComment);
 		}
 	};
 	
--- a/mushra.css	Tue Jan 12 14:58:22 2016 +0000
+++ b/mushra.css	Tue Jan 12 17:10:39 2016 +0000
@@ -10,7 +10,7 @@
 div.pageTitle {
 	width: auto;
 	height: 20px;
-	margin-top: 20px;
+	margin: 10px 0px;
 }
 
 div.pageTitle span{
@@ -73,13 +73,11 @@
 	margin-left: 50px;
 }
 
-div.outside-reference {
+button.outside-reference {
 	width:120px;
-	padding-left: 55px;
-	margin-left: 100px;
 	height:20px;
 	margin-bottom:5px;
-	background-color: rgb(100,200,100);
+	position: absolute;
 }
 
 div.track-slider-playing {
--- a/mushra.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/mushra.js	Tue Jan 12 17:10:39 2016 +0000
@@ -151,68 +151,57 @@
 	});
 	
 	// Find all the audioElements from the audioHolder
+	var label = 0;
 	$(audioHolderObject.audioElements).each(function(index,element){
 		// Find URL of track
 		// In this jQuery loop, variable 'this' holds the current audioElement.
 		
-		// Check if an outside reference
-		if (index == audioHolderObject.outsideReference)
+		var audioObject = audioEngineContext.newTrack(element);
+		if (element.type == 'outside-reference')
 		{
-			return;
+			var outsideReferenceHolder = document.createElement('button');
+			outsideReferenceHolder.id = 'outside-reference';
+			outsideReferenceHolder.className = 'outside-reference';
+			outsideReferenceHolder.setAttribute('track-id',index);
+			outsideReferenceHolder.textContent = "Play Reference";
+			
+			var audioObject = audioEngineContext.newTrack(element);
+			
+			outsideReferenceHolder.onclick = function(event)
+			{
+				audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
+				$('.track-slider').removeClass('track-slider-playing');
+	            $('.comment-div').removeClass('comment-box-playing');
+	            $(event.currentTarget).addClass('track-slider-playing');
+			};
+			
+			document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
+		} else {
+			var node = interfaceContext.createCommentBox(audioObject);
+		
+			// Create a slider per track
+			audioObject.bindInterface(new sliderObject(audioObject,label));
+			
+			if (typeof audioHolderObject.initialPosition === "number")
+			{
+				// Set the values
+				audioObject.interfaceDOM.slider.value = audioHolderObject.initalPosition;
+			} else {
+				// Distribute it randomnly
+				audioObject.interfaceDOM.slider.value = Math.random();
+			}
+			sliderBox.appendChild(audioObject.interfaceDOM.holder);
+			audioObject.metric.initialise(audioObject.interfaceDOM.slider.value);
+			label += 1;
 		}
-		
-		var audioObject = audioEngineContext.newTrack(element);
-		
-		var node = interfaceContext.createCommentBox(audioObject);
-		
-		// Create a slider per track
-		audioObject.interfaceDOM = new sliderObject(audioObject);
-		
-		if (typeof audioHolderObject.initialPosition === "number")
-		{
-			// Set the values
-			audioObject.interfaceDOM.slider.value = audioHolderObject.initalPosition;
-		} else {
-			// Distribute it randomnly
-			audioObject.interfaceDOM.slider.value = Math.random();
-		}
-		
-		sliderBox.appendChild(audioObject.interfaceDOM.holder);
-		audioObject.metric.initialise(audioObject.interfaceDOM.slider.value);
         
 	});
 	
 	// Auto-align
 	resizeWindow(null);
-	
-	// Construct outside reference;
-	if (audioHolderObject.outsideReference != null) {
-		var outsideReferenceHolder = document.createElement('div');
-		outsideReferenceHolder.id = 'outside-reference';
-		outsideReferenceHolder.className = 'outside-reference';
-		outsideReferenceHolderspan = document.createElement('span');
-		outsideReferenceHolderspan.textContent = 'Reference';
-		outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
-		
-		var audioObject = audioEngineContext.newTrack(audioHolderObject.audioElements[audioHolderObject.outsideReference]);
-		
-		outsideReferenceHolder.onclick = function(event)
-		{
-			audioEngineContext.play(audioEngineContext.audioObjects.length-1);
-			$('.track-slider').removeClass('track-slider-playing');
-            $('.comment-div').removeClass('comment-box-playing');
-            if (event.currentTarget.nodeName == 'DIV') {
-            	$(event.currentTarget).addClass('track-slider-playing');
-            } else {
-            	$(event.currentTarget.parentElement).addClass('track-slider-playing');
-            }
-		};
-		
-		document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
-	}
 }
 
-function sliderObject(audioObject)
+function sliderObject(audioObject,label)
 {
 	// Constructs the slider object. We use the HTML5 slider object
 	this.parent = audioObject;
@@ -233,7 +222,7 @@
 	}
 	this.holder.setAttribute('trackIndex',audioObject.id);
 	
-	this.title.textContent = audioObject.id;
+	this.title.textContent = label;
 	this.title.style.width = "100%";
 	this.title.style.float = "left";
 	
@@ -303,6 +292,10 @@
 	{
 		this.enable();
 	}
+	this.getPresentedId = function()
+	{
+		return this.title.textContent;
+	};
 }
 
 function resizeWindow(event)
@@ -310,8 +303,14 @@
 	// Function called when the window has been resized.
 	// MANDATORY FUNCTION
 	
+	var outsideRef = document.getElementById('outside-reference');
+	if(outsideRef != null)
+	{
+		outsideRef.style.left = (window.innerWidth-120)/2 + 'px';
+	}
+	
 	// Auto-align
-	var numObj = audioEngineContext.audioObjects.length;
+	var numObj = document.getElementsByClassName('track-slider').length;
 	var totalWidth = (numObj-1)*150+100;
 	var diff = (window.innerWidth - totalWidth)/2;
 	document.getElementById('slider').style.height = window.innerHeight - 180 + 'px';
@@ -319,7 +318,9 @@
 	document.getElementById('slider-holder').style.marginLeft = diff + 'px';
 	for (var i in audioEngineContext.audioObjects)
 	{
-		audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
+		if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference'){
+			audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
+		}
 	}
 	document.getElementById('scale-holder').style.marginLeft = (diff-100) + 'px';
 	document.getElementById('scale-text-holder').style.height = window.innerHeight-194 + 'px';