Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 1583:5e20f0db13b0
XML-DOM created by their own objects
author | Nicholas Jillings <nickjillings@users.noreply.github.com> |
---|---|
date | Thu, 04 Jun 2015 17:23:32 +0100 |
parents | d4b626a4bc76 |
children | de1cc98f2889 |
comparison
equal
deleted
inserted
replaced
1582:d4b626a4bc76 | 1583:5e20f0db13b0 |
---|---|
29 // Create APE specific metric functions | 29 // Create APE specific metric functions |
30 audioEngineContext.metric.initialiseTest = function() | 30 audioEngineContext.metric.initialiseTest = function() |
31 { | 31 { |
32 }; | 32 }; |
33 | 33 |
34 audioEngineContext.metric.sliderMoveStart = function(id) | |
35 { | |
36 if (this.data == -1) | |
37 { | |
38 this.data = id; | |
39 } else { | |
40 console.log('ERROR: Metric tracker detecting two moves!'); | |
41 this.data = -1; | |
42 } | |
43 }; | |
44 audioEngineContext.metric.sliderMoved = function() | 34 audioEngineContext.metric.sliderMoved = function() |
45 { | 35 { |
46 var time = audioEngineContext.timer.getTestTime(); | 36 |
47 var id = this.data; | 37 var id = this.data; |
48 this.data = -1; | 38 this.data = -1; |
49 var position = convSliderPosToRate(id); | 39 var position = convSliderPosToRate(id); |
50 console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id | 40 console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id |
51 if (audioEngineContext.timer.testStarted) | 41 if (audioEngineContext.timer.testStarted) |
283 if (commentShow) { | 273 if (commentShow) { |
284 var node = interfaceContext.createCommentBox(audioObject); | 274 var node = interfaceContext.createCommentBox(audioObject); |
285 } | 275 } |
286 | 276 |
287 // Create a slider per track | 277 // Create a slider per track |
288 | 278 audioObject.interfaceDOM = new sliderObject(audioObject); |
289 var trackSliderObj = document.createElement('div'); | |
290 trackSliderObj.className = 'track-slider'; | |
291 trackSliderObj.id = 'track-slider-'+index; | |
292 | |
293 var trackSliderAOIndex = document.createAttribute('trackIndex'); | |
294 trackSliderAOIndex.nodeValue = index; | |
295 trackSliderObj.setAttributeNode(trackSliderAOIndex); | |
296 | 279 |
297 // Distribute it randomnly | 280 // Distribute it randomnly |
298 var w = window.innerWidth - (offset+8)*2; | 281 var w = window.innerWidth - (offset+8)*2; |
299 w = Math.random()*w; | 282 w = Math.random()*w; |
300 w = Math.floor(w+(offset+8)); | 283 w = Math.floor(w+(offset+8)); |
301 trackSliderObj.style.left = w+'px'; | 284 audioObject.interfaceDOM.trackSliderObj.style.left = w+'px'; |
302 trackSliderObj.innerHTML = '<span>'+index+'</span>'; | |
303 trackSliderObj.draggable = true; | |
304 trackSliderObj.ondragend = dragEnd; | |
305 trackSliderObj.ondragstart = function() | |
306 { | |
307 var id = Number(event.srcElement.attributes['trackIndex'].value); | |
308 audioEngineContext.metric.sliderMoveStart(id); | |
309 }; | |
310 | 285 |
311 // Onclick, switch playback to that track | 286 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); |
312 trackSliderObj.onclick = function() { | 287 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); |
313 // Start the test on first click, that way timings are more accurate. | |
314 audioEngineContext.play(); | |
315 if (audioEngineContext.audioObjectsReady) { | |
316 // Cannot continue to issue play command until audioObjects reported as ready! | |
317 // Get the track ID from the object ID | |
318 var id = Number(event.srcElement.attributes['trackIndex'].value); | |
319 //audioEngineContext.metric.sliderPlayed(id); | |
320 audioEngineContext.selectedTrack(id); | |
321 // Currently playing track red, rest green | |
322 | |
323 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | |
324 $('.track-slider').removeClass('track-slider-playing'); | |
325 $(event.srcElement).addClass('track-slider-playing'); | |
326 $('.comment-div').removeClass('comment-box-playing'); | |
327 $('#comment-div-'+id).addClass('comment-box-playing'); | |
328 } | |
329 }; | |
330 | |
331 // Attach binding | |
332 audioObject.sliderDOM = trackSliderObj; | |
333 | |
334 canvas.appendChild(trackSliderObj); | |
335 audioObject.metric.initialised(convSliderPosToRate(index)); | |
336 | 288 |
337 }); | 289 }); |
338 if (commentShow) { | 290 if (commentShow) { |
339 interfaceContext.showCommentBoxes(feedbackHolder,true); | 291 interfaceContext.showCommentBoxes(feedbackHolder,true); |
340 } | 292 } |
364 | 316 |
365 | 317 |
366 testWaitIndicator(); | 318 testWaitIndicator(); |
367 } | 319 } |
368 | 320 |
321 function sliderObject(audioObject) { | |
322 // Create a new slider object; | |
323 this.parent = audioObject; | |
324 this.trackSliderObj = document.createElement('div'); | |
325 this.trackSliderObj.className = 'track-slider'; | |
326 this.trackSliderObj.id = 'track-slider-'+audioObject.id; | |
327 | |
328 this.trackSliderObj.setAttribute('trackIndex',audioObject.id); | |
329 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>'; | |
330 this.trackSliderObj.draggable = true; | |
331 this.trackSliderObj.ondragend = dragEnd; | |
332 | |
333 // Onclick, switch playback to that track | |
334 this.trackSliderObj.onclick = function() { | |
335 // Start the test on first click, that way timings are more accurate. | |
336 audioEngineContext.play(); | |
337 if (audioEngineContext.audioObjectsReady) { | |
338 // Cannot continue to issue play command until audioObjects reported as ready! | |
339 // Get the track ID from the object ID | |
340 var id = Number(event.srcElement.attributes['trackIndex'].value); | |
341 //audioEngineContext.metric.sliderPlayed(id); | |
342 audioEngineContext.selectedTrack(id); | |
343 // Currently playing track red, rest green | |
344 | |
345 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | |
346 $('.track-slider').removeClass('track-slider-playing'); | |
347 $(event.srcElement).addClass('track-slider-playing'); | |
348 $('.comment-div').removeClass('comment-box-playing'); | |
349 $('#comment-div-'+id).addClass('comment-box-playing'); | |
350 } | |
351 }; | |
352 | |
353 this.exportXMLDOM = function() { | |
354 // Called by the audioObject holding this element. Must be present | |
355 var node = document.createElement('value'); | |
356 node.textContent = convSliderPosToRate(this.trackSliderObj); | |
357 return node; | |
358 }; | |
359 } | |
369 | 360 |
370 function dragEnd(ev) { | 361 function dragEnd(ev) { |
371 // Function call when a div has been dropped | 362 // Function call when a div has been dropped |
372 var slider = document.getElementById('slider'); | 363 var slider = document.getElementById('slider'); |
373 var marginSize = Number(slider.attributes['marginsize'].value); | 364 var marginSize = Number(slider.attributes['marginsize'].value); |
381 this.style.left = marginSize+'px'; | 372 this.style.left = marginSize+'px'; |
382 } else { | 373 } else { |
383 this.style.left = (w+marginSize) + 'px'; | 374 this.style.left = (w+marginSize) + 'px'; |
384 } | 375 } |
385 } | 376 } |
386 audioEngineContext.metric.sliderMoved(); | 377 var time = audioEngineContext.timer.getTestTime(); |
378 var id = Number(ev.srcElement.getAttribute('trackindex')); | |
379 audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.srcElement)); | |
387 } | 380 } |
388 | 381 |
389 function buttonSubmitClick() // TODO: Only when all songs have been played! | 382 function buttonSubmitClick() // TODO: Only when all songs have been played! |
390 { | 383 { |
391 hasBeenPlayed = audioEngineContext.checkAllPlayed(); | 384 hasBeenPlayed = audioEngineContext.checkAllPlayed(); |
421 } | 414 } |
422 return; | 415 return; |
423 } | 416 } |
424 } | 417 } |
425 | 418 |
426 function convSliderPosToRate(id) | 419 function convSliderPosToRate(slider) |
427 { | 420 { |
428 var w = document.getElementById('slider').style.width; | 421 var w = document.getElementById('slider').style.width; |
429 var marginsize = Number(document.getElementById('slider').attributes['marginsize'].value); | 422 var marginsize = Number(document.getElementById('slider').attributes['marginsize'].value); |
430 var maxPix = w.substr(0,w.length-2); | 423 var maxPix = w.substr(0,w.length-2); |
431 var slider = document.getElementsByClassName('track-slider')[id]; | |
432 var pix = slider.style.left; | 424 var pix = slider.style.left; |
433 pix = pix.substr(0,pix.length-2); | 425 pix = pix.substr(0,pix.length-2); |
434 var rate = (pix-marginsize)/maxPix; | 426 var rate = (pix-marginsize)/maxPix; |
435 return rate; | 427 return rate; |
436 } | 428 } |
486 } | 478 } |
487 xmlDoc.appendChild(metric); | 479 xmlDoc.appendChild(metric); |
488 var audioObjects = audioEngineContext.audioObjects; | 480 var audioObjects = audioEngineContext.audioObjects; |
489 for (var i=0; i<audioObjects.length; i++) | 481 for (var i=0; i<audioObjects.length; i++) |
490 { | 482 { |
491 var audioElement = document.createElement('audioElement'); | 483 var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM(); |
492 audioElement.id = audioObjects[i].id; | |
493 audioElement.setAttribute('url',audioObjects[i].url); | |
494 var value = document.createElement('value'); | |
495 value.innerHTML = convSliderPosToRate(i); | |
496 if (commentShow) { | |
497 var comment = document.createElement("comment"); | |
498 var question = document.createElement("question"); | |
499 var response = document.createElement("response"); | |
500 question.textContent = audioObjects[i].commentDOM.children[0].textContent; | |
501 response.textContent = audioObjects[i].commentDOM.children[2].value; | |
502 console.log('Comment ' + i + ': ' + response.textContent); // DEBUG/SAFETY | |
503 comment.appendChild(question); | |
504 comment.appendChild(response); | |
505 audioElement.appendChild(comment); | |
506 } | |
507 audioElement.appendChild(value); | |
508 // Check for any per element metrics | |
509 | |
510 audioElement.appendChild(audioObjects[i].metric.exportXMLDOM()); | |
511 xmlDoc.appendChild(audioElement); | 484 xmlDoc.appendChild(audioElement); |
512 } | 485 } |
513 var commentQuestion = document.getElementsByClassName('commentQuestion'); | 486 var commentQuestion = document.getElementsByClassName('commentQuestion'); |
514 for (var i=0; i<commentQuestion.length; i++) | 487 for (var i=0; i<commentQuestion.length; i++) |
515 { | 488 { |