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