Fixed jshint and add functionality in demo

Author: natacha-beck

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/surface-viewer/modules/rendering.js

@@ -372,7 +372,7 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
 
     var line = new THREE.Line( geometry, material, THREE.LinePieces );
 
-    if (options.draw === false) {return line}
+    if (options.draw === false) {return line;}
 
     if (viewer.model) {
       viewer.model.add(line);
@@ -383,14 +383,15 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
     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).
@@ -409,25 +410,27 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
   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();
+    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}));
-    axes.add(viewer.drawLine(center, new THREE.Vector3(-size, 0, 0), {color: x_color, dashed: true , 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}));
-    axes.add(viewer.drawLine(center, new THREE.Vector3(0, -size, 0), {color: y_color, dashed: true, 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}));
-    axes.add(viewer.drawLine(center, new THREE.Vector3(0, 0, -size), {color: z_color, dashed: true,  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);
@@ -438,7 +441,7 @@ BrainBrowser.SurfaceViewer.modules.rendering = function(viewer) {
     viewer.updated = true;
 
     return axes;
-  }
+  };
 
   /**
   * @doc function