').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
@@ -317,7 +317,7 @@ OV.Navigator = class
}
});
let model = this.callbacks.getModel ();
- this.sidebar.AddElementProperties (model);
+ this.propertiesPanel.AddElementProperties (model);
} else {
if (this.selection.type === OV.SelectionType.Material) {
let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index);
@@ -331,7 +331,7 @@ OV.Navigator = class
});
let model = this.callbacks.getModel ();
let material = model.GetMaterial (this.selection.index);
- this.sidebar.AddMaterialProperties (material);
+ this.propertiesPanel.AddMaterialProperties (material);
} else if (this.selection.type === OV.SelectionType.Mesh) {
let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index);
this.infoPanel.FillWithModelInfo (usedMaterials, {
@@ -341,7 +341,7 @@ OV.Navigator = class
});
let model = this.callbacks.getModel ();
let mesh = model.GetMesh (this.selection.index);
- this.sidebar.AddElementProperties (mesh);
+ this.propertiesPanel.AddElementProperties (mesh);
}
}
this.Resize ();
diff --git a/website/o3dv/propertysidebarpanel.js b/website/o3dv/propertysidebarpanel.js
new file mode 100644
index 0000000..c27cc62
--- /dev/null
+++ b/website/o3dv/propertysidebarpanel.js
@@ -0,0 +1,156 @@
+OV.PropertySidebarPanel = class extends OV.SidebarPanel
+{
+ constructor (parentDiv)
+ {
+ super (parentDiv);
+ this.titleDiv = null;
+ this.contentDiv = null;
+ }
+
+ AddPropertyGroup (table, propertyGroup)
+ {
+ let row = $('
').addClass ('ov_property_table_row group').appendTo (table);
+ row.html (propertyGroup.name).attr ('title', propertyGroup.name);
+ }
+
+ AddProperty (table, property)
+ {
+ let row = $('
').addClass ('ov_property_table_row').appendTo (table);
+ let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
+ let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
+ nameColum.html (property.name + ':').attr ('title', property.name);
+ this.DisplayPropertyValue (property, valueColumn);
+ return row;
+ }
+
+ AddPropertyInGroup (table, property)
+ {
+ let row = this.AddProperty (table, property);
+ row.addClass ('ingroup');
+ }
+
+ AddCalculatedProperty (table, name, calculateValue)
+ {
+ let row = $('
').addClass ('ov_property_table_row').appendTo (table);
+ let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
+ let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
+ nameColum.html (name + ':').attr ('title', name);
+
+ let obj = this;
+ let calculateButton = $('
').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn);
+ calculateButton.click (function () {
+ valueColumn.empty ();
+ valueColumn.html ('Please wait...');
+ OV.RunTaskAsync (function () {
+ let propertyValue = calculateValue ();
+ if (propertyValue === null) {
+ valueColumn.html ('-');
+ } else {
+ obj.DisplayPropertyValue (propertyValue, valueColumn);
+ }
+ });
+ });
+ }
+
+ DisplayPropertyValue (property, targetDiv)
+ {
+ targetDiv.empty ();
+ let valueText = null;
+ if (property.type === OV.PropertyType.Text) {
+ valueText = property.value;
+ } else if (property.type === OV.PropertyType.Integer) {
+ valueText = property.value.toLocaleString ();
+ } else if (property.type === OV.PropertyType.Number) {
+ valueText = property.value.toLocaleString (undefined, {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2
+ });
+ } else if (property.type === OV.PropertyType.Boolean) {
+ valueText = property.value ? 'Yes' : 'No';
+ } else if (property.type === OV.PropertyType.Percent) {
+ valueText = parseInt (property.value * 100, 10).toString () + '%';
+ } else if (property.type === OV.PropertyType.Color) {
+ let hexString = '#' + OV.ColorToHexString (property.value);
+ let colorCircle = OV.CreateInlineColorCircle (property.value);
+ colorCircle.appendTo (targetDiv);
+ $('').html (hexString).appendTo (targetDiv);
+ }
+ if (valueText !== null) {
+ targetDiv.html (valueText).attr ('title', valueText);
+ }
+ }
+
+ AddElementProperties (element)
+ {
+ this.Clear ();
+ let table = $('
').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 = $('
').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 = $('
').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 ();
+ }
+
+ Resize ()
+ {
+ let titleHeight = this.titleDiv.outerHeight (true);
+ let height = this.parentDiv.height ();
+ this.contentDiv.outerHeight (height - titleHeight, true);
+ }
+
+ Clear ()
+ {
+ this.contentDiv.empty ();
+ }
+};
diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js
index f914dc3..fa4a81b 100644
--- a/website/o3dv/sidebar.js
+++ b/website/o3dv/sidebar.js
@@ -1,26 +1,31 @@
+OV.SidebarPanelId =
+{
+ Properties : 0
+};
+
OV.Sidebar = class
{
constructor (parentDiv)
{
this.parentDiv = parentDiv;
- this.callbacks = null;
this.visible = true;
this.titleDiv = null;
this.contentDiv = null;
+ this.panels = [
+ new OV.PropertySidebarPanel (this.parentDiv)
+ ];
+ }
+ GetPanel (id)
+ {
+ return this.panels[id];
}
Init (callbacks)
{
- this.callbacks = callbacks;
- this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.parentDiv);
- this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.parentDiv);
- let titleTextDiv = $('
').addClass ('ov_sidebar_title_text').html ('Details').appendTo (this.titleDiv);
- let titleImg = $('![]()
').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv);
- let obj = this;
- titleImg.click (function () {
- obj.callbacks.onClose ();
- });
+ for (let i = 0; i < this.panels.length; i++) {
+ this.panels[i].Init ('Details', callbacks);
+ }
}
Show (show)
@@ -38,150 +43,10 @@ OV.Sidebar = class
return this.visible;
}
- AddPropertyGroup (table, propertyGroup)
- {
- let row = $('
').addClass ('ov_property_table_row group').appendTo (table);
- row.html (propertyGroup.name).attr ('title', propertyGroup.name);
- }
-
- AddProperty (table, property)
- {
- let row = $('
').addClass ('ov_property_table_row').appendTo (table);
- let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
- let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
- nameColum.html (property.name + ':').attr ('title', property.name);
- this.DisplayPropertyValue (property, valueColumn);
- return row;
- }
-
- AddPropertyInGroup (table, property)
- {
- let row = this.AddProperty (table, property);
- row.addClass ('ingroup');
- }
-
- AddCalculatedProperty (table, name, calculateValue)
- {
- let row = $('
').addClass ('ov_property_table_row').appendTo (table);
- let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
- let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
- nameColum.html (name + ':').attr ('title', name);
-
- let obj = this;
- let calculateButton = $('
').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn);
- calculateButton.click (function () {
- valueColumn.empty ();
- valueColumn.html ('Please wait...');
- OV.RunTaskAsync (function () {
- let propertyValue = calculateValue ();
- if (propertyValue === null) {
- valueColumn.html ('-');
- } else {
- obj.DisplayPropertyValue (propertyValue, valueColumn);
- }
- });
- });
- }
-
- DisplayPropertyValue (property, targetDiv)
- {
- targetDiv.empty ();
- let valueText = null;
- if (property.type === OV.PropertyType.Text) {
- valueText = property.value;
- } else if (property.type === OV.PropertyType.Integer) {
- valueText = property.value.toLocaleString ();
- } else if (property.type === OV.PropertyType.Number) {
- valueText = property.value.toLocaleString (undefined, {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2
- });
- } else if (property.type === OV.PropertyType.Boolean) {
- valueText = property.value ? 'Yes' : 'No';
- } else if (property.type === OV.PropertyType.Percent) {
- valueText = parseInt (property.value * 100, 10).toString () + '%';
- } else if (property.type === OV.PropertyType.Color) {
- let hexString = '#' + OV.ColorToHexString (property.value);
- let colorCircle = OV.CreateInlineColorCircle (property.value);
- colorCircle.appendTo (targetDiv);
- $('').html (hexString).appendTo (targetDiv);
- }
- if (valueText !== null) {
- targetDiv.html (valueText).attr ('title', valueText);
- }
- }
-
- AddElementProperties (element)
- {
- this.Clear ();
- let table = $('
').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 = $('
').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 = $('
').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 ();
- }
-
Resize ()
{
- let titleHeight = this.titleDiv.outerHeight (true);
- let height = this.parentDiv.height ();
- this.contentDiv.outerHeight (height - titleHeight, true);
- }
-
- Clear ()
- {
- this.contentDiv.empty ();
+ for (let i = 0; i < this.panels.length; i++) {
+ this.panels[i].Resize ();
+ }
}
};
diff --git a/website/o3dv/sidebarpanel.js b/website/o3dv/sidebarpanel.js
new file mode 100644
index 0000000..d3455c8
--- /dev/null
+++ b/website/o3dv/sidebarpanel.js
@@ -0,0 +1,37 @@
+OV.SidebarPanel = class
+{
+ constructor (parentDiv)
+ {
+ this.parentDiv = parentDiv;
+ this.panelDiv = $('
').appendTo (this.parentDiv);
+ this.titleDiv = null;
+ this.contentDiv = null;
+ this.visible = true;
+ }
+
+ Init (title, callbacks)
+ {
+ this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
+ this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
+ let titleTextDiv = $('
').addClass ('ov_sidebar_title_text').html (title).appendTo (this.titleDiv);
+ let titleImg = $('![]()
').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv);
+ titleImg.click (function () {
+ callbacks.onClose ();
+ });
+ }
+
+ Show (show)
+ {
+ this.visible = show;
+ if (this.visible) {
+ this.panelDiv.show ();
+ } else {
+ this.panelDiv.hide ();
+ }
+ }
+
+ IsVisible ()
+ {
+ return this.visible;
+ }
+};
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 1e635b9..b6ef774 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -8,7 +8,7 @@ OV.Website = class
this.cookieHandler = new OV.CookieHandler ();
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
- this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar);
+ this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar.GetPanel (OV.SidebarPanelId.Properties));
this.viewerSettings = new OV.ViewerSettings ();
this.importSettings = new OV.ImportSettings ();
this.modelLoader = new OV.ThreeModelLoader ();