nickjillings@1563: /**
nickjillings@1563: * ape.js
nickjillings@1563: * Create the APE interface
nickjillings@1563: */
nickjillings@1563:
nickjillings@1563: // preTest - In preTest state
nickjillings@1563: // testRun-ID - In test running, test Id number at the end 'testRun-2'
nickjillings@1563: // testRunPost-ID - Post test of test ID
nickjillings@1563: // testRunPre-ID - Pre-test of test ID
nickjillings@1563: // postTest - End of test, final submission!
nickjillings@1563:
nickjillings@1563:
nickjillings@1563: // Once this is loaded and parsed, begin execution
nickjillings@1563: loadInterface();
nickjillings@1563:
nickjillings@1563: function loadInterface() {
nickjillings@1563:
nickjillings@1563: // Get the dimensions of the screen available to the page
nickjillings@1563: var width = window.innerWidth;
nickjillings@1563: var height = window.innerHeight;
nickjillings@1563:
nickjillings@1563: // The injection point into the HTML page
nickjillings@1563: interfaceContext.insertPoint = document.getElementById("topLevelBody");
nickjillings@1563: var testContent = document.createElement('div');
nickjillings@1563:
nickjillings@1563: testContent.id = 'testContent';
nickjillings@1563:
nickjillings@1563:
nickjillings@1563: // Create APE specific metric functions
nickjillings@1563: audioEngineContext.metric.initialiseTest = function()
nickjillings@1563: {
nickjillings@1563: };
nickjillings@1563:
nickjillings@1563: audioEngineContext.metric.sliderMoved = function()
nickjillings@1563: {
nickjillings@1563:
nickjillings@1563: var id = this.data;
nickjillings@1563: this.data = -1;
nickjillings@1563: var position = convSliderPosToRate(id);
nickjillings@1563: console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id
nickjillings@1563: if (audioEngineContext.timer.testStarted)
nickjillings@1563: {
nickjillings@1563: audioEngineContext.audioObjects[id].metric.moved(time,position);
nickjillings@1563: }
nickjillings@1563: };
nickjillings@1563:
nickjillings@1563: audioEngineContext.metric.sliderPlayed = function(id)
nickjillings@1563: {
nickjillings@1563: var time = audioEngineContext.timer.getTestTime();
nickjillings@1563: if (audioEngineContext.timer.testStarted)
nickjillings@1563: {
nickjillings@1563: if (this.lastClicked >= 0)
nickjillings@1563: {
nickjillings@1563: audioEngineContext.audioObjects[this.lastClicked].metric.listening(time);
nickjillings@1563: }
nickjillings@1563: this.lastClicked = id;
nickjillings@1563: audioEngineContext.audioObjects[id].metric.listening(time);
nickjillings@1563: }
nickjillings@1563: console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id
nickjillings@1563: };
nickjillings@1563:
nickjillings@1563: // Bindings for audioObjects
nickjillings@1563:
nickjillings@1563: // Create the top div for the Title element
nickjillings@1563: var titleAttr = specification.title;
nickjillings@1563: var title = document.createElement('div');
nickjillings@1563: title.className = "title";
nickjillings@1563: title.align = "center";
nickjillings@1563: var titleSpan = document.createElement('span');
nickjillings@1563:
nickjillings@1563: // Set title to that defined in XML, else set to default
nickjillings@1563: if (titleAttr != undefined) {
nickjillings@1563: titleSpan.textContent = titleAttr;
nickjillings@1563: } else {
nickjillings@1563: titleSpan.textContent = 'Listening test';
nickjillings@1563: }
nickjillings@1563: // Insert the titleSpan element into the title div element.
nickjillings@1563: title.appendChild(titleSpan);
nickjillings@1563:
nickjillings@1563: var pagetitle = document.createElement('div');
nickjillings@1563: pagetitle.className = "pageTitle";
nickjillings@1563: pagetitle.align = "center";
nickjillings@1563: var titleSpan = document.createElement('span');
nickjillings@1563: titleSpan.id = "pageTitle";
nickjillings@1563: pagetitle.appendChild(titleSpan);
nickjillings@1563:
nickjillings@1563: // Create Interface buttons!
nickjillings@1563: var interfaceButtons = document.createElement('div');
nickjillings@1563: interfaceButtons.id = 'interface-buttons';
nickjillings@1563:
nickjillings@1563: // Create playback start/stop points
nickjillings@1563: var playback = document.createElement("button");
nickjillings@1563: playback.innerHTML = 'Stop';
nickjillings@1563: playback.id = 'playback-button';
nickjillings@1563: // onclick function. Check if it is playing or not, call the correct function in the
nickjillings@1563: // audioEngine, change the button text to reflect the next state.
nickjillings@1563: playback.onclick = function() {
nickjillings@1563: if (audioEngineContext.status == 1) {
nickjillings@1563: audioEngineContext.stop();
nickjillings@1563: this.innerHTML = 'Stop';
nickjillings@1563: var time = audioEngineContext.timer.getTestTime();
nickjillings@1563: console.log('Stopped at ' + time); // DEBUG/SAFETY
nickjillings@1563: }
nickjillings@1563: };
nickjillings@1563: // Create Submit (save) button
nickjillings@1563: var submit = document.createElement("button");
nickjillings@1563: submit.innerHTML = 'Submit';
nickjillings@1563: submit.onclick = buttonSubmitClick;
nickjillings@1563: submit.id = 'submit-button';
nickjillings@1563: // Append the interface buttons into the interfaceButtons object.
nickjillings@1563: interfaceButtons.appendChild(playback);
nickjillings@1563: interfaceButtons.appendChild(submit);
nickjillings@1563:
nickjillings@1563: // Now create the slider and HTML5 canvas boxes
nickjillings@1563:
nickjillings@1563: // Create the div box to center align
nickjillings@1563: var sliderBox = document.createElement('div');
nickjillings@1563: sliderBox.className = 'sliderCanvasDiv';
nickjillings@1563: sliderBox.id = 'sliderCanvasHolder';
nickjillings@1563:
nickjillings@1563: // Create the slider box to hold the slider elements
nickjillings@1563: var canvas = document.createElement('div');
nickjillings@1563: canvas.id = 'slider';
nickjillings@1563: canvas.align = "left";
nickjillings@1563: canvas.addEventListener('dragover',function(event){
nickjillings@1563: event.preventDefault();
nickjillings@1563: return false;
nickjillings@1563: },false);
nickjillings@1563: var sliderMargin = document.createAttribute('marginsize');
nickjillings@1563: sliderMargin.nodeValue = 42; // Set default margins to 42px either side
nickjillings@1563: // Must have a known EXACT width, as this is used later to determine the ratings
nickjillings@1563: var w = (Number(sliderMargin.nodeValue)+8)*2;
nickjillings@1563: canvas.style.width = width - w +"px";
nickjillings@1563: canvas.style.marginLeft = sliderMargin.nodeValue +'px';
nickjillings@1563: canvas.setAttributeNode(sliderMargin);
nickjillings@1563: sliderBox.appendChild(canvas);
nickjillings@1563:
nickjillings@1563: // Create the div to hold any scale objects
nickjillings@1563: var scale = document.createElement('div');
nickjillings@1563: scale.className = 'sliderScale';
nickjillings@1563: scale.id = 'sliderScaleHolder';
nickjillings@1563: scale.align = 'left';
nickjillings@1563: sliderBox.appendChild(scale);
nickjillings@1563:
nickjillings@1563: // Global parent for the comment boxes on the page
nickjillings@1563: var feedbackHolder = document.createElement('div');
nickjillings@1563: feedbackHolder.id = 'feedbackHolder';
nickjillings@1563:
nickjillings@1563: testContent.style.zIndex = 1;
nickjillings@1563: interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
nickjillings@1563:
nickjillings@1563: // Inject into HTML
nickjillings@1563: testContent.appendChild(title); // Insert the title
nickjillings@1563: testContent.appendChild(pagetitle);
nickjillings@1563: testContent.appendChild(interfaceButtons);
nickjillings@1563: testContent.appendChild(sliderBox);
nickjillings@1563: testContent.appendChild(feedbackHolder);
nickjillings@1563: interfaceContext.insertPoint.appendChild(testContent);
nickjillings@1563:
nickjillings@1563: // Load the full interface
nickjillings@1563: testState.initialise();
nickjillings@1563: testState.advanceState();
nickjillings@1563:
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: function loadTest(audioHolderObject)
nickjillings@1563: {
nickjillings@1563:
nickjillings@1563: // Reset audioEngineContext.Metric globals for new test
nickjillings@1563: audioEngineContext.newTestPage();
nickjillings@1563:
nickjillings@1563: var id = audioHolderObject.id;
nickjillings@1563:
nickjillings@1563: var feedbackHolder = document.getElementById('feedbackHolder');
nickjillings@1563: var canvas = document.getElementById('slider');
nickjillings@1563: feedbackHolder.innerHTML = null;
nickjillings@1563: canvas.innerHTML = null;
nickjillings@1563:
nickjillings@1564: var playbackHolder = document.createElement('div');
nickjillings@1564: playbackHolder.style.width = "100%";
nickjillings@1564: playbackHolder.align = 'center';
nickjillings@1564: playbackHolder.appendChild(interfaceContext.playhead.object);
nickjillings@1564: feedbackHolder.appendChild(playbackHolder);
nickjillings@1563: // Setup question title
nickjillings@1563: var interfaceObj = audioHolderObject.interfaces;
nickjillings@1563: var commentBoxPrefix = "Comment on track";
nickjillings@1563: if (interfaceObj.length != 0) {
nickjillings@1563: interfaceObj = interfaceObj[0];
nickjillings@1563: var titleNode = interfaceObj.title;
nickjillings@1563: if (titleNode != undefined)
nickjillings@1563: {
nickjillings@1563: document.getElementById('pageTitle').textContent = titleNode;
nickjillings@1563: }
nickjillings@1563: var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
nickjillings@1563: var offset = Number(document.getElementById('slider').attributes['marginsize'].value);
nickjillings@1563: var scale = document.getElementById('sliderScaleHolder');
nickjillings@1563: scale.innerHTML = null;
nickjillings@1563: $(interfaceObj.scale).each(function(index,scaleObj){
nickjillings@1563: var value = document.createAttribute('value');
nickjillings@1563: var position = Number(scaleObj[0])*0.01;
nickjillings@1563: value.nodeValue = position;
nickjillings@1563: var pixelPosition = (position*positionScale)+offset;
nickjillings@1563: var scaleDOM = document.createElement('span');
nickjillings@1563: scaleDOM.textContent = scaleObj[1];
nickjillings@1563: scale.appendChild(scaleDOM);
nickjillings@1563: scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
nickjillings@1563: scaleDOM.setAttributeNode(value);
nickjillings@1563: });
nickjillings@1563:
nickjillings@1563: if (interfaceObj.commentBoxPrefix != undefined) {
nickjillings@1563: commentBoxPrefix = interfaceObj.commentBoxPrefix;
nickjillings@1563: }
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: /// CHECK FOR SAMPLE RATE COMPATIBILITY
nickjillings@1563: if (audioHolderObject.sampleRate != undefined) {
nickjillings@1563: if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) {
nickjillings@1563: var errStr = 'Sample rates do not match! Requested '+Number(audioHolderObject.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.';
nickjillings@1563: alert(errStr);
nickjillings@1563: return;
nickjillings@1563: }
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: var commentShow = audioHolderObject.elementComments;
nickjillings@1563:
nickjillings@1563: var loopPlayback = audioHolderObject.loop;
nickjillings@1563:
nickjillings@1563: audioEngineContext.loopPlayback = loopPlayback;
nickjillings@1563: // Create AudioEngine bindings for playback
nickjillings@1565: audioEngineContext.selectedTrack = function(id) {
nickjillings@1565: console.log('Deprecated');
nickjillings@1565: };
nickjillings@1563:
nickjillings@1563: currentTestHolder = document.createElement('audioHolder');
nickjillings@1563: currentTestHolder.id = audioHolderObject.id;
nickjillings@1563: currentTestHolder.repeatCount = audioHolderObject.repeatCount;
nickjillings@1563:
nickjillings@1563: var randomise = audioHolderObject.randomiseOrder;
nickjillings@1563:
nickjillings@1563: var audioElements = audioHolderObject.audioElements;
nickjillings@1563: currentTrackOrder = [];
nickjillings@1563: if (randomise) {
nickjillings@1563: audioHolderObject.audioElements = randomiseOrder(audioHolderObject.audioElements);
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: // Delete any previous audioObjects associated with the audioEngine
nickjillings@1563: audioEngineContext.audioObjects = [];
nickjillings@1563:
nickjillings@1563: // Find all the audioElements from the audioHolder
nickjillings@1563: $(audioHolderObject.audioElements).each(function(index,element){
nickjillings@1563: // Find URL of track
nickjillings@1563: // In this jQuery loop, variable 'this' holds the current audioElement.
nickjillings@1563:
nickjillings@1563: // Now load each audio sample. First create the new track by passing the full URL
nickjillings@1563: var trackURL = audioHolderObject.hostURL + element.url;
nickjillings@1563: var audioObject = audioEngineContext.newTrack(element);
nickjillings@1563:
nickjillings@1568: var node = interfaceContext.createCommentBox(audioObject);
nickjillings@1563:
nickjillings@1563: // Create a slider per track
nickjillings@1563: audioObject.interfaceDOM = new sliderObject(audioObject);
nickjillings@1563:
nickjillings@1563: // Distribute it randomnly
nickjillings@1563: var w = window.innerWidth - (offset+8)*2;
nickjillings@1563: w = Math.random()*w;
nickjillings@1563: w = Math.floor(w+(offset+8));
nickjillings@1563: audioObject.interfaceDOM.trackSliderObj.style.left = w+'px';
nickjillings@1563:
nickjillings@1563: canvas.appendChild(audioObject.interfaceDOM.trackSliderObj);
nickjillings@1563: audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj));
nickjillings@1563:
nickjillings@1563: });
nickjillings@1563: if (commentShow) {
nickjillings@1563: interfaceContext.showCommentBoxes(feedbackHolder,true);
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: $(audioHolderObject.commentQuestions).each(function(index,element) {
nickjillings@1563: var node = interfaceContext.createCommentQuestion(element);
nickjillings@1563: feedbackHolder.appendChild(node.holder);
nickjillings@1563: });
nickjillings@1563:
nickjillings@1563:
nickjillings@1563: testWaitIndicator();
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: function sliderObject(audioObject) {
nickjillings@1563: // Create a new slider object;
nickjillings@1563: this.parent = audioObject;
nickjillings@1563: this.trackSliderObj = document.createElement('div');
nickjillings@1563: this.trackSliderObj.className = 'track-slider';
nickjillings@1563: this.trackSliderObj.id = 'track-slider-'+audioObject.id;
nickjillings@1563:
nickjillings@1563: this.trackSliderObj.setAttribute('trackIndex',audioObject.id);
nickjillings@1563: this.trackSliderObj.innerHTML = ''+audioObject.id+'';
nickjillings@1563: this.trackSliderObj.draggable = true;
nickjillings@1563: this.trackSliderObj.ondragend = dragEnd;
nickjillings@1563:
nickjillings@1563: // Onclick, switch playback to that track
nickjillings@1563: this.trackSliderObj.onclick = function() {
nickjillings@1563: // Start the test on first click, that way timings are more accurate.
nickjillings@1563: audioEngineContext.play();
nickjillings@1563: if (audioEngineContext.audioObjectsReady) {
nickjillings@1563: // Cannot continue to issue play command until audioObjects reported as ready!
nickjillings@1563: // Get the track ID from the object ID
nickjillings@1569: var element;
nickjillings@1569: if (event.srcElement.nodeName == "SPAN") {
nickjillings@1569: element = event.srcElement.parentNode;
nickjillings@1569: } else {
nickjillings@1569: element = event.srcElement;
nickjillings@1569: }
nickjillings@1569: var id = Number(element.attributes['trackIndex'].value);
nickjillings@1563: //audioEngineContext.metric.sliderPlayed(id);
nickjillings@1565: audioEngineContext.play(id);
nickjillings@1563: // Currently playing track red, rest green
nickjillings@1563:
nickjillings@1563: //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
nickjillings@1563: $('.track-slider').removeClass('track-slider-playing');
nickjillings@1569: $(element).addClass('track-slider-playing');
nickjillings@1563: $('.comment-div').removeClass('comment-box-playing');
nickjillings@1563: $('#comment-div-'+id).addClass('comment-box-playing');
nickjillings@1563: }
nickjillings@1563: };
nickjillings@1563:
nickjillings@1563: this.exportXMLDOM = function() {
nickjillings@1563: // Called by the audioObject holding this element. Must be present
nickjillings@1563: var node = document.createElement('value');
nickjillings@1563: node.textContent = convSliderPosToRate(this.trackSliderObj);
nickjillings@1563: return node;
nickjillings@1563: };
nickjillings@1563: }
nickjillings@1563:
nickjillings@1563: function dragEnd(ev) {
nickjillings@1563: // Function call when a div has been dropped
nickjillings@1563: var slider = document.getElementById('slider');
nickjillings@1563: var marginSize = Number(slider.attributes['marginsize'].value);
nickjillings@1563: var w = slider.style.width;
nickjillings@1563: w = Number(w.substr(0,w.length-2));
nickjillings@1563: var x = ev.x;
nickjillings@1563: if (x >= marginSize && x < w+marginSize) {
nickjillings@1563: this.style.left = (x)+'px';
nickjillings@1563: } else {
nickjillings@1563: if (x 1) {
nickjillings@1563: for (var i=0; i