Changeset 34810 for gs3-extensions/mars-src/trunk
- Timestamp:
- 2021-02-07T13:23:23+13:00 (3 years ago)
- Location:
- gs3-extensions/mars-src/trunk/src
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js
r34809 r34810 5 5 var wavesurfer = {}; 6 6 7 var renderWave = (gs.cgiParams.renderWave) ? gs.cgiParams.renderWave : 0; 8 var renderHeight = (renderWave) ? 250 : 408; 9 7 10 // Init & load audio file 8 11 document.addEventListener('DOMContentLoaded', function() { 9 12 wavesurfer = WaveSurfer.create({ 10 13 container: document.querySelector('#waveform'), 11 height: 408,14 height: renderHeight, 12 15 minPxPerSec: 2, 13 16 //normalize: true, … … 16 19 barGap: 1, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format 17 20 //renderer: SpectrumMultiCanvas, // class name does not appear to be in scope (resorted to chaning default in wavesurfer.js) 21 renderWave: renderWave, 18 22 colorMap: viridisColorMap, 19 23 avDataUrl: gs.collectionMetadata['httpPath']+'/index/assoc/'+gs.documentMetadata["assocfilepath"] + '/av.json', -
gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js
r34809 r34810 339 339 this.valence_progress_timeline = new Array(); 340 340 341 this.norm_arousal_progress_timeline = new Array(); 342 this.norm_valence_progress_timeline = new Array(); 343 341 344 for (var i=1; i<num_vals; i++) { 342 345 const start_t = this.timeline_steps[i-1]; 343 346 const end_t = this.timeline_steps[i]; 344 345 347 const start_ts = Math.round((start_t / total_duration) * canvas_width); 346 348 const end_ts = Math.round((end_t / total_duration) * canvas_width); 347 349 348 const start_arousal = this.norm_arousal_vals[i-1]; 349 const start_valence = this.norm_valence_vals[i-1]; 350 351 const end_arousal = this.norm_arousal_vals[i]; 352 const end_valence = this.norm_valence_vals[i]; 350 const start_arousal = this.arousal_vals[i-1]; 351 const start_valence = this.valence_vals[i-1]; 352 const end_arousal = this.arousal_vals[i]; 353 const end_valence = this.valence_vals[i]; 354 355 const norm_start_arousal = this.norm_arousal_vals[i-1]; 356 const norm_start_valence = this.norm_valence_vals[i-1]; 357 const norm_end_arousal = this.norm_arousal_vals[i]; 358 const norm_end_valence = this.norm_valence_vals[i]; 353 359 354 360 const ts_diff = end_ts - start_ts; 355 361 const arousal_diff = end_arousal - start_arousal; 356 362 const valence_diff = end_valence - start_valence; 363 const norm_arousal_diff = norm_end_arousal - norm_start_arousal; 364 const norm_valence_diff = norm_end_valence - norm_start_valence; 357 365 358 366 var local_ts = 0; 359 console.log("*** start_ts = " + start_ts + ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");360 console.log("*** start_arousal = " + start_arousal + ", end_arousal = " + end_arousal);367 //console.log("*** start_ts = " + start_ts + ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")"); 368 //console.log("*** start_arousal = " + start_arousal + ", end_arousal = " + end_arousal); 361 369 362 370 for (var ts=start_ts; ts<end_ts; ts++) { … … 364 372 var interpolated_arousal = start_arousal + (local_proportion * arousal_diff); 365 373 var interpolated_valence = start_valence + (local_proportion * valence_diff); 374 var norm_interpolated_arousal = norm_start_arousal + (local_proportion * norm_arousal_diff); 375 var norm_interpolated_valence = norm_start_valence + (local_proportion * norm_valence_diff); 366 376 367 377 this.arousal_progress_timeline[ts] = interpolated_arousal; 368 378 this.valence_progress_timeline[ts] = interpolated_valence; 369 379 380 this.norm_arousal_progress_timeline[ts] = norm_interpolated_arousal; 381 this.norm_valence_progress_timeline[ts] = norm_interpolated_valence; 382 370 383 local_ts++; 371 384 } 372 385 } 373 386 374 console.log(this);375 console.log(" *** doneinterpolated AV progress timeline");387 //console.log(this); 388 console.log("Generated interpolated AV progress timeline"); 376 389 } 377 390 … … 404 417 405 418 updateCursor() { 406 this.style(this.progressWave, { 407 //borderRightWidth: this.params.cursorSpectrumWidth + 'px', 408 //borderRightColor: this.params.cursorSpectrumColor 409 borderRightWidth: '4px', 410 borderRightColor: 'rgba(255,255,255,0.3)' 411 }); 419 if (this.params.renderWave == 1) { 420 super.updateCursor(); 421 } 422 else { 423 this.style(this.progressWave, { 424 //borderRightWidth: this.params.cursorSpectrumWidth + 'px', 425 //borderRightColor: this.params.cursorSpectrumColor 426 borderRightWidth: '4px', 427 borderRightColor: 'rgba(255,255,255,0.3)' 428 }); 429 } 412 430 } 413 431 … … 415 433 416 434 drawPeaks(peaks, length, start, end) { 417 if (!this.setWidth(length)) { 418 this.clearWave(); 419 } 420 421 this.getFrequencies(this.drawSpectrogram); 435 if (this.params.renderWave == 1) { 436 super.drawPeaks(peaks,length,start,end); 437 if ($( "#av-display" ).length) { 438 $( "#av-display" ).show(); 439 } 440 //this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ?? 441 } 442 else { 443 if (!this.setWidth(length)) { 444 this.clearWave(); 445 } 446 447 this.getFrequencies(this.drawSpectrogram); 448 } 422 449 } 423 450 … … 654 681 */ 655 682 updateProgress(position) { 656 var canvas_width = this.canvases[0].wave.width; 657 console.log("position = " + position + "/" + canvas_width); 658 console.log(this); 683 684 if (!this.arousal_progress_timeline) { 685 this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ?? 686 } 687 688 if (this.params.renderWave == 1) { 689 super.updateProgress(position); 690 } 691 else { 692 693 var canvas_width = this.canvases[0].wave.width; 694 // **** 695 //console.log("position = " + position + "/" + canvas_width); 696 //console.log(this); 697 698 var norm_arousal_val = this.norm_arousal_progress_timeline[position]; 699 var norm_valence_val = this.norm_valence_progress_timeline[position]; 700 701 // **** 702 //console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val); 703 704 // shift [-1,1] scale 705 /* 706 var css_norm_valence_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0; 707 var css_norm_arousal_width = (norm_valence_val + 1.0) * 20; 708 709 this.style(this.progressWave, { 710 borderRightWidth: css_norm_arousal_width+'px', 711 borderRightColor: 'rgba(255,255,255,'+css_norm_valence_alpha+')' 712 }); 713 */ 714 715 716 var css_norm_arousal_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0; 717 var css_norm_valence_width = (norm_valence_val + 1.0) * 20; 718 719 this.style(this.progressWave, { 720 borderRightWidth: css_norm_valence_width+'px', 721 borderRightColor: 'rgba(255,255,255,'+css_norm_arousal_alpha+')' 722 }); 723 724 super.updateProgress(position); 725 } 726 659 727 var arousal_val = this.arousal_progress_timeline[position]; 660 728 var valence_val = this.valence_progress_timeline[position]; 661 662 console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val); 663 664 // shift [-1,1] scale 665 var css_arousal_alpha = 0.5 + (arousal_val + 1.0)/4.0; 666 var css_valence_width = (arousal_val + 1.0) * 20; 667 668 this.style(this.progressWave, { 669 borderRightWidth: css_valence_width+'px', 670 borderRightColor: 'rgba(255,255,255,'+css_arousal_alpha+')' 671 }); 672 673 super.updateProgress(position); 729 730 var arousal_val_3dp = Math.round(arousal_val*1000)/1000; 731 var valence_val_3dp = Math.round(valence_val*1000)/1000; 732 733 if (arousal_val_3dp >= 0) { 734 arousal_val_3dp = " " + arousal_val_3d; 735 } 736 737 if (valence_val_3dp >= 0) { 738 valence_val_3dp = " " + valence_val_3d; 739 } 740 741 if ($('#arousal-val').length) { 742 $('#arousal-val').text(arousal_val_3dp); 743 } 744 if ($('#valence-val').length) { 745 $('#valence-val').text(valence_val_3dp); 746 } 747 674 748 } 675 749
Note:
See TracChangeset
for help on using the changeset viewer.