nicholas@2: /** nicholas@2: * ape.js nicholas@2: * Create the APE interface nicholas@2: */ nicholas@2: nicholas@2: // Once this is loaded and parsed, begin execution nicholas@2: loadInterface(projectXML); nicholas@2: nicholas@2: function loadInterface(xmlDoc) { nicholas@2: n@701: // Get the dimensions of the screen available to the page nicholas@2: var width = window.innerWidth; nicholas@2: var height = window.innerHeight; nicholas@2: nicholas@2: // Set background to grey #ddd nicholas@2: document.getElementsByTagName('body')[0].style.backgroundColor = '#ddd'; nicholas@2: nicholas@2: // The injection point into the HTML page nicholas@2: var insertPoint = document.getElementById("topLevelBody"); nicholas@2: nicholas@7: nicholas@2: // Decode parts of the xmlDoc that are needed nicholas@2: // xmlDoc MUST already be parsed by jQuery! nicholas@2: var xmlSetup = xmlDoc.find('setup'); nicholas@2: // Should put in an error function here incase of malprocessed or malformed XML nicholas@2: nicholas@2: // Create the top div for the Title element nicholas@2: var titleAttr = xmlSetup[0].attributes['title']; nicholas@2: var title = document.createElement('div'); nicholas@2: title.className = "title"; nicholas@2: title.align = "center"; nicholas@2: var titleSpan = document.createElement('span'); nicholas@2: nicholas@2: // Set title to that defined in XML, else set to default nicholas@2: if (titleAttr != undefined) { nicholas@2: titleSpan.innerText = titleAttr.value; nicholas@2: } else { nicholas@2: titleSpan.innerText = 'APE Tool'; nicholas@2: } nicholas@2: // Insert the titleSpan element into the title div element. nicholas@2: title.appendChild(titleSpan); nicholas@2: nicholas@7: // Store the return URL path in global projectReturn nicholas@7: projectReturn = xmlSetup[0].attributes['projectReturn'].value; nicholas@7: nicholas@7: // Create Interface buttons! nicholas@7: var interfaceButtons = document.createElement('div'); nicholas@7: interfaceButtons.id = 'interface-buttons'; nicholas@7: nicholas@7: // MANUAL DOWNLOAD POINT nicholas@7: // If project return is null, this MUST be specified as the location to create the download link nicholas@7: var downloadPoint = document.createElement('div'); nicholas@7: downloadPoint.id = 'download-point'; nicholas@7: nicholas@7: // Create playback start/stop points nicholas@7: var playback = document.createElement("button"); nicholas@7: playback.innerText = 'Start'; n@701: // onclick function. Check if it is playing or not, call the correct function in the n@701: // audioEngine, change the button text to reflect the next state. nicholas@7: playback.onclick = function() { nicholas@7: if (audioEngineContext.status == 0) { nicholas@7: audioEngineContext.play(); nicholas@7: this.innerText = 'Stop'; nicholas@7: } else { nicholas@7: audioEngineContext.stop(); nicholas@7: this.innerText = 'Start'; nicholas@7: } n@701: }; nicholas@7: // Create Submit (save) button nicholas@7: var submit = document.createElement("button"); nicholas@7: submit.innerText = 'Submit'; nicholas@7: submit.onclick = function() { n@700: // TODO: Update this for postTest tags nicholas@7: createProjectSave(projectReturn) n@701: }; n@701: // Append the interface buttons into the interfaceButtons object. nicholas@7: interfaceButtons.appendChild(playback); nicholas@7: interfaceButtons.appendChild(submit); nicholas@7: interfaceButtons.appendChild(downloadPoint); nicholas@7: nicholas@2: // Now create the slider and HTML5 canvas boxes nicholas@2: n@701: // Create the div box to center align nicholas@2: var sliderBox = document.createElement('div'); nicholas@2: sliderBox.className = 'sliderCanvasDiv'; n@701: sliderBox.id = 'sliderCanvasHolder'; nicholas@2: sliderBox.align = 'center'; nicholas@2: n@701: // Create the slider box to hold the slider elements nicholas@5: var canvas = document.createElement('div'); nicholas@2: canvas.id = 'slider'; n@701: // Must have a known EXACT width, as this is used later to determine the ratings nicholas@5: canvas.style.width = width - 100 +"px"; nicholas@5: canvas.style.height = 150 + "px"; n@701: canvas.style.marginBottom = "25px"; nicholas@2: canvas.style.backgroundColor = '#eee'; nicholas@5: canvas.align = "left"; nicholas@2: sliderBox.appendChild(canvas); n@701: n@701: // Global parent for the comment boxes on the page nicholas@3: var feedbackHolder = document.createElement('div'); n@701: // Find the parent audioHolder object. n@701: var audioHolder = xmlDoc.find('audioHolder'); n@701: audioHolder = audioHolder[0]; // Remove from one field array n@701: // Extract the hostURL attribute. If not set, create an empty string. n@701: var hostURL = audioHolder.attributes['hostURL']; nicholas@7: if (hostURL == undefined) { nicholas@7: hostURL = ""; nicholas@7: } else { nicholas@7: hostURL = hostURL.value; nicholas@7: } n@701: // Extract the sampleRate. If set, convert the string to a Number. n@701: var hostFs = audioHolder.attributes['sampleRate']; n@700: if (hostFs != undefined) { n@700: hostFs = Number(hostFs.value); nicholas@7: } nicholas@7: nicholas@7: /// CHECK FOR SAMPLE RATE COMPATIBILITY n@700: if (hostFs != undefined) { nicholas@7: if (Number(hostFs) != audioContext.sampleRate) { nicholas@7: var errStr = 'Sample rates do not match! Requested '+Number(hostFs)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.'; nicholas@7: alert(errStr); nicholas@7: return; nicholas@7: } nicholas@7: } n@701: // Find all the audioElements from the audioHolder n@701: var audioElements = $(audioHolder).find('audioElements'); n@701: audioElements.each(function(index,element){ nicholas@7: // Find URL of track n@701: // In this jQuery loop, variable 'this' holds the current audioElement. n@701: n@701: // Now load each audio sample. First create the new track by passing the full URL nicholas@7: var trackURL = hostURL + this.attributes['url'].value; nicholas@7: audioEngineContext.newTrack(trackURL); n@701: // Create document objects to hold the comment boxes n@701: var trackComment = document.createElement('div'); n@701: // Create a string next to each comment asking for a comment n@701: var trackString = document.createElement('span'); n@701: trackString.innerText = 'Comment on track '+index; n@701: // Create the HTML5 comment box 'textarea' n@701: var trackCommentBox = document.createElement('textarea'); n@701: trackCommentBox.rows = '4'; n@701: trackCommentBox.cols = '100'; n@701: trackCommentBox.name = 'trackComment'+index; n@701: trackCommentBox.className = 'trackComment'; n@701: // Add to the holder. n@701: trackComment.appendChild(trackString); n@701: trackComment.appendChild(trackCommentBox); n@701: feedbackHolder.appendChild(trackComment); n@701: nicholas@5: // Create a slider per track nicholas@5: nicholas@5: var trackSliderObj = document.createElement('div'); nicholas@5: trackSliderObj.className = 'track-slider'; nicholas@5: trackSliderObj.id = 'track-slider-'+index; nicholas@5: trackSliderObj.style.position = 'absolute'; nicholas@5: // Distribute it randomnly nicholas@5: var w = window.innerWidth - 100; nicholas@5: w = Math.random()*w; nicholas@5: trackSliderObj.style.left = Math.floor(w)+50+'px'; nicholas@5: trackSliderObj.style.height = "150px"; nicholas@5: trackSliderObj.style.width = "10px"; nicholas@5: trackSliderObj.style.backgroundColor = 'rgb(100,200,100)'; nicholas@5: trackSliderObj.innerHTML = ''+index+''; nicholas@5: trackSliderObj.style.float = "left"; nicholas@5: trackSliderObj.draggable = true; nicholas@5: trackSliderObj.ondragend = dragEnd; nicholas@8: nicholas@8: // Onclick, switch playback to that track nicholas@8: trackSliderObj.onclick = function() { nicholas@8: // Get the track ID from the object ID nicholas@8: var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! nicholas@8: audioEngineContext.selectedTrack(id); n@700: }; nicholas@8: nicholas@5: canvas.appendChild(trackSliderObj); n@700: }); nicholas@3: nicholas@2: nicholas@2: // Inject into HTML nicholas@2: insertPoint.innerHTML = null; // Clear the current schema nicholas@2: insertPoint.appendChild(title); // Insert the title nicholas@7: insertPoint.appendChild(interfaceButtons); nicholas@2: insertPoint.appendChild(sliderBox); nicholas@3: insertPoint.appendChild(feedbackHolder); nicholas@2: } nicholas@5: nicholas@5: function dragEnd(ev) { nicholas@5: // Function call when a div has been dropped nicholas@5: if (ev.x >= 50 && ev.x < window.innerWidth-50) { nicholas@5: this.style.left = (ev.x)+'px'; nicholas@5: } else { nicholas@5: if (ev.x<50) { nicholas@5: this.style.left = '50px'; nicholas@5: } else { nicholas@5: this.style.left = window.innerWidth-50 + 'px'; nicholas@5: } nicholas@5: } nicholas@5: } nicholas@7: nicholas@7: // Only other global function which must be defined in the interface class. Determines how to create the XML document. nicholas@7: function interfaceXMLSave(){ nicholas@7: // Create the XML string to be exported with results nicholas@7: var xmlDoc = document.createElement("BrowserEvaluationResult"); nicholas@7: var trackSliderObjects = document.getElementsByClassName('track-slider'); nicholas@7: var commentObjects = document.getElementsByClassName('trackComment'); nicholas@7: var rateMin = 50; nicholas@7: var rateMax = window.innerWidth-50; nicholas@7: for (var i=0; i