Changeset 36958

Timestamp:

2022-11-29T22:55:42+13:00 (17 months ago)

Author:

davidb

Message:

Document view now shows an AV diagram; this commit is just prior to some code tidy up

Location:

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

Files:

• etc/collectionConfig.xml (modified) (8 diffs)
• js/av_document.js (modified) (5 diffs)

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

@@ -11 +11 @@
       <h4>Overview</h4>      
       <p>
-    This conent analysis enhanced digital library collection is
-    comprised of 9960 audio files from
+    This content analysis enhanced digital library collection is
+    comprised of 9960 audio files from the
     <a href="https://www.australianmusiccentre.com.au/">
       Australian Music Centre</a>, an organisation
@@ -33 +33 @@
     and valence that a section of music evokes.  We have chosen
     REPTree for the predictive modeling, a fast decision tree
-    learner that explots gain/variance and pruning (with
-    backfitting) to build a regression tree.
+    learner that exploits gain/variance and pruning (with
+    back-fitting) to build a regression tree.
       </p>  
 
@@ -44 +44 @@
     features, which are then used to predict arousal and valence
     features throughout each audio file, currently set to using
-    a window of 6 seconds and an overal of 50%.  This is stored
+    a window of 6 seconds and an overlap of 50%.  This is stored
     as metadata within the built digital library, alongside
     the more regular metadata values for title and artist.
@@ -53 +53 @@
       service-based architecture</a> we have enriched the user's experience
       of listening to a work in the digital library collection.  The most prominent
-      feature is a frequency specogram of the work, with a timeline bar that
-      moves through the work as it is play.  The timeline bar visually shows the
-      computed level of arousal by broadening the width the timeline bar as the
+      feature is a frequency spectrogram of the work, with a timeline bar that
+      moves through the work as it is played.  The timeline bar visually shows the
+      computed level of arousal by broadening the width of the timeline bar as the
       level of arousal rises.  The timeline bar is rendered in white, varying
       the brightness used to reflect the computed level of valence.       
@@ -61 +61 @@
 
       <p>
-    Below the AV frequecy visualizer, is a <i>Recommend</i>
-    button.  If a user clicks on this, then—again leveraging
-    the service-based architecture to the digital library
-    software—for the passage of work being played its values
-    of arousal and valence are used to select other works
-    in the digital library collection that
-    share similar features.  This are added at the bottom of
+    Below the AV frequency visualizer, is a <i>Recommend</i>
+    button.  If a user clicks on this, then—again leveraging the
+    service-based architecture to the digital library software—the
+    values of arousal and valence for the passage of work being
+    played are used to select other works in the digital library
+    collection that share similar features.
+    These are added at the bottom of
     the page as recommendations that the user might also like
     to listen to.         
@@ -619 +619 @@
           </div>
         </div>
-        
+
+
         <div>
-        
-          <div class="controls">
+          <style>
+        .controls .btn {
+          margin-bottom: 25px;
+        }
+          </style>
+
+          <div id="av-timelinebar-help" style="display: none; background-color: rgb(255,255,255); padding: 6px; position: absolute; right: 4px; font-style: italic; font-size: 90%; padding-top: 0.5rem;">
+        Audio player Arousal-Valence timeline bar:
+        <ul style="margin: 0.2rem;">
+          <li>Width corresponds to valence</li>
+          <li>Intensity of white corresponds to arousal</li>
+        </ul>
+          </div>
+
+          <div class="controls" style="padding-bottom: 0px;">
         <button class="btn btn-primary" onclick="AVSeekTo(0)">
           <i id="ws-return-to-start-icon"  class="fa-solid fa-backward-fast" ><xsl:text> </xsl:text></i>
@@ -644 +658 @@
         </button>
         
-              </div>
+              </div>         
+          
         </div>
+        
         </div>
-                       
+    
     <gsf:variable name="mp3url"><xsl:value-of select="$httpCollection"/>/index/assoc/<xsl:value-of select="$assocFilePath"/>/audio.mp3</gsf:variable>
 
@@ -763 +779 @@
                 </div>
               </form>
