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