Changeset 37254 for gs3-installations

Timestamp:

2023-02-02T17:34:42+13:00 (15 months ago)

Author:

davidb

Message:

isRecordingUserAV has basic state/workflow. Draws directly onto a canvas; currently not saved in local storage

Location:

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

Files:

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

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

@@ -620 +620 @@
                   <span id="hide-av-chart" class="display-view-modes hd-chart-label" onclick="return hideAVChart();">Hide AV Chart</span>
                   </span>
+                  <!-- Keep if ever wanting to go back to logging in to record AV experience -->
+                  <!--
                   <span style="display: inline-block; width: 270px;">
                 | <span id="login-to-record-av" class="display-view-modes" onclick="loginToRecord()">&#x23fa; Login to record <i>your</i> AV experience</span>
-                <span id="record-av"          class="display-view-modes" onclick="loginToRecord()">
-                  &#x23fa; Record <i>your</i> AV experience (<a id="record-av-logout" href="">logout</a>)
+                  <span id="record-av"          class="display-view-modes" onclick="loginToRecord()">
+                    &#x23fa; Record <i>your</i> AV experience (<a id="record-av-logout" href="">logout</a>)
                 </span>
                   </span>
+                  -->
+
+                  <span style="display: inline-block; width: 270px;">
+                | <span id="record-av"          class="display-view-modes" style="display: inline;" onclick="loginToRecord()">
+                    &#x23fa; Customise your AV experience 
+                </span>
+                  </span>
+                  
                 </div>
 
@@ -732 +742 @@
       <style>
         .recommend-cursor {
-        cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/font_awesome--crosshair-black32.png) 16 16, crosshair
+        cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/crosshair-cursor-black32.png) 16 16, crosshair
         }
         .record-cursor {
-          cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/font_awesome--crosshair-red32.png) 16 16, crosshair
+          cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/crosshair-cursor-red32.png) 16 16, crosshair
         }
       </style>
       <gsf:variable name="collImagesURL"><xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images</gsf:variable>  
       <div id="start-av-recording" style="display:none;">
-        To make an AV-Recording: <span id="av-recording-coords" style="display:none;">AV coord: </span>
+        To customise your Musical Affect Recommender experience, use the AV circle below to record
+        the Arousal-Valence levels you perceive.  This is used by MARS to personalise the
+        recommendations the system makes.  The more musical works you record AV values for,
+        the more data MARS has to go on.
+        <span id="av-recording-coords" style="display:none;">AV coord: </span>
         <ul>
           <li>Click in the centre of the Arousal-Valence space below to initiate recording</li>
           <li>Move your mouse-cursor around inside the circle to reflect the Arousal-Valence levels you perceive</li>
-          <li>Click again inside the circle at any point, if you want to cancel the recording</li>
+          <li>Click again inside the circle at any point, if you want to cancel/pause or save the recording</li>
+          <li>If you listen all the way through to the end of the work, you will be promted at the end about canceling or saving the recording.</li>
         </ul>
       </div>
     
+      <gsf:div id="cancel-resume-save-confirm-div"/>
       
-      <div id="av-chart-div" style="position: relative; heightXXX: 325px; width: 300px; margin: auto">            <!-- av-chart-width av-chart-height + 25-->
-        <div style="position: absolute; top: 0; left: 0; width: 300px; height: 300px; pointer-events: none;">  <!-- av-chart-width -->
+      <div id="av-chart-div" style="position: relative; heightXXX: 325px; width: 300px; widthXXXYYY: 400px; margin: auto">            <!-- av-chart-width av-chart-height + 25-->
+        <div style="position: absolute; top: 0; leftXXXYYY: 50px; width: 300px; height: 300px; pointer-events: none;">  <!-- av-chart-width -->
           <canvas id="av-chart-canvas" style="XXwidth: 100%; height: 300px;">                                  <!-- av-chart-width -->
         Your browser does not support the canvas element
@@ -756 +772 @@
         </div>
         <!--                           VVV av-chart-width -->
-        <img id="av-chart-img" classXXXX="recommend-cursor" width="300"                                                                     
-         style="cursor: crosshair;"
+        <img id="av-chart-img" width="300"
+         style="cursor: crosshair; padding-leftXXXYYY: 50px;"
          src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw.svg" />  
-        
-        <img id="av-chart-img-unlabeled" class="record-cursor" width="400"
-         style="cursorXX: crosshair; background-colorXX: #fefefe; display: none;"
-         src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw--unlabeled.svg" />  
-
+
+        <div>
+          <canvas id="av-chart-canvas-unlabeled" width="400" height="362"
+              style="position: absolute; top: 0; left: 0px; widthXXX: 400px; heightXXX: 362px; heightXXX: 100%; opacity:1.0; pointer-events: none;">
+        Your browser does not support the canvas element
+          </canvas>
+          <img id="av-chart-img-unlabeled" class="record-cursor" width="400"
+         style="background-colorXX: #fefefe; display: none;"
+         src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw--unlabeled.svg" />
+        </div>
         
         <!--

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

