From 303a2d182c492c0c39087bb57fae302bdc14c795 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sun, 11 Jul 2021 09:59:26 +0200 Subject: [PATCH] Add background color switch to the settings panel. --- website/o3dv/detailssidebarpanel.js | 124 +++++++++++++-------------- website/o3dv/featureset.js | 2 +- website/o3dv/settingssidebarpanel.js | 26 +++++- website/o3dv/sharingdialog.js | 8 +- website/o3dv/sidebar.js | 7 -- website/o3dv/sidebarpanel.js | 6 -- website/o3dv/website.css | 13 ++- website/o3dv/website.js | 24 ++++-- 8 files changed, 115 insertions(+), 95 deletions(-) diff --git a/website/o3dv/detailssidebarpanel.js b/website/o3dv/detailssidebarpanel.js index 66b5e5f..4103665 100644 --- a/website/o3dv/detailssidebarpanel.js +++ b/website/o3dv/detailssidebarpanel.js @@ -10,6 +10,68 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel return 'Details'; } + AddElementProperties (element) + { + this.Clear (); + let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); + let boundingBox = OV.GetBoundingBox (element); + let size = OV.SubCoord3D (boundingBox.max, boundingBox.min); + this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ())); + this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ())); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z)); + this.AddCalculatedProperty (table, 'Volume', function () { + const volume = OV.CalculateVolume (element); + if (volume === null) { + return null; + } + return new OV.Property (OV.PropertyType.Number, null, volume); + }); + this.AddCalculatedProperty (table, 'Surface Area', function () { + const volume = OV.CalculateSurfaceArea (element); + if (volume === null) { + return null; + } + return new OV.Property (OV.PropertyType.Number, null, volume); + }); + if (element.PropertyGroupCount () > 0) { + let customTable = $('
').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv); + for (let i = 0; i < element.PropertyGroupCount (); i++) { + const propertyGroup = element.GetPropertyGroup (i); + this.AddPropertyGroup (customTable, propertyGroup); + for (let j = 0; j < propertyGroup.PropertyCount (); j++) { + const property = propertyGroup.GetProperty (j); + this.AddPropertyInGroup (customTable, property); + } + } + } + this.Resize (); + } + + AddMaterialProperties (material) + { + function AddTextureMap (obj, table, name, map) + { + if (map === null || map.name === null) { + return; + } + let fileName = OV.GetFileName (map.name); + obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName)); + } + + this.Clear (); + let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); + this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); + AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap); + AddTextureMap (this, table, 'Specular Map', material.specularMap); + AddTextureMap (this, table, 'Bump Map', material.bumpMap); + AddTextureMap (this, table, 'Normal Map', material.normalMap); + AddTextureMap (this, table, 'Emissive Map', material.emissiveMap); + this.Resize (); + } + AddPropertyGroup (table, propertyGroup) { let row = $('
').addClass ('ov_property_table_row group').appendTo (table); @@ -82,66 +144,4 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel targetDiv.html (valueText).attr ('title', valueText); } } - - AddElementProperties (element) - { - this.Clear (); - let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); - let boundingBox = OV.GetBoundingBox (element); - let size = OV.SubCoord3D (boundingBox.max, boundingBox.min); - this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ())); - this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ())); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z)); - this.AddCalculatedProperty (table, 'Volume', function () { - const volume = OV.CalculateVolume (element); - if (volume === null) { - return null; - } - return new OV.Property (OV.PropertyType.Number, null, volume); - }); - this.AddCalculatedProperty (table, 'Surface Area', function () { - const volume = OV.CalculateSurfaceArea (element); - if (volume === null) { - return null; - } - return new OV.Property (OV.PropertyType.Number, null, volume); - }); - if (element.PropertyGroupCount () > 0) { - let customTable = $('
').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv); - for (let i = 0; i < element.PropertyGroupCount (); i++) { - const propertyGroup = element.GetPropertyGroup (i); - this.AddPropertyGroup (customTable, propertyGroup); - for (let j = 0; j < propertyGroup.PropertyCount (); j++) { - const property = propertyGroup.GetProperty (j); - this.AddPropertyInGroup (customTable, property); - } - } - } - this.Resize (); - } - - AddMaterialProperties (material) - { - function AddTextureMap (obj, table, name, map) - { - if (map === null || map.name === null) { - return; - } - let fileName = OV.GetFileName (map.name); - obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName)); - } - - this.Clear (); - let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); - this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); - AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap); - AddTextureMap (this, table, 'Specular Map', material.specularMap); - AddTextureMap (this, table, 'Bump Map', material.bumpMap); - AddTextureMap (this, table, 'Normal Map', material.normalMap); - AddTextureMap (this, table, 'Emissive Map', material.emissiveMap); - this.Resize (); - } }; diff --git a/website/o3dv/featureset.js b/website/o3dv/featureset.js index ebb8ba8..01b03a5 100644 --- a/website/o3dv/featureset.js +++ b/website/o3dv/featureset.js @@ -1,4 +1,4 @@ OV.FeatureSet = { - SettingsAvailable : false + SettingsPanel : false }; diff --git a/website/o3dv/settingssidebarpanel.js b/website/o3dv/settingssidebarpanel.js index 91a3bac..2184d2e 100644 --- a/website/o3dv/settingssidebarpanel.js +++ b/website/o3dv/settingssidebarpanel.js @@ -10,8 +10,30 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel return 'Settings'; } - InitContent () + InitSettings (settings) { - this.contentDiv.html ('Settings Content...'); + let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); + + let backgroundColorParams = settings.backgroundColor; + this.AddColorInput (table, backgroundColorParams, function (newVal) { + backgroundColorParams.onChange (newVal); + }); + + } + + AddColorInput (table, params, onChange) + { + let row = $('
').addClass ('ov_property_table_row').appendTo (table); + let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); + let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); + nameColum.html (params.name + ':').attr ('title', params.name); + + let colorInput = $('').attr ('type', 'color').addClass ('ov_sidebar_color').appendTo (valueColumn); + colorInput.val ('#' + OV.ColorToHexString (params.defaultValue)); + + colorInput.change (function () { + let colorStr = colorInput.val ().substr (1); + onChange (OV.HexStringToColor (colorStr)); + }); } }; diff --git a/website/o3dv/sharingdialog.js b/website/o3dv/sharingdialog.js index 6d21a7f..1424f16 100644 --- a/website/o3dv/sharingdialog.js +++ b/website/o3dv/sharingdialog.js @@ -63,13 +63,13 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer let section = $('
').addClass ('ov_dialog_section').appendTo (parentDiv); $('
').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section); let optionsSection = null; - if (OV.FeatureSet.SettingsAvailable) { + if (OV.FeatureSet.SettingsPanel) { optionsSection = $('
').addClass ('ov_dialog_section').appendTo (section); } let sharingLinkInput = AddCopyableTextInput (section, function () { return GetSharingLink (sharingLinkParams); }); - if (OV.FeatureSet.SettingsAvailable) { + if (OV.FeatureSet.SettingsPanel) { AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) { sharingLinkParams.color = checked ? importSettings.defaultColor : null; sharingLinkInput.val (GetSharingLink (sharingLinkParams)); @@ -91,16 +91,16 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer embeddingCodeParams.camera = checked ? camera : null; embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); }); - if (OV.FeatureSet.SettingsAvailable) { + if (OV.FeatureSet.SettingsPanel) { AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', function (checked) { embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null; embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); }); + embeddingCodeParams.background = viewerSettings.backgroundColor; 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)); diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js index d647215..3ee8f62 100644 --- a/website/o3dv/sidebar.js +++ b/website/o3dv/sidebar.js @@ -20,13 +20,6 @@ OV.Sidebar = class return this.panels[id]; } - Init (callbacks) - { - for (let id = 0; id < this.panels.length; id++) { - this.panels[id].Init (callbacks); - } - } - Show (panelId) { if (panelId !== null) { diff --git a/website/o3dv/sidebarpanel.js b/website/o3dv/sidebarpanel.js index 32087b0..786ede6 100644 --- a/website/o3dv/sidebarpanel.js +++ b/website/o3dv/sidebarpanel.js @@ -18,7 +18,6 @@ OV.SidebarPanel = class titleImg.click (function () { callbacks.onClose (); }); - this.InitContent (); } GetTitle () @@ -26,11 +25,6 @@ OV.SidebarPanel = class return ''; } - InitContent () - { - - } - Show (show) { this.visible = show; diff --git a/website/o3dv/website.css b/website/o3dv/website.css index 8963456..51d4db8 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -289,6 +289,12 @@ div.ov_sidebar_content overflow: auto; } +div.ov_sidebar_content input.ov_sidebar_color +{ + width: 64px; + height: 18px; +} + div.ov_tree_view { user-select: none; @@ -474,13 +480,6 @@ div.ov_dialog div.ov_dialog_select_option.selected background: #3393bd; } -div.ov_dialog input.ov_dialog_color -{ - width: 36px; - height: 18px; - margin-right: 10px; -} - div.ov_dialog div.ov_dialog_file_list { max-height: 105px; diff --git a/website/o3dv/website.js b/website/o3dv/website.js index c94c9c7..b7312ef 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -410,6 +410,7 @@ OV.Website = class let obj = this; this.detailsPanel = new OV.DetailsSidebarPanel (this.parameters.sidebarDiv); + let settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv); let sidebarPanels = [ { @@ -420,11 +421,11 @@ OV.Website = class button : null } ]; - if (OV.FeatureSet.SettingsAvailable) { + if (OV.FeatureSet.SettingsPanel) { sidebarPanels.push ( { panelId : null, - panel : new OV.SettingsSidebarPanel (this.parameters.sidebarDiv), + panel : settingsPanel, image : 'settings', title : 'Settings panel', button : null @@ -439,12 +440,23 @@ OV.Website = class ToggleSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, sidebarPanel.panelId); obj.Resize (); }); + sidebarPanel.panel.Init ({ + onClose : function () { + ShowSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, null); + obj.Resize (); + } + }); } - this.sidebar.Init ({ - onClose : function () { - ShowSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, null); - obj.Resize (); + settingsPanel.InitSettings ({ + backgroundColor : { + name : 'Background Color', + defaultValue : this.viewerSettings.backgroundColor, + onChange : function (newVal) { + obj.viewerSettings.backgroundColor = newVal; + obj.viewer.SetBackgroundColor (newVal); + obj.cookieHandler.SetColorVal ('ov_background_color', newVal); + } } });