Settings panel redesign.
This commit is contained in:
parent
8493391517
commit
95edcb8308
File diff suppressed because one or more lines are too long
@ -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" : [
|
||||
|
||||
@ -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 -->
|
||||
|
||||
|
||||
@ -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 -->
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
OV.FeatureSet =
|
||||
{
|
||||
SettingsPanel : true
|
||||
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 ();
|
||||
|
||||
@ -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];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user