Changeset 37256

Timestamp:

2023-02-03T00:08:09+13:00 (15 months ago)

Author:

davidb

Message:

Development of 'personal bias' in localStorage; Working if user starts and stops recording, but bug to track down if they let the recording play all the way to the end and trigger the finish() callback

Location:

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

Files:

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

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

@@ -736 +736 @@
     <hr/>
     <div style="float: right">
-      <span class="display-view-modes" onclick="hideAVChart();">Hide AV Chart</span>
+      <span id="hide-av-chart-rtab" class="display-view-modes" style="display: inline-block;" onclick="hideAVChart();">Hide AV Chart</span>
+      <br/>
+      <span id="clear-user-av-chart-rtab" class="display-view-modes" style="display: inline-block;" onclick="clearRecordedUserAVChart();">Clear AV Chart</span>
     </div>
 
@@ -744 +746 @@
         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 {
+        
+        .record-cursor-NeededToTriggerResourceLoad {
           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
         }
@@ -879 +882 @@
                   </span>
                   <input onclick="return preSubmit(this.form);" type="submit" value="Make Arousal-Valence Recommendation"/>
-                  <div id="makeRecommendationFrom-AV" style="font-style: italics; font-size: 90%;">
+                  <div id="makeRecommendationFrom-AV" style="font-style: italics; font-size: 90%; display: none;"> <!-- **** -->
                 <xsl:text> </xsl:text>
+                  </div>
+                  <div id="overall-personal-bias" style="font-style: italics; font-size: 90%;"> 
+                Personal Bias (Arousal,Valence): No user recordings currently made
                   </div>
                 </div>

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

@@ -386 +386 @@
     }
     displayClampedCurrentTimeAndAV();
+
+    if (isRecordingUserAV) {
+        appendRecordedUserAVVals();
+    }
     });
 
@@ -538 +542 @@
 }
 
+var hasExistingUserRecording = false;
+
 var isRecordingUserAV = false;
+
+var recordedUserArousalVal = 0;
+var recordedUserValenceVal = 0;
+var recordedUserCanvasX    = 0;
+var recordedUserCanvasY    = 0;
+
+var recordedAVs = {
+    predArousal: [],
+    predValence: [],
+    userArousal: [],
+    userValence: [],
+    diffArousal: [],
+    diffValence: [],
+
+    canvasX: [],
+    canvasY: []
+    
+};
+
+function resetRecordedAVs() {
+    recordedAVs.predArousal = [];
+    recordedAVs.predValence = [];
+    recordedAVs.userArousal = [];
+    recordedAVs.userValence = [];
+    recordedAVs.diffArousal = [];
+    recordedAVs.diffValence = [];
+
+    recordedAVs.canvasX = [];
+    recordedAVs.canvasY = [];
+}
+
+function appendRecordedUserAVVals()
+{
+    var current_time = wavesurfer.getCurrentTime();
+
+    // Predicted AV vals
+    var pred_arousal_val = parseFloat($('#arousal-val').text());
+    var pred_valence_val = parseFloat($('#valence-val').text());
+
+    var user_arousal_val = recordedUserArousalVal;
+    var user_valence_val = recordedUserValenceVal;
+
+    var diff_arousal_val = pred_arousal_val - user_arousal_val;
+    var diff_valence_val = pred_valence_val - user_valence_val;
+    
+    recordedAVs.predArousal.push(pred_arousal_val);
+    recordedAVs.predValence.push(pred_valence_val);
+
+    recordedAVs.userArousal.push(user_arousal_val);
+    recordedAVs.userValence.push(user_valence_val);
+    
+    recordedAVs.diffArousal.push(diff_arousal_val);
+    recordedAVs.diffValence.push(diff_valence_val);
+
+    recordedAVs.canvasX.push(recordedUserCanvasX);
+    recordedAVs.canvasY.push(recordedUserCanvasY);
+
+            
+    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
+    var av_context = av_canvas.getContext("2d");
+        
+    av_context.fillStyle = "rgba(190,0,0,0.05)";
+    //av_context.fillStyle = "rgba(130,0,0,0.1)";
+    //av_context.fillStyle = "rgba(78,196,108,0.1)";
+    av_context.beginPath();
+    av_context.arc(recordedUserCanvasX, recordedUserCanvasY, 5, 0, 2 * Math.PI);
+    av_context.fill();
+
+}
+
+function displayPersonalBias(overall_personal_bias_rec)
+{
+    var bias_arousal_2dp = overall_personal_bias_rec['bias-arousal'].toFixed(2);
+    var bias_valence_2dp = overall_personal_bias_rec['bias-valence'].toFixed(2);
+    
+    $('#overall-personal-bias')
+    .html("Personal Bias (Arousal,Valence):"
+          + " ("
+          + bias_arousal_2dp
+          + ","
+          + bias_valence_2dp
+          + ")");
+    
+}
+
+function clearRecordedUserAVChart()
+{
+    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;
+
+    var doc_personal_bias_arousal = 0.0;
+    var doc_personal_bias_valence = 0.0;
+    
+    var recordedAVs_str = window.localStorage.getItem(doc_storage_key);
+    if (recordedAVs_str) {
+    recordedAVs = JSON.parse(recordedAVs_str);
+
+    doc_personal_bias_arousal = recordedAVs.personalBiasArousal;
+    doc_personal_bias_valence = recordedAVs.personalBiasValence;
+
+    }
+    
+    window.localStorage.removeItem(doc_storage_key);
+
+    var overall_personal_bias_key = "mars.overall-personal-bias";
+
+    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);
+
+    var overall_personal_bias_rec;
+    if (overall_personal_bias_rec_str) {
+    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);
+
+    overall_personal_bias_rec['bias-arousal'] -= doc_personal_bias_arousal;
+    overall_personal_bias_rec['bias-valence'] -= doc_personal_bias_valence;
+    }
+    
+    window.localStorage.setItem(overall_personal_bias_key, JSON.stringify(overall_personal_bias_rec));
+
+    displayPersonalBias(overall_personal_bias_rec);
+    
+
+    // Now proceed to visually clear the av-chart-canvas
+    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);
+    
+    resetRecordedAVs();
+    hasExistingUserRecording = false;
+}
+
+function renderRecordedUserAVVals()
+{
+
+    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;
+    
+    var recordedAVs_str = window.localStorage.getItem(doc_storage_key);
+    if (recordedAVs_str) {
+    recordedAVs = JSON.parse(recordedAVs_str);
+    
+    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
+    var av_context = av_canvas.getContext("2d");
+
+    var num_canvas_coords = recordedAVs.canvasX.length;
+    
+    for (var i=0; i<num_canvas_coords; i++) {
+
+        var canvas_x = recordedAVs.canvasX[i];
+        var canvas_y = recordedAVs.canvasY[i];
+        
+        av_context.fillStyle = "rgba(190,0,0,0.05)";
+        //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();
+    }
+
+    hasExistingUserRecording = true;
+    }
+    else {
+    hasExistingUserRecording = false;
+    }
+
+}
 
 function crsc_popup_close($elem)