-              <div id="resultsAreaDiv" style="padding-top: 1rem;">              
-                <xsl:text> </xsl:text>
+              <div>
+                <div id="av-chart-div" style="height: 265px; width: 250px; float: right; display: none;">
+                  <img id="av-chart-img" width="250" src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw.svg" />
+                  <div>
+                <i>Or click inside the Arousal-Valence visualisation above to initiate a new AV-based recommendation.</i>
+                  </div>
+
+                </div>
+                <div id="resultsAreaDiv" style="padding-top: 1rem; min-height: 265px; display: none;">
+                  <xsl:text> </xsl:text>
+                </div>
               </div>
+              
             </div>
             <hr/>

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

@@ -148 +148 @@
 
     $('#recommendationArea').css("cursor","wait");
+    $('#resultsAreaDiv').slideDown();
     $('#resultsAreaDiv').html("Retrieving recommendation ...");
     
@@ -162 +163 @@
     })
     .done(function(html_result) {
-        $('#resultsAreaDiv').html(html_result);
-
+        $('#resultsAreaDiv').html("<div>Recommendations:</div>"+html_result);
+        $('#av-chart-div').show();
+        
         const updated_url = new URL(window.location);
         updated_url.searchParams.set('p.frameOffset', current_time);
@@ -228 +230 @@
         wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
 
-        if (frameOffset>1.0) {
+        console.log("av_document.js keeping 'currentPosRunup' at 0");
+        /*if (frameOffset>1.0) {
         currentPosRunup = 1.0; // 1 second
-        }
+        }*/
     }
     });
 
+}
+
+/*
+
+y-top: 146
+
+Centre: 412,443
+
+y-bot:735
+
+x-left: 120
+
+x-right 710
+
+
+Full image:
+  911 x 825 pxs
+
+
+
+  AV centre: 412,443
+  
+delta x/y: from centre: 292 <-> 298
+-1 <-> 0 <-> +1
+   295   295
+
+
+SVG:
+
+  241 x 248 
+    scaled 
+    0.26458
+
+*/
+
+var av_chart_orig_r = 295;
+
+var av_chart_orig_x_org = 412;
+var av_chart_orig_y_org = 443;
+
+var av_chart_orig_x_dim = 911;
+var av_chart_orig_y_dim = 825;
+
+var av_chart_disp_x_dim = 250;
+var av_chart_disp_x_mid = av_chart_disp_x_dim/2.0;
+
+var av_chart_scale = av_chart_orig_x_dim / av_chart_disp_x_dim;
+
+function av_chart_click(elem,e)
+{
+    var offset = $(elem).offset();
+
+    var elem_x_org = offset.left;
+    var elem_y_org = offset.top;
+
+    var disp_x = e.pageX - elem_x_org;
+    var disp_y = e.pageY - elem_y_org;
+
+    var scaled_disp_x = disp_x * av_chart_scale;
+    var scaled_disp_y = disp_y * av_chart_scale;
+
+    var orig_av_x = scaled_disp_x - av_chart_orig_x_org; 
+    var orig_av_y = -1 * (scaled_disp_y - av_chart_orig_y_org); // flip y axis
+
+    var av_x = orig_av_x / av_chart_orig_r;
+    var av_y = orig_av_y / av_chart_orig_r;
+    
+    var capped_av_x = Math.max(Math.min(av_x,1.0),-1.0);
+    var capped_av_y = Math.max(Math.min(av_y,1.0),-1.0);
+    
+
+    console.log(`av x,y: (${capped_av_x},${capped_av_y})`);
+    
 }
 
@@ -247 +323 @@
     $('#switch-to-spectrogram').attr("href",sts_url);
     $('#switch-to-waveform').hide();
+
+    $('#av-timelinebar-help').hide();
     }
     else {
@@ -255 +333 @@
     $('#switch-to-waveform').attr("href",stw_url);
     $('#switch-to-spectrogram').hide();
-    }
-    
+
+    $('#av-timelinebar-help').show();   
+    }
+
+    $('#av-chart-img').on("click",function(e) { av_chart_click(this,e) } );
 });