From c3eb21b185ae9abd64bb111e61635997b7b32edc Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 8 Dec 2021 18:26:39 +0100 Subject: [PATCH] Add edge threshold popup. --- source/viewer/domutils.js | 11 +++++++++++ website/o3dv/css/core.css | 5 +++++ website/o3dv/css/sidebar.css | 16 +++++++++++----- website/o3dv/js/sidebarpanels.js | 30 ++++++++++++++++++++++++++---- 4 files changed, 53 insertions(+), 9 deletions(-) diff --git a/source/viewer/domutils.js b/source/viewer/domutils.js index 8a64d87..45836f3 100644 --- a/source/viewer/domutils.js +++ b/source/viewer/domutils.js @@ -128,6 +128,17 @@ OV.AddRadioButton = function (parentElement, name, id, text, onChange) return radio; }; +OV.AddSelect = function (parentElement, options) +{ + let selectElement = OV.AddDomElement (parentElement, 'select'); + for (let option of options) { + let optionElement = OV.AddDomElement (selectElement, 'option'); + optionElement.value = option.value; + optionElement.innerHTML = option.text; + } + return selectElement; +}; + OV.SelectRadioButton = function (radioButtons, selectedId) { for (let radioButton of radioButtons) { diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css index e68fbc7..9b212c3 100644 --- a/website/o3dv/css/core.css +++ b/website/o3dv/css/core.css @@ -9,6 +9,11 @@ src: url('Quicksand/Quicksand-Regular.ttf'); } +input, select, textarea +{ + outline: none; +} + html, body { color: var(--ov_foreground_color); diff --git a/website/o3dv/css/sidebar.css b/website/o3dv/css/sidebar.css index 235a50e..c414c8d 100644 --- a/website/o3dv/css/sidebar.css +++ b/website/o3dv/css/sidebar.css @@ -58,22 +58,28 @@ div.ov_sidebar_content div.ov_sidebar_settings_row overflow: auto; } -div.ov_sidebar_content div.ov_sidebar_settings_details_input +div.ov_sidebar_content div.ov_sidebar_settings_parameter_name { - width: 30px; - margin-right: 10px; + width: 70%; float: left; } -div.ov_sidebar_content div.ov_sidebar_settings_details_text +div.ov_sidebar_content div.ov_sidebar_settings_parameter_value { + width: 30%; float: left; } +div.ov_sidebar_content div.ov_sidebar_settings_parameter_value select +{ + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); + border: 1px solid var(--ov_border_color) +} + div.ov_sidebar_content div.ov_sidebar_settings_padded { margin: 10px 0px 0px 40px; - float: left; overflow: hidden; } diff --git a/website/o3dv/js/sidebarpanels.js b/website/o3dv/js/sidebarpanels.js index 79e579e..237c2c5 100644 --- a/website/o3dv/js/sidebarpanels.js +++ b/website/o3dv/js/sidebarpanels.js @@ -374,15 +374,35 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel 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'); + OV.AddDiv (colorRow, 'ov_sidebar_settings_parameter_name', 'Edge Color'); let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; + let colorInputDiv = OV.AddDiv (colorRow, 'ov_sidebar_settings_parameter_value'); let colorInput = OV.AddDiv (colorInputDiv); let pickr = this.AddColorPicker (colorInput, defaultEdgeColor, predefinedEdgeColors, (color) => { this.settings.edgeColor = color; this.callbacks.onEdgeDisplayChange (); }); + let thresholdRow = OV.AddDiv (edgeSettingsDiv, 'ov_sidebar_settings_row'); + OV.AddDiv (thresholdRow, 'ov_sidebar_settings_parameter_name', 'Threshold Angle'); + let thresholdInputDiv = OV.AddDiv (thresholdRow, 'ov_sidebar_settings_parameter_value'); + let thresholdValues = [{ + value : '1', + text : '1' + }]; + for (let thresholdValue = 10; thresholdValue <= 180; thresholdValue += 10) { + thresholdValues.push ({ + value : thresholdValue.toString (), + text : thresholdValue.toString () + }); + } + let thresholdSelect = OV.AddSelect (thresholdInputDiv, thresholdValues); + thresholdSelect.addEventListener ('change', () => { + this.settings.edgeThreshold = parseInt (thresholdSelect.value, 10); + this.callbacks.onEdgeDisplayChange (); + }); + thresholdSelect.value = defaultEdgeThreshold.toString (); + let buttons = []; let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => { OV.HideDomElement (edgeSettingsDiv); @@ -396,11 +416,12 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel }); buttons.push (offButton); buttons.push (onButton); - OV.SelectRadioButton (buttons, defaultShowEdges ? 'on' : 'off'); ShowEdgeSettings (edgeSettingsDiv, defaultShowEdges); + return { pickr : pickr, + threshold : thresholdSelect, select : (value) => { OV.SelectRadioButton (buttons, value ? 'on' : 'off'); ShowEdgeSettings (edgeSettingsDiv, value); @@ -459,8 +480,9 @@ 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.edgeDisplayInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.edgeColor)); + this.edgeDisplayInput.threshold.value = this.settings.edgeThreshold.toString (); this.callbacks.onEdgeDisplayChange (); this.settings.themeId = defaultSettings.themeId;