From bb3bef4134672803b7c6d69f76adef93fc8a55af Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 8 Dec 2021 13:13:31 +0100 Subject: [PATCH] Add edge color to embedding codes. --- sandbox/embed_edges.html | 124 +++++++++++++++++++++++++++++ source/parameters/parameterlist.js | 54 ++++++++++++- source/viewer/domviewer.js | 15 ++++ test/tests/parameterlist_test.js | 17 +++- website/o3dv/js/embed.js | 8 ++ website/o3dv/js/hashhandler.js | 6 ++ website/o3dv/js/sharingdialog.js | 21 ++++- 7 files changed, 236 insertions(+), 9 deletions(-) create mode 100644 sandbox/embed_edges.html diff --git a/sandbox/embed_edges.html b/sandbox/embed_edges.html new file mode 100644 index 0000000..1d4df26 --- /dev/null +++ b/sandbox/embed_edges.html @@ -0,0 +1,124 @@ + + + + + + + + Online 3D Viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ + + diff --git a/source/parameters/parameterlist.js b/source/parameters/parameterlist.js index 8456743..74f5d47 100644 --- a/source/parameters/parameterlist.js +++ b/source/parameters/parameterlist.js @@ -95,6 +95,40 @@ OV.ParameterConverter = this.StringToInteger (paramParts[2]) ); return color; + }, + + EdgeSettingsToString : function (edgeSettings) + { + if (edgeSettings === null) { + return null; + } + let edgeSettingsParameters = [ + edgeSettings.showEdges ? 'on' : 'off', + this.ColorToString (edgeSettings.edgeColor), + this.IntegerToString (edgeSettings.edgeThreshold), + ].join (','); + return edgeSettingsParameters; + }, + + StringToEdgeSettings : function (str) + { + if (str === null || str.length === 0) { + return null; + } + let paramParts = str.split (','); + if (paramParts.length !== 5) { + return null; + } + let edgeSettings = { + showEdges : paramParts[0] === 'on' ? true : false, + edgeColor : new OV.Color ( + this.StringToInteger (paramParts[1]), + this.StringToInteger (paramParts[2]), + this.StringToInteger (paramParts[3]) + ), + edgeThreshold : this.StringToInteger (paramParts[4]) + }; + return edgeSettings; } }; @@ -118,18 +152,24 @@ OV.ParameterListBuilder = class return this; } - AddBackground (background) + AddBackgroundColor (background) { this.AddUrlPart ('backgroundcolor', OV.ParameterConverter.ColorToString (background)); return this; } - AddColor (color) + AddDefaultColor (color) { this.AddUrlPart ('defaultcolor', OV.ParameterConverter.ColorToString (color)); return this; } + AddEdgeSettings (edgeSettings) + { + this.AddUrlPart ('edgesettings', OV.ParameterConverter.EdgeSettingsToString (edgeSettings)); + return this; + } + AddUrlPart (keyword, urlPart) { if (keyword === null || urlPart === null) { @@ -144,7 +184,7 @@ OV.ParameterListBuilder = class GetParameterList () { return this.paramList; - } + } }; OV.ParameterListParser = class @@ -183,7 +223,13 @@ OV.ParameterListParser = class let colorParams = this.GetKeywordParams ('defaultcolor'); return OV.ParameterConverter.StringToColor (colorParams); } - + + GetEdgeSettings () + { + let edgeSettingsParams = this.GetKeywordParams ('edgesettings'); + return OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams); + } + GetKeywordParams (keyword) { if (this.paramList === null || this.paramList.length === 0) { diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js index 036914b..66b055d 100644 --- a/source/viewer/domviewer.js +++ b/source/viewer/domviewer.js @@ -24,6 +24,14 @@ OV.Init3DViewerElement = function (parentDiv, modelUrls, parameters) viewer.SetBackgroundColor (parameters.backgroundColor); } + if (parameters.edgeSettings) { + viewer.SetEdgeSettings ( + parameters.edgeSettings.showEdges, + parameters.edgeSettings.edgeColor, + parameters.edgeSettings.edgeThreshold + ); + } + if (parameters.environmentMap) { viewer.SetEnvironmentMap (parameters.environmentMap); } @@ -106,6 +114,12 @@ OV.Init3DViewerElements = function (onReady) defaultColor = OV.ParameterConverter.StringToColor (defaultColorParams); } + let edgeSettings = null; + let edgeSettingsParams = element.getAttribute ('edgesettings'); + if (edgeSettingsParams) { + edgeSettings = OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams); + } + let environmentMap = null; let environmentMapParams = element.getAttribute ('environmentmap'); if (environmentMapParams) { @@ -125,6 +139,7 @@ OV.Init3DViewerElements = function (onReady) camera, backgroundColor, defaultColor, + edgeSettings, environmentMap }); } diff --git a/test/tests/parameterlist_test.js b/test/tests/parameterlist_test.js index 15dcaa6..62d5a1d 100644 --- a/test/tests/parameterlist_test.js +++ b/test/tests/parameterlist_test.js @@ -13,13 +13,19 @@ describe ('Parameter List', function () { 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 (); + let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddDefaultColor (color).GetParameterList (); + let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackgroundColor (background).AddDefaultColor (color).GetParameterList (); + let urlParams6 = OV.CreateUrlBuilder ().AddEdgeSettings ({ + showEdges : true, + edgeColor : new OV.Color (1, 2, 3), + edgeThreshold : 15 + }).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$defaultcolor=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$backgroundcolor=4,5,6$defaultcolor=1,2,3'); + assert.strictEqual (urlParams6, 'edgesettings=on,1,2,3,15'); }); it ('Parameter list parser', function () { @@ -37,6 +43,7 @@ describe ('Parameter List', function () { 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$defaultcolor=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$backgroundcolor=4,5,6$defaultcolor=1,2,3'; + let urlParams6 = 'edgesettings=on,1,2,3,15'; let parserLegacy = OV.CreateUrlParser (urlParamsLegacy); assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls); assert.deepStrictEqual (parserLegacy.GetCamera (), null); @@ -61,5 +68,11 @@ describe ('Parameter List', function () { assert.deepStrictEqual (parser5.GetCamera (), camera); assert.deepStrictEqual (parser5.GetDefaultColor (), color); assert.deepStrictEqual (parser5.GetBackgroundColor (), background); + let parser6 = OV.CreateUrlParser (urlParams6); + assert.deepStrictEqual (parser6.GetEdgeSettings (), { + showEdges : true, + edgeColor : new OV.Color (1, 2, 3), + edgeThreshold : 15 + }); }); }); diff --git a/website/o3dv/js/embed.js b/website/o3dv/js/embed.js index 1825710..a079343 100644 --- a/website/o3dv/js/embed.js +++ b/website/o3dv/js/embed.js @@ -23,6 +23,14 @@ OV.Embed = class if (background !== null) { this.viewer.SetBackgroundColor (background); } + let edgeSettings = this.hashHandler.GetEdgeSettingsFromHash (); + if (edgeSettings !== null) { + this.viewer.SetEdgeSettings ( + edgeSettings.showEdges, + edgeSettings.edgeColor, + edgeSettings.edgeThreshold + ); + } let settings = new OV.ImportSettings (); let defaultColor = this.hashHandler.GetDefaultColorFromHash (); if (defaultColor !== null) { diff --git a/website/o3dv/js/hashhandler.js b/website/o3dv/js/hashhandler.js index e74ee0d..0c19bf3 100644 --- a/website/o3dv/js/hashhandler.js +++ b/website/o3dv/js/hashhandler.js @@ -58,6 +58,12 @@ OV.HashHandler = class return parser.GetDefaultColor (); } + GetEdgeSettingsFromHash () + { + let parser = OV.CreateUrlParser (this.GetHash ()); + return parser.GetEdgeSettings (); + } + GetHash () { return window.location.hash.substr (1); diff --git a/website/o3dv/js/sharingdialog.js b/website/o3dv/js/sharingdialog.js index c47321f..e4c537b 100644 --- a/website/o3dv/js/sharingdialog.js +++ b/website/o3dv/js/sharingdialog.js @@ -28,8 +28,9 @@ OV.ShowSharingDialog = function (importer, settings, camera) let builder = OV.CreateUrlBuilder (); builder.AddModelUrls (params.files); builder.AddCamera (params.camera); - builder.AddBackground (params.backgroundColor); - builder.AddColor (params.defaultColor); + builder.AddBackgroundColor (params.backgroundColor); + builder.AddDefaultColor (params.defaultColor); + builder.AddEdgeSettings (params.edgeSettings); let hashParameters = builder.GetParameterList (); let embeddingCode = ''; @@ -90,6 +91,15 @@ OV.ShowSharingDialog = function (importer, settings, camera) embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null; embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams); }); + AddCheckboxLine (optionsSection, 'Use overridden edge display', 'embed_edge_display', (checked) => { + const edgeSettings = { + showEdges : settings.edgeSettings, + edgeColor : settings.edgeColor, + edgeThreshold : settings.edgeThreshold + }; + embeddingCodeParams.edgeSettings = checked ? edgeSettings : null; + embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams); + }); embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams); } @@ -118,7 +128,12 @@ OV.ShowSharingDialog = function (importer, settings, camera) files : modelFiles, camera : camera, backgroundColor : settings.backgroundColor, - defaultColor : settings.defaultColor + defaultColor : settings.defaultColor, + edgeSettings : { + showEdges : settings.showEdges, + edgeColor : settings.edgeColor, + edgeThreshold : settings.edgeThreshold + } }; let dialog = new OV.ButtonDialog ();