Merge pull request #283 from natacha-beck/add-axes-surf

Add axes surf

Author: Robert D Vincent

examples/surface-viewer-demo.html

@@ -161,23 +161,15 @@ <h4>Background Color:</h4>
             <div id="views" class="box half_box" >
               <h4>Views:</h4>
               <div id="hem_views_1" class="half_box">
-                <input id="left_hem_visible" class="visibility" data-hemisphere="left" type="checkbox" checked="true">Left
-                <br />
-                <input id="hem_superior" class="view_button" type="radio" name="hem_view" value="superior" checked="true">Superior
-
-                <br />
-                <input id="hem_medial" class="view_button" type="radio" name="hem_view" value="medial">Medial
-
-                <br />
+                <input id="left_hem_visible" class="visibility" data-hemisphere="left" type="checkbox" checked="true">Left<br />
+                <input id="hem_superior" class="view_button" type="radio" name="hem_view" value="superior" checked="true">Superior<br />
+                <input id="hem_medial" class="view_button" type="radio" name="hem_view" value="medial">Medial<br />
                 <input id="hem_anterior" class="view_button" type="radio" name="hem_view" value="anterior">Anterior
-
               </div>
               <div id="hem_views_2" class="half_box">
                 <input id="right_hem_visible" class="visibility" data-hemisphere="right" type="checkbox" checked="true">Right<br />
-                <input id="hem_inferior" class="view_button" type="radio" name="hem_view" value="inferior">Inferior
-                <br />
-                <input id="hem_lateral" class="view_button" type="radio" name="hem_view" value="lateral">Lateral
-                <br />
+                <input id="hem_inferior"  class="view_button" type="radio" name="hem_view" value="inferior">Inferior<br />
+                <input id="hem_lateral"   class="view_button" type="radio" name="hem_view" value="lateral">Lateral<br />
                 <input id="hem_posterior" class="view_button" type="radio" name="hem_view" value="posterior">Posterior
               </div>
               <p>
@@ -196,6 +188,9 @@ <h4>Views:</h4>
                   <input type="checkbox"  id="gridZ"><label for="gridZ">Z</label>
                 </span>
               </p>
+              <p>
+                <input id="axes-controls" type="checkbox">Display axes<br />
+              </p>
               <p>
                 <a class="button" id="resetview">Reset View</a>
                 <input type="checkbox" class="button" id="meshmode"><label for="meshmode">Mesh Mode</label>

examples/surface-viewer-demo.js

