diff --git a/sandbox/embed_selfhost_fullscreen.html b/sandbox/embed_selfhost_fullscreen.html index 9418ba4..5beaf6d 100644 --- a/sandbox/embed_selfhost_fullscreen.html +++ b/sandbox/embed_selfhost_fullscreen.html @@ -27,6 +27,7 @@ + diff --git a/sandbox/embed_selfhost_multiple.html b/sandbox/embed_selfhost_multiple.html index f18425a..2e7f2a9 100644 --- a/sandbox/embed_selfhost_multiple.html +++ b/sandbox/embed_selfhost_multiple.html @@ -28,6 +28,7 @@ + diff --git a/sandbox/embed_selfhost_single.html b/sandbox/embed_selfhost_single.html index e4cbd66..0999b50 100644 --- a/sandbox/embed_selfhost_single.html +++ b/sandbox/embed_selfhost_single.html @@ -27,6 +27,7 @@ + diff --git a/sandbox/embed_selfhost_single_scroll.html b/sandbox/embed_selfhost_single_scroll.html index 0851ef8..a4fd81d 100644 --- a/sandbox/embed_selfhost_single_scroll.html +++ b/sandbox/embed_selfhost_single_scroll.html @@ -27,6 +27,7 @@ + diff --git a/source/model/property.js b/source/model/property.js new file mode 100644 index 0000000..f99d72e --- /dev/null +++ b/source/model/property.js @@ -0,0 +1,18 @@ +OV.PropertyType = +{ + Text : 1, + Integer : 2, + Number : 3, + Percent : 4, + Color : 5 +}; + +OV.Property = class +{ + constructor (type, name, value) + { + this.type = type; + this.name = name; + this.value = value; + } +}; diff --git a/tools/config.json b/tools/config.json index 12281b8..b01f2a3 100644 --- a/tools/config.json +++ b/tools/config.json @@ -22,6 +22,7 @@ "source/io/fileutils.js", "source/model/material.js", "source/model/triangle.js", + "source/model/property.js", "source/model/element.js", "source/model/mesh.js", "source/model/meshbuffer.js", diff --git a/website/embed.html b/website/embed.html index f4de938..d95ba50 100644 --- a/website/embed.html +++ b/website/embed.html @@ -35,6 +35,7 @@ + diff --git a/website/index.html b/website/index.html index a1a99c3..e1f8c1d 100644 --- a/website/index.html +++ b/website/index.html @@ -35,6 +35,7 @@ + diff --git a/website/o3dv/navigator.js b/website/o3dv/navigator.js index 0dfe105..ada8894 100644 --- a/website/o3dv/navigator.js +++ b/website/o3dv/navigator.js @@ -311,16 +311,16 @@ OV.Navigator = class let obj = this; if (this.selection === null) { let usedMaterials = this.callbacks.getMaterialsForModel (); - this.sidebar.AddProperties (null); this.infoPanel.FillWithModelInfo (usedMaterials, { onMaterialSelect : function (materialIndex) { obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex)); } }); + let model = this.callbacks.getModel (); + this.sidebar.AddElementProperties (model); } else { if (this.selection.type === OV.SelectionType.Material) { let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index); - this.sidebar.AddProperties (null); this.infoPanel.FillWithMaterialInfo (usedByMeshes, { onMeshHover : function (meshIndex) { obj.SetTempSelectedMeshIndex (meshIndex); @@ -329,14 +329,19 @@ OV.Navigator = class obj.SetSelection (new OV.Selection (OV.SelectionType.Mesh, meshIndex)); } }); + let model = this.callbacks.getModel (); + let material = model.GetMaterial (this.selection.index); + this.sidebar.AddMaterialProperties (material); } else if (this.selection.type === OV.SelectionType.Mesh) { let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index); - this.sidebar.AddProperties (null); this.infoPanel.FillWithModelInfo (usedMaterials, { onMaterialSelect : function (materialIndex) { obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex)); } }); + let model = this.callbacks.getModel (); + let mesh = model.GetMesh (this.selection.index); + this.sidebar.AddElementProperties (mesh); } } this.Resize (); diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js index 68d7f1d..e81942d 100644 --- a/website/o3dv/sidebar.js +++ b/website/o3dv/sidebar.js @@ -1,8 +1,3 @@ -OV.PropertyType = -{ - Text : 1 -}; - OV.Sidebar = class { constructor (parentDiv) @@ -45,37 +40,51 @@ OV.Sidebar = class AddProperties (properties) { - function AddProperty (table, name, value) + 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 (name).attr ('title', name); - valueColumn.html (value).attr ('title', value); + nameColum.html (property.name).attr ('title', property.name); + let valueText = null; + if (property.type === OV.PropertyType.Integer) { + valueText = property.value.toLocaleString (); + } else if (property.type === OV.PropertyType.Percent) { + valueText = parseInt (property.value * 100, 10).toString () + '%'; + } else if (property.type === OV.PropertyType.Color) { + valueText = '#' + OV.ColorToHexString (property.value); + } + if (valueText !== null) { + valueColumn.html (valueText).attr ('title', valueText); + } } this.Clear (); let table = $('').addClass ('ov_property_table').appendTo (this.contentDiv); - AddProperty (table, 'Vertex Count', '1245'); - AddProperty (table, 'Triangle Count', '23466'); - AddProperty (table, 'Size', '12.0 x 14.0 x 6.0'); - AddProperty (table, 'Volume', '23423'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Emission Texture', 'Very very long property value'); - AddProperty (table, 'Very very long property name', 'Very very long property value'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); - AddProperty (table, 'Surface Area', '45463'); + for (let i = 0; i < properties.length; i++) { + let property = properties[i]; + AddProperty (table, property); + } + this.Resize (); } + 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.AddProperties (properties); + } + + AddMaterialProperties (material) + { + let properties = []; + properties.push (new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); + properties.push (new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); + this.AddProperties (properties); + } + Resize () { let titleHeight = this.titleDiv.outerHeight (true); diff --git a/website/o3dv/website.css b/website/o3dv/website.css index 0f33e5c..96e8b39 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -651,6 +651,7 @@ div.ov_progress div.ov_progress_text table.ov_property_table { + width: 100%; border-collapse: collapse; } diff --git a/website/o3dv/website.js b/website/o3dv/website.js index 2c8de60..7f61d28 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -477,6 +477,9 @@ OV.Website = class }, getMaterialsForModel : function () { return GetMaterialsForModel (obj.model); + }, + getModel : function () { + return obj.model; } }); }