Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 371:ad267c5e32ae
Merge of dev into default/master
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Fri, 04 Dec 2015 11:00:55 +0000 |
parents | ed22a47dcacd |
children | 81246d594793 |
comparison
equal
deleted
inserted
replaced
370:58fdadeb1414 | 371:ad267c5e32ae |
---|---|
4 */ | 4 */ |
5 | 5 |
6 | 6 |
7 // Once this is loaded and parsed, begin execution | 7 // Once this is loaded and parsed, begin execution |
8 loadInterface(); | 8 loadInterface(); |
9 | |
10 var clicking = -1; | |
9 | 11 |
10 function loadInterface() { | 12 function loadInterface() { |
11 | 13 |
12 // Get the dimensions of the screen available to the page | 14 // Get the dimensions of the screen available to the page |
13 var width = window.innerWidth; | 15 var width = window.innerWidth; |
170 alert('Please use the full width of the scale'); | 172 alert('Please use the full width of the scale'); |
171 return false; | 173 return false; |
172 } else { | 174 } else { |
173 return true; | 175 return true; |
174 } | 176 } |
177 }; | |
178 | |
179 Interface.prototype.objectSelected = null; | |
180 Interface.prototype.objectMoved = false; | |
181 Interface.prototype.selectObject = function(object) | |
182 { | |
183 if (this.objectSelected == null) | |
184 { | |
185 this.objectSelected = object; | |
186 this.objectMoved = false; | |
187 } | |
188 }; | |
189 Interface.prototype.moveObject = function() | |
190 { | |
191 if (this.objectMoved == false) | |
192 { | |
193 this.objectMoved = true; | |
194 } | |
195 }; | |
196 Interface.prototype.releaseObject = function() | |
197 { | |
198 this.objectSelected = null; | |
199 this.objectMoved = false; | |
200 }; | |
201 Interface.prototype.getSelectedObject = function() | |
202 { | |
203 return this.objectSelected; | |
204 }; | |
205 Interface.prototype.hasSelectedObjectMoved = function() | |
206 { | |
207 return this.objectMoved; | |
175 }; | 208 }; |
176 | 209 |
177 // Bindings for audioObjects | 210 // Bindings for audioObjects |
178 | 211 |
179 // Create the top div for the Title element | 212 // Create the top div for the Title element |
366 | 399 |
367 var loopPlayback = audioHolderObject.loop; | 400 var loopPlayback = audioHolderObject.loop; |
368 | 401 |
369 audioEngineContext.loopPlayback = loopPlayback; | 402 audioEngineContext.loopPlayback = loopPlayback; |
370 // Create AudioEngine bindings for playback | 403 // Create AudioEngine bindings for playback |
371 audioEngineContext.selectedTrack = function(id) { | |
372 console.log('Deprecated'); | |
373 }; | |
374 | 404 |
375 currentTestHolder = document.createElement('audioHolder'); | 405 currentTestHolder = document.createElement('audioHolder'); |
376 currentTestHolder.id = audioHolderObject.id; | 406 currentTestHolder.id = audioHolderObject.id; |
377 currentTestHolder.repeatCount = audioHolderObject.repeatCount; | 407 currentTestHolder.repeatCount = audioHolderObject.repeatCount; |
378 | 408 |
403 | 433 |
404 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); | 434 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); |
405 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); | 435 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); |
406 | 436 |
407 }); | 437 }); |
438 | |
439 $('.track-slider').mousedown(function(event) { | |
440 interfaceContext.selectObject($(this)[0]); | |
441 }); | |
442 | |
443 $('.track-slider').mousemove(function(event) { | |
444 event.preventDefault(); | |
445 }); | |
446 | |
447 $('#slider').mousemove(function(event) { | |
448 event.preventDefault(); | |
449 var obj = interfaceContext.getSelectedObject(); | |
450 if (obj == null) {return;} | |
451 $(obj).css("left",event.clientX + "px"); | |
452 interfaceContext.moveObject(); | |
453 }); | |
454 | |
455 $(document).mouseup(function(event){ | |
456 event.preventDefault(); | |
457 var obj = interfaceContext.getSelectedObject(); | |
458 if (obj == null) {return;} | |
459 if (interfaceContext.hasSelectedObjectMoved() == true) | |
460 { | |
461 var l = $(obj).css("left"); | |
462 var id = obj.getAttribute('trackIndex'); | |
463 var time = audioEngineContext.timer.getTestTime(); | |
464 var rate = convSliderPosToRate(obj); | |
465 audioEngineContext.audioObjects[id].metric.moved(time,rate); | |
466 console.log("slider "+id+" moved to "+rate+' ('+time+')'); | |
467 } else { | |
468 var id = Number(obj.attributes['trackIndex'].value); | |
469 //audioEngineContext.metric.sliderPlayed(id); | |
470 audioEngineContext.play(id); | |
471 // Currently playing track red, rest green | |
472 | |
473 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | |
474 $('.track-slider').removeClass('track-slider-playing'); | |
475 $(obj).addClass('track-slider-playing'); | |
476 $('.comment-div').removeClass('comment-box-playing'); | |
477 $('#comment-div-'+id).addClass('comment-box-playing'); | |
478 var outsideReference = document.getElementById('outside-reference'); | |
479 if (outsideReference != undefined) | |
480 $(outsideReference).removeClass('track-slider-playing'); | |
481 } | |
482 interfaceContext.releaseObject(); | |
483 }); | |
484 | |
485 | |
408 if (commentShow) { | 486 if (commentShow) { |
409 interfaceContext.showCommentBoxes(feedbackHolder,true); | 487 interfaceContext.showCommentBoxes(feedbackHolder,true); |
410 } | 488 } |
411 | 489 |
412 $(audioHolderObject.commentQuestions).each(function(index,element) { | 490 $(audioHolderObject.commentQuestions).each(function(index,element) { |
450 this.trackSliderObj.className = 'track-slider track-slider-disabled'; | 528 this.trackSliderObj.className = 'track-slider track-slider-disabled'; |
451 this.trackSliderObj.id = 'track-slider-'+audioObject.id; | 529 this.trackSliderObj.id = 'track-slider-'+audioObject.id; |
452 | 530 |
453 this.trackSliderObj.setAttribute('trackIndex',audioObject.id); | 531 this.trackSliderObj.setAttribute('trackIndex',audioObject.id); |
454 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>'; | 532 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>'; |
455 this.trackSliderObj.draggable = true; | |
456 this.trackSliderObj.ondragend = dragEnd; | |
457 | |
458 this.trackSliderObj.ondragstart = function(event){ | |
459 event.dataTransfer.setData('Text',null); | |
460 }; | |
461 | |
462 this.trackSliderObj.ondrop = function(event) | |
463 { | |
464 if(event.stopPropagation) {event.stopPropagation();} | |
465 return false; | |
466 }; | |
467 | 533 |
468 // Onclick, switch playback to that track | 534 // Onclick, switch playback to that track |
469 this.trackSliderObj.onclick = function(event) { | |
470 // Cannot continue to issue play command until audioObjects reported as ready! | |
471 // Get the track ID from the object ID | |
472 var element; | |
473 if (event.currentTarget.nodeName == "SPAN") { | |
474 element = event.currentTarget.parentNode; | |
475 } else { | |
476 element = event.currentTarget; | |
477 } | |
478 var id = Number(element.attributes['trackIndex'].value); | |
479 //audioEngineContext.metric.sliderPlayed(id); | |
480 audioEngineContext.play(id); | |
481 // Currently playing track red, rest green | |
482 | |
483 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | |
484 $('.track-slider').removeClass('track-slider-playing'); | |
485 $(element).addClass('track-slider-playing'); | |
486 $('.comment-div').removeClass('comment-box-playing'); | |
487 $('#comment-div-'+id).addClass('comment-box-playing'); | |
488 var outsideReference = document.getElementById('outside-reference'); | |
489 if (outsideReference != undefined) | |
490 $(outsideReference).removeClass('track-slider-playing'); | |
491 }; | |
492 | 535 |
493 this.enable = function() { | 536 this.enable = function() { |
494 if (this.parent.state == 1) | 537 if (this.parent.state == 1) |
495 { | 538 { |
496 $(this.trackSliderObj).removeClass('track-slider-disabled'); | 539 $(this.trackSliderObj).removeClass('track-slider-disabled'); |
504 return node; | 547 return node; |
505 }; | 548 }; |
506 this.getValue = function() { | 549 this.getValue = function() { |
507 return convSliderPosToRate(this.trackSliderObj); | 550 return convSliderPosToRate(this.trackSliderObj); |
508 }; | 551 }; |
509 } | |
510 | |
511 function dragEnd(ev) { | |
512 // Function call when a div has been dropped | |
513 var slider = document.getElementById('slider'); | |
514 var marginSize = Number(slider.attributes['marginsize'].value); | |
515 var w = slider.style.width; | |
516 w = Number(w.substr(0,w.length-2)); | |
517 var x = ev.screenX; | |
518 | |
519 x += Math.abs(window.screenX); | |
520 x = x % window.outerWidth; | |
521 | |
522 if (x >= marginSize && x < w+marginSize) { | |
523 this.style.left = (x)+'px'; | |
524 } else { | |
525 if (x<marginSize) { | |
526 this.style.left = marginSize+'px'; | |
527 } else { | |
528 this.style.left = (w+marginSize) + 'px'; | |
529 } | |
530 } | |
531 var time = audioEngineContext.timer.getTestTime(); | |
532 var id = Number(ev.currentTarget.getAttribute('trackindex')); | |
533 audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.currentTarget)); | |
534 console.log('slider '+id+' moved to '+convSliderPosToRate(ev.currentTarget)+' ('+time+')'); | |
535 } | 552 } |
536 | 553 |
537 function buttonSubmitClick() | 554 function buttonSubmitClick() |
538 { | 555 { |
539 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options; | 556 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options; |
552 var checkState = interfaceContext.checkAllPlayed(); | 569 var checkState = interfaceContext.checkAllPlayed(); |
553 if (checkState == false) {canContinue = false;} | 570 if (checkState == false) {canContinue = false;} |
554 break; | 571 break; |
555 case 'fragmentFullPlayback': | 572 case 'fragmentFullPlayback': |
556 // Check all fragments have been played to their full length | 573 // Check all fragments have been played to their full length |
557 var checkState = interfaceContext.checkAllPlayed(); | 574 var checkState = interfaceContext.checkFragmentsFullyPlayed(); |
558 if (checkState == false) {canContinue = false;} | 575 if (checkState == false) {canContinue = false;} |
559 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); | |
560 break; | 576 break; |
561 case 'fragmentMoved': | 577 case 'fragmentMoved': |
562 // Check all fragment sliders have been moved. | 578 // Check all fragment sliders have been moved. |
563 var checkState = interfaceContext.checkAllMoved(); | 579 var checkState = interfaceContext.checkAllMoved(); |
564 if (checkState == false) {canContinue = false;} | 580 if (checkState == false) {canContinue = false;} |