giuliomoro@1088: /** giuliomoro@1088: * ape.js giuliomoro@1088: * Create the APE interface giuliomoro@1088: */ giuliomoro@1088: giuliomoro@1088: giuliomoro@1088: // Once this is loaded and parsed, begin execution giuliomoro@1088: loadInterface(); giuliomoro@1088: giuliomoro@1088: function loadInterface() { giuliomoro@1088: giuliomoro@1088: // Get the dimensions of the screen available to the page giuliomoro@1088: var width = window.innerWidth; giuliomoro@1088: var height = window.innerHeight; giuliomoro@1088: giuliomoro@1088: // The injection point into the HTML page giuliomoro@1088: interfaceContext.insertPoint = document.getElementById("topLevelBody"); giuliomoro@1088: var testContent = document.createElement('div'); giuliomoro@1088: giuliomoro@1088: testContent.id = 'testContent'; giuliomoro@1088: giuliomoro@1088: // Bindings for interfaceContext giuliomoro@1088: interfaceContext.checkAllPlayed = function() giuliomoro@1088: { giuliomoro@1088: hasBeenPlayed = audioEngineContext.checkAllPlayed(); giuliomoro@1088: if (hasBeenPlayed.length > 0) // if a fragment has not been played yet giuliomoro@1088: { giuliomoro@1088: str = ""; giuliomoro@1088: if (hasBeenPlayed.length > 1) { giuliomoro@1088: for (var i=0; i 1) { giuliomoro@1088: var str = ""; giuliomoro@1088: for (var i=0; i maxRanking) giuliomoro@1088: { giuliomoro@1088: maxRanking = ranking; giuliomoro@1088: } giuliomoro@1088: } giuliomoro@1088: if (minRanking > minScale || maxRanking < maxScale) giuliomoro@1088: { giuliomoro@1088: state = false; giuliomoro@1088: str += 'On axis "'+this.interfaceSliders[i].interfaceObject.title+'" you have not used the full width of the scale. '; giuliomoro@1088: } giuliomoro@1088: } giuliomoro@1088: if (state != true) giuliomoro@1088: { giuliomoro@1088: alert(str); giuliomoro@1088: console.log(str); giuliomoro@1088: } giuliomoro@1088: return state; giuliomoro@1088: }; giuliomoro@1088: giuliomoro@1088: Interface.prototype.objectSelected = null; giuliomoro@1088: Interface.prototype.objectMoved = false; giuliomoro@1088: Interface.prototype.selectObject = function(object) giuliomoro@1088: { giuliomoro@1088: if (this.objectSelected == null) giuliomoro@1088: { giuliomoro@1088: this.objectSelected = object; giuliomoro@1088: this.objectMoved = false; giuliomoro@1088: } giuliomoro@1088: }; giuliomoro@1088: Interface.prototype.moveObject = function() giuliomoro@1088: { giuliomoro@1088: if (this.objectMoved == false) giuliomoro@1088: { giuliomoro@1088: this.objectMoved = true; giuliomoro@1088: } giuliomoro@1088: }; giuliomoro@1088: Interface.prototype.releaseObject = function() giuliomoro@1088: { giuliomoro@1088: this.objectSelected = null; giuliomoro@1088: this.objectMoved = false; giuliomoro@1088: }; giuliomoro@1088: Interface.prototype.getSelectedObject = function() giuliomoro@1088: { giuliomoro@1088: return this.objectSelected; giuliomoro@1088: }; giuliomoro@1088: Interface.prototype.hasSelectedObjectMoved = function() giuliomoro@1088: { giuliomoro@1088: return this.objectMoved; giuliomoro@1088: }; giuliomoro@1088: giuliomoro@1088: // Bindings for slider interfaces giuliomoro@1088: Interface.prototype.interfaceSliders = []; giuliomoro@1088: giuliomoro@1088: // Bindings for audioObjects giuliomoro@1088: giuliomoro@1088: // Create the top div for the Title element giuliomoro@1088: var titleAttr = specification.title; giuliomoro@1088: var title = document.createElement('div'); giuliomoro@1088: title.className = "title"; giuliomoro@1088: title.align = "center"; giuliomoro@1088: var titleSpan = document.createElement('span'); giuliomoro@1088: giuliomoro@1088: // Set title to that defined in XML, else set to default giuliomoro@1088: if (titleAttr != undefined) { giuliomoro@1088: titleSpan.textContent = titleAttr; giuliomoro@1088: } else { giuliomoro@1088: titleSpan.textContent = 'Listening test'; giuliomoro@1088: } giuliomoro@1088: // Insert the titleSpan element into the title div element. giuliomoro@1088: title.appendChild(titleSpan); giuliomoro@1088: giuliomoro@1088: // Create Interface buttons! giuliomoro@1088: var interfaceButtons = document.createElement('div'); giuliomoro@1088: interfaceButtons.id = 'interface-buttons'; giuliomoro@1088: giuliomoro@1088: // Create playback start/stop points giuliomoro@1088: var playback = document.createElement("button"); giuliomoro@1088: playback.innerHTML = 'Stop'; giuliomoro@1088: playback.id = 'playback-button'; giuliomoro@1088: // onclick function. Check if it is playing or not, call the correct function in the giuliomoro@1088: // audioEngine, change the button text to reflect the next state. giuliomoro@1088: playback.onclick = function() { giuliomoro@1088: if (audioEngineContext.status == 1) { giuliomoro@1088: audioEngineContext.stop(); giuliomoro@1088: this.innerHTML = 'Stop'; giuliomoro@1088: var time = audioEngineContext.timer.getTestTime(); giuliomoro@1088: console.log('Stopped at ' + time); // DEBUG/SAFETY giuliomoro@1088: } giuliomoro@1088: }; giuliomoro@1088: // Create Submit (save) button giuliomoro@1088: var submit = document.createElement("button"); giuliomoro@1088: submit.innerHTML = 'Submit'; giuliomoro@1088: submit.onclick = buttonSubmitClick; giuliomoro@1088: submit.id = 'submit-button'; giuliomoro@1088: // Append the interface buttons into the interfaceButtons object. giuliomoro@1088: interfaceButtons.appendChild(playback); giuliomoro@1088: interfaceButtons.appendChild(submit); giuliomoro@1088: giuliomoro@1088: var sliderHolder = document.createElement("div"); giuliomoro@1088: sliderHolder.id = "slider-holder"; giuliomoro@1088: giuliomoro@1088: giuliomoro@1088: // Global parent for the comment boxes on the page giuliomoro@1088: var feedbackHolder = document.createElement('div'); giuliomoro@1088: feedbackHolder.id = 'feedbackHolder'; giuliomoro@1088: giuliomoro@1088: testContent.style.zIndex = 1; giuliomoro@1088: interfaceContext.insertPoint.innerHTML = null; // Clear the current schema giuliomoro@1088: giuliomoro@1088: // Inject into HTML giuliomoro@1088: testContent.appendChild(title); // Insert the title giuliomoro@1088: testContent.appendChild(interfaceButtons); giuliomoro@1088: testContent.appendChild(sliderHolder); giuliomoro@1088: testContent.appendChild(feedbackHolder); giuliomoro@1088: interfaceContext.insertPoint.appendChild(testContent); giuliomoro@1088: giuliomoro@1088: // Load the full interface giuliomoro@1088: testState.initialise(); giuliomoro@1088: testState.advanceState(); giuliomoro@1088: giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: function loadTest(audioHolderObject) giuliomoro@1088: { giuliomoro@1088: var width = window.innerWidth; giuliomoro@1088: var height = window.innerHeight; giuliomoro@1088: var id = audioHolderObject.id; giuliomoro@1088: giuliomoro@1088: interfaceContext.interfaceSliders = []; giuliomoro@1088: giuliomoro@1088: var feedbackHolder = document.getElementById('feedbackHolder'); giuliomoro@1088: var sliderHolder = document.getElementById('slider-holder'); giuliomoro@1088: feedbackHolder.innerHTML = null; giuliomoro@1088: sliderHolder.innerHTML = null; giuliomoro@1088: giuliomoro@1088: // Delete outside reference giuliomoro@1088: var outsideReferenceHolder = document.getElementById('outside-reference'); giuliomoro@1088: if (outsideReferenceHolder != null) { giuliomoro@1088: document.getElementById('interface-buttons').removeChild(outsideReferenceHolder); giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: var interfaceObj = audioHolderObject.interfaces; giuliomoro@1088: for (var k=0; k'; giuliomoro@1088: var inject = document.getElementById('interface-buttons'); giuliomoro@1088: inject.appendChild(pagecountHolder); giuliomoro@1088: } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') { giuliomoro@1088: if (document.getElementById('master-volume-holder') == null) giuliomoro@1088: { giuliomoro@1088: feedbackHolder.appendChild(interfaceContext.volume.object); giuliomoro@1088: } giuliomoro@1088: } giuliomoro@1088: } giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: var commentBoxPrefix = "Comment on fragment"; giuliomoro@1088: giuliomoro@1088: var commentShow = audioHolderObject.elementComments; giuliomoro@1088: giuliomoro@1088: var loopPlayback = audioHolderObject.loop; giuliomoro@1088: giuliomoro@1088: currentTestHolder = document.createElement('audioHolder'); giuliomoro@1088: currentTestHolder.id = audioHolderObject.id; giuliomoro@1088: currentTestHolder.repeatCount = audioHolderObject.repeatCount; giuliomoro@1088: giuliomoro@1088: // Find all the audioElements from the audioHolder giuliomoro@1088: $(audioHolderObject.audioElements).each(function(index,element){ giuliomoro@1088: // Find URL of track giuliomoro@1088: // In this jQuery loop, variable 'this' holds the current audioElement. giuliomoro@1088: var audioObject = audioEngineContext.newTrack(element); giuliomoro@1088: // Check if an outside reference giuliomoro@1088: if (element.type == 'outside-reference') giuliomoro@1088: { giuliomoro@1088: // Construct outside reference; giuliomoro@1088: var orNode = new outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons')); giuliomoro@1088: audioObject.bindInterface(orNode); giuliomoro@1088: } else { giuliomoro@1088: // Create a slider per track giuliomoro@1088: var sliderNode = new sliderObject(audioObject,interfaceObj); giuliomoro@1088: audioObject.bindInterface(sliderNode); giuliomoro@1088: interfaceContext.createCommentBox(audioObject); giuliomoro@1088: } giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: // Initialse the interfaceSlider object metrics giuliomoro@1088: giuliomoro@1088: $('.track-slider').mousedown(function(event) { giuliomoro@1088: interfaceContext.selectObject($(this)[0]); giuliomoro@1088: }); giuliomoro@1088: $('.track-slider').on('touchstart',null,function(event) { giuliomoro@1088: interfaceContext.selectObject($(this)[0]); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: $('.track-slider').mousemove(function(event) { giuliomoro@1088: event.preventDefault(); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: $('.slider').mousemove(function(event) { giuliomoro@1088: event.preventDefault(); giuliomoro@1088: var obj = interfaceContext.getSelectedObject(); giuliomoro@1088: if (obj == null) {return;} giuliomoro@1088: $(obj).css("left",event.clientX-6 + "px"); giuliomoro@1088: interfaceContext.moveObject(); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: $('.slider').on('touchmove',null,function(event) { giuliomoro@1088: event.preventDefault(); giuliomoro@1088: var obj = interfaceContext.getSelectedObject(); giuliomoro@1088: if (obj == null) {return;} giuliomoro@1088: var move = event.originalEvent.targetTouches[0].clientX - 6; giuliomoro@1088: $(obj).css("left",move + "px"); giuliomoro@1088: interfaceContext.moveObject(); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: $(document).mouseup(function(event){ giuliomoro@1088: event.preventDefault(); giuliomoro@1088: var obj = interfaceContext.getSelectedObject(); giuliomoro@1088: if (obj == null) {return;} giuliomoro@1088: var interfaceID = obj.parentElement.getAttribute("interfaceid"); giuliomoro@1088: var trackID = obj.getAttribute("trackindex"); giuliomoro@1088: if (interfaceContext.hasSelectedObjectMoved() == true) giuliomoro@1088: { giuliomoro@1088: var l = $(obj).css("left"); giuliomoro@1088: var id = obj.getAttribute('trackIndex'); giuliomoro@1088: var time = audioEngineContext.timer.getTestTime(); giuliomoro@1088: var rate = convSliderPosToRate(obj); giuliomoro@1088: audioEngineContext.audioObjects[id].metric.moved(time,rate); giuliomoro@1088: interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate); giuliomoro@1088: console.log("slider "+id+" moved to "+rate+' ('+time+')'); giuliomoro@1088: } else { giuliomoro@1088: var id = Number(obj.attributes['trackIndex'].value); giuliomoro@1088: //audioEngineContext.metric.sliderPlayed(id); giuliomoro@1088: audioEngineContext.play(id); giuliomoro@1088: } giuliomoro@1088: interfaceContext.releaseObject(); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: $('.slider').on('touchend',null,function(event){ giuliomoro@1088: var obj = interfaceContext.getSelectedObject(); giuliomoro@1088: if (obj == null) {return;} giuliomoro@1088: var interfaceID = obj.parentElement.getAttribute("interfaceid"); giuliomoro@1088: var trackID = obj.getAttribute("trackindex"); giuliomoro@1088: if (interfaceContext.hasSelectedObjectMoved() == true) giuliomoro@1088: { giuliomoro@1088: var l = $(obj).css("left"); giuliomoro@1088: var id = obj.getAttribute('trackIndex'); giuliomoro@1088: var time = audioEngineContext.timer.getTestTime(); giuliomoro@1088: var rate = convSliderPosToRate(obj); giuliomoro@1088: audioEngineContext.audioObjects[id].metric.moved(time,rate); giuliomoro@1088: interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate); giuliomoro@1088: console.log("slider "+id+" moved to "+rate+' ('+time+')'); giuliomoro@1088: } giuliomoro@1088: interfaceContext.releaseObject(); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: giuliomoro@1088: if (audioHolderObject.showElementComments) { giuliomoro@1088: interfaceContext.showCommentBoxes(feedbackHolder,true); giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: $(audioHolderObject.commentQuestions).each(function(index,element) { giuliomoro@1088: var node = interfaceContext.createCommentQuestion(element); giuliomoro@1088: feedbackHolder.appendChild(node.holder); giuliomoro@1088: }); giuliomoro@1088: giuliomoro@1088: giuliomoro@1088: //testWaitIndicator(); giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: function interfaceSliderHolder(interfaceObject) giuliomoro@1088: { giuliomoro@1088: this.sliders = []; giuliomoro@1088: this.metrics = []; giuliomoro@1088: this.id = document.getElementsByClassName("sliderCanvasDiv").length; giuliomoro@1088: this.name = interfaceObject.name; giuliomoro@1088: this.interfaceObject = interfaceObject; giuliomoro@1088: this.sliderDOM = document.createElement('div'); giuliomoro@1088: this.sliderDOM.className = 'sliderCanvasDiv'; giuliomoro@1088: this.sliderDOM.id = 'sliderCanvasHolder-'+this.id; giuliomoro@1088: giuliomoro@1088: var pagetitle = document.createElement('div'); giuliomoro@1088: pagetitle.className = "pageTitle"; giuliomoro@1088: pagetitle.align = "center"; giuliomoro@1088: var titleSpan = document.createElement('span'); giuliomoro@1088: titleSpan.id = "pageTitle-"+this.id; giuliomoro@1088: if (interfaceObject.title != undefined && typeof interfaceObject.title == "string") giuliomoro@1088: { giuliomoro@1088: titleSpan.textContent = interfaceObject.title; giuliomoro@1088: } else { giuliomoro@1088: titleSpan.textContent = "Axis "+String(this.id+1); giuliomoro@1088: } giuliomoro@1088: pagetitle.appendChild(titleSpan); giuliomoro@1088: this.sliderDOM.appendChild(pagetitle); giuliomoro@1088: giuliomoro@1088: // Create the slider box to hold the slider elements giuliomoro@1088: this.canvas = document.createElement('div'); giuliomoro@1088: if (this.name != undefined) giuliomoro@1088: this.canvas.id = 'slider-'+this.name; giuliomoro@1088: else giuliomoro@1088: this.canvas.id = 'slider-'+this.id; giuliomoro@1088: this.canvas.setAttribute("interfaceid",this.id); giuliomoro@1088: this.canvas.className = 'slider'; giuliomoro@1088: this.canvas.align = "left"; giuliomoro@1088: this.canvas.addEventListener('dragover',function(event){ giuliomoro@1088: event.preventDefault(); giuliomoro@1088: event.dataTransfer.effectAllowed = 'none'; giuliomoro@1088: event.dataTransfer.dropEffect = 'copy'; giuliomoro@1088: return false; giuliomoro@1088: },false); giuliomoro@1088: var sliderMargin = document.createAttribute('marginsize'); giuliomoro@1088: sliderMargin.nodeValue = 42; // Set default margins to 42px either side giuliomoro@1088: // Must have a known EXACT width, as this is used later to determine the ratings giuliomoro@1088: var w = (Number(sliderMargin.nodeValue)+8)*2; giuliomoro@1088: this.canvas.style.width = window.innerWidth - w +"px"; giuliomoro@1088: this.canvas.style.marginLeft = sliderMargin.nodeValue +'px'; giuliomoro@1088: this.canvas.setAttributeNode(sliderMargin); giuliomoro@1088: this.sliderDOM.appendChild(this.canvas); giuliomoro@1088: giuliomoro@1088: // Create the div to hold any scale objects giuliomoro@1088: this.scale = document.createElement('div'); giuliomoro@1088: this.scale.className = 'sliderScale'; giuliomoro@1088: this.scale.id = 'sliderScaleHolder-'+this.id; giuliomoro@1088: this.scale.align = 'left'; giuliomoro@1088: this.sliderDOM.appendChild(this.scale); giuliomoro@1088: var positionScale = this.canvas.style.width.substr(0,this.canvas.style.width.length-2); giuliomoro@1088: var offset = Number(this.canvas.attributes['marginsize'].value); giuliomoro@1088: var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM); giuliomoro@1088: for (var scaleObj of interfaceObject.scales) giuliomoro@1088: { giuliomoro@1088: var position = Number(scaleObj.position)*0.01; giuliomoro@1088: var pixelPosition = (position*$(this.canvas).width())+offset; giuliomoro@1088: var scaleDOM = document.createElement('span'); giuliomoro@1088: scaleDOM.textContent = scaleObj.text; giuliomoro@1088: scaleDOM.setAttribute('value',position) giuliomoro@1088: this.scale.appendChild(scaleDOM); giuliomoro@1088: scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: this.createSliderObject = function(audioObject) giuliomoro@1088: { giuliomoro@1088: var trackObj = document.createElement('div'); giuliomoro@1088: trackObj.align = "center"; giuliomoro@1088: trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id; giuliomoro@1088: trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id; giuliomoro@1088: trackObj.setAttribute('trackIndex',audioObject.id); giuliomoro@1088: if (this.name != undefined) { giuliomoro@1088: trackObj.setAttribute('interface-name',this.name); giuliomoro@1088: } else { giuliomoro@1088: trackObj.setAttribute('interface-name',this.id); giuliomoro@1088: } giuliomoro@1088: var offset = Number(this.canvas.attributes['marginsize'].value); giuliomoro@1088: // Distribute it randomnly giuliomoro@1088: var w = window.innerWidth - (offset+8)*2; giuliomoro@1088: w = Math.random()*w; giuliomoro@1088: w = Math.floor(w+(offset+8)); giuliomoro@1088: trackObj.style.left = w+'px'; giuliomoro@1088: this.canvas.appendChild(trackObj); giuliomoro@1088: this.sliders.push(trackObj); giuliomoro@1088: this.metrics.push(new metricTracker(this)); giuliomoro@1088: trackObj.innerHTML = ''+(this.metrics.length-1)+''; giuliomoro@1088: this.metrics[this.metrics.length-1].initialise(convSliderPosToRate(trackObj)); giuliomoro@1088: return trackObj; giuliomoro@1088: }; giuliomoro@1088: giuliomoro@1088: this.resize = function(event) giuliomoro@1088: { giuliomoro@1088: var holdValues = []; giuliomoro@1088: for (var index = 0; index < this.sliders.length; index++) giuliomoro@1088: { giuliomoro@1088: holdValues.push(convSliderPosToRate(this.sliders[index])); giuliomoro@1088: } giuliomoro@1088: var width = event.target.innerWidth; giuliomoro@1088: var sliderDiv = this.canvas; giuliomoro@1088: var sliderScaleDiv = this.scale; giuliomoro@1088: var marginsize = Number(sliderDiv.attributes['marginsize'].value); giuliomoro@1088: var w = (marginsize+8)*2; giuliomoro@1088: sliderDiv.style.width = width - w + 'px'; giuliomoro@1088: var width = width - w; giuliomoro@1088: // Move sliders into new position giuliomoro@1088: for (var index = 0; index < this.sliders.length; index++) giuliomoro@1088: { giuliomoro@1088: var pos = holdValues[index]; giuliomoro@1088: var pix = pos * width; giuliomoro@1088: this.sliders[index].style.left = pix+marginsize+'px'; giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: // Move scale labels giuliomoro@1088: for (var index = 0; index < this.scale.children.length; index++) giuliomoro@1088: { giuliomoro@1088: var scaleObj = this.scale.children[index]; giuliomoro@1088: var position = Number(scaleObj.attributes['value'].value); giuliomoro@1088: var pixelPosition = (position*width)+marginsize; giuliomoro@1088: scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px'; giuliomoro@1088: } giuliomoro@1088: }; giuliomoro@1088: } giuliomoro@1088: giuliomoro@1088: function sliderObject(audioObject,interfaceObjects) { giuliomoro@1088: // Create a new slider object; giuliomoro@1088: this.parent = audioObject; giuliomoro@1088: this.trackSliderObjects = []; giuliomoro@1088: for (var i=0; i saves giuliomoro@1088: // Get the current information in store (remember to appendChild your data to it) giuliomoro@1088: // pageSpecification is the current page node configuration giuliomoro@1088: // To create new XML nodes, use storage.document.createElement(); giuliomoro@1088: giuliomoro@1088: if (interfaceContext.interfaceSliders.length == 1) giuliomoro@1088: { giuliomoro@1088: // If there is only one axis, there only needs to be one metric return giuliomoro@1088: return; giuliomoro@1088: } giuliomoro@1088: var audioelements = store.getElementsByTagName("audioelement"); giuliomoro@1088: for (var i=0; i