Set default colors to match theme in controls

Author: IsabelParedes

src/controls.ts

@@ -1,4 +1,5 @@
 import { GUI } from "dat.gui";
+import { Color } from "three";
 
 interface Joints {
     [name: string]: {
@@ -70,12 +71,13 @@ export class URDFControls extends GUI {
     }
 
     createSceneControls(
-        bgColor = [38, 50, 56], 
-        gridColor = [54, 66, 72]
+        bgColor = new Color(0x263238), 
+        gridColor = new Color(0x263238)
     ) {
+        
         const sceneSettings = {
-            'Background': bgColor,
-            'Grid': gridColor,
+            'Background': this._convertColor2Array(bgColor),
+            'Grid': this._convertColor2Array(gridColor),
             'Height': 0
         };
 
@@ -92,6 +94,18 @@ export class URDFControls extends GUI {
         return this.controls.scene;
     }
 
+    private _convertColor2Array(color: THREE.Color): number[] {
+        // Note: using hex value instead of the RGB values in Color because
+        // those are dependant on the color space
+        const hexColor = color.getHexString();
+        const colorArray = [
+            parseInt(hexColor.slice(0,2), 16),
+            parseInt(hexColor.slice(2,4), 16),
+            parseInt(hexColor.slice(4,6), 16)
+        ]
+        return colorArray;
+    }
+
     createJointControls(joints: Joints) {
         Object.keys(joints).forEach((name: string) => {
             // Skip joints which should not be moved

src/layout.ts

@@ -20,6 +20,10 @@ import { XacroLoader } from 'xacro-parser';
 import { URDFControls } from './controls';
 import { URDFRenderer } from './renderer';
 
+interface URDFColors {
+  sky: Color,
+  ground: Color
+}
 
 /**
  * A URDF layout to host the URDF viewer
@@ -29,6 +33,7 @@ export class URDFLayout extends PanelLayout {
   private _robotModel: any = null;
   private _controlsPanel: URDFControls;
   private _renderer: URDFRenderer;
+  private _colors: URDFColors;
   private _manager: LoadingManager;
   private _loader: URDFLoader;
   private _workingPath: string;
@@ -44,12 +49,14 @@ export class URDFLayout extends PanelLayout {
     // output area to render execution replies
     this._host = document.createElement('div');
 
+    this._colors = {
+      sky:    this._getThemeColor('--jp-layout-color1') || new Color(0x263238),
+      ground: this._getThemeColor('--jp-layout-color2') || new Color(0x263238)
+    };
+    
+    this._renderer = new URDFRenderer(this._colors.sky, this._colors.ground);
     this._controlsPanel = new URDFControls();
 
-    const colorSky = this._getThemeColor('--jp-layout-color1') || new Color(0x263238);
-    const colorGround = this._getThemeColor('--jp-layout-color2') || new Color(0x263238);
-    this._renderer = new URDFRenderer(colorSky, colorGround);
-
     this._urdfString = '';
     this._workingPath = '';
     this._manager = new LoadingManager;
@@ -207,7 +214,8 @@ export class URDFLayout extends PanelLayout {
    * Call renderer when scene colors are changed in the controls panel.
    */
   private _setSceneControls(): void {
-    const sceneControl = this._controlsPanel.createSceneControls();
+    const sceneControl = this._controlsPanel.createSceneControls(
+      this._colors.sky, this._colors.ground);
     sceneControl.background.onChange(
       (newColor: number[]) => this._renderer.setSkyColor(newColor));
     sceneControl.grid.onChange(