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

Add background color switch to the settings panel.

Browse Source
This commit is contained in:
kovacsv 2021-07-11 09:59:26 +02:00
parent 475d1d00ad
commit 303a2d182c
8 changed files with 115 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
website/o3dv/detailssidebarpanel.js
View File

@ -10,6 +10,68 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
return 'Details';
}
AddElementProperties (element)
{
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
let boundingBox = OV.GetBoundingBox (element);
let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z));
this.AddCalculatedProperty (table, 'Volume', function () {
const volume = OV.CalculateVolume (element);
if (volume === null) {
return null;
}
return new OV.Property (OV.PropertyType.Number, null, volume);
});
this.AddCalculatedProperty (table, 'Surface Area', function () {
const volume = OV.CalculateSurfaceArea (element);
if (volume === null) {
return null;
}
return new OV.Property (OV.PropertyType.Number, null, volume);
});
if (element.PropertyGroupCount () > 0) {
let customTable = $('<div>').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv);
for (let i = 0; i < element.PropertyGroupCount (); i++) {
const propertyGroup = element.GetPropertyGroup (i);
this.AddPropertyGroup (customTable, propertyGroup);
for (let j = 0; j < propertyGroup.PropertyCount (); j++) {
const property = propertyGroup.GetProperty (j);
this.AddPropertyInGroup (customTable, property);
}
}
}
this.Resize ();
}
AddMaterialProperties (material)
{
function AddTextureMap (obj, table, name, map)
{
if (map === null || map.name === null) {
return;
}
let fileName = OV.GetFileName (map.name);
obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName));
}
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse));
this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity));
AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap);
AddTextureMap (this, table, 'Specular Map', material.specularMap);
AddTextureMap (this, table, 'Bump Map', material.bumpMap);
AddTextureMap (this, table, 'Normal Map', material.normalMap);
AddTextureMap (this, table, 'Emissive Map', material.emissiveMap);
this.Resize ();
}
AddPropertyGroup (table, propertyGroup)
{
let row = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
@ -82,66 +144,4 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
targetDiv.html (valueText).attr ('title', valueText);
}
}
AddElementProperties (element)
{
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
let boundingBox = OV.GetBoundingBox (element);
let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y));
this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z));
this.AddCalculatedProperty (table, 'Volume', function () {
const volume = OV.CalculateVolume (element);
if (volume === null) {
return null;
}
return new OV.Property (OV.PropertyType.Number, null, volume);
});
this.AddCalculatedProperty (table, 'Surface Area', function () {
const volume = OV.CalculateSurfaceArea (element);
if (volume === null) {
return null;
}
return new OV.Property (OV.PropertyType.Number, null, volume);
});
if (element.PropertyGroupCount () > 0) {
let customTable = $('<div>').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv);
for (let i = 0; i < element.PropertyGroupCount (); i++) {
const propertyGroup = element.GetPropertyGroup (i);
this.AddPropertyGroup (customTable, propertyGroup);
for (let j = 0; j < propertyGroup.PropertyCount (); j++) {
const property = propertyGroup.GetProperty (j);
this.AddPropertyInGroup (customTable, property);
}
}
}
this.Resize ();
}
AddMaterialProperties (material)
{
function AddTextureMap (obj, table, name, map)
{
if (map === null || map.name === null) {
return;
}
let fileName = OV.GetFileName (map.name);
obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName));
}
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse));
this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity));
AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap);
AddTextureMap (this, table, 'Specular Map', material.specularMap);
AddTextureMap (this, table, 'Bump Map', material.bumpMap);
AddTextureMap (this, table, 'Normal Map', material.normalMap);
AddTextureMap (this, table, 'Emissive Map', material.emissiveMap);
this.Resize ();
}
};

2
website/o3dv/featureset.js
View File

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

26
website/o3dv/settingssidebarpanel.js
View File

@ -10,8 +10,30 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
return 'Settings';
}
InitContent ()
InitSettings (settings)
{
this.contentDiv.html ('Settings Content...');
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
let backgroundColorParams = settings.backgroundColor;
this.AddColorInput (table, backgroundColorParams, function (newVal) {
backgroundColorParams.onChange (newVal);
});
}
AddColorInput (table, params, onChange)
{
let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
nameColum.html (params.name + ':').attr ('title', params.name);
let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_sidebar_color').appendTo (valueColumn);
colorInput.val ('#' + OV.ColorToHexString (params.defaultValue));
colorInput.change (function () {
let colorStr = colorInput.val ().substr (1);
onChange (OV.HexStringToColor (colorStr));
});
}
};

