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

Add warning to setting panel.

Browse Source
This commit is contained in:
kovacsv 2021-08-16 17:45:00 +02:00
parent 85bebcb1ed
commit 42955d417d
11 changed files with 90 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/assets/images/3dviewer_net_start_page.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 179 KiB

1
website/assets/images/sidebar/warning.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><style id="style2">.st1{fill:#fff}</style><circle style="fill:none;stroke:#838383;stroke-opacity:1" id="circle4" cy="9" cx="9" r="8.5"/><path class="st1" d="M9 10c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z" id="path6" style="fill:#838383;fill-opacity:1"/><circle class="st1" cx="9" cy="13" r="1" id="circle8" style="fill:#838383;fill-opacity:1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

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

@ -4,6 +4,19 @@ img.ov_svg_icon
height: 18px;
}
img.ov_svg_icon.left
{
margin-right: 10px;
float: left;
}
img.ov_svg_icon.left_inline
{
margin-right: 10px;
margin-top: 2px;
float: left;
}
div.ov_thin_scrollbar
{
scrollbar-color: #cccccc transparent;

14
website/o3dv/css/dialogs.css
View File

@ -1,4 +1,3 @@
div.ov_modal_overlay
{
position: absolute;
@ -103,12 +102,6 @@ div.ov_dialog a.ov_dialog_file_link
border-radius: 5px;
}
div.ov_dialog img.ov_dialog_file_link_icon
{
margin-right: 10px;
float: left;
}
div.ov_dialog div.ov_dialog_file_link_text
{
float: left;
@ -178,13 +171,6 @@ div.ov_popup div.ov_popup_list_item
overflow: auto;
}
div.ov_popup img.ov_popup_list_item_icon
{
margin-right: 10px;
margin-top: 2px;
float: left;
}
div.ov_popup div.ov_popup_list_item_icon
{
float: left;

6
website/o3dv/css/website.css
View File

@ -244,6 +244,12 @@ div.ov_sidebar_content div.ov_sidebar_settings_description
{
color: #838383;
margin: 10px 0px 0px 43px;
float: left;
}
div.ov_sidebar_content div.ov_sidebar_settings_warning
{
margin-left: 30px;
}
div.ov_sidebar_content button.pcr-button

2
website/o3dv/js/exportdialog.js
View File

@ -215,7 +215,7 @@ OV.ExportDialog = class
let fileLink = $('<a>').addClass ('ov_dialog_file_link').appendTo (fileList);
fileLink.attr ('href', url);
fileLink.attr ('download', file.GetName ());
OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'ov_dialog_file_link_icon');
OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'left');
$('<div>').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
}

2
website/o3dv/js/featureset.js
View File

@ -1,4 +1,4 @@
OV.FeatureSet =
{
ColorSettings : false
};

2
website/o3dv/js/modal.js
View File

@ -240,7 +240,7 @@ OV.ListPopup = class extends OV.PopupDialog
{
let listItemDiv = $('<div>').addClass ('ov_popup_list_item').appendTo (this.listDiv);
if (item.icon) {
OV.CreateSvgIcon (listItemDiv, item.icon, 'ov_popup_list_item_icon');
OV.CreateSvgIcon (listItemDiv, item.icon, 'left_inline');
}
if (item.color) {
let iconDiv = $('<div>').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv);

41
website/o3dv/js/settingssidebarpanel.js
View File

@ -5,6 +5,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
super (parentDiv);
this.backgroundColorInput = null;
this.defaultColorInput = null;
this.defaultColorWarning = null;
}
GetTitle ()
@ -14,22 +15,24 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
HidePopups ()
{
this.backgroundColorInput.hide ();
this.defaultColorInput.hide ();
this.backgroundColorInput.pickr.hide ();
this.defaultColorInput.pickr.hide ();
}
InitSettings (settings, defaultSettings, callbacks)
{
this.backgroundColorInput = this.AddColorParameters (
this.backgroundColorInput = this.AddColorParameter (
'Background Color',
'Changing the background color affects only the visualization.',
null,
['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'],
settings.backgroundColor,
callbacks.onBackgroundColorChange
);
this.defaultColorInput = this.AddColorParameters (
this.defaultColorInput = this.AddColorParameter (
'Default Color',
'Default color is used when no material was defined in the file.',
'This setting has no effect on the currently loaded model.',
['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
settings.defaultColor,
callbacks.onDefaultColorChange
@ -37,11 +40,21 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
this.AddResetToDefaultsButton (defaultSettings, callbacks);
}
AddColorParameters (title, description, predefinedColors, defaultValue, onChange)
Update (model)
{
let hasDefaultMaterial = OV.HasDefaultMaterial (model);
if (!hasDefaultMaterial) {
this.defaultColorInput.warning.show ();
} else {
this.defaultColorInput.warning.hide ();
}
this.Resize ();
}
AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange)
{
let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
$('<div>').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv);
let colorInput = $('<div>').addClass ('color-picker').addClass ('ov_sidebar_color').appendTo (titleDiv);
$('<span>').html (title).appendTo (titleDiv);
const pickr = Pickr.create ({
@ -77,15 +90,25 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
);
onChange (ovColor);
});
return pickr;
$('<div>').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv);
let warningDiv = null;
if (warningText !== null) {
warningDiv = $('<div>').addClass ('ov_sidebar_settings_description').appendTo (contentDiv);
OV.CreateSvgIcon (warningDiv, 'assets/images/sidebar/warning.svg', 'left_inline');
$('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
}
return {
pickr : pickr,
warning : warningDiv
};
}
AddResetToDefaultsButton (defaultSettings, callbacks)
{
let resetToDefaultsButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_sidebar_button').html ('Reset to Default').appendTo (this.contentDiv);
resetToDefaultsButton.click (() => {
this.backgroundColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
this.defaultColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor));
this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor));
callbacks.onBackgroundColorChange (defaultSettings.backgroundColor);
callbacks.onDefaultColorChange (defaultSettings.defaultColor);
});

