Changeset 37029 for gs3-installations

Timestamp:

2022-12-15T11:22:13+13:00 (17 months ago)

Author:

davidb

Message:

Some debugging work around treatment of AV values; Some initial work in moving the AV-chart to a main central area, rather than being part of the AV-Recommendation area

Location:

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

Files:

• etc/collectionConfig.xml (modified) (9 diffs)
• js/av_document.js (modified) (10 diffs)

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

@@ -157 +157 @@
         <xsl:otherwise>
           <td valign="top">
-        <gsf:link type="document">
+        <gsf:link type="document" extraLinkArgs="renderWave=0">
           <gsf:icon type="document"/>
         </gsf:link>
@@ -163 +163 @@
           <td>
           
-        <gsf:link type="document">
+        <gsf:link type="document" extraLinkArgs="renderWave=0">
               <gsf:metadata name="amc.title"/>
           by <gsf:metadata name="amc.artist"/>
@@ -326 +326 @@
             <gsf:template match="documentNode">
                 <td valign="top">
-                    <gsf:link type="document">
+                    <gsf:link type="document" extraLinkArgs="renderWave=0">
                         <gsf:icon type="document"/>
                     </gsf:link>
@@ -339 +339 @@
                 </td>
                 <td valign="top">
-                  <gsf:link type="document">
+                  <gsf:link type="document" extraLinkArgs="renderWave=0">
                         <gsf:choose-metadata>
                       <gsf:metadata name="dc.Title"/>
@@ -550 +550 @@
               <gsf:script src="{$httpCollection}/js/av_document.js"/>
 
-              <div id="metadata-documenttext" class="documenttext" style="padding-bottom: 20px; width:100%;">
+              <div id="metadata-documenttext" class="documenttext" style="padding-bottom: 35px; width:100%;">
                 <style>
                   .doc-metadata td { padding: 7px; }
@@ -588 +588 @@
                 <div id="ajax-loaded-assocfilepath" style="display: none;"><gsf:metadata name="assocfilepath" pos="first"/></div>
 
+                <style>
+                  #hide-av-chart {
+                  display: none;
+                  }
+                  
+                  span.display-view-modes, a.display-view-modes {
+                    padding: 5px;
+                  }
+                
+                  .display-view-modes:hover {
+                    background-color: #b0b0b0;
+                  }               
+                </style>
                 
-                <div style="position: absolute; right: 24px; top: -18px; z-index: 1000; font-size: 90%; font-style:italic">
-                  <a id="switch-to-waveform"    stylexx="display: none;" href="">Switch to Waveform</a>
-                  <a id="switch-to-spectrogram" stylexx="display: none;" href="">Switch to Spectrogram</a>
+                <div style="position: absolute; right: 24px; top: -23px; z-index: 1000; font-size: 90%; font-styleXX:italic">
+                  <span style="display: inline-block">
+                <a id="switch-to-waveform"    class="display-view-modes" stylexx="display: none;" href="">Switch to Waveform</a>
+                <a id="switch-to-spectrogram" class="display-view-modes" stylexx="display: none;" href="">Switch to Spectrogram</a>
+                  </span>
+                  <span style="display: inline-block; width: 140px;">
+                | <span id="show-av-chart" class="display-view-modes" onclick="return showAVChart();">Display AV Chart</span>
+                  <span id="hide-av-chart" class="display-view-modes" onclick="return hideAVChart();">Hide AV Chart</span>
+                  </span>
+                  <span style="display: inline-block">
+                | <span class="display-view-modes" onclick="alert('To be implemented')">&#x23fa; Record <i>your</i> AV experience</span>
+                  </span>
                 </div>
 
@@ -669 +691 @@
         
         </div>
+
+
+    <div id="av-chart-outerdiv" style="display: none;">
+      <hr/>
+      <div style="width: 500px; margin: auto;">
+        <div id="av-chart-div" style="position: relative; height: 325px; width: 300px; margin: auto">
+          <div style="position: absolute; top: 0; left: 0; width: 300px; height: 300px; pointer-events: none;">
+        <canvas id="av-chart-canvas" style="XXwidth: 100%; height: 300px;">
+          Your browser does not support the canvas element
+        </canvas>
+          </div>
+          <img id="av-chart-img" width="300"
+           style="cursor: crosshair; background-colorXX: #fefefe;"
+           src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw.svg" />
+          <div>
+        <i>Click inside the Arousal-Valence visualisation above to initiate an AV-based recommendation.</i>
+          </div>
+          
+        </div>
+      </div>
+    </div>
     
     <gsf:variable name="mp3url"><xsl:value-of select="$httpCollection"/>/index/assoc/<xsl:value-of select="$assocFilePath"/>/audio.mp3</gsf:variable>
@@ -762 +805 @@
               </form>
               <div>
+                <!--
                 <div id="av-chart-div" style="position: relative; height: 325px; width: 300px; float: right; display: none;">
                   <div style="position: absolute; top: 0; left: 0; width: 300px; height: 300px; pointer-events: none;">
@@ -776 +820 @@
 
                 </div>
+                -->
                 <div id="resultsAreaDiv" style="padding-top: 1rem; min-height: 325px; display: none;">
                   <xsl:text> </xsl:text>

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

@@ -67 +67 @@
     */
     