@@ -453,7 +453,7 @@ $(function() {
 
       // If the grid already exists
       if (grid !== undefined) {
-        grid.visible = is_checked;
+        grid.visible   = is_checked;
         viewer.updated = true;
         return;
       }
@@ -477,6 +477,23 @@ $(function() {
 
     });
 
+    // Control Axes
+    $("#axes-controls").change(function() {
+      var axes_name  = this.id;
+      var is_checked = $(this).is(":checked");
+      var axes       = viewer.model.getObjectByName(axes_name);
+
+      // If the axes already exists
+      if (axes !== undefined) {
+        axes.visible   = is_checked;
+        viewer.updated = true;
+        return;
+      }
+
+      viewer.drawAxes(150, {name: axes_name});
+
+    });
+
     // Color map URLs are read from the config file and added to the
     // color map select box.
     var color_map_select = $('<select id="color-map-select"></select>').change(function() {

src/brainbrowser/lib/color-map.js

@@ -31,18 +31,18 @@
   /**
   * @doc function
   * @name BrainBrowser.static methods:createColorMap
-  * @param {string}  data The color map data as a string.
+  * @param {string} data The color map data as a string.
   * @param {object} options Options for the color map.
   * Options include the following:
   *
   * * **clamp** {boolean} Should values be clamped to range?
   * * **flip** {boolean} Invert mapping?
   * * **scale** {number} Scale to use (usually 1 or 255).
-  * * **contrast** {number} Color contrast. 
-  * * **brightness** {number} Extra intensity for colors. 
-  * 
+  * * **contrast** {number} Color contrast.
+  * * **brightness** {number} Extra intensity for colors.
+  *
   * @returns {object} Color map object.
-  * 
+  *
   * @description
   * Factory function to produce color map object from a string of data. A given
   * color map is a set of colors to which intensity data can be mapped for display.
@@ -53,10 +53,10 @@
   BrainBrowser.createColorMap = function(data, options) {
     options = options || {};
 
-    var clamp = options.clamp === undefined ? true : options.clamp;
-    var flip = options.flip || false;
-    var scale = options.scale || 1;
-    var contrast = options.contrast || 1;
+    var clamp      = options.clamp === undefined ? true : options.clamp;
+    var flip       = options.flip       || false;
+    var scale      = options.scale      || 1;
+    var contrast   = options.contrast   || 1;
     var brightness = options.brightness || 0;
 
     var color_map_colors;
@@ -90,7 +90,7 @@
     /**
     * @doc object
     * @name color_map
-    * 
+    *
     * @description
     * Object representing the currently loaded color map.
     */
@@ -114,12 +114,12 @@
       * * **clamp** {boolean} Should values be clamped to range (overrides color map default)?
       * * **flip** {boolean} Invert mapping (overrides color map default)?
       * * **scale** {number} Scale to use (usually 1 or 255, overrides color map default).
-      * * **contrast** {number} Color contrast (overrides color map default). 
-      * * **brightness** {number} Extra intensity for colors (overrides color map default). 
+      * * **contrast** {number} Color contrast (overrides color map default).
+      * * **brightness** {number} Extra intensity for colors (overrides color map default).
       * * **default_colors** {array} Colors to use if value is out of range.
       * * **destination** {array} Array to write the colors to (instead of creating
-      *   a new array). 
-      * 
+      *   a new array).
+      *
       * @returns {array} Colors modified based on options.
       *
       * @description
@@ -140,7 +140,7 @@
 
         var color_map_colors = color_map.colors;
         var color_map_length = color_map.colors.length / 4;
-        
+
         var scale = options.scale === undefined ? color_map.scale : options.scale;
         var clamp = options.clamp === undefined ? color_map.clamp : options.clamp;
         var flip = options.flip === undefined ? color_map.flip : options.flip;
@@ -154,7 +154,7 @@
         var default_color_offset = default_colors.length === 4 ? 0 : 1;
         var range = max - min;
         var increment = color_map_length / range;
-        
+
         var value;
         var i, ic, idc, count;
         var color_map_index;
@@ -197,16 +197,16 @@
       * @param {object} options Options for the color mapping.
       * Options include the following:
       *
-      * * **format** {string} Can be **float** for 0-1 range rgb array, 
+      * * **format** {string} Can be **float** for 0-1 range rgb array,
       *   **255** for 0-255 range rgb array, or "hex" for a hex string.
       * * **min** {number} Minimum intensity value.
       * * **max** {number} Maximum intensity value.
       * * **clamp** {boolean} Should values be clamped to range (overrides color map default)?
       * * **flip** {boolean} Invert mapping (overrides color map default)?
       * * **scale** {number} Scale to use (usually 1 or 255, overrides color map default).
-      * * **contrast** {number} Color contrast (overrides color map default). 
-      * * **brightness** {number} Extra intensity for colors (overrides color map default). 
-      * 
+      * * **contrast** {number} Color contrast (overrides color map default).
+      * * **brightness** {number} Extra intensity for colors (overrides color map default).
+      *
       * @returns {array|string} Color parsed from the value given.
       *
       * @description
@@ -236,7 +236,7 @@
           color_map.flip,
           color_map_length
         );
-        
+
         var color;
 
         if (color_map_index >= 0) {
@@ -273,7 +273,7 @@
       * @name color_map.color_map:createElement
       * @param {number} min Min value of the color data.
       * @param {number} max Max value of the color data.
-      * 
+      *
       * @description
       * Create an element representing the color map.
       * ```js
@@ -285,8 +285,8 @@
         var context;
         var colors = color_map.colors;
         var range = max - min;
-        
-        canvas = createCanvas(colors, 20, 40, flip);
+
+        canvas  = createCanvas(colors, 20, 40, flip);
         context = canvas.getContext("2d");
 
         context.fillStyle = "#FFA000";
@@ -334,7 +334,7 @@
       }
     }
 
-    // Creates an canvas with the color_map of colors
+    // Creates a canvas with the color_map of colors
     // from low(left) to high(right) values
     //   colors: array of colors
     //   color_height: height of the color bar
@@ -346,13 +346,13 @@
       var context;
       var old_scale;
 
-      canvas.width = 256;
+      canvas.width  = 256;
       canvas.height = full_height;
 
       for (i = 0; i < 256; i++) {
         value_array[i] = i;
       }
-      
+
       old_scale = color_map.scale;
       color_map.scale = 255;
       colors = color_map.mapColors(value_array);
@@ -367,10 +367,9 @@
       }
 
       return canvas;
-
     }
-    
-    
+
+
 
     return color_map;
 

src/brainbrowser/surface-viewer/modules/rendering.js

@@ -250,7 +250,7 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
   viewer.drawDot = function(x, y, z, radius, color) {
     radius = radius || 2;
     radius = radius >= 0 ? radius : 0;
-    color = color >= 0 ? color : 0xFF0000;
+    color  = color  >= 0 ? color  : 0xFF0000;
 
     var geometry = new THREE.SphereGeometry(radius);
     var material = new THREE.MeshBasicMaterial({color: color});
@@ -292,9 +292,9 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
   * var euler_rotation = new THREE.Euler( 0, 0, Math.PI/2, 'XYZ' );
   * viewer.drawGrid(100, 10, {euler_rotation: euler_rotation});
   * ```
-  *
   */
   viewer.drawGrid = function(size, step, options) {
+    options               = options || {};
     var name              = options.name;
     var color_center_line = options.color_center_line;
     var color_grid        = options.color_grid;
@@ -317,7 +317,7 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
     z = z || 0;
 
     // Create the grid
-    var grid = new THREE.GridHelper(size, step);
+    var grid  = new THREE.GridHelper(size, step);
     grid.name = name;
     grid.setColors(color_center_line, color_grid);
     grid.position.set(x,y,z);
@@ -335,6 +335,114 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
     return grid;
   };
 
+  /**
+  * @doc function
+  * @name viewer.rendering:drawLine
+  * @param {object} start A Vector3, start of the line segment
+  * @param {object} end A Vector3, end of the line segment
+  * @param {object} options Options, which include the following:
+  *
+  * * **color** The color of the line as a hexadecimal integer (default 0x444444).
+  * * **dashed** If true create a dashed line
+  * * **draw**   If false don't draw the line
+  *
+  * @returns {object} The line itself.
+  *
+  * @description Draw a line in the current scene.
+  * ```js
+  * var start = new THREE.Vector3(0,0,0);
+  * var end   = new THREE.Vector3(200,200,200);
+  * viewer.drawLine(start, end, {dashed: true});
+  * ```
+  */
+  viewer.drawLine = function( start, end, options ) {
+    options      = options || {};
+    var color    = options.color >= 0 ? options.color : 0x444444;
+
+    // Create the geometry
+    var geometry = new THREE.Geometry();
+    geometry.vertices.push( start.clone() );
+    geometry.vertices.push( end.clone() );
+    geometry.computeLineDistances();
+
+    // Set the material according with the dashed option
+    var material = options.dashed === true ?
+                     new THREE.LineDashedMaterial({ linewidth: 3, color: color, gapSize: 3 })
+                   : new THREE.LineBasicMaterial( { linewidth: 3, color: color });
+
+    var line = new THREE.Line( geometry, material, THREE.LinePieces );
+
+    if (options.draw === false) {return line;}
+
+    if (viewer.model) {
+      viewer.model.add(line);
+    } else {
+      scene.add(line);
+    }
+
+    viewer.updated = true;
+
+    return line;
+  };
+
+  /**
+  * @doc function
+  * @name viewer.rendering:drawAxes
+  * @param {number} size Define the size of the line representing the axes.
+  * @param {object} options Options, which include the following:
+  *
+  * * **name** The name of the axes
+  * * **center** A Vector3, that represent the orgin of the axes
+  * * **x_color** The color of the line as a hexadecimal integer (default 0xff0000).
+  * * **y_color** The color of the line as a hexadecimal integer (default 0x00ff00).
+  * * **z_color** The color of the line as a hexadecimal integer (default 0x0000ff).
+  * * **complete** If true draw postive (plain) and negative axes (dashed)
+  *
+  *
+  * @returns {object} The axes itself.
+  *
+  * @description
+  * Draw Axes in the current scene
+  * ```js
+  *   viewer.drawAxes(300)
+  * ```
+  */
+  viewer.drawAxes = function(size, options) {
+    size         = size    || 300;
+    options      = options || {};
+    var name     = options.name   || "axes";
+    var center   = options.center || new THREE.Vector3(0,0,0);
+    var x_color  = options.x_color >= 0 ? options.x_color : 0xff0000 ;
+    var y_color  = options.y_color >= 0 ? options.y_color : 0x00ff00 ;
+    var z_color  = options.z_color >= 0 ? options.z_color : 0x0000ff ;
+    var complete = options.complete === true;
+
+    var axes  = new THREE.Object3D();
+    axes.name = name;
+
+    // X axes
+    axes.add(viewer.drawLine(center, new THREE.Vector3( size, 0, 0), {color: x_color, dashed: false, draw: false}));
+    if (complete) { axes.add(viewer.drawLine(center, new THREE.Vector3(-size, 0, 0), {color: x_color, dashed: true , draw: false})); }
+
+    // Y axes
+    axes.add(viewer.drawLine(center, new THREE.Vector3(0,  size, 0), {color: y_color, dashed: false, draw: false}));
+    if (complete) { axes.add(viewer.drawLine(center, new THREE.Vector3(0, -size, 0), {color: y_color, dashed: true, draw: false})); }
+
+    // Z axes
+    axes.add(viewer.drawLine(center, new THREE.Vector3(0, 0,  size), {color: z_color, dashed: false, draw: false}));
+    if (complete) { axes.add(viewer.drawLine(center, new THREE.Vector3(0, 0, -size), {color: z_color, dashed: true,  draw: false})); }
+
+    if (viewer.model) {
+      viewer.model.add(axes);
+    } else {
+      scene.add(axes);
+    }
+
+    viewer.updated = true;
+
+    return axes;
+  };
+
   /**
   * @doc function
   * @name viewer.rendering:pick