@@ -555 +724 @@
 
     av_context.clearRect(0, 0, av_canvas.width, av_canvas.height);
+    resetRecordedAVs();
+    hasExistingUserRecording = false;
     
     crsc_popup_close($(this));
@@ -583 +754 @@
     console.log("Saving to your browser RecordingUserAV");
     crsc_popup_close($(this));
+
+    var num_av_vals = recordedAVs.userArousal.length;
+
+    var doc_personal_bias_arousal = 0;
+    var doc_personal_bias_valence = 0;
+
+    for (var i=0; i<num_av_vals; i++) {
+    doc_personal_bias_arousal += recordedAVs.diffArousal[i];
+    doc_personal_bias_valence += recordedAVs.diffValence[i];
+    }
+
+    doc_personal_bias_arousal /= num_av_vals;
+    doc_personal_bias_valence /= num_av_vals;
+
+    recordedAVs.personalBiasArousal = doc_personal_bias_arousal;
+    recordedAVs.personalBiasValence = doc_personal_bias_valence;
+    
+    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;    
+    window.localStorage.setItem(doc_storage_key,JSON.stringify(recordedAVs));
+
+    var overall_personal_bias_key = "mars.overall-personal-bias";
+
+    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);
+
+    var overall_personal_bias_rec;
+    if (overall_personal_bias_rec_str) {
+    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);
+
+    }
+    else {
+    overall_personal_bias_rec = { 'bias-arousal': 0.0, 'bias-valence': 0.0 };
+    }
+    
+    overall_personal_bias_rec['bias-arousal'] += doc_personal_bias_arousal;
+    overall_personal_bias_rec['bias-valence'] += doc_personal_bias_valence;
+    
+    window.localStorage.setItem(overall_personal_bias_key, JSON.stringify(overall_personal_bias_rec));
+    displayPersonalBias(overall_personal_bias_rec);
+    
+    hasExistingUserRecording = true;
 }
 
@@ -589 +800 @@
 function av_chart_record_click(elem,event)
 {
-    if (isRecordingUserAV == false) {
-    isRecordingUserAV = true;
-
-    if (!wavesurfer.backend.isPaused()) {
-        console.log("Starting recording user's AV values");
-        AVSeekTo(0);
+    if (hasExistingUserRecording) {
+    return;
+    }
+    
+    var av_chart_position_info = get_av_chart_unlabeled_position_info(elem,event);
+
+    var av_inside = av_chart_position_info.av_inside;
+    if (av_inside) {
+    recordedUserValenceVal = av_chart_position_info.valence_val;
+    recordedUserArousalVal = av_chart_position_info.arousal_val;    
+
+    recordedUserCanvasX = av_chart_position_info.canvas_x;
+    recordedUserCanvasY = av_chart_position_info.canvas_y;  
+    
+    
+    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 {
-        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
-                   ); 
-    
+        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
+                   ); 
+    }
     }
 }
@@ -676 +902 @@
     $('#av-chart-img-unlabeled').hide();
     $('#av-chart-canvas-unlabeled').hide();
+    $('#clear-user-av-chart-rtab').hide();
     $('#av-chart-img').show();
     $('#av-chart-canvas').show();