-function preSubmit(form) 
+
+function displayClampedCurrentTimeAndAV()
 {
     // Note, the Arousal and Valence feature window values used is:
@@ -75 +76 @@
     
     // clamp to ensure >= 6.0 secs 
+
     var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
     var current_time_1dp = current_time.toFixed(1);
-    AVEnsurePaused();
-    
-    weka_segment = Math.round(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());
 
-    $('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);
-
-    return submitAVRecommendation(form, arousal_val,valence_val, current_time);
+    var arousal_val_str = (arousal_val>0) ? "+"+arousal_val : ""+arousal_val;
+    var valence_val_str = (valence_val>0) ? "+"+valence_val : ""+valence_val;
+    
+    $('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal = ${arousal_val_str}, valence = ${valence_val_str})`);
+
+    return current_time;
+}
+
+function preSubmit(form) 
+{
+    // 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());
+
+    //$('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);
+
+    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time);
 }
 
@@ -176 +203 @@
     var new_doc_playervisual_url = new_doc_url_parts[0] + "&excerptid=playervisual-documenttext#" + new_doc_url_parts[1];
 
-    console.log("new doc metadata url = " + new_doc_metadata_url);
-    console.log("new doc playervisual url = " + new_doc_playervisual_url);
+    //console.log("new doc metadata url = " + new_doc_metadata_url);
+    //console.log("new doc playervisual url = " + new_doc_playervisual_url);
+
+
+    // current URL ends with  collect/amc-essentia/document/ds_51017_15513?p.frameOffset=...
+    // Need to remove old '/document/ds_...' and replace with new doc
+    
+    const current_doc_url_str = window.location.href;
+    
+    console.log(current_doc_url_str);
+    var push_doc_url_str = current_doc_url_str.replace(/document\/\w+\?/,"document/"+doc_id+"?");
+    console.log("new doc url str = " + push_doc_url_str);
+    const push_doc_url = new URL(push_doc_url_str);
+    
+    var frameOffset = $av_recommendation.data("frameoffset");       
+    push_doc_url.searchParams.set('p.frameOffset', frameOffset);
+    push_doc_url.searchParams.set('d', doc_id);     
+    window.history.pushState({}, '', push_doc_url);
+    //window.history.replaceState({}, '', push_doc_url);
+
+
+    
+    $('#metadata-documenttext').css("cursor","wait");
+    $('#playervisual-documenttext').css("cursor","wait");
 
     $.ajax({
@@ -183 +232 @@
         url: new_doc_metadata_url,
     })
+        .always(function() {
+        $('#metadata-documenttext').css("cursor","revert");
+        })
+
         .fail(function(jqXHR,textStatus) {
         console.error( "metadata-documenttext ajax request failed: " + textStatus);
@@ -195 +248 @@
         url: new_doc_playervisual_url,
     })
+        .always(function() {
+        $('#playervisual-documenttext').css("cursor","revert");
+        })
         .fail(function(jqXHR,textStatus) {
         console.error( "playervisual-documenttext equest failed: " + textStatus);
         })
         .done(function(html_result) {
-        // current URL ends with  collect/amc-essentia/document/ds_51017_15513?p.frameOffset=...
-        // Need to remove old '/document/ds_...' and replace with new doc
-        
-        const current_doc_url_str = window.location.href;
-
-        console.log(current_doc_url_str);
-        var new_doc_url_str = current_doc_url_str.replace(/document\/\w+\?/,"document/"+doc_id+"?");
-        console.log("new doc url str = " + new_doc_url_str);
-        const new_doc_url = new URL(new_doc_url_str);
-        
-        var frameOffset = $av_recommendation.data("frameoffset");       
-        new_doc_url.searchParams.set('p.frameOffset', frameOffset);
-        new_doc_url.searchParams.set('d', doc_id);      
-        window.history.pushState({}, '', new_doc_url);
-        //window.history.replaceState({}, '', new_doc_url);
         
         $('#playervisual-documenttext').replaceWith(html_result);
@@ -223 +264 @@
         initWavesurferPlayer();
 
+        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
+        
         postInitWavesurfer(wavesurfer);
 
@@ -229 +272 @@
 
     
-    
+    $resultsTable_tr1.slideUp();
     
     //var arousal_val = $av_recommendation.data("arousalval");
@@ -341 +384 @@
         recommendFromPos();
     }
+    displayClampedCurrentTimeAndAV();
     });
 
@@ -353 +397 @@
         //console.log("**** setting play seek @ " + frameOffset);
         wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
-
-        console.log("av_document.js keeping 'currentPosRunup' at 0");
+        recommendFromPos();
+        displayClampedCurrentTimeAndAV();
+        
+        console.log("av_document.js: **** Keeping 'currentPosRunup' at 0 for now!");
         /*if (frameOffset>1.0) {
         currentPosRunup = 1.0; // 1 second
-        }*/
+        }*/
+    }
+    else {
+        recommendFromStart();
+        displayClampedCurrentTimeAndAV();
     }
     });
@@ -502 +552 @@
 }
 
+function showAVChart()
+{
+    $('#av-chart-outerdiv').slideDown();
+    $('#show-av-chart').hide();
+    $('#hide-av-chart').show();
+
+    return false;
+}
+
+function hideAVChart()
+{
+    $('#av-chart-outerdiv').slideUp();
+    $('#hide-av-chart').hide();
+    $('#show-av-chart').show();
+
+    return false;
+}
+
 $(document).ready(function() {