diff --git a/website/assets/images/3dviewer_net_start_page.png b/website/assets/images/3dviewer_net_start_page.png index 4339b47..79a0335 100644 Binary files a/website/assets/images/3dviewer_net_start_page.png and b/website/assets/images/3dviewer_net_start_page.png differ diff --git a/website/assets/images/sidebar/warning.svg b/website/assets/images/sidebar/warning.svg new file mode 100644 index 0000000..f63e430 --- /dev/null +++ b/website/assets/images/sidebar/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css index c5bd450..60a2105 100644 --- a/website/o3dv/css/controls.css +++ b/website/o3dv/css/controls.css @@ -4,6 +4,19 @@ img.ov_svg_icon height: 18px; } +img.ov_svg_icon.left +{ + margin-right: 10px; + float: left; +} + +img.ov_svg_icon.left_inline +{ + margin-right: 10px; + margin-top: 2px; + float: left; +} + div.ov_thin_scrollbar { scrollbar-color: #cccccc transparent; diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css index cb38e85..dcd1f17 100644 --- a/website/o3dv/css/dialogs.css +++ b/website/o3dv/css/dialogs.css @@ -1,4 +1,3 @@ - div.ov_modal_overlay { position: absolute; @@ -103,12 +102,6 @@ div.ov_dialog a.ov_dialog_file_link border-radius: 5px; } -div.ov_dialog img.ov_dialog_file_link_icon -{ - margin-right: 10px; - float: left; -} - div.ov_dialog div.ov_dialog_file_link_text { float: left; @@ -178,13 +171,6 @@ div.ov_popup div.ov_popup_list_item overflow: auto; } -div.ov_popup img.ov_popup_list_item_icon -{ - margin-right: 10px; - margin-top: 2px; - float: left; -} - div.ov_popup div.ov_popup_list_item_icon { float: left; diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css index dbd76de..3e9b9ac 100644 --- a/website/o3dv/css/website.css +++ b/website/o3dv/css/website.css @@ -244,6 +244,12 @@ div.ov_sidebar_content div.ov_sidebar_settings_description { color: #838383; margin: 10px 0px 0px 43px; + float: left; +} + +div.ov_sidebar_content div.ov_sidebar_settings_warning +{ + margin-left: 30px; } div.ov_sidebar_content button.pcr-button diff --git a/website/o3dv/js/exportdialog.js b/website/o3dv/js/exportdialog.js index 2719f75..530e4e2 100644 --- a/website/o3dv/js/exportdialog.js +++ b/website/o3dv/js/exportdialog.js @@ -215,7 +215,7 @@ OV.ExportDialog = class let fileLink = $('').addClass ('ov_dialog_file_link').appendTo (fileList); fileLink.attr ('href', url); fileLink.attr ('download', file.GetName ()); - OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'ov_dialog_file_link_icon'); + OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'left'); $('
').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink); } diff --git a/website/o3dv/js/featureset.js b/website/o3dv/js/featureset.js index f4dfea8..32c904d 100644 --- a/website/o3dv/js/featureset.js +++ b/website/o3dv/js/featureset.js @@ -1,4 +1,4 @@ OV.FeatureSet = { - ColorSettings : false + }; diff --git a/website/o3dv/js/modal.js b/website/o3dv/js/modal.js index 23960ac..67b3446 100644 --- a/website/o3dv/js/modal.js +++ b/website/o3dv/js/modal.js @@ -240,7 +240,7 @@ OV.ListPopup = class extends OV.PopupDialog { let listItemDiv = $('
').addClass ('ov_popup_list_item').appendTo (this.listDiv); if (item.icon) { - OV.CreateSvgIcon (listItemDiv, item.icon, 'ov_popup_list_item_icon'); + OV.CreateSvgIcon (listItemDiv, item.icon, 'left_inline'); } if (item.color) { let iconDiv = $('
').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv); diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js index 9a2d4a2..96cdc72 100644 --- a/website/o3dv/js/settingssidebarpanel.js +++ b/website/o3dv/js/settingssidebarpanel.js @@ -5,6 +5,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel super (parentDiv); this.backgroundColorInput = null; this.defaultColorInput = null; + this.defaultColorWarning = null; } GetTitle () @@ -14,22 +15,24 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel HidePopups () { - this.backgroundColorInput.hide (); - this.defaultColorInput.hide (); + this.backgroundColorInput.pickr.hide (); + this.defaultColorInput.pickr.hide (); } InitSettings (settings, defaultSettings, callbacks) { - this.backgroundColorInput = this.AddColorParameters ( + this.backgroundColorInput = this.AddColorParameter ( 'Background Color', 'Changing the background color affects only the visualization.', + null, ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'], settings.backgroundColor, callbacks.onBackgroundColorChange ); - this.defaultColorInput = this.AddColorParameters ( + this.defaultColorInput = this.AddColorParameter ( 'Default Color', 'Default color is used when no material was defined in the file.', + 'This setting has no effect on the currently loaded model.', ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'], settings.defaultColor, callbacks.onDefaultColorChange @@ -37,11 +40,21 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.AddResetToDefaultsButton (defaultSettings, callbacks); } - AddColorParameters (title, description, predefinedColors, defaultValue, onChange) + Update (model) + { + let hasDefaultMaterial = OV.HasDefaultMaterial (model); + if (!hasDefaultMaterial) { + this.defaultColorInput.warning.show (); + } else { + this.defaultColorInput.warning.hide (); + } + this.Resize (); + } + + AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange) { let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv); let titleDiv = $('
').addClass ('ov_sidebar_subtitle').appendTo (contentDiv); - $('
').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv); let colorInput = $('
').addClass ('color-picker').addClass ('ov_sidebar_color').appendTo (titleDiv); $('').html (title).appendTo (titleDiv); const pickr = Pickr.create ({ @@ -77,15 +90,25 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel ); onChange (ovColor); }); - return pickr; + $('
').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv); + let warningDiv = null; + if (warningText !== null) { + warningDiv = $('
').addClass ('ov_sidebar_settings_description').appendTo (contentDiv); + OV.CreateSvgIcon (warningDiv, 'assets/images/sidebar/warning.svg', 'left_inline'); + $('
').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv); + } + return { + pickr : pickr, + warning : warningDiv + }; } AddResetToDefaultsButton (defaultSettings, callbacks) { let resetToDefaultsButton = $('
').addClass ('ov_button').addClass ('outline').addClass ('ov_sidebar_button').html ('Reset to Default').appendTo (this.contentDiv); resetToDefaultsButton.click (() => { - this.backgroundColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor)); - this.defaultColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor)); + this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor)); + this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor)); callbacks.onBackgroundColorChange (defaultSettings.backgroundColor); callbacks.onDefaultColorChange (defaultSettings.defaultColor); }); diff --git a/website/o3dv/js/sharingdialog.js b/website/o3dv/js/sharingdialog.js index 2300136..a8123fd 100644 --- a/website/o3dv/js/sharingdialog.js +++ b/website/o3dv/js/sharingdialog.js @@ -79,19 +79,14 @@ OV.ShowSharingDialog = function (importer, settings, camera) embeddingCodeParams.camera = checked ? camera : null; embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); }); - if (OV.FeatureSet.ColorSettings) { - AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => { - embeddingCodeParams.backgroundColor = checked ? settings.backgroundColor : null; - embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); - }); - AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => { - embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null; - embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); - }); - } else { - embeddingCodeParams.backgroundColor = null; - embeddingCodeParams.defaultColor = null; - } + AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => { + embeddingCodeParams.backgroundColor = checked ? settings.backgroundColor : null; + embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); + }); + AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => { + embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null; + embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); + }); embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); } diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index e7c6dff..1f46af5 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -38,6 +38,7 @@ OV.Website = class side : THREE.DoubleSide }); this.detailsPanel = null; + this.settingsPanel = null; this.model = null; this.dialog = null; } @@ -133,6 +134,7 @@ OV.Website = class this.viewer.AddMeshes (threeMeshes); this.viewer.SetUpVector (importResult.upVector, false); this.navigator.FillTree (importResult); + this.settingsPanel.Update (this.model); this.FitModelToWindow (true); } @@ -520,10 +522,7 @@ OV.Website = class } this.detailsPanel = new OV.DetailsSidebarPanel (this.parameters.sidebarDiv); - let settingsPanel = null; - if (OV.FeatureSet.ColorSettings) { - settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv); - } + this.settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv); let sidebarPanels = [ { @@ -532,17 +531,15 @@ OV.Website = class image : 'details', title : 'Details panel', button : null - } - ]; - if (OV.FeatureSet.ColorSettings) { - sidebarPanels.push ({ + }, + { panelId : null, - panel : settingsPanel, + panel : this.settingsPanel, image : 'settings', title : 'Settings panel', button : null - }); - } + } + ]; for (let id = 0; id < sidebarPanels.length; id++) { let sidebarPanel = sidebarPanels[id]; @@ -559,29 +556,27 @@ OV.Website = class }); } - if (OV.FeatureSet.ColorSettings) { - let defaultSettings = new OV.WebsiteSettings (); - settingsPanel.InitSettings ( - this.settings, - defaultSettings, - { - onBackgroundColorChange : (newVal) => { - this.settings.backgroundColor = newVal; - this.settings.SaveToCookies (this.cookieHandler); - this.viewer.SetBackgroundColor (newVal); - }, - onDefaultColorChange : (newVal) => { - this.settings.defaultColor = newVal; - this.settings.SaveToCookies (this.cookieHandler); - if (this.modelLoader.defaultMaterial !== null) { - OV.ReplaceDefaultMaterialColor (this.model, newVal); - this.modelLoader.ReplaceDefaultMaterialColor (newVal); - } - this.viewer.Render (); + let defaultSettings = new OV.WebsiteSettings (); + this.settingsPanel.InitSettings ( + this.settings, + defaultSettings, + { + onBackgroundColorChange : (newVal) => { + this.settings.backgroundColor = newVal; + this.settings.SaveToCookies (this.cookieHandler); + this.viewer.SetBackgroundColor (newVal); + }, + onDefaultColorChange : (newVal) => { + this.settings.defaultColor = newVal; + this.settings.SaveToCookies (this.cookieHandler); + if (this.modelLoader.defaultMaterial !== null) { + OV.ReplaceDefaultMaterialColor (this.model, newVal); + this.modelLoader.ReplaceDefaultMaterialColor (newVal); } + this.viewer.Render (); } - ); - } + } + ); let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true); ShowSidebar (this.sidebar, this.cookieHandler, sidebarPanels, show ? sidebarPanels[0].panelId : null);