From b18850267c3a15c0635004e7dce9ed070e6b0911 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sun, 20 Jun 2021 16:07:16 +0200 Subject: [PATCH] Calculate Volume and Surface Area #72 --- website/o3dv/sidebar.js | 148 +++++++++++++++++++++++++-------------- website/o3dv/website.css | 6 ++ 2 files changed, 100 insertions(+), 54 deletions(-) diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js index edfc4a5..4c1df2b 100644 --- a/website/o3dv/sidebar.js +++ b/website/o3dv/sidebar.js @@ -38,80 +38,120 @@ OV.Sidebar = class return this.visible; } - AddProperties (properties) + CreatePropertyTable () { - function AddProperty (table, property) - { - let row = $('').appendTo (table); - let nameColum = $('').addClass ('ov_property_table_name').appendTo (row); - let valueColumn = $('').addClass ('ov_property_table_value').appendTo (row); - nameColum.html (property.name + ':').attr ('title', property.name); - 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.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 (valueColumn); - $('').html (hexString).appendTo (valueColumn); - } - if (valueText !== null) { - valueColumn.html (valueText).attr ('title', valueText); - } - } - this.Clear (); let table = $('').addClass ('ov_property_table').appendTo (this.contentDiv); - for (let i = 0; i < properties.length; i++) { - let property = properties[i]; - AddProperty (table, property); - } - - this.Resize (); + return table; } + AddProperty (table, property) + { + let row = $('').appendTo (table); + let nameColum = $('').appendTo (table); + let nameColum = $('
').addClass ('ov_property_table_name').appendTo (row); + let valueColumn = $('').addClass ('ov_property_table_value').appendTo (row); + nameColum.html (property.name + ':').attr ('title', property.name); + this.DisplayPropertyValue (property, valueColumn); + } + + AddCalculatedProperty (table, name, calculateValue) + { + let row = $('
').addClass ('ov_property_table_name').appendTo (row); + let valueColumn = $('').addClass ('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.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) { - let properties = []; - properties.push (new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ())); - properties.push (new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ())); + this.Clear (); + let table = this.CreatePropertyTable (); let boundingBox = OV.GetBoundingBox (element); let size = OV.SubCoord3D (boundingBox.max, boundingBox.min); - properties.push (new OV.Property (OV.PropertyType.Number, 'Size X', size.x)); - properties.push (new OV.Property (OV.PropertyType.Number, 'Size Y', size.y)); - properties.push (new OV.Property (OV.PropertyType.Number, 'Size Z', size.z)); - this.AddProperties (properties); + 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); + }); + this.Resize (); } AddMaterialProperties (material) { - function AddTextureMap (properties, name, map) + function AddTextureMap (obj, table, name, map) { if (map === null || map.name === null) { return; } let fileName = OV.GetFileName (map.name); - properties.push (new OV.Property (OV.PropertyType.Text, name, fileName)); + obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName)); } - let properties = []; - properties.push (new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); - properties.push (new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); - AddTextureMap (properties, 'Diffuse Map', material.diffuseMap); - AddTextureMap (properties, 'Specular Map', material.specularMap); - AddTextureMap (properties, 'Bump Map', material.bumpMap); - AddTextureMap (properties, 'Normal Map', material.normalMap); - AddTextureMap (properties, 'Emissive Map', material.emissiveMap); - this.AddProperties (properties); + this.Clear (); + let table = this.CreatePropertyTable (); + 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 () diff --git a/website/o3dv/website.css b/website/o3dv/website.css index b66d322..204759c 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -684,6 +684,12 @@ table.ov_property_table td.ov_property_table_value text-align: right; } +table.ov_property_table div.ov_property_table_button +{ + color: #3393bd; + cursor: pointer; +} + div.ov_thin_scrollbar { scrollbar-color: #cccccc transparent;