Mercurial > hg > webaudioevaluationtool
changeset 2:955d229b8a02
function loadProjectSpec will parse XML project specification and build interface. Still needs full work. Interface is loaded in ape.js
| author | Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk> |
|---|---|
| date | Sun, 08 Mar 2015 18:58:06 +0000 |
| parents | d7d1aa6d3558 |
| children | 1b01b7443a46 |
| files | ape.js core.js graphics.css structure.css |
| diffstat | 4 files changed, 94 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/ape.js Sun Mar 08 18:58:06 2015 +0000 @@ -0,0 +1,61 @@ +/** + * ape.js + * Create the APE interface + */ + +// Once this is loaded and parsed, begin execution +loadInterface(projectXML); + +function loadInterface(xmlDoc) { + + var width = window.innerWidth; + var height = window.innerHeight; + + // Set background to grey #ddd + document.getElementsByTagName('body')[0].style.backgroundColor = '#ddd'; + + // The injection point into the HTML page + var insertPoint = document.getElementById("topLevelBody"); + + // Decode parts of the xmlDoc that are needed + // xmlDoc MUST already be parsed by jQuery! + var xmlSetup = xmlDoc.find('setup'); + // Should put in an error function here incase of malprocessed or malformed XML + + // Create the top div for the Title element + var titleAttr = xmlSetup[0].attributes['title']; + var title = document.createElement('div'); + title.className = "title"; + title.align = "center"; + var titleSpan = document.createElement('span'); + + // Set title to that defined in XML, else set to default + if (titleAttr != undefined) { + titleSpan.innerText = titleAttr.value; + } else { + titleSpan.innerText = 'APE Tool'; + } + // Insert the titleSpan element into the title div element. + title.appendChild(titleSpan); + + // Now create the slider and HTML5 canvas boxes + + var sliderBox = document.createElement('div'); + sliderBox.className = 'sliderCanvasDiv'; + sliderBox.id = 'sliderCanvasHolder'; // create an id so we can easily link to it later + sliderBox.align = 'center'; + + var canvas = document.createElement('canvas'); + canvas.id = 'slider'; + canvas.width = width - 100; + canvas.height = 150; + canvas.style.backgroundColor = '#eee'; + + sliderBox.appendChild(canvas); + + + // Inject into HTML + insertPoint.innerHTML = null; // Clear the current schema + insertPoint.appendChild(title); // Insert the title + insertPoint.appendChild(sliderBox); +}
--- a/core.js Sun Mar 08 12:30:25 2015 +0000 +++ b/core.js Sun Mar 08 18:58:06 2015 +0000 @@ -7,7 +7,7 @@ /* create the web audio API context and store in audioContext*/ var audioContext; - +var projectXML; var audioEngineContext; window.onload = function() { @@ -25,6 +25,28 @@ function loadProjectSpec(url) { // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data // If url is null, request client to upload project XML document + var r = new XMLHttpRequest(); + r.open('GET',url,true); + r.onload = function() { + loadProjectSpecCallback(r.response); + } + r.send(); +} + +function loadProjectSpecCallback(response) { + // Function called after asynchronous download of XML project specification + var decode = $.parseXML(response); + projectXML = $(decode); + + // Now extract the setup tag + var xmlSetup = projectXML.find('setup'); + var interfaceType = xmlSetup[0].attributes['interface']; + var interfaceJS = document.createElement('script'); + interfaceJS.setAttribute("type","text/javascript"); + if (interfaceType.value == 'APE') { + interfaceJS.setAttribute("src","ape.js"); + } + document.getElementsByTagName("head")[0].appendChild(interfaceJS); } function createProjectSave(destURL) {