diff --git a/sandbox/embed_iframe.html b/sandbox/embed_iframe.html index 25ed1d8..81b8c6d 100644 --- a/sandbox/embed_iframe.html +++ b/sandbox/embed_iframe.html @@ -34,7 +34,7 @@ style="border:1px solid #eeeeee;"> diff --git a/source/parameters/parameterlist.js b/source/parameters/parameterlist.js index 6f4695d..7c1d3f8 100644 --- a/source/parameters/parameterlist.js +++ b/source/parameters/parameterlist.js @@ -118,11 +118,17 @@ 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)); return this; - } + } AddUrlPart (keyword, urlPart) { @@ -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'); diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js index 08effcf..811246f 100644 --- a/source/viewer/viewer.js +++ b/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 () diff --git a/test/tests/parameterlist_test.js b/test/tests/parameterlist_test.js index 9515eac..7b3131f 100644 --- a/test/tests/parameterlist_test.js +++ b/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 color = new OV.Color (1, 2, 3); + 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); }); }); diff --git a/website/o3dv/embed.js b/website/o3dv/embed.js index 474a7bc..995c2ba 100644 --- a/website/o3dv/embed.js +++ b/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) { diff --git a/website/o3dv/hashhandler.js b/website/o3dv/hashhandler.js index 44f5965..5587b36 100644 --- a/website/o3dv/hashhandler.js +++ b/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 ()); diff --git a/website/o3dv/settingsdialog.js b/website/o3dv/settingsdialog.js index 9af2775..e5e6e00 100644 --- a/website/o3dv/settingsdialog.js +++ b/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; }; diff --git a/website/o3dv/sharingdialog.js b/website/o3dv/sharingdialog.js index 7f0d01e..6d21a7f 100644 --- a/website/o3dv/sharingdialog.js +++ b/website/o3dv/sharingdialog.js @@ -1,5 +1,4 @@ - -OV.ShowSharingDialog = function (importer, importSettings, camera) +OV.ShowSharingDialog = function (importer, viewerSettings, 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 = $('
').addClass ('ov_dialog_section').appendTo (parentDiv); $('
').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 = $('
').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv); $('
').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); - AddEmbeddingCodeTab (contentDiv, embeddingCodeParams); + AddSharingLinkTab (contentDiv, importSettings, sharingLinkParams); + AddEmbeddingCodeTab (contentDiv, viewerSettings, importSettings, embeddingCodeParams); dialog.Show (); return dialog; diff --git a/website/o3dv/website.css b/website/o3dv/website.css index ecb1e79..63f2005 100644 --- a/website/o3dv/website.css +++ b/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; } diff --git a/website/o3dv/website.js b/website/o3dv/website.js index 8b9062b..1e635b9 100644 --- a/website/o3dv/website.js +++ b/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 = $('').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 (); - settings.defaultColor = this.importSettings.defaultColor; + let importSettings = new OV.ImportSettings (); + 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 = $('').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 (); }