Changeset 21238

Timestamp:

09/29/16 13:07:48 (8 years ago)

Author:

dlcheng

Message:

CHG (JS): Adding datamarker_image and datamarkersize options for js plots.

Location:

issm/trunk-jpl/src/m/plot

Files:

• plotdoc.js (modified) (2 diffs)
• webgl.js (modified) (3 diffs)

issm/trunk-jpl/src/m/plot/plotdoc.js

@@ -32 +32 @@
         console.log('       "controlsensitivity": sensitivty of view/zoom changes as a percentage of default (default 1, ex: 0.5, 2.75)');
         console.log('       "datamarkers": toggle data marker displays (default "on", ex: "on", "off")');
+        console.log('       "datamarkers_image": toggle data marker displays (default "on", ex: "on", "off")');
+        console.log('       "datamarkerssize": specifiy the width and height of the data markers (default [32,32], ex: [24,32], [105,10])');
         console.log('       "displayview": print view value to console (default "off", ex: "on", "off")');
         console.log('       "displayzoom": print zoom value to console (default "off", ex: "on", "off")');
@@ -43 +45 @@
         console.log('       "outermask*": Special mask that colors all parts of a overlay mesh below a height a certain color. provide outermaskheight and outermaskcolor options also (default "off", ex: "on", "off")');
         console.log('       "overlay": overlay a radar amplitude image behind (default "off", ex: "on", "off")');
-        console.log('       "overlay_image": path to overlay image (default "off", ex: "on", "off")');
+        console.log('       "overlay_image": path to overlay image (default "", ex: "./images/radar.png")');
         console.log('       "scaling": scaling factor used by quiver plots. Default is 0.4');
         console.log('       "alpha": transparency coefficient 0.0 to 1.0, the lower, the more transparent. (default 1.0, ex: 0.5, 0.25)');

issm/trunk-jpl/src/m/plot/webgl.js

@@ -66 +66 @@
         canvas.dataMarkersAllowed = options.getfieldvalue('datamarkers','off') == 'on';
         canvas.dataMarkersEnabled = true; //if data marker feature is on, user can toggle feature on and off
+        canvas.dataMarkerImage = options.getfieldvalue('datamarkers_image','../../../js/textures/data_marker.svg');
+        canvas.dataMarkerSize = options.getfieldvalue('datamarkerssize',[32,32]);
         canvas.inverseCameraMatrix = mat4.create();
         canvas.id = options.getfieldvalue('canvasid','.sim-canvas');
@@ -272 +274 @@
                 
                 var rect = canvas.getBoundingClientRect();
-                var dataMarkerSize = 32;
+                var dataMarkerSize = canvas.dataMarkerSize;
                 if (!canvas.marker) {
-                        $('#' + canvas.id).after( '<img src="../../../js/textures/data-marker.svg" alt="data marker" width="' + dataMarkerSize + '" height="' + dataMarkerSize + '" id="sim-data-marker-' + canvas.id + '" class="sim-data-marker noselect"></img>' );
+                        $('#' + canvas.id).after( '<img src=' + canvas.dataMarkerImage + ' alt="data marker" width="' + dataMarkerSize[0] + '" height="' + dataMarkerSize[1] + '" id="sim-data-marker-' + canvas.id + '" class="sim-data-marker noselect"></img>' );
                         $('#sim-data-marker-' + canvas.id).css({
                                 'position': 'absolute', 
-                                'left': (Math.round(x + rect.left) - dataMarkerSize / 2) + 'px', 
-                                'top': (Math.round(y + rect.top) - dataMarkerSize) + 'px', 
-                                'width': dataMarkerSize + 'px', 
-                                'height': dataMarkerSize + 'px',
+                                'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px', 
+                                'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px', 
+                                'width': dataMarkerSize[0] + 'px', 
+                                'height': dataMarkerSize[1] + 'px',
                                 'pointer-events': 'all',
                                 'cursor': 'pointer',
@@ -302 +304 @@
                         updateMarker(canvas, Math.round(x), Math.round(y), false, origin, far);
                         canvas.marker.css({
-                                'left': (Math.round(x + rect.left) - dataMarkerSize / 2) + 'px', 
-                                'top': (Math.round(y + rect.top) - dataMarkerSize) + 'px'
+                                'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px', 
+                                'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px'
                         });
                 };