Changeset 34810

Timestamp:

2021-02-07T13:23:23+13:00 (3 years ago)

Author:

davidb

Message:

Development of player+renderer so it can be configured to show either wave-peaks or freq-spec

Location:

gs3-extensions/mars-src/trunk/src

Files:

• wavesurfer-player/wavesurfer-player.js (modified) (2 diffs)
• wavesurfer-renderer/drawer.spectrummulticanvas.js (modified) (5 diffs)

gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js

@@ -5 +5 @@
 var wavesurfer = {};
 
+var renderWave = (gs.cgiParams.renderWave) ? gs.cgiParams.renderWave : 0;
+var renderHeight = (renderWave) ? 250 : 408;
+
 // Init & load audio file
 document.addEventListener('DOMContentLoaded', function() {
     wavesurfer = WaveSurfer.create({
         container: document.querySelector('#waveform'),
-    height: 408,
+    height: renderHeight,
     minPxPerSec: 2,
     //normalize: true,
@@ -16 +19 @@
     barGap: 1,    // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
     //renderer: SpectrumMultiCanvas, // class name does not appear to be in scope (resorted to chaning default in wavesurfer.js)
+    renderWave: renderWave,
         colorMap: viridisColorMap,
     avDataUrl: gs.collectionMetadata['httpPath']+'/index/assoc/'+gs.documentMetadata["assocfilepath"] + '/av.json', 

gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js

@@ -339 +339 @@
     this.valence_progress_timeline = new Array();
 
+    this.norm_arousal_progress_timeline = new Array();
+    this.norm_valence_progress_timeline = new Array();
+
     for (var i=1; i<num_vals; i++) {
         const start_t = this.timeline_steps[i-1];
         const end_t   = this.timeline_steps[i];
-
         const start_ts = Math.round((start_t / total_duration) * canvas_width);
         const end_ts   = Math.round((end_t   / total_duration) * canvas_width);
           
-        const start_arousal = this.norm_arousal_vals[i-1];
-        const start_valence = this.norm_valence_vals[i-1];
-
-        const end_arousal = this.norm_arousal_vals[i];
-        const end_valence = this.norm_valence_vals[i];
+        const start_arousal = this.arousal_vals[i-1];
+        const start_valence = this.valence_vals[i-1];
+        const end_arousal = this.arousal_vals[i];
+        const end_valence = this.valence_vals[i];
+
+        const norm_start_arousal = this.norm_arousal_vals[i-1];
+        const norm_start_valence = this.norm_valence_vals[i-1];
+        const norm_end_arousal = this.norm_arousal_vals[i];
+        const norm_end_valence = this.norm_valence_vals[i];
 
         const ts_diff = end_ts - start_ts;
         const arousal_diff = end_arousal - start_arousal;
         const valence_diff = end_valence - start_valence;
+        const norm_arousal_diff = norm_end_arousal - norm_start_arousal;
+        const norm_valence_diff = norm_end_valence - norm_start_valence;
 
         var local_ts = 0;
-        console.log("*** start_ts = " + start_ts +  ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");
-        console.log("*** start_arousal = " + start_arousal +  ", end_arousal = " + end_arousal);
+        //console.log("*** start_ts = " + start_ts +  ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");
+        //console.log("*** start_arousal = " + start_arousal +  ", end_arousal = " + end_arousal);
         
         for (var ts=start_ts; ts<end_ts; ts++) {
@@ -364 +372 @@
         var interpolated_arousal = start_arousal + (local_proportion * arousal_diff);
         var interpolated_valence = start_valence + (local_proportion * valence_diff);
+        var norm_interpolated_arousal = norm_start_arousal + (local_proportion * norm_arousal_diff);
+        var norm_interpolated_valence = norm_start_valence + (local_proportion * norm_valence_diff);
 
         this.arousal_progress_timeline[ts] = interpolated_arousal;
         this.valence_progress_timeline[ts] = interpolated_valence;
 
+        this.norm_arousal_progress_timeline[ts] = norm_interpolated_arousal;
+        this.norm_valence_progress_timeline[ts] = norm_interpolated_valence;
+
         local_ts++;
         }
     }
 
-    console.log(this);
-    console.log("*** done interpolated AV progress timeline");
+    //console.log(this);
+    console.log("Generated interpolated AV progress timeline");
     }
 
@@ -404 +417 @@
     
     updateCursor() {
-        this.style(this.progressWave, {
-            //borderRightWidth: this.params.cursorSpectrumWidth + 'px',
-            //borderRightColor: this.params.cursorSpectrumColor
-            borderRightWidth: '4px',
-            borderRightColor: 'rgba(255,255,255,0.3)'
-        });
+    if (this.params.renderWave == 1) {
+        super.updateCursor();
+    }
+    else {
+            this.style(this.progressWave, {
+        //borderRightWidth: this.params.cursorSpectrumWidth + 'px',
+        //borderRightColor: this.params.cursorSpectrumColor
+        borderRightWidth: '4px',
+        borderRightColor: 'rgba(255,255,255,0.3)'
+            });
+    }
     }
     
@@ -415 +433 @@
 
     drawPeaks(peaks, length, start, end) {
-        if (!this.setWidth(length)) {
-            this.clearWave();
-        }
-    
-    this.getFrequencies(this.drawSpectrogram);
+    if (this.params.renderWave == 1) {
+        super.drawPeaks(peaks,length,start,end);
+        if ($( "#av-display" ).length) {
+        $( "#av-display" ).show();
+        }
+        //this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
+    }
+    else {   
+            if (!this.setWidth(length)) {
+        this.clearWave();
+            }
+        
+        this.getFrequencies(this.drawSpectrogram);
+    }
     }
 
@@ -654 +681 @@
      */
     updateProgress(position) {
-    var canvas_width = this.canvases[0].wave.width;
-    console.log("position = " + position + "/" + canvas_width);
-    console.log(this);
+
+    if (!this.arousal_progress_timeline) {
+        this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
+    }
+    
+    if (this.params.renderWave == 1) {
+        super.updateProgress(position);
+    }
+    else {
+        
+        var canvas_width = this.canvases[0].wave.width;
+        // ****
+        //console.log("position = " + position + "/" + canvas_width);
+        //console.log(this);
+
+        var norm_arousal_val = this.norm_arousal_progress_timeline[position];
+        var norm_valence_val = this.norm_valence_progress_timeline[position];
+
+        // ****
+        //console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val);
+        
+        // shift [-1,1] scale
+        /*
+        var css_norm_valence_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
+        var css_norm_arousal_width = (norm_valence_val + 1.0) * 20;
+        
+            this.style(this.progressWave, {
+        borderRightWidth: css_norm_arousal_width+'px',
+        borderRightColor: 'rgba(255,255,255,'+css_norm_valence_alpha+')'
+            });
+*/
+
+        
+        var css_norm_arousal_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
+        var css_norm_valence_width = (norm_valence_val + 1.0) * 20;
+        
+            this.style(this.progressWave, {
+        borderRightWidth: css_norm_valence_width+'px',
+        borderRightColor: 'rgba(255,255,255,'+css_norm_arousal_alpha+')'
+            });
+        
+        super.updateProgress(position);
+    }
+
     var arousal_val = this.arousal_progress_timeline[position];
     var valence_val = this.valence_progress_timeline[position];
-    
-    console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val);
-
-    // shift [-1,1] scale
-    var css_arousal_alpha = 0.5 + (arousal_val + 1.0)/4.0;
-    var css_valence_width = (arousal_val + 1.0) * 20;
-    
-        this.style(this.progressWave, {
-            borderRightWidth: css_valence_width+'px',
-            borderRightColor: 'rgba(255,255,255,'+css_arousal_alpha+')'
-        });
-    
-    super.updateProgress(position);
+
+    var arousal_val_3dp = Math.round(arousal_val*1000)/1000;
+    var valence_val_3dp = Math.round(valence_val*1000)/1000;
+
+    if (arousal_val_3dp >= 0) {
+        arousal_val_3dp = "&nbsp;" + arousal_val_3d;
+    }
+
+    if (valence_val_3dp >= 0) {
+        valence_val_3dp = "&nbsp;" + valence_val_3d;
+    }
+
+    if ($('#arousal-val').length) {
+        $('#arousal-val').text(arousal_val_3dp);
+    }
+    if ($('#valence-val').length) {
+        $('#valence-val').text(valence_val_3dp);
+    }
+    
     }