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

Timestamp:

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

Author:

davidb

Message:

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

File:

• gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js (modified) (12 diffs)

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");
         }