@@ -18 +18 @@
 function AVPlay()
 {
+    // Restore play/pause toggle button back to 'ready to play' i.e., showing pause button
     $('#ws-play-icon' ).hide();
     $('#ws-pause-icon').show();
@@ -387 +388 @@
     });
 
+    wavesurfer.on('finish', function () {
+    // auto stop RecordingUserAV
+    av_chart_record_finish();
+    });
+    
     wavesurfer.on('ready', function () {
 
@@ -532 +538 @@
 }
 
+var isRecordingUserAV = false;
+
+function crsc_popup_close($elem)
+{
+    $elem.parents('.dialog-ovelay').fadeOut(500, function () {
+    $elem.remove();
+    });
+}
+
+function crsc_popup_cancel_callback()
+{
+    console.log("Canceling RecordingUserAV");
+
+    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
+    var av_context = av_canvas.getContext("2d");
+
+    av_context.clearRect(0, 0, av_canvas.width, av_canvas.height);
+    
+    crsc_popup_close($(this));
+
+    
+    if ('p_frameOffset' in gs.cgiParams) {
+    var frameOffset = gs.cgiParams['p_frameOffset'];
+    wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
+    recommendFromPos();
+    displayClampedCurrentTimeAndAV();
+    }
+    else {
+    AVSeekTo(0);
+    }
+    
+}
+
+function crsc_popup_resume_callback()
+{
+    console.log("Resuming RecordingUserAV");
+    isRecordingUserAV = true;
+    crsc_popup_close($(this));
+    AVPlay();
+}
+
+function crsc_popup_save_callback()
+{
+    console.log("Saving to your browser RecordingUserAV");
+    crsc_popup_close($(this));
+}
+
+
 
 function av_chart_record_click(elem,event)
 {
-    console.error("Recording mode to be implemented!")
+    if (isRecordingUserAV == false) {
+    isRecordingUserAV = true;
+
+    if (!wavesurfer.backend.isPaused()) {
+        console.log("Starting recording user's AV values");
+        AVSeekTo(0);
+    }
+    else {
+        console.log("Resuming recording user's AV values");
+    }
+    AVPlay()
+    }
+    else {
+    AVEnsurePaused();
+    // Have stopped recording
+    // => Store recorded values into LocalStorage
+    isRecordingUserAV = false;
+
+
+    CancelResumeSaveConfirm('Customised AV Recording', 'Would you like to save this AV Recording?',
+                'Cancel and Start Over',                   'Resume Recording',         "Save",
+                crsc_popup_cancel_callback, crsc_popup_resume_callback, crsc_popup_save_callback
+                   ); 
+    
+    }
+}
+
+function av_chart_record_finish(elem,event)
+{
+    // Restore play/pause toggle button back to 'ready to play'
     AVSeekTo(0);
-    AVPlayPause();
-    if (wavesurfer.backend.isPaused()) {
-    alert("Sorry, capturing and saving of AV values not currently implemented!");
-    }
-}
-
+    $('#ws-play-icon' ).show();
+    $('#ws-pause-icon').hide();
+    $('#ws-playpause-label').html("Play");
+
+    if (isRecordingUserAV == true) {
+    isRecordingUserAV = false;
+
+    CancelResumeSaveConfirm('Customised  AV Recording', 'Would you like to save this AV Recording?',
+                'Cancel and Start Over',                   null, "Save",
+                crsc_popup_cancel_callback, null, crsc_popup_save_callback
+                   );
+    }
+
+    
+}
+
+    
 function initPlayerVisual() {
 
@@ -581 +675 @@
     
     $('#av-chart-img-unlabeled').hide();
+    $('#av-chart-canvas-unlabeled').hide();
     $('#av-chart-img').show();
+    $('#av-chart-canvas').show();
 
     $('#start-av-recommendation').show();
@@ -603 +699 @@
         // Reset what is being display to the default (the av-chart, not the record one)
         $('#av-chart-img-unlabeled').hide();
+        $('#av-chart-chart-unlabeled').hide();
         $('#av-chart-img').show();
+        $('#av-chart-canvas').show();
 
         $('#start-av-recommendation').show();
@@ -687 +785 @@
         // Ensure it is the RecordAV chart that is shown
         $('#av-chart-img').hide();
+        $('#av-chart-canvas').hide();
         $('#av-chart-img-unlabeled').show();
+        $('#av-chart-canvas-unlabeled').show();
 
         $('#start-av-recommendation').hide();
@@ -707 +807 @@
 function mouse_xy_to_av(elem,event,circ_x_org,circ_y_org,circ_radius)
 {
-    //var circ_x_org = 183;
-    //var circ_y_org = 194;
-    //var circ_radius = 130;
-    
     var relX = event.pageX - $(elem).offset().left;
     var relY = event.pageY - $(elem).offset().top;
@@ -722 +818 @@
 }
 
-    
+
+// Need to be very careful with order of valenceVal and arousalVal
+// Here they are ordered to match x,y
+
+function av_to_canvas_xy(valenceVal, arousalVal, circ_x_org,circ_y_org,circ_radius)
+{
+    //var canvasX = (valenceVal * circ_radius) - circ_x_org; // effectively "times -1"
+    var canvasX = circ_x_org - (valenceVal * circ_radius);
+    var canvasY = circ_y_org - (arousalVal * circ_radius);
+    
+
+    return { 'canvasX': canvasX, 'canvasY': canvasY };
+}
+
+
 $(document).ready(function() {
 
-    console.log(`loggedInUsername = '${gs.variables.loggedInUsername}'`);
+    console.log("AV Recording now always possible, without logging in (pseudo username: mars)");
+    gs.variables.loggedInUsername = "mars";
+    //console.log(`loggedInUsername = '${gs.variables.loggedInUsername}'`);
     if (gs.variables.loggedInUsername != "") {
+    // Logged in
     $('#login-to-record-av').hide();
     $('#record-av').show();
@@ -760 +873 @@
     var circ_x_org = 137;
     var circ_y_org = 145;
-    //var circ_radius = 234 - 137;
     var circ_radius = 97;
     
-    //var relX = event.pageX - $(this).offset().left;
-        //var relY = event.pageY - $(this).offset().top;
-
-    //var recValenceVal = -1 * (circ_x_org - relX) / circ_radius;
-    //var recArousalVal = +1 * (circ_y_org - relY) / circ_radius;
-
-
-    //var avRadius = Math.sqrt(recValenceVal*recValenceVal + recArousalVal*recArousalVal);
-
     var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);
 
@@ -806 +909 @@
     $('#av-chart-img-unlabeled').on("click",function(event) {
     av_chart_record_click(this,event);
-    //console.error("Recording mode to be implemented!")
-    //AVSeekTo(0);
-    //AVPlayPause();
-    //if (wavesurfer.backend.isPaused()) {
-    //    alert("Sorry, capturing and saving of AV values not currently implemented!");
-    //}
     });
 
@@ -823 +920 @@
     var circ_radius = 130;
     
-    //var relX = event.pageX - $(this).offset().left;
-        //var relY = event.pageY - $(this).offset().top;
-
-    //var recValenceVal = -1 * (circ_x_org - relX) / circ_radius;
-    //var recArousalVal = +1 * (circ_y_org - relY) / circ_radius;
-
-
-    //var avRadius = Math.sqrt(recValenceVal*recValenceVal + recArousalVal*recArousalVal);
-
     var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);
 
@@ -847 +935 @@
             $("#av-recording-coords").text(relBoxCoords);
     }
+
+    if ((recAVInside) && (isRecordingUserAV)) {
+        //var xy_rec = av_to_canvas_xy(recValenceVal,recArousalVal, circ_x_org,circ_y_org, circ_radius);
+        //var canvas_x = xy_rec.canvasX;
+        //var canvas_y = xy_rec.canvasY;
+
+        var canvas_x = event.pageX - $(this).offset().left;
+        var canvas_y = event.pageY - $(this).offset().top;
+
+        console.log("canvas x,y = " + canvas_x + " , " + canvas_y);
+        
+        var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
+        var av_context = av_canvas.getContext("2d");
+
+        av_context.fillStyle = "rgba(190,0,0,0.1)";
+        //av_context.fillStyle = "rgba(130,0,0,0.1)";
+        //av_context.fillStyle = "rgba(78,196,108,0.1)";
+        av_context.beginPath();
+        av_context.arc(canvas_x, canvas_y, 5, 0, 2 * Math.PI);
+        av_context.fill();
+    }
     
     if (recAVInside != prevRecAVInside) {
         if (recAVInside) {
         // crosshairs on
-        //$('#av-chart-img-unlabeled').css("cursor","crosshair");
-        var crosshair_record_url = gs.variables.collImagesURL + "/font_awesome--crosshair-red32.png";
-        //console.log("crosshair_record_url = " + crosshair_record_url);
-        //console.log("url('"+crosshair_record_url+"') 16 16, crosshair");
-        
+        var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
         $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
         }