Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 658:2d28a7a86c56
Separated interface loading to seperate test pages.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Fri, 10 Apr 2015 12:18:51 +0100 |
parents | 1e64848f5940 |
children | 44d281129d55 |
comparison
equal
deleted
inserted
replaced
657:1e64848f5940 | 658:2d28a7a86c56 |
---|---|
31 | 31 |
32 // Decode parts of the xmlDoc that are needed | 32 // Decode parts of the xmlDoc that are needed |
33 // xmlDoc MUST already be parsed by jQuery! | 33 // xmlDoc MUST already be parsed by jQuery! |
34 var xmlSetup = xmlDoc.find('setup'); | 34 var xmlSetup = xmlDoc.find('setup'); |
35 // Should put in an error function here incase of malprocessed or malformed XML | 35 // Should put in an error function here incase of malprocessed or malformed XML |
36 | |
37 // Extract the different test XML DOM trees | |
38 testXMLSetups = xmlDoc.find('audioHolder'); | |
36 | 39 |
37 // Create the top div for the Title element | 40 // Create the top div for the Title element |
38 var titleAttr = xmlSetup[0].attributes['title']; | 41 var titleAttr = xmlSetup[0].attributes['title']; |
39 var title = document.createElement('div'); | 42 var title = document.createElement('div'); |
40 title.className = "title"; | 43 title.className = "title"; |
104 canvas.align = "left"; | 107 canvas.align = "left"; |
105 sliderBox.appendChild(canvas); | 108 sliderBox.appendChild(canvas); |
106 | 109 |
107 // Global parent for the comment boxes on the page | 110 // Global parent for the comment boxes on the page |
108 var feedbackHolder = document.createElement('div'); | 111 var feedbackHolder = document.createElement('div'); |
109 // Find the parent audioHolder object. | 112 feedbackHolder.id = 'feedbackHolder'; |
110 var audioHolder = xmlDoc.find('audioHolder'); | |
111 audioHolder = audioHolder[0]; // Remove from one field array | |
112 // Extract the hostURL attribute. If not set, create an empty string. | |
113 var hostURL = audioHolder.attributes['hostURL']; | |
114 if (hostURL == undefined) { | |
115 hostURL = ""; | |
116 } else { | |
117 hostURL = hostURL.value; | |
118 } | |
119 // Extract the sampleRate. If set, convert the string to a Number. | |
120 var hostFs = audioHolder.attributes['sampleRate']; | |
121 if (hostFs != undefined) { | |
122 hostFs = Number(hostFs.value); | |
123 } | |
124 | |
125 /// CHECK FOR SAMPLE RATE COMPATIBILITY | |
126 if (hostFs != undefined) { | |
127 if (Number(hostFs) != audioContext.sampleRate) { | |
128 var errStr = 'Sample rates do not match! Requested '+Number(hostFs)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.'; | |
129 alert(errStr); | |
130 return; | |
131 } | |
132 } | |
133 // Find all the audioElements from the audioHolder | |
134 var audioElements = $(audioHolder).find('audioElements'); | |
135 audioElements.each(function(index,element){ | |
136 // Find URL of track | |
137 // In this jQuery loop, variable 'this' holds the current audioElement. | |
138 | |
139 // Now load each audio sample. First create the new track by passing the full URL | |
140 var trackURL = hostURL + this.attributes['url'].value; | |
141 audioEngineContext.newTrack(trackURL); | |
142 // Create document objects to hold the comment boxes | |
143 var trackComment = document.createElement('div'); | |
144 // Create a string next to each comment asking for a comment | |
145 var trackString = document.createElement('span'); | |
146 trackString.innerHTML = 'Comment on track '+index; | |
147 // Create the HTML5 comment box 'textarea' | |
148 var trackCommentBox = document.createElement('textarea'); | |
149 trackCommentBox.rows = '4'; | |
150 trackCommentBox.cols = '100'; | |
151 trackCommentBox.name = 'trackComment'+index; | |
152 trackCommentBox.className = 'trackComment'; | |
153 // Add to the holder. | |
154 trackComment.appendChild(trackString); | |
155 trackComment.appendChild(trackCommentBox); | |
156 feedbackHolder.appendChild(trackComment); | |
157 | |
158 // Create a slider per track | |
159 | |
160 var trackSliderObj = document.createElement('div'); | |
161 trackSliderObj.className = 'track-slider'; | |
162 trackSliderObj.id = 'track-slider-'+index; | |
163 // Distribute it randomnly | |
164 var w = window.innerWidth - 100; | |
165 w = Math.random()*w; | |
166 trackSliderObj.style.left = Math.floor(w)+50+'px'; | |
167 trackSliderObj.innerHTML = '<span>'+index+'</span>'; | |
168 trackSliderObj.draggable = true; | |
169 trackSliderObj.ondragend = dragEnd; | |
170 | |
171 // Onclick, switch playback to that track | |
172 trackSliderObj.onclick = function() { | |
173 // Get the track ID from the object ID | |
174 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! | |
175 audioEngineContext.selectedTrack(id); | |
176 }; | |
177 | |
178 canvas.appendChild(trackSliderObj); | |
179 }); | |
180 | |
181 | 113 |
182 // Create pre and post test questions | 114 // Create pre and post test questions |
183 | 115 |
184 // Inject into HTML | 116 // Inject into HTML |
185 insertPoint.innerHTML = null; // Clear the current schema | 117 insertPoint.innerHTML = null; // Clear the current schema |
186 testContent.appendChild(title); // Insert the title | 118 testContent.appendChild(title); // Insert the title |
187 testContent.appendChild(interfaceButtons); | 119 testContent.appendChild(interfaceButtons); |
188 testContent.appendChild(sliderBox); | 120 testContent.appendChild(sliderBox); |
189 testContent.appendChild(feedbackHolder); | 121 testContent.appendChild(feedbackHolder); |
190 insertPoint.appendChild(testContent); | 122 insertPoint.appendChild(testContent); |
123 | |
124 loadTest(testXMLSetups[0]); | |
191 | 125 |
192 var preTest = xmlDoc.find('PreTest'); | 126 var preTest = xmlDoc.find('PreTest'); |
193 var postTest = xmlDoc.find('PostTest'); | 127 var postTest = xmlDoc.find('PostTest'); |
194 preTest = preTest[0]; | 128 preTest = preTest[0]; |
195 postTest = postTest[0]; | 129 postTest = postTest[0]; |
281 insertPoint.appendChild(preTestHolder); | 215 insertPoint.appendChild(preTestHolder); |
282 } | 216 } |
283 | 217 |
284 } | 218 } |
285 | 219 |
220 function loadTest(textXML) | |
221 { | |
222 // Used to load a specific test page | |
223 | |
224 | |
225 var feedbackHolder = document.getElementById('feedbackHolder'); | |
226 var canvas = document.getElementById('slider'); | |
227 feedbackHolder.innerHTML = null; | |
228 canvas.innerHTML = null; | |
229 | |
230 // Extract the hostURL attribute. If not set, create an empty string. | |
231 var hostURL = textXML.attributes['hostURL']; | |
232 if (hostURL == undefined) { | |
233 hostURL = ""; | |
234 } else { | |
235 hostURL = hostURL.value; | |
236 } | |
237 // Extract the sampleRate. If set, convert the string to a Number. | |
238 var hostFs = textXML.attributes['sampleRate']; | |
239 if (hostFs != undefined) { | |
240 hostFs = Number(hostFs.value); | |
241 } | |
242 | |
243 /// CHECK FOR SAMPLE RATE COMPATIBILITY | |
244 if (hostFs != undefined) { | |
245 if (Number(hostFs) != audioContext.sampleRate) { | |
246 var errStr = 'Sample rates do not match! Requested '+Number(hostFs)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.'; | |
247 alert(errStr); | |
248 return; | |
249 } | |
250 } | |
251 // Find all the audioElements from the audioHolder | |
252 var audioElements = $(textXML).find('audioElements'); | |
253 audioElements.each(function(index,element){ | |
254 // Find URL of track | |
255 // In this jQuery loop, variable 'this' holds the current audioElement. | |
256 | |
257 // Now load each audio sample. First create the new track by passing the full URL | |
258 var trackURL = hostURL + this.attributes['url'].value; | |
259 audioEngineContext.newTrack(trackURL); | |
260 // Create document objects to hold the comment boxes | |
261 var trackComment = document.createElement('div'); | |
262 // Create a string next to each comment asking for a comment | |
263 var trackString = document.createElement('span'); | |
264 trackString.innerHTML = 'Comment on track '+index; | |
265 // Create the HTML5 comment box 'textarea' | |
266 var trackCommentBox = document.createElement('textarea'); | |
267 trackCommentBox.rows = '4'; | |
268 trackCommentBox.cols = '100'; | |
269 trackCommentBox.name = 'trackComment'+index; | |
270 trackCommentBox.className = 'trackComment'; | |
271 var br = document.createElement('br'); | |
272 // Add to the holder. | |
273 trackComment.appendChild(trackString); | |
274 trackComment.appendChild(br); | |
275 trackComment.appendChild(trackCommentBox); | |
276 feedbackHolder.appendChild(trackComment); | |
277 | |
278 // Create a slider per track | |
279 | |
280 var trackSliderObj = document.createElement('div'); | |
281 trackSliderObj.className = 'track-slider'; | |
282 trackSliderObj.id = 'track-slider-'+index; | |
283 // Distribute it randomnly | |
284 var w = window.innerWidth - 100; | |
285 w = Math.random()*w; | |
286 trackSliderObj.style.left = Math.floor(w)+50+'px'; | |
287 trackSliderObj.innerHTML = '<span>'+index+'</span>'; | |
288 trackSliderObj.draggable = true; | |
289 trackSliderObj.ondragend = dragEnd; | |
290 | |
291 // Onclick, switch playback to that track | |
292 trackSliderObj.onclick = function() { | |
293 // Get the track ID from the object ID | |
294 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! | |
295 audioEngineContext.selectedTrack(id); | |
296 }; | |
297 | |
298 canvas.appendChild(trackSliderObj); | |
299 }); | |
300 } | |
301 | |
302 function preTestButtonClick() | |
303 { | |
304 // Called on click of pre-test button | |
305 } | |
306 | |
286 function dragEnd(ev) { | 307 function dragEnd(ev) { |
287 // Function call when a div has been dropped | 308 // Function call when a div has been dropped |
288 var slider = document.getElementById('slider'); | 309 var slider = document.getElementById('slider'); |
289 if (ev.x >= 50 && ev.x < window.innerWidth-50) { | 310 if (ev.x >= 50 && ev.x < window.innerWidth-50) { |
290 this.style.left = (ev.x)+'px'; | 311 this.style.left = (ev.x)+'px'; |