@@ -710 +937 @@
     
     $('#hide-av-chart').hide();
+    $('#clear-user-av-chart-rtab').hide();
     $('#show-av-chart').show();
 
@@ -788 +1016 @@
         $('#av-chart-img-unlabeled').show();
         $('#av-chart-canvas-unlabeled').show();
-
+        $('#clear-user-av-chart-rtab').show();
+        
         $('#start-av-recommendation').hide();
         $('#start-av-recording').show();
@@ -822 +1051 @@
 // Here they are ordered to match x,y
 
-function av_to_canvas_xy(valenceVal, arousalVal, circ_x_org,circ_y_org,circ_radius)
+function av_to_canvas_xy__UNTESTED(valenceVal, arousalVal, circ_x_org,circ_y_org,circ_radius)
 {
     //var canvasX = (valenceVal * circ_radius) - circ_x_org; // effectively "times -1"
@@ -832 +1061 @@
 }
 
+function get_av_chart_unlabeled_position_info(elem,event)
+{
+    var circ_x_org = 183;
+    var circ_y_org = 194;
+    var circ_radius = 130;
+    
+    var av_rec = mouse_xy_to_av(elem,event,circ_x_org,circ_y_org,circ_radius);
+    
+    var valence_val = av_rec.valence;
+    var arousal_val = av_rec.arousal;
+    var av_radius   = av_rec.avRadius;
+    
+    var av_inside = (av_radius <= 1.0);
+
+    var return_rec = { 'av_inside': av_inside };
+
+    if (av_inside) {
+    return_rec.arousal_val = arousal_val;
+    return_rec.valence_val = valence_val;
+        
+    var canvas_x = event.pageX - $(elem).offset().left;
+    var canvas_y = event.pageY - $(elem).offset().top;
+
+    return_rec.canvas_x = canvas_x;
+    return_rec.canvas_y = canvas_y; 
+    }
+
+    return return_rec;
+}
 
 $(document).ready(function() {
@@ -850 +1108 @@
         loginToRecord();
     }
-        
+
+    renderRecordedUserAVVals();
     }
 
@@ -865 +1124 @@
           
     initPlayerVisual();
+
+    var overall_personal_bias_key = "mars.overall-personal-bias";
+    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);
+
+    var overall_personal_bias_rec;
+    if (overall_personal_bias_rec_str) {
+    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);
+    displayPersonalBias(overall_personal_bias_rec);
+    }
     
     $('#av-chart-img').on("click",function(event) {
@@ -884 +1152 @@
 
     if (recAVInside) {
+
         var roundedA = Math.round(recArousalVal * 100) / 100
         var roundedV = Math.round(recValenceVal * 100) / 100
@@ -913 +1182 @@
     
     var prevRecAVInside   = true;
-    
+
+    $('#av-chart-img-unlabeled').on("mouseover",function(event) {
+    //console.log("**** mouseenter")
+    var av_chart_position_info = get_av_chart_unlabeled_position_info(this,event);
+
+    var av_inside = av_chart_position_info.av_inside;
+    
+    if (av_inside) {
+        //console.log("**** inside")
+
+        // crosshairs on
+        var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
+        $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
+    }
+    else {
+        // revert
+        $('#av-chart-img-unlabeled').css("cursor","default");
+    }
+    });                 
+
+                    
     $('#av-chart-img-unlabeled').on("mousemove",function(event) {
-
+/*
     var circ_x_org = 183;
     var circ_y_org = 194;
@@ -927 +1216 @@
     
     var recAVInside = (avRadius <= 1.0);
-
+*/
+    
+    var av_chart_position_info = get_av_chart_unlabeled_position_info(this,event);
+
+    var recValenceVal = av_chart_position_info.valence_val;
+    var recArousalVal = av_chart_position_info.arousal_val; 
+    var recAVInside = av_chart_position_info.av_inside;
+    
     if (recAVInside) {
+
         var roundedA = Math.round(recArousalVal * 100) / 100
         var roundedV = Math.round(recValenceVal * 100) / 100
@@ -941 +1238 @@
         //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 canvas_x = event.pageX - $(this).offset().left;
+        //var canvas_y = event.pageY - $(this).offset().top;
+
+        var canvas_x = av_chart_position_info.canvas_x;
+        var canvas_y = av_chart_position_info.canvas_y; 
+
+        //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
-        var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
-        $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
-        }
-        else {
-        // revert
-        $('#av-chart-img-unlabeled').css("cursor","default");
+        recordedUserArousalVal = recArousalVal;
+        recordedUserValenceVal = recValenceVal;
+
+        recordedUserCanvasX = canvas_x;
+        recordedUserCanvasY = canvas_y;
+
+    }
+
+    if (hasExistingUserRecording) {
+        $('#av-chart-img-unlabeled').css("cursor","default");
+    }
+    else {    
+        if (recAVInside != prevRecAVInside) {
+        if (recAVInside) {
+            // crosshairs on
+            var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
+            $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
+        }
+        else {
+            // revert
+            $('#av-chart-img-unlabeled').css("cursor","default");
+        }
         }
     }