21
website/o3dv/js/sharingdialog.js
View File

@ -79,19 +79,14 @@ OV.ShowSharingDialog = function (importer, settings, camera)
embeddingCodeParams.camera = checked ? camera : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
if (OV.FeatureSet.ColorSettings) {
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
embeddingCodeParams.backgroundColor = checked ? settings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
} else {
embeddingCodeParams.backgroundColor = null;
embeddingCodeParams.defaultColor = null;
}
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
embeddingCodeParams.backgroundColor = checked ? settings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
}

59
website/o3dv/js/website.js
View File

@ -38,6 +38,7 @@ OV.Website = class
side : THREE.DoubleSide
});
this.detailsPanel = null;
this.settingsPanel = null;
this.model = null;
this.dialog = null;
}
@ -133,6 +134,7 @@ OV.Website = class
this.viewer.AddMeshes (threeMeshes);
this.viewer.SetUpVector (importResult.upVector, false);
this.navigator.FillTree (importResult);
this.settingsPanel.Update (this.model);
this.FitModelToWindow (true);
}
@ -520,10 +522,7 @@ OV.Website = class
}
this.detailsPanel = new OV.DetailsSidebarPanel (this.parameters.sidebarDiv);
let settingsPanel = null;
if (OV.FeatureSet.ColorSettings) {
settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv);
}
this.settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv);
let sidebarPanels = [
{
@ -532,17 +531,15 @@ OV.Website = class
image : 'details',
title : 'Details panel',
button : null
}
];
if (OV.FeatureSet.ColorSettings) {
sidebarPanels.push ({
},
{
panelId : null,
panel : settingsPanel,
panel : this.settingsPanel,
image : 'settings',
title : 'Settings panel',
button : null
});
}
}
];
for (let id = 0; id < sidebarPanels.length; id++) {
let sidebarPanel = sidebarPanels[id];
@ -559,29 +556,27 @@ OV.Website = class
});
}
if (OV.FeatureSet.ColorSettings) {
let defaultSettings = new OV.WebsiteSettings ();
settingsPanel.InitSettings (
this.settings,
defaultSettings,
{
onBackgroundColorChange : (newVal) => {
this.settings.backgroundColor = newVal;
this.settings.SaveToCookies (this.cookieHandler);
this.viewer.SetBackgroundColor (newVal);
},
onDefaultColorChange : (newVal) => {
this.settings.defaultColor = newVal;
this.settings.SaveToCookies (this.cookieHandler);
if (this.modelLoader.defaultMaterial !== null) {
OV.ReplaceDefaultMaterialColor (this.model, newVal);
this.modelLoader.ReplaceDefaultMaterialColor (newVal);
}
this.viewer.Render ();
let defaultSettings = new OV.WebsiteSettings ();
this.settingsPanel.InitSettings (
this.settings,
defaultSettings,
{
onBackgroundColorChange : (newVal) => {
this.settings.backgroundColor = newVal;
this.settings.SaveToCookies (this.cookieHandler);
this.viewer.SetBackgroundColor (newVal);
},
onDefaultColorChange : (newVal) => {
this.settings.defaultColor = newVal;
this.settings.SaveToCookies (this.cookieHandler);
if (this.modelLoader.defaultMaterial !== null) {
OV.ReplaceDefaultMaterialColor (this.model, newVal);
this.modelLoader.ReplaceDefaultMaterialColor (newVal);
}
this.viewer.Render ();
}
);
}
}
);
let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true);
ShowSidebar (this.sidebar, this.cookieHandler, sidebarPanels, show ? sidebarPanels[0].panelId : null);