Changeset 37673

Timestamp:

2023-04-18T10:36:19+12:00 (12 months ago)

Author:

davidb

Message:

Reverting back to renderWave=0 as default; added icon/legend for the two different AV charts

Location:

gs3-installations/mars/trunk/sites/mars/collect/amc-essentia

Files:

• etc/collectionConfig.xml (modified) (2 diffs)
• js/av_document.js (modified) (12 diffs)

gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/etc/collectionConfig.xml

@@ -976 +976 @@
                 <div style="font-style: italic; min-height: 3.5rem;">
                   <div style="float:right;">
-                <span style="display: inline-block; margin-bottomXXXX: 10px;;" class="display-view-modes" onclick="return showAVChartLabelled();">Labelled AV Chart</span>
+                <span style="display: inline-block; margin-bottomXXXX: 5px;" class="display-view-modes" onclick="return loginToRecord()">
+                  <img width="16" height="16" src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/crosshair-cursor-red32.png"/>
+                  Show your AV Feelings
+                </span>
                 <br />
-                <span style="display: inline-block; margin-bottomXXXX: 5px;" class="display-view-modes" onclick="return loginToRecord()">Customise AV Experience </span>
+                <span style="display: inline-block; margin-bottomXXXX: 10px;;" class="display-view-modes" onclick="return showAVChartLabelled();">
+                  <canvas id="choose-within-av-chart-legend" width="16" height="16" style="width: 16px; height: 16px;">
+                    Your browser does not support the canvas element
+                  </canvas>
+                  <gsf:script>
+                    $(document).ready(function() {
+                        var cwav_chart_legend = document.getElementById('choose-within-av-chart-legend');
+    
+                    var ctx = cwav_chart_legend.getContext("2d");
+                    ctx.clearRect(0, 0, cwav_chart_legend.width, cwav_chart_legend.height);
+                    ctx.beginPath();
+                    ctx.arc(8, 8, 4.5, 0, 2*Math.PI, false);
+                    ctx.fillStyle = 'rgba(50,50,128,0.5)';
+                    ctx.fill();
+                    ctx.lineWidth = 1;
+                    ctx.strokeStyle = 'rgba(0,0,160,0.5)';
+                    ctx.stroke();
+                     });
+                  </gsf:script>
+                  Choose within AV Chart
+                </span>
                   </div>
                   
@@ -984 +1007 @@
                 Based on the start of this musical/sound art work:
                   </span>
-                  <input onclick="return preSubmit(this.form);" type="submit" value="Make Arousal-Valence Recommendation"/>
+                  <input onclick="return preSubmit(this.form);" type="submit" styleXXXX="font-size: 1.2rem;" value="Make Arousal-Valence Recommendation"/>
                   <div id="makeRecommendationFrom-AV" style="font-style: italics; font-size: 90%; display: none;"> <!-- **** -->
                 <xsl:text> </xsl:text>

gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js

@@ -115 +115 @@
     //$('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);
 
-    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time);
-}
+    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time, true);
+}
+
+
+function preSubmitDiff() 
+{
+    var form = $('#av-query-form')[0];
+
+    // Note, the Arousal and Valence feature window values used is:
+    //   6 secs + 50% overlap
+    // So the Weka computed AV values are spaced out:
+    //   6s, 9s, 12s, ...
+    
+    // clamp to ensure >= 6.0 secs 
+    //var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
+    //var current_time_1dp = current_time.toFixed(1);
+
+    var clamped_current_time = displayClampedCurrentTimeAndAV();
+    
+    AVEnsurePaused();
+    
+    weka_segment = Math.round(clamped_current_time/3) * 3;
+    form.elements["s1.offset"].value = weka_segment;
+    
+    var arousal_val = parseFloat($('#arousal-val').text());
+    var valence_val = parseFloat($('#valence-val').text());
+
+
+    // Now to come up with something that's different
+
+    var num_choices = 3;
+    var mix_up_choice = Math.floor(Math.random() * (num_choices))
+
+    if ((mix_up_choice == 0) || (mix_up_choice == 1)) { 
+    arousal_val = -1 * arousal_val;
+    }
+    if ((mix_up_choice == 0) || (mix_up_choice == 2)) {     
+    valence_val = -1 * valence_val;
+    }
+    
+    var av_magnitude = Math.sqrt(arousal_val*arousal_val + valence_val*valence_val);
+
+    if (av_magnitude < 0.1) {
+    arousal_val *= 9.0;
+    valence_val *= 9.0;
+    }
+    else if (av_magnitude < 0.25) {
+    arousal_val *= 3.0;
+    valence_val *= 3.0;
+    }
+    else if (av_magnitude < 0.5) {
+    arousal_val *= 1.5;
+    valence_val *= 1.5;
+    }
+
+    var mix_up_boost = 1.0 + Math.random() * 0.1; // additive 10% boost
+    arousal_val *= mix_up_boost;
+    valence_val *= mix_up_boost;
+    
+    //$('#arousal-val').text(arousal_val.toFixed(3));
+    //$('#valence-val').text(valence_val.toFixed(3));
+
+    //$('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);
+
+    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time, false);
+}
+
 
 function AVPlotRecommendations()
