diff --git a/website/o3dv/css/sidebar.css b/website/o3dv/css/sidebar.css index 15268b2..235a50e 100644 --- a/website/o3dv/css/sidebar.css +++ b/website/o3dv/css/sidebar.css @@ -58,6 +58,18 @@ div.ov_sidebar_content div.ov_sidebar_settings_row overflow: auto; } +div.ov_sidebar_content div.ov_sidebar_settings_details_input +{ + width: 30px; + margin-right: 10px; + float: left; +} + +div.ov_sidebar_content div.ov_sidebar_settings_details_text +{ + float: left; +} + div.ov_sidebar_content div.ov_sidebar_settings_padded { margin: 10px 0px 0px 40px; diff --git a/website/o3dv/js/settings.js b/website/o3dv/js/settings.js index c0a5c1b..1517ba5 100644 --- a/website/o3dv/js/settings.js +++ b/website/o3dv/js/settings.js @@ -11,7 +11,7 @@ OV.Settings = class this.defaultColor = new OV.Color (200, 200, 200); this.showEdges = false; this.edgeColor = new OV.Color (0, 0, 0); - this.edgeThreshold = 10; + this.edgeThreshold = 1; this.themeId = OV.Theme.Light; } @@ -21,7 +21,7 @@ OV.Settings = class this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); this.showEdges = cookieHandler.GetBoolVal ('ov_show_edges', false); this.edgeColor = cookieHandler.GetColorVal ('ov_edge_color', new OV.Color (0, 0, 0)); - this.edgeThreshold = cookieHandler.GetIntVal ('ov_edge_threshold', 10); + this.edgeThreshold = cookieHandler.GetIntVal ('ov_edge_threshold', 1); this.showEdges = cookieHandler.GetBoolVal ('ov_show_edges', false); this.themeId = cookieHandler.GetIntVal ('ov_theme_id', OV.Theme.Light); } diff --git a/website/o3dv/js/sidebarpanels.js b/website/o3dv/js/sidebarpanels.js index ecabe48..79e579e 100644 --- a/website/o3dv/js/sidebarpanels.js +++ b/website/o3dv/js/sidebarpanels.js @@ -237,8 +237,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel 'Background Color', 'Affects only the visualization.', null, - ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'], this.settings.backgroundColor, + ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'], (newColor) => { this.SetBackgroundColor (newColor, false); } @@ -247,8 +247,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel 'Default Color', 'Appears when the model doesn\'t have materials.', 'Has no effect on the currently loaded file.', - ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'], this.settings.defaultColor, + ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'], (newColor) => { this.SetDefaultColor (newColor, false); } @@ -288,19 +288,15 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel } } - AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange) + AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange) { - let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content'); - let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); - let colorInput = OV.AddDiv (titleDiv, 'color-picker'); - OV.AddDiv (titleDiv, 'ov_sidebar_subtitle', title); - const pickr = Pickr.create ({ - el : colorInput, + let pickr = Pickr.create ({ + el : parentDiv, theme : 'monolith', position : 'left-start', swatches : predefinedColors, comparison : false, - default : '#' + OV.ColorToHexString (defaultValue), + default : '#' + OV.ColorToHexString (defaultColor), components : { preview : false, opacity : false, @@ -326,6 +322,18 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel ); onChange (ovColor); }); + return pickr; + } + + AddColorParameter (title, description, warningText, defaultColor, predefinedColors, onChange) + { + let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content'); + let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); + let colorInput = OV.AddDiv (titleDiv, 'color-picker'); + OV.AddDiv (titleDiv, 'ov_sidebar_subtitle', title); + let pickr = this.AddColorPicker (colorInput, defaultColor, predefinedColors, (color) => { + onChange (color); + }); OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded', description); let warningDiv = null; if (warningText !== null) { @@ -340,7 +348,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel }; } - AddEdgeDisplayParameter (show, edgeColor, edgeThreshold) + AddEdgeDisplayParameter (defaultShowEdges, defaultEdgeColor, defaultEdgeThreshold) { function AddRadioButton (contentDiv, id, text, onChange) { @@ -348,28 +356,54 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel return OV.AddRadioButton (row, 'edge_display', id, text, onChange); } + function ShowEdgeSettings (edgeSettingsDiv, show) + { + if (show) { + OV.ShowDomElement (edgeSettingsDiv); + } else { + OV.HideDomElement (edgeSettingsDiv); + } + } + let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content'); let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); OV.AddSvgIconElement (titleDiv, 'edges', 'ov_sidebar_subtitle_icon'); OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Edge Display'); let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded'); + let edgeSettingsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded'); + + let colorRow = OV.AddDiv (edgeSettingsDiv, 'ov_sidebar_settings_row'); + let colorInputDiv = OV.AddDiv (colorRow, 'ov_sidebar_settings_details_input'); + OV.AddDiv (colorRow, 'ov_sidebar_settings_details_text', 'Edge Color'); + let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; + let colorInput = OV.AddDiv (colorInputDiv); + let pickr = this.AddColorPicker (colorInput, defaultEdgeColor, predefinedEdgeColors, (color) => { + this.settings.edgeColor = color; + this.callbacks.onEdgeDisplayChange (); + }); + let buttons = []; let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => { + OV.HideDomElement (edgeSettingsDiv); this.settings.showEdges = false; this.callbacks.onEdgeDisplayChange (); }); let onButton = AddRadioButton (buttonsDiv, 'on', 'Show Edges', () => { + OV.ShowDomElement (edgeSettingsDiv); this.settings.showEdges = true; this.callbacks.onEdgeDisplayChange (); }); buttons.push (offButton); buttons.push (onButton); - OV.SelectRadioButton (buttons, show ? 'on' : 'off'); + OV.SelectRadioButton (buttons, defaultShowEdges ? 'on' : 'off'); + ShowEdgeSettings (edgeSettingsDiv, defaultShowEdges); return { + pickr : pickr, select : (value) => { OV.SelectRadioButton (buttons, value ? 'on' : 'off'); + ShowEdgeSettings (edgeSettingsDiv, value); } }; } @@ -425,6 +459,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.settings.showEdges = defaultSettings.showEdges; this.settings.edgeColor = defaultSettings.edgeColor; this.settings.edgeThreshold = defaultSettings.edgeThreshold; + this.edgeDisplayInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.edgeColor)); this.edgeDisplayInput.select (this.settings.showEdges); this.callbacks.onEdgeDisplayChange ();