Changeset 36965

Timestamp:

2022-11-30T18:23:45+13:00 (12 months ago)

Author:

davidb

Message:

Rough plotting of AV val on plot

Location:

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

Files:

• etc/collectionConfig.xml (modified) (1 diff)
• js/av_document.js (modified) (4 diffs)

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

@@ -762 +762 @@
               </form>
               <div>
-                <div id="av-chart-div" style="height: 325px; width: 300px; float: right; display: none;">
+                <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;">
+                <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;"

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

@@ -123 +123 @@
     console.log(`AVRecommendations Arousal limits: ${min_arousal_val} <-> ${max_arousal_val}`);
     console.log(`AVRecommendations Valence limits: ${min_valence_val} <-> ${max_valence_val}`);
+
+    var av_cluster_x_org = (min_arousal_val + max_arousal_val)/2.0;
+    var av_cluster_y_org = (min_valence_val + max_valence_val)/2.0;
+
+    var av_cluster_x_delta = Math.abs(min_arousal_val - max_arousal_val)/2.0;
+    var av_cluster_y_delta = Math.abs(min_valence_val - max_valence_val)/2.0;
+
+    var av_cluster_rad = Math.max(Math.max(av_cluster_x_delta,av_cluster_y_delta),3.0);
+    
+    var disp_coord = av_to_display_coord(av_cluster_x_org,av_cluster_y_org);
+    var disp_x = disp_coord.x;
+    var disp_y = disp_coord.y;
+
+    var av_chart_canvas = document.getElementById('av-chart-canvas');
+    
+    var ctx = av_chart_canvas.getContext("2d");
+    ctx.beginPath();
+    ctx.arc(disp_x/2, disp_y/2, av_cluster_rad/2, 0, 2*Math.PI, false);
+    ctx.fillStyle = 'rgba(50,50,128,0.5)';
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(0,0,160,0.5)';
+    ctx.stroke();
     
 }
@@ -309 +332 @@
 }
 
+
+function av_to_display_coord(av_x,av_y)
+{
+    //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);
+
+    // transform the coord system from av [-1,1] to be the original SVG AV chart size
+    var orig_av_x = av_x * av_chart_orig_r;
+    var orig_av_y = av_y * av_chart_orig_r;
+
+    // tranform the coord system to be expressed from the top-left as the origin
+    var scaled_disp_x = orig_av_x + av_chart_orig_x_org;
+    var scaled_disp_y = (-1 * orig_av_y) + av_chart_orig_y_org;
+    
+    var disp_x = scaled_disp_x / av_chart_scale;
+    var disp_y = scaled_disp_y / av_chart_scale;
+    
+    return { "x": disp_x, "y": disp_y };
+}
+
+
 function av_chart_click(elem,e)
 {
@@ -319 +363 @@
     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);
-    */  
-
-    av_coord = display_to_av_coord(disp_x,disp_y);
+    //console.log(`(disp_x,disp_y) = (${disp_x},${disp_y})`);
+    var av_coord = display_to_av_coord(disp_x,disp_y);
     var capped_av_x = av_coord.x;
     var capped_av_y = av_coord.y;
@@ -339 +370 @@
     console.log(`av x,y: (${capped_av_x},${capped_av_y})`);
 
+    //var disp_coord = av_to_display_coord(capped_av_x,capped_av_y);
+    //var reconverted_disp_x = disp_coord.x;
+    //var reconverted_disp_y = disp_coord.y;
+    
+    //console.log(`reconverted (disp_x,disp_y) = (${reconverted_disp_x},${reconverted_disp_y})`);
+    
     var form = $('#av-query-form')[0];