8
website/o3dv/sharingdialog.js
View File

@ -63,13 +63,13 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer
let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
$('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
let optionsSection = null;
if (OV.FeatureSet.SettingsAvailable) {
if (OV.FeatureSet.SettingsPanel) {
optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
}
let sharingLinkInput = AddCopyableTextInput (section, function () {
return GetSharingLink (sharingLinkParams);
});
if (OV.FeatureSet.SettingsAvailable) {
if (OV.FeatureSet.SettingsPanel) {
AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
sharingLinkParams.color = checked ? importSettings.defaultColor : null;
sharingLinkInput.val (GetSharingLink (sharingLinkParams));
@ -91,16 +91,16 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer
embeddingCodeParams.camera = checked ? camera : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
if (OV.FeatureSet.SettingsAvailable) {
if (OV.FeatureSet.SettingsPanel) {
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', function (checked) {
embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.background = viewerSettings.backgroundColor;
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.background = viewerSettings.backgroundColor;
embeddingCodeParams.color = importSettings.defaultColor;
}
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));

7
website/o3dv/sidebar.js
View File

@ -20,13 +20,6 @@ OV.Sidebar = class
return this.panels[id];
}
Init (callbacks)
{
for (let id = 0; id < this.panels.length; id++) {
this.panels[id].Init (callbacks);
}
}
Show (panelId)
{
if (panelId !== null) {

6
website/o3dv/sidebarpanel.js
View File

@ -18,7 +18,6 @@ OV.SidebarPanel = class
titleImg.click (function () {
callbacks.onClose ();
});
this.InitContent ();
}
GetTitle ()
@ -26,11 +25,6 @@ OV.SidebarPanel = class
return '';
}
InitContent ()
{
}
Show (show)
{
this.visible = show;

13
website/o3dv/website.css
View File

@ -289,6 +289,12 @@ div.ov_sidebar_content
overflow: auto;
}
div.ov_sidebar_content input.ov_sidebar_color
{
width: 64px;
height: 18px;
}
div.ov_tree_view
{
user-select: none;
@ -474,13 +480,6 @@ div.ov_dialog div.ov_dialog_select_option.selected
background: #3393bd;
}
div.ov_dialog input.ov_dialog_color
{
width: 36px;
height: 18px;
margin-right: 10px;
}
div.ov_dialog div.ov_dialog_file_list
{
max-height: 105px;

24
website/o3dv/website.js
View File

@ -410,6 +410,7 @@ OV.Website = class
let obj = this;
this.detailsPanel = new OV.DetailsSidebarPanel (this.parameters.sidebarDiv);
let settingsPanel = new OV.SettingsSidebarPanel (this.parameters.sidebarDiv);
let sidebarPanels = [
{
@ -420,11 +421,11 @@ OV.Website = class
button : null
}
];
if (OV.FeatureSet.SettingsAvailable) {
if (OV.FeatureSet.SettingsPanel) {
sidebarPanels.push (
{
panelId : null,
panel : new OV.SettingsSidebarPanel (this.parameters.sidebarDiv),
panel : settingsPanel,
image : 'settings',
title : 'Settings panel',
button : null
@ -439,12 +440,23 @@ OV.Website = class
ToggleSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, sidebarPanel.panelId);
obj.Resize ();
});
sidebarPanel.panel.Init ({
onClose : function () {
ShowSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, null);
obj.Resize ();
}
});
}
this.sidebar.Init ({
onClose : function () {
ShowSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, null);
obj.Resize ();
settingsPanel.InitSettings ({
backgroundColor : {
name : 'Background Color',
defaultValue : this.viewerSettings.backgroundColor,
onChange : function (newVal) {
obj.viewerSettings.backgroundColor = newVal;
obj.viewer.SetBackgroundColor (newVal);
obj.cookieHandler.SetColorVal ('ov_background_color', newVal);
}
}
});