Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 1750:1365362c12d5
Merge from 156:402bb0f56dc4
author | Nicholas Jillings <nickjillings@users.noreply.github.com> |
---|---|
date | Mon, 01 Jun 2015 12:56:15 +0100 |
parents | 9771f65eec66 |
children | 3a77fed8a32c |
comparison
equal
deleted
inserted
replaced
1601:1c7cd4613a96 | 1750:1365362c12d5 |
---|---|
265 | 265 |
266 // Load the full interface | 266 // Load the full interface |
267 testState.initialise(); | 267 testState.initialise(); |
268 testState.advanceState(); | 268 testState.advanceState(); |
269 | 269 |
270 testWaitIndicator(); | |
271 } | 270 } |
272 | 271 |
273 function loadTest(textXML) | 272 function loadTest(textXML) |
274 { | 273 { |
275 | 274 |
406 | 405 |
407 if (commentShow) { | 406 if (commentShow) { |
408 // Create document objects to hold the comment boxes | 407 // Create document objects to hold the comment boxes |
409 var trackComment = document.createElement('div'); | 408 var trackComment = document.createElement('div'); |
410 trackComment.className = 'comment-div'; | 409 trackComment.className = 'comment-div'; |
410 trackComment.id = 'comment-div-'+index; | |
411 // Create a string next to each comment asking for a comment | 411 // Create a string next to each comment asking for a comment |
412 var trackString = document.createElement('span'); | 412 var trackString = document.createElement('span'); |
413 trackString.innerHTML = 'Comment on track '+index; | 413 trackString.innerHTML = 'Comment on track '+index; |
414 // Create the HTML5 comment box 'textarea' | 414 // Create the HTML5 comment box 'textarea' |
415 var trackCommentBox = document.createElement('textarea'); | 415 var trackCommentBox = document.createElement('textarea'); |
428 // Create a slider per track | 428 // Create a slider per track |
429 | 429 |
430 var trackSliderObj = document.createElement('div'); | 430 var trackSliderObj = document.createElement('div'); |
431 trackSliderObj.className = 'track-slider'; | 431 trackSliderObj.className = 'track-slider'; |
432 trackSliderObj.id = 'track-slider-'+index; | 432 trackSliderObj.id = 'track-slider-'+index; |
433 | |
434 var trackSliderAOIndex = document.createAttribute('trackIndex'); | |
435 trackSliderAOIndex.nodeValue = index; | |
436 trackSliderObj.setAttributeNode(trackSliderAOIndex); | |
437 | |
433 // Distribute it randomnly | 438 // Distribute it randomnly |
434 var w = window.innerWidth - (offset+8)*2; | 439 var w = window.innerWidth - (offset+8)*2; |
435 w = Math.random()*w; | 440 w = Math.random()*w; |
436 w = Math.floor(w+(offset+8)); | 441 w = Math.floor(w+(offset+8)); |
437 trackSliderObj.style.left = w+'px'; | 442 trackSliderObj.style.left = w+'px'; |
438 trackSliderObj.innerHTML = '<span>'+index+'</span>'; | 443 trackSliderObj.innerHTML = '<span>'+index+'</span>'; |
439 trackSliderObj.draggable = true; | 444 trackSliderObj.draggable = true; |
440 trackSliderObj.ondragend = dragEnd; | 445 trackSliderObj.ondragend = dragEnd; |
441 trackSliderObj.ondragstart = function() | 446 trackSliderObj.ondragstart = function() |
442 { | 447 { |
443 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! | 448 var id = Number(event.srcElement.attributes['trackIndex'].value); |
444 audioEngineContext.metric.sliderMoveStart(id); | 449 audioEngineContext.metric.sliderMoveStart(id); |
445 }; | 450 }; |
446 | 451 |
447 // Onclick, switch playback to that track | 452 // Onclick, switch playback to that track |
448 trackSliderObj.onclick = function() { | 453 trackSliderObj.onclick = function() { |
449 // Start the test on first click, that way timings are more accurate. | 454 // Start the test on first click, that way timings are more accurate. |
450 audioEngineContext.play(); | 455 audioEngineContext.play(); |
451 if (audioEngineContext.audioObjectsReady) { | 456 if (audioEngineContext.audioObjectsReady) { |
452 // Cannot continue to issue play command until audioObjects reported as ready! | 457 // Cannot continue to issue play command until audioObjects reported as ready! |
453 // Get the track ID from the object ID | 458 // Get the track ID from the object ID |
454 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! | 459 var id = Number(event.srcElement.attributes['trackIndex'].value); |
455 //audioEngineContext.metric.sliderPlayed(id); | 460 //audioEngineContext.metric.sliderPlayed(id); |
456 audioEngineContext.selectedTrack(id); | 461 audioEngineContext.selectedTrack(id); |
457 // Currently playing track red, rest green | 462 // Currently playing track red, rest green |
458 document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | 463 |
459 for (var i = 0; i<$(currentTrackOrder).length; i++) | 464 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; |
460 { | 465 $('.track-slider').removeClass('track-slider-playing'); |
461 if (i!=index) // Make all other sliders green | 466 $(event.srcElement).addClass('track-slider-playing'); |
462 { | 467 $('.comment-div').removeClass('comment-box-playing'); |
463 document.getElementById('track-slider-'+i).style.backgroundColor = "rgb(100,200,100)"; | 468 $('#comment-div-'+id).addClass('comment-box-playing'); |
464 } | |
465 | |
466 } | |
467 } | 469 } |
468 }; | 470 }; |
469 | 471 |
470 canvas.appendChild(trackSliderObj); | 472 canvas.appendChild(trackSliderObj); |
471 audioEngineContext.audioObjects[index].metric.initialised(convSliderPosToRate(index)); | 473 audioEngineContext.audioObjects[index].metric.initialised(convSliderPosToRate(index)); |
493 trackComment.appendChild(trackString); | 495 trackComment.appendChild(trackString); |
494 trackComment.appendChild(br); | 496 trackComment.appendChild(br); |
495 trackComment.appendChild(trackCommentBox); | 497 trackComment.appendChild(trackCommentBox); |
496 feedbackHolder.appendChild(trackComment); | 498 feedbackHolder.appendChild(trackComment); |
497 }); | 499 }); |
500 | |
501 | |
502 testWaitIndicator(); | |
498 } | 503 } |
499 | 504 |
500 | 505 |
501 function dragEnd(ev) { | 506 function dragEnd(ev) { |
502 // Function call when a div has been dropped | 507 // Function call when a div has been dropped |