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';