Default color handling during embedding and engine usage.

source/parameters/parameterlist.js

@@ -1,5 +1,15 @@
 OV.ParameterConverter =
 {
+    IntegerToString (integer)
+    {
+        return integer.toString ();
+    },
+
+    StringToInteger (str)
+    {
+        return parseInt (str, 10);
+    },
+
     NumberToString (number)
     {
         let precision = 5;
@@ -11,6 +21,22 @@ OV.ParameterConverter =
         return parseFloat (str);
     },
 
+    ModelUrlsToString : function (urls)
+    {
+        if (urls === null) {
+            return null;
+        }
+        return urls.join (',');
+    },
+
+    StringToModelUrls : function (str)
+    {
+        if (str === null || str.length === 0) {
+            return null;
+        }
+        return str.split (',');
+    },
+
     CameraToString : function (camera)
     {
         if (camera === null) {
@@ -24,12 +50,12 @@ OV.ParameterConverter =
         return cameraParameters;
     },
 
-    StringToCamera : function (urlParam)
+    StringToCamera : function (str)
     {
-        if (urlParam === null || urlParam.length === 0) {
+        if (str === null || str.length === 0) {
             return null;
         }
-        let paramParts = urlParam.split (',');
+        let paramParts = str.split (',');
         if (paramParts.length !== 9) {
             return null;
         }
@@ -41,20 +67,34 @@ OV.ParameterConverter =
         return camera;
     },
 
-    ModelUrlsToString : function (urls)
+    ColorToString : function (color)
     {
-        if (urls === null) {
+        if (color === null) {
             return null;
         }
-        return urls.join (',');
+        let colorParameters = [
+            this.IntegerToString (color.r),
+            this.IntegerToString (color.g),
+            this.IntegerToString (color.b)
+        ].join (',');
+        return colorParameters;
     },
 
-    StringToModelUrls : function (urlParam)
+    StringToColor : function (str)
     {
-        if (urlParam === null || urlParam.length === 0) {
+        if (str === null || str.length === 0) {
             return null;
         }
-        return urlParam.split (',');
+        let paramParts = str.split (',');
+        if (paramParts.length !== 3) {
+            return null;
+        }
+        let color = new OV.Color (
+            this.StringToInteger (paramParts[0]),
+            this.StringToInteger (paramParts[1]),
+            this.StringToInteger (paramParts[2])
+        );
+        return color;
     }
 };
 
@@ -63,7 +103,7 @@ OV.ParameterListBuilder = class
     constructor (separator)
     {
         this.separator = separator;
-        this.urlParams = '';
+        this.paramList = '';
     }
 
     AddModelUrls (urls)
@@ -78,36 +118,42 @@ OV.ParameterListBuilder = class
         return this;
     }
 
+    AddColor (color)
+    {
+        this.AddUrlPart ('color', OV.ParameterConverter.ColorToString (color));
+        return this;
+    }    
+
     AddUrlPart (keyword, urlPart)
     {
         if (keyword === null || urlPart === null) {
             return;
         }
-        if (this.urlParams.length > 0) {
+        if (this.paramList.length > 0) {
-            this.urlParams += this.separator;
+            this.paramList += this.separator;
         }
-        this.urlParams += keyword + '=' + urlPart;
+        this.paramList += keyword + '=' + urlPart;
     }
 
-    GetUrlParams ()
+    GetParameterList ()
     {
-        return this.urlParams;
+        return this.paramList;
     } 
 };
 
 OV.ParameterListParser = class
 {
-    constructor (urlParams, separator)
+    constructor (paramList, separator)
     {
         this.separator = separator;
-        this.urlParams = urlParams;
+        this.paramList = paramList;
     }
 
     GetModelUrls ()
     {
         // detect legacy links
-        if (this.urlParams.indexOf ('=') === -1) {
+        if (this.paramList.indexOf ('=') === -1) {
-            return this.urlParams.split (',');
+            return this.paramList.split (',');
         }
 
         let keywordParams = this.GetKeywordParams ('model');
@@ -119,14 +165,20 @@ OV.ParameterListParser = class
         let keywordParams = this.GetKeywordParams ('camera');
         return OV.ParameterConverter.StringToCamera (keywordParams);
     }
+
+    GetColor ()
+    {
+        let colorParams = this.GetKeywordParams ('color');
+        return OV.ParameterConverter.StringToColor (colorParams);
+    }
     
     GetKeywordParams (keyword)
     {
-        if (this.urlParams === null || this.urlParams.length === 0) {
+        if (this.paramList === null || this.paramList.length === 0) {
             return null;
         }
         let keywordToken = keyword + '=';
-        let urlParts = this.urlParams.split (this.separator);
+        let urlParts = this.paramList.split (this.separator);
         for (let i = 0; i < urlParts.length; i++) {
             let urlPart = urlParts[i];
             if (urlPart.startsWith (keywordToken)) {
@@ -152,5 +204,5 @@ OV.CreateUrlParameters = function (urls, camera)
     let builder = OV.CreateUrlBuilder ();
     builder.AddModelUrls (urls);
     builder.AddCamera (camera);
-    return builder.GetUrlParams ();
+    return builder.GetParameterList ();
 };

source/viewer/domviewer.js

@@ -1,19 +1,5 @@
 OV.Init3DViewerElements = function ()
 {
-    function SetCamera (element, viewer, importResult)
-    {
-        let camera = null;
-        let cameraParams = element.getAttribute ('camera');
-        if (cameraParams) {
-            camera = OV.ParameterConverter.StringToCamera (cameraParams);
-        }
-        if (camera !== null) {
-            viewer.SetCamera (camera);
-        } else {
-            viewer.SetUpVector (importResult.upVector, false);
-        }
-    }
-
     function LoadElement (element)
     {
         let canvas = document.createElement ('canvas');
@@ -50,7 +36,16 @@ OV.Init3DViewerElements = function ()
                     return true;
                 });
                 viewer.AdjustClippingPlanes (boundingSphere);
-                SetCamera (element, viewer, importResult);
+                let camera = null;
+                let cameraParams = element.getAttribute ('camera');
+                if (cameraParams) {
+                    camera = OV.ParameterConverter.StringToCamera (cameraParams);
+                }
+                if (camera !== null) {
+                    viewer.SetCamera (camera);
+                } else {
+                    viewer.SetUpVector (importResult.upVector, false);
+                }
                 viewer.FitToWindow (boundingSphere, false);                                
             },
             onTextureLoaded : function () {
@@ -71,6 +66,14 @@ OV.Init3DViewerElements = function ()
             return;
         }
 
+        let colorParams = element.getAttribute ('color');
+        if (colorParams) {
+            let color = OV.ParameterConverter.StringToColor (colorParams);
+            if (color !== null) {
+                loader.SetDefaultColor (color);
+            }
+        }        
+
         loader.LoadFromUrlList (modelUrls);
         return {
             element: element,

test/tests/parameterlist_test.js

@@ -8,12 +8,15 @@ describe ('Parameter List', function () {
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
         );
-        let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetUrlParams ();
+        let color = new OV.Color (1, 2, 3);
-        let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetUrlParams ();
+        let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
-        let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetUrlParams ();
+        let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetParameterList ();
+        let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetParameterList ();
+        let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddColor (color).GetParameterList ();
         assert.strictEqual (urlParams1, 'model=a.txt,b.txt');
         assert.strictEqual (urlParams2, 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
         assert.strictEqual (urlParams3, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
+        assert.strictEqual (urlParams4, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3');
     });
 
     it ('Parameter list parser', function () {
@@ -22,22 +25,31 @@ describe ('Parameter List', function () {
             new OV.Coord3D (1.0, 1.0, 1.0),
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
-        );        
+        );
+        let color = new OV.Color (1, 2, 3);     
         let urlParamsLegacy = 'a.txt,b.txt';
         let urlParams1 = 'model=a.txt,b.txt';
         let urlParams2 = 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
         let urlParams3 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
+        let urlParams4 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3';
         let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
         assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parserLegacy.GetCamera (), null);
         let parser1 = OV.CreateUrlParser (urlParams1);
         assert.deepStrictEqual (parser1.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parser1.GetCamera (), null);
+        assert.deepStrictEqual (parser1.GetColor (), null);
         let parser2 = OV.CreateUrlParser (urlParams2);
         assert.deepStrictEqual (parser2.GetModelUrls (), null);
         assert.deepStrictEqual (parser2.GetCamera (), camera);
+        assert.deepStrictEqual (parser2.GetColor (), null);
         let parser3 = OV.CreateUrlParser (urlParams3);
         assert.deepStrictEqual (parser3.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parser3.GetCamera (), camera);
+        assert.deepStrictEqual (parser3.GetColor (), null);
+        let parser4 = OV.CreateUrlParser (urlParams4);
+        assert.deepStrictEqual (parser4.GetModelUrls (), modelUrls);
+        assert.deepStrictEqual (parser4.GetCamera (), camera);
+        assert.deepStrictEqual (parser4.GetColor (), color);
     });
 });

tools/sandbox/embed_iframe.html

@@ -30,6 +30,16 @@
         width=360 height=240
         style="border:1px solid #eeeeee;">
     </iframe>
+    <iframe
+        src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj"
+        width=360 height=240
+        style="border:1px solid #eeeeee;">
+    </iframe>
+    <iframe
+        src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$color=200,0,0"
+        width=360 height=240
+        style="border:1px solid #eeeeee;">
+    </iframe>
     <iframe
         src="../../website/embed.html#model=wrong.3ds"
         width=360 height=240

tools/sandbox/embed_selfhost_multiple.html

@@ -89,6 +89,15 @@
         model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
         camera="1,1,1,0,0,0,0,0,1">
     </div>
+    <div class="online_3d_viewer"
+		style="width: 360px; height: 240px;"
+        model="../../test/testfiles/obj/hundred_cubes.obj">
+    </div>
+    <div class="online_3d_viewer"
+		style="width: 360px; height: 240px;"
+        model="../../test/testfiles/obj/hundred_cubes.obj"
+        color="200,0,0">
+    </div>
     <div class="online_3d_viewer"
 		style="width: 360px; height: 240px;"
         model="wrong.3ds">

website/o3dv/embed.js

@@ -72,5 +72,9 @@ OV.Embed = class
                 obj.viewer.Render ();
             }
         });
+        let color = this.hashHandler.GetColorFromHash ();
+        if (color !== null) {
+            this.modelLoader.SetDefaultColor (color);
+        }
     } 
 };

website/o3dv/hashhandler.js

@@ -28,12 +28,6 @@ OV.HashHandler = class
         this.SetHash ('');
     }
 
-    GetCameraFromHash ()
-    {
-        let parser = OV.CreateUrlParser (this.GetHash ());
-        return parser.GetCamera ();
-    }
-
     GetModelFilesFromHash ()
     {
         let parser = OV.CreateUrlParser (this.GetHash ());
@@ -46,6 +40,18 @@ OV.HashHandler = class
         this.SetHash (params);
     }
 
+    GetCameraFromHash ()
+    {
+        let parser = OV.CreateUrlParser (this.GetHash ());
+        return parser.GetCamera ();
+    }
+
+    GetColorFromHash ()
+    {
+        let parser = OV.CreateUrlParser (this.GetHash ());
+        return parser.GetColor ();
+    }
+
     GetHash ()
     {
         return window.location.hash.substr (1);