Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slider for edge threshold.

Browse Source
This commit is contained in:
kovacsv 2021-12-15 15:22:56 +01:00
parent ac4ab25d8a
commit b42f8a3ec3
4 changed files with 80 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
source/viewer/domutils.js
View File

@ -138,6 +138,24 @@ OV.AddSelect = function (parentElement, options)
return selectElement;
};
OV.AddRangeSlider = function (parentElement, min, max)
{
let slider = OV.AddDomElement (parentElement, 'input', 'ov_slider');
slider.setAttribute ('type', 'range');
slider.setAttribute ('min', min.toString ());
slider.setAttribute ('max', max.toString ());
return slider;
};
OV.AddNumberInput = function (parentElement, min, max)
{
let slider = OV.AddDomElement (parentElement, 'input', 'ov_number_input');
slider.setAttribute ('type', 'number');
slider.setAttribute ('min', min.toString ());
slider.setAttribute ('max', max.toString ());
return slider;
};
OV.SelectRadioButton = function (radioButtons, selectedId)
{
for (let radioButton of radioButtons) {

43
website/o3dv/css/controls.css
View File

@ -85,11 +85,6 @@ input.ov_dialog_text
background: var(--ov_dialog_background_color);
}
input.ov_radio_button
{
margin-right: 10px;
}
input.ov_radio_button
{
position: relative;
@ -133,6 +128,44 @@ input.ov_checkbox:checked
border: 0px;
}
input.ov_slider
{
height: 1px;
background: var(--ov_border_color);
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input.ov_slider::-webkit-slider-thumb
{
background: var(--ov_button_color);
width: 14px;
height: 14px;
border-radius: 14px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
input.ov_slider::-moz-range-thumb
{
background: var(--ov_button_color);
width: 14px;
height: 14px;
border: 0px;
border-radius: 14px;
cursor: pointer;
}
span.ov_slider_label
{
margin-left: 10px;
position: relative;
bottom: -4px;
}
@media (hover)
{

17
website/o3dv/css/sidebar.css
View File

@ -70,23 +70,14 @@ div.ov_sidebar_content div.ov_sidebar_settings_row
overflow: auto;
}
div.ov_sidebar_content div.ov_sidebar_settings_parameter_name
div.ov_sidebar_content div.ov_sidebar_settings_row input.ov_slider
{
width: 70%;
float: left;
width: 80%;
}
div.ov_sidebar_content div.ov_sidebar_settings_parameter_value
div.ov_sidebar_content div.ov_sidebar_settings_row.large
{
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)
height: 25px;
}
div.ov_sidebar_content div.ov_sidebar_settings_padded

44
website/o3dv/js/sidebarsettingspanel.js
View File

@ -48,7 +48,7 @@ OV.SettingsColorSection = class
{
this.contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_subtitle');
let colorInput = OV.AddDiv (titleDiv, 'color-picker');
let colorInput = OV.AddDiv (titleDiv, 'ov_color_picker');
OV.AddDiv (titleDiv, 'ov_sidebar_subtitle', title);
this.pickr = OV.AddColorPicker (colorInput, color, predefinedColors, (color) => {
onChange (color);
@ -85,7 +85,8 @@ OV.SettingsEdgeDisplaySection = class
this.parentDiv = parentDiv;
this.buttons = null;
this.pickr = null;
this.thresholdSelect = null;
this.thresholdSlider = null;
this.thresholdSliderValue = null;
this.edgeSettingsDiv = null;
}
@ -105,33 +106,27 @@ OV.SettingsEdgeDisplaySection = class
let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
this.edgeSettingsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
let colorRow = OV.AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row');
OV.AddDiv (colorRow, 'ov_sidebar_settings_parameter_name', 'Edge Color');
let edgeColorRow = OV.AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row');
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 colorInput = OV.AddDiv (edgeColorRow, 'ov_color_picker');
this.pickr = OV.AddColorPicker (colorInput, edgeColor, predefinedEdgeColors, (color) => {
callbacks.onEdgeColorChange (color);
});
OV.AddDiv (edgeColorRow, null, 'Edge Color');
let thresholdRow = OV.AddDiv (this.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 ()
});
}
this.thresholdSelect = OV.AddSelect (thresholdInputDiv, thresholdValues);
this.thresholdSelect.addEventListener ('change', () => {
callbacks.onEdgeThresholdChange (parseInt (this.thresholdSelect.value, 10));
let thresholdRow = OV.AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row large');
this.thresholdSlider = OV.AddRangeSlider (thresholdRow, 0, 90);
this.thresholdSlider.setAttribute ('title', 'Edge Angle Threshold');
this.thresholdSliderValue = OV.AddDomElement (thresholdRow, 'span', 'ov_slider_label');
this.thresholdSlider.addEventListener ('input', () => {
this.thresholdSliderValue.innerHTML = this.thresholdSlider.value;
});
this.thresholdSelect.value = edgeThreshold.toString ();
this. thresholdSlider.addEventListener ('change', () => {
callbacks.onEdgeThresholdChange (this.thresholdSlider.value);
});
this.thresholdSlider.value = edgeThreshold;
this.thresholdSliderValue.innerHTML = edgeThreshold;
this.buttons = [];
let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => {
@ -157,7 +152,8 @@ OV.SettingsEdgeDisplaySection = class
OV.SelectRadioButton (this.buttons, showEdges ? 'on' : 'off');
this.ShowEdgeSettings (showEdges);
this.pickr.setColor ('#' + OV.ColorToHexString (edgeColor));
this.thresholdSelect.value = edgeThreshold.toString ();
this.thresholdSlider.value = edgeThreshold;
this.thresholdSliderValue.innerHTML = edgeThreshold;
}
ShowEdgeSettings (show)