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 {