@@ -283 +348 @@
 }
 
-function submitAVRecommendation(form, arousal_val,valence_val, current_time)
+function submitAVRecommendation(form, arousal_val,valence_val, current_time, update_av_vals)
 {
     var adjusted_arousal_val = arousal_val;
@@ -303 +368 @@
     adjusted_valence_val = Math.max(-1.0,Math.min(1.0,adjusted_valence_val));
     }
-    
-    form.elements["s1.arousal"].value = adjusted_arousal_val;
-    form.elements["s1.valence"].value = adjusted_valence_val;
+
+    if (update_av_vals) {
+    form.elements["s1.arousal"].value = adjusted_arousal_val;
+    form.elements["s1.valence"].value = adjusted_valence_val;
+    }
         
     var args = {
@@ -325 +392 @@
     };
 
-    
+    // ***** !!!! *****
     var url = "https://mars.so-we-must-think.space/greenstone3/library";
 
@@ -344 +411 @@
     })
     .done(function(html_result) {
-        $('#resultsAreaDiv').html("<div>Recommendations:</div>"+html_result);
+
+        var make_diff_recommend_html = '<div style="padding-top: 20px;">Or <input onclick="return preSubmitDiff();" styleXXXX="font-size: 1.2rem;" type="submit" value="Recommend Something Different" valueXX="Make Arousal-Valence Recommendation"/></div>';
+        
+        $('#resultsAreaDiv').html("<div>Recommendations:</div>"+html_result + make_diff_recommend_html);
         $('#av-chart-div').show();
 
-        AVPlotRecommendations();
+        if (update_av_vals) {
+        AVPlotRecommendations();
+        }
         
         if (current_time) {
@@ -389 +461 @@
 {
     console.log("postInitWavesurfer called with wavesufer = " + wavesurfer);
-    
+
+    //$('#waveform').css('cusor','wait');
+    //console.log("***** ##### !!!!! Away to load audio MP3 file => set cursor to 'wait'");
+
+//    wavesurfer.on('waveform-ready', function () {
+//  console.log("**** #### !!!! wavesurfer Event 'waveform-ready': MP3 loaded and wavesurfer rendered => reverting cursor");
+//  $('#waveform').css('cusor','revert');
+//    });
+          
+   
     wavesurfer.load(gs.variables.mp3url);
     
@@ -415 +496 @@
     av_chart_record_finish();
     });
+
     
     wavesurfer.on('ready', function () {
 
+    //$('#waveform').css('cusor','revert');
+    
     console.log("**** wavesurfer ready()");
+    //console.log("**** wavesurfer waveform-ready()");
     //wavesurfer.drawer.setWidth(958);
     
@@ -440 +525 @@
     }
     
-    // The following draw blank visuals
-    //wavesurfer.drawBuffer();
-    //wavesurfer.zoom();
-    
     });
 
@@ -563 +644 @@
     form.elements["s1.offset"].value = weka_segment;
     
-    submitAVRecommendation(form, capped_av_x, capped_av_y, null);
+    submitAVRecommendation(form, capped_av_x, capped_av_y, null, true);
     
 }
@@ -916 +997 @@
     var renderWave = doc_url.searchParams.get('renderWave');
 
-    if (renderWave && (renderWave == 1)) {
-    // showing the waveform => offer link to spectrogram
-    const sts_url = new URL(window.location);
-    sts_url.searchParams.set('renderWave', 0);
-    $('#switch-to-spectrogram').attr("href",sts_url);
-    $('#switch-to-waveform').hide();
-
-    $('#av-timelinebar-help').hide();
-    }
-    else {
+    if (renderWave && (renderWave == 0)) {
     // show the spectrogram => offer link to waveform
     
@@ -933 +1005 @@
     $('#switch-to-spectrogram').hide();
 
-    $('#av-timelinebar-help').show();   
+    $('#av-timelinebar-help').show();       
+    }
+    else {
+    // showing the waveform => offer link to spectrogram
+    const sts_url = new URL(window.location);
+    sts_url.searchParams.set('renderWave', 0);
+    sts_url.searchParams.set('showRecordAV', 0); // ****
+    $('#switch-to-spectrogram').attr("href",sts_url);
+    $('#switch-to-waveform').hide();
+
+    $('#av-timelinebar-help').hide();
     }
 }
@@ -1075 +1157 @@
     $av_labels.css("display","none");
     */
+
+
+    var this_url = new URL(window.location)
+    var renderWave = this_url.searchParams.get('renderWave');
+    if (renderWave != 1) {
+        // Force to be waveForm Display
+        this_url.searchParams.set('renderWave', '1');
+        this_url.searchParams.set('showRecordAV', '1');
+        window.location.href = this_url.toString();
+    }
 
     //console.log("Away to hide standard av-chart-img and show av-chart-img-unlabeled");