Change canvas background color #85

sandbox/embed_iframe.html

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

source/parameters/parameterlist.js

@@ -118,6 +118,12 @@ OV.ParameterListBuilder = class
         return this;
     }
 
+    AddBackground (background)
+    {
+        this.AddUrlPart ('background', OV.ParameterConverter.ColorToString (background));
+        return this;
+    }
+
     AddColor (color)
     {
         this.AddUrlPart ('color', OV.ParameterConverter.ColorToString (color));
@@ -166,6 +172,12 @@ OV.ParameterListParser = class
         return OV.ParameterConverter.StringToCamera (keywordParams);
     }
 
+    GetBackground ()
+    {
+        let backgroundParams = this.GetKeywordParams ('background');
+        return OV.ParameterConverter.StringToColor (backgroundParams);
+    }
+
     GetColor ()
     {
         let colorParams = this.GetKeywordParams ('color');

source/viewer/viewer.js

@@ -132,6 +132,14 @@ OV.ViewerGeometry = class
     }    
 };
 
+OV.ViewerSettings = class
+{
+    constructor ()
+    {
+        this.backgroundColor = new OV.Color (255, 255, 255);
+    }
+};
+
 OV.Viewer = class
 {
     constructor ()

test/tests/parameterlist_test.js

@@ -8,15 +8,18 @@ describe ('Parameter List', function () {
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
         );
+        let background = new OV.Color (4, 5, 6);
         let color = new OV.Color (1, 2, 3);
         let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
         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 ();
+        let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackground (background).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');
+        assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3');
     });
 
     it ('Parameter list parser', function () {
@@ -26,12 +29,14 @@ describe ('Parameter List', function () {
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
         );
+        let background = new OV.Color (4, 5, 6);
         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 urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3';
         let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
         assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parserLegacy.GetCamera (), null);
@@ -51,5 +56,10 @@ describe ('Parameter List', function () {
         assert.deepStrictEqual (parser4.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parser4.GetCamera (), camera);
         assert.deepStrictEqual (parser4.GetColor (), color);
+        let parser5 = OV.CreateUrlParser (urlParams5);
+        assert.deepStrictEqual (parser5.GetModelUrls (), modelUrls);
+        assert.deepStrictEqual (parser5.GetCamera (), camera);
+        assert.deepStrictEqual (parser5.GetColor (), color);
+        assert.deepStrictEqual (parser5.GetBackground (), background);
     });
 });

website/o3dv/embed.js

@@ -20,6 +20,10 @@ OV.Embed = class
             if (urls === null) {
                 return;
             }
+            let background = this.hashHandler.GetBackgroundFromHash ();
+            if (background !== null) {
+                this.viewer.SetBackgroundColor (background);
+            }
             let settings = new OV.ImportSettings ();
             let color = this.hashHandler.GetColorFromHash ();
             if (color !== null) {

website/o3dv/hashhandler.js

@@ -46,6 +46,12 @@ OV.HashHandler = class
         return parser.GetCamera ();
     }
 
+    GetBackgroundFromHash ()
+    {
+        let parser = OV.CreateUrlParser (this.GetHash ());
+        return parser.GetBackground ();
+    }
+
     GetColorFromHash ()
     {
         let parser = OV.CreateUrlParser (this.GetHash ());

website/o3dv/settingsdialog.js

@@ -1,4 +1,4 @@
-OV.ShowSettingsDialog = function (importSettings, onOk)
+OV.ShowSettingsDialog = function (viewerSettings, importSettings, onOk)
 {
     function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
     {
@@ -12,6 +12,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
     }
 
     let dialogSettings = {
+        backgroundColor: viewerSettings.backgroundColor,
         defaultColor : importSettings.defaultColor
     };
     let dialog = new OV.ButtonDialog ();
@@ -32,11 +33,18 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
         }
     ]);
     
-    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(For surfaces with no material)');
+    let backgroundColorInput = AddColorRow (contentDiv, dialogSettings.backgroundColor, 'Background Color', '(Visualization only)');
+    backgroundColorInput.change (function () {
+        let colorStr = backgroundColorInput.val ().substr (1);
+        dialogSettings.backgroundColor = OV.HexStringToColor (colorStr);
+    });
+
+    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(When no material defined)');
     colorInput.change (function () {
         let colorStr = colorInput.val ().substr (1);
         dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
     });
+
     dialog.Show ();
     return dialog;
 };

website/o3dv/sharingdialog.js

@@ -1,5 +1,4 @@
-
+OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camera)
-OV.ShowSharingDialog = function (importer, importSettings, camera)
 {
     function AddCheckboxLine (parentDiv, text, id, onChange)
     {
@@ -25,6 +24,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         let builder = OV.CreateUrlBuilder ();
         builder.AddModelUrls (params.files);
         builder.AddCamera (params.camera);
+        builder.AddBackground (params.background);
         builder.AddColor (params.color);
         let hashParameters = builder.GetParameterList ();
 
@@ -58,7 +58,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         return input;
     }
 
-    function AddSharingLinkTab (parentDiv, sharingLinkParams)
+    function AddSharingLinkTab (parentDiv, importSettings, sharingLinkParams)
     {
         let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
         $('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
@@ -79,7 +79,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         sharingLinkInput.val (GetSharingLink (sharingLinkParams));
     }
 
-    function AddEmbeddingCodeTab (parentDiv, embeddingCodeParams)
+    function AddEmbeddingCodeTab (parentDiv, viewerSettings, importSettings, embeddingCodeParams)
     {
         let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
         $('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
@@ -92,10 +92,15 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
             embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
         });
         if (OV.FeatureSet.SettingsAvailable) {
+            AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', function (checked) {
+                embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null;
+                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+            });
             AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
                 embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
                 embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
             });
+            embeddingCodeParams.background = viewerSettings.backgroundColor;
             embeddingCodeParams.color = importSettings.defaultColor;
         }
         embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
@@ -124,6 +129,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
     let embeddingCodeParams = {
         files : modelFiles,
         camera : camera,
+        background : null,
         color : null
     };
 
@@ -137,8 +143,8 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         }
     ]);
 
-    AddSharingLinkTab (contentDiv, sharingLinkParams);
+    AddSharingLinkTab (contentDiv, importSettings, sharingLinkParams);
-    AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
+    AddEmbeddingCodeTab (contentDiv, viewerSettings, importSettings, embeddingCodeParams);
 
     dialog.Show ();
     return dialog;

website/o3dv/website.css

@@ -562,7 +562,7 @@ div.ov_dialog div.ov_dialog_table_row
 
 div.ov_dialog div.ov_dialog_table_row_name
 {
-	width: 120px;
+	width: 140px;
 	float: left;
 }
 

website/o3dv/website.js

@@ -9,6 +9,7 @@ OV.Website = class
         this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
         this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
         this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar);
+        this.viewerSettings = new OV.ViewerSettings ();
         this.importSettings = new OV.ImportSettings ();
         this.modelLoader = new OV.ThreeModelLoader ();
         this.highlightMaterial = new THREE.MeshPhongMaterial ({
@@ -21,12 +22,8 @@ OV.Website = class
 
     Load ()
     {
-        let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
-        this.viewer.Init (canvas.get (0));
-        this.ShowViewer (false);
-        this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
-
         this.InitSettings ();
+        this.InitViewer ();
         this.InitToolbar ();
         this.InitDragAndDrop ();
         this.InitModelLoader ();
@@ -37,6 +34,7 @@ OV.Website = class
         this.viewer.SetClickHandler (this.OnModelClicked.bind (this));
         this.Resize ();
 
+        this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
         this.OnHashChange ();
 
         let obj = this;
@@ -210,13 +208,13 @@ OV.Website = class
             if (urls === null) {
                 return;
             }
-            let settings = new OV.ImportSettings ();
+            let importSettings = new OV.ImportSettings ();
-            settings.defaultColor = this.importSettings.defaultColor;
+            importSettings.defaultColor = this.importSettings.defaultColor;
             let color = this.hashHandler.GetColorFromHash ();
             if (color !== null) {
-                settings.defaultColor = color;
+                importSettings.defaultColor = color;
             }
-            this.LoadModelFromUrlList (urls, settings);
+            this.LoadModelFromUrlList (urls, importSettings);
         } else {
             this.ClearModel ();
             this.parameters.introDiv.show ();
@@ -225,9 +223,18 @@ OV.Website = class
 
     InitSettings ()
     {
+        this.viewerSettings.backgroundColor = this.cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
         this.importSettings.defaultColor = this.cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
     }
 
+    InitViewer ()
+    {
+        let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
+        this.viewer.Init (canvas.get (0));
+        this.viewer.SetBackgroundColor (this.viewerSettings.backgroundColor);
+        this.ShowViewer (false);
+    }
+
     InitToolbar ()
     {
         function AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick)
@@ -319,15 +326,20 @@ OV.Website = class
             exportDialog.Show (obj.model, obj.viewer);
         });
         AddButton (this.toolbar, 'share', 'Share model', true, function () {
-            obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
+            obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
         });
         if (OV.FeatureSet.SettingsAvailable) {
             AddSeparator (this.toolbar, true);
             AddButton (this.toolbar, 'settings', 'Settings', true, function () {
-                obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
+                obj.dialog = OV.ShowSettingsDialog (obj.viewerSettings, obj.importSettings, function (dialogSettings) {
+                    obj.viewerSettings.backgroundColor = dialogSettings.backgroundColor;
+                    obj.viewer.SetBackgroundColor (obj.viewerSettings.backgroundColor);
+                    obj.cookieHandler.SetColorVal ('ov_background_color', obj.viewerSettings.backgroundColor);
+
                     let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
                     obj.importSettings.defaultColor = dialogSettings.defaultColor;
                     obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
+
                     if (reload) {
                         obj.ReloadFiles ();
                     }