Settings panel redesign.

This commit is contained in:
kovacsv 2021-08-14 11:55:21 +02:00
parent 8493391517
commit 95edcb8308
8 changed files with 44 additions and 57 deletions

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@
"lib_files" : [
"libs/jquery-3.5.1.min.js",
"libs/pickr.monolith.min-1.8.2.css",
"libs/pickr.min-1.8.2.js",
"libs/pickr.es5.min-1.8.2.js",
"libs/three.min-129.js"
],
"engine_files" : [

View File

@ -14,7 +14,7 @@
<!-- libs start -->
<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
<script type="text/javascript" src="../libs/pickr.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/three.min-129.js"></script>
<!-- libs end -->

View File

@ -11,7 +11,7 @@
<!-- libs start -->
<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
<script type="text/javascript" src="../libs/pickr.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/three.min-129.js"></script>
<!-- libs end -->

View File

@ -1,4 +1,4 @@
OV.FeatureSet =
{
SettingsPanel : true
};

View File

@ -20,12 +20,24 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
InitSettings (settings, defaultSettings, callbacks)
{
this.backgroundColorInput = this.AddColorParameters ('Background Color', 'Changing the background color affects only the visualization.', settings.backgroundColor, callbacks.onBackgroundColorChange);
this.defaultColorInput = this.AddColorParameters ('Default Color', 'Default color is used when no material was defined in the file.', settings.defaultColor, callbacks.onDefaultColorChange);
this.backgroundColorInput = this.AddColorParameters (
'Background Color',
'Changing the background color affects only the visualization.',
['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'],
settings.backgroundColor,
callbacks.onBackgroundColorChange
);
this.defaultColorInput = this.AddColorParameters (
'Default Color',
'Default color is used when no material was defined in the file.',
['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
settings.defaultColor,
callbacks.onDefaultColorChange
);
this.AddResetToDefaultsButton (defaultSettings, callbacks);
}
AddColorParameters (title, description, defaultValue, onChange)
AddColorParameters (title, description, predefinedColors, defaultValue, onChange)
{
let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
@ -36,16 +48,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
el : colorInput.get (0),
theme : 'monolith',
appClass : 'ov_sidebar_color',
swatches : [
'#225588',
'#225588',
'#225588',
'#225588',
'#225588',
'#225588',
'#225588',
'#225588',
],
swatches : predefinedColors,
comparison : false,
default : '#' + OV.ColorToHexString (defaultValue),
components : {
@ -64,19 +67,14 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
}
}
});
let selectedColor = null;
pickr.on ('change', (color, source, instance) => {
selectedColor = color;
let rgbaColor = selectedColor.toRGBA ();
let color2 = new OV.Color (rgbaColor[0], rgbaColor[1], rgbaColor[2]);
onChange (color2);
}).on ('hide', instance => {
if (selectedColor !== null) {
let rgbaColor = selectedColor.toRGBA ();
let color = new OV.Color (rgbaColor[0], rgbaColor[1], rgbaColor[2]);
onChange (color);
}
console.log ('Event: "hide"', instance);
let rgbaColor = color.toRGBA ();
let ovColor = new OV.Color (
parseInt (rgbaColor[0], 10),
parseInt (rgbaColor[1], 10),
parseInt (rgbaColor[2], 10)
);
onChange (ovColor);
});
return pickr;
}

View File

@ -79,18 +79,14 @@ OV.ShowSharingDialog = function (importer, settings, camera)
embeddingCodeParams.camera = checked ? camera : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
if (OV.FeatureSet.SettingsPanel) {
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
embeddingCodeParams.background = checked ? settings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.background = settings.backgroundColor;
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
embeddingCodeParams.color = checked ? settings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.color = settings.defaultColor;
}
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
embeddingCodeParams.background = checked ? settings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
embeddingCodeParams.color = checked ? settings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
}
@ -116,8 +112,8 @@ OV.ShowSharingDialog = function (importer, settings, camera)
let embeddingCodeParams = {
files : modelFiles,
camera : camera,
background : null,
color : null
background : settings.backgroundColor,
color : settings.defaultColor
};
let dialog = new OV.ButtonDialog ();

View File

@ -528,19 +528,15 @@ OV.Website = class
image : 'details',
title : 'Details panel',
button : null
},
{
panelId : null,
panel : settingsPanel,
image : 'settings',
title : 'Settings panel',
button : null
}
];
if (OV.FeatureSet.SettingsPanel) {
sidebarPanels.push (
{
panelId : null,
panel : settingsPanel,
image : 'settings',
title : 'Settings panel',
button : null
}
);
}
for (let id = 0; id < sidebarPanels.length; id++) {
let sidebarPanel = sidebarPanels[id];