added canvas as option to the viewer

src/visualization/Viewer.js

@@ -13,6 +13,7 @@
  *
  *  * divID - the ID of the div to place the viewer in
  *  * elem - the elem to place the viewer in (overrides divID if provided)
+ *  * canvas (optional) - the canvas to render the viewer (overrides divID and elem if provided)
  *  * width - the initial width, in pixels, of the canvas
  *  * height - the initial height, in pixels, of the canvas
  *  * background (optional) - the color to render the background, like '#efefef'
@@ -30,6 +31,7 @@ ROS3D.Viewer = function(options) {
   options = options || {};
   var divID = options.divID;
   var elem = options.elem;
+  var canvas = options.canvas;
   var width = options.width;
   var height = options.height;
   var background = options.background || '#111111';
@@ -50,7 +52,8 @@ ROS3D.Viewer = function(options) {
   // create the canvas to render to
   this.renderer = new THREE.WebGLRenderer({
     antialias : antialias,
-    alpha: true
+    alpha: true,
+    canvas: canvas
   });
   this.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), alpha);
   this.renderer.sortObjects = false;
@@ -98,9 +101,11 @@ ROS3D.Viewer = function(options) {
   this.stopped = true;
   this.animationRequestId = undefined;
 
-  // add the renderer to the page
-  var node = elem || document.getElementById(divID);
-  node.appendChild(this.renderer.domElement);
+  // add the renderer to the page if canvas is not passed into the options
+  if( canvas === undefined ) {
+    var node = elem || document.getElementById(divID);
+    node.appendChild(this.renderer.domElement);
+  }
 
   // begin the render loop
   this.start();

test/visualization/Viewer.test.js

@@ -0,0 +1,40 @@
+var assert = chai.assert;
+
+describe('Viewer', function() {
+  const WIDTH = 500;
+  const HEIGHT = 300;
+  const DIV_ID = 'ros3d';
+
+  const div = document.createElement('div');
+  div.id = DIV_ID;
+  const viewer = new ROS3D.Viewer({
+    divID: DIV_ID,
+    height: HEIGHT,
+    width: WIDTH
+  });
+
+  it('initializes correctly with canvas passed in as argument', function() {
+    assert.isTrue(true);
+  });
+
+});
+
+describe('Viewer with canvas as argument', function() {
+    const WIDTH = 500;
+    const HEIGHT = 300;
+    const canvas = document.createElement('canvas');
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    const viewer = new ROS3D.Viewer({
+      canvas: canvas,
+      height: HEIGHT,
+      width: WIDTH
+    });
+
+    it('initializes correctly with canvas passed in as argument', function() {
+      assert.isTrue(viewer.renderer.domElement === canvas);
+      assert.isTrue(viewer.renderer.getSize().width === WIDTH);
+      assert.isTrue(viewer.renderer.getSize().height === HEIGHT);
+    });
+
+  });

tests/tests.js

@@ -4,7 +4,6 @@ var assert = chai.assert;
 
 describe('Initialization', function() {
 
-
   describe('Arrow', function() {
     var arrow = new ROS3D.Arrow();
 
@@ -82,7 +81,7 @@ describe('Initialization', function() {
     describe('Line Strip', function() {
       var message = {};
       message.type = ROS3D.MARKER_LINE_STRIP;
-      message.color = {r: 0, g: 0, b: 0, a: 1},
+      message.color = {r: 0, g: 0, b: 0, a: 1};
       message.pose = {};
       message.pose.position = {x: 0, y: 0, z: 0};
       message.pose.orientation = {x: 0, y: 0, z: 0, w: 1};
@@ -122,5 +121,24 @@ describe('Initialization', function() {
     describe('Triangle List', function() {
     });
   });
+
+  describe('Viewer', function() {
+    const WIDTH = 500;
+    const HEIGHT = 300;
+    const canvas = document.createElement('canvas');
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    const viewer = new ROS3D.Viewer({
+      canvas: canvas,
+      height: HEIGHT,
+      width: WIDTH
+    });
+
+    it('initializes correctly with canvas passed in as argument', function() {
+      assert.isTrue(viewer.renderer.domElement === canvas);
+      assert.isTrue(viewer.renderer.getSize().width === WIDTH);
+      assert.isTrue(viewer.renderer.getSize().height === HEIGHT);
+    });
+  });
 
 });