Add experimental dialog for quantities.

tools/config.json

@@ -60,7 +60,11 @@
 		"website/o3dv/treeview.js",
 		"website/o3dv/modal.js",
 		"website/o3dv/dialogs.js",
+		"website/o3dv/openurldialog.js",
 		"website/o3dv/exportdialog.js",
+		"website/o3dv/sharingdialog.js",
+		"website/o3dv/settingsdialog.js",
+		"website/o3dv/quantitiesdialog.js",
 		"website/o3dv/modeldata.js",
 		"website/o3dv/info.js",
 		"website/o3dv/menu.js",

website/embed.html

@@ -74,7 +74,11 @@
 	<script type="text/javascript" src="o3dv/treeview.js"></script>
 	<script type="text/javascript" src="o3dv/modal.js"></script>
 	<script type="text/javascript" src="o3dv/dialogs.js"></script>
+	<script type="text/javascript" src="o3dv/openurldialog.js"></script>
 	<script type="text/javascript" src="o3dv/exportdialog.js"></script>
+	<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
+	<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
+	<script type="text/javascript" src="o3dv/quantitiesdialog.js"></script>
 	<script type="text/javascript" src="o3dv/modeldata.js"></script>
 	<script type="text/javascript" src="o3dv/info.js"></script>
 	<script type="text/javascript" src="o3dv/menu.js"></script>

website/index.html

@@ -74,7 +74,11 @@
 	<script type="text/javascript" src="o3dv/treeview.js"></script>
 	<script type="text/javascript" src="o3dv/modal.js"></script>
 	<script type="text/javascript" src="o3dv/dialogs.js"></script>
+	<script type="text/javascript" src="o3dv/openurldialog.js"></script>
 	<script type="text/javascript" src="o3dv/exportdialog.js"></script>
+	<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
+	<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
+	<script type="text/javascript" src="o3dv/quantitiesdialog.js"></script>
 	<script type="text/javascript" src="o3dv/modeldata.js"></script>
 	<script type="text/javascript" src="o3dv/info.js"></script>
 	<script type="text/javascript" src="o3dv/menu.js"></script>

website/info/index.html

@@ -35,6 +35,7 @@
 					<li><a href="#loading_models_server">Loading models hosted on a web server</a></li>
 					<li><a href="#loading_models_missing_files">Missing files</a></li>
 				</ol>
+				<li><a href="#sharing_link">Generate sharing link</a></li>
 				<li><a href="#embedding_viewer">Embedding the viewer</a></li>
 				<ol>
 					<li><a href="#embed_github">Embedding models hosted on GitHub</a></li>
@@ -177,6 +178,12 @@
 			files, or just import the missing files on their own.
 		</p>
 
+		<h2 id="sharing_link">Generate sharing link</h2>
+		<p>
+			You can generate sharing link to make it easy to share your models. It works only if your models are <a href="#loading_models_server">hosted on a web server</a>.
+			To get the sharing link, click on the share model button (<img class="inline" src="../assets/images/toolbar/share.svg"/>) in the toolbar.
+		</p>
+
 		<h2 id="embedding_viewer">Embedding the viewer</h2>
 		<p>
 			The website allows you to embed a 3D model in your page. It works only if your models are <a href="#loading_models_server">hosted on a web server</a>.

website/o3dv/dialogs.js

@@ -1,6 +1,7 @@
 OV.FeatureSet =
 {
-    SetDefaultColor : false
+    SetDefaultColor : false,
+    ModelQuantities : false
 };
 
 OV.ShowMessageDialog = function (title, message, subMessage)
@@ -22,244 +23,6 @@ OV.ShowMessageDialog = function (title, message, subMessage)
     return dialog;
 };
 
-OV.ShowOpenUrlDialog = function (onOk)
-{
-    function CorrectFileHostUrls (urls)
-    {
-        for (let i = 0; i < urls.length; i++) {
-            let url = urls[i];
-            if (url.search (/www\.dropbox\.com/u) !== -1) {
-                url = url.replace ('www.dropbox.com', 'dl.dropbox.com');
-                let separatorPos = url.indexOf ('?');
-                if (separatorPos !== -1) {
-                    url = url.substr (0, separatorPos);
-                }
-                urls[i] = url;
-            } else if (url.search (/github\.com/u) !== -1) {
-                url = url.replace ('github.com', 'raw.githubusercontent.com');
-                url = url.replace ('/blob', '');
-                let separatorPos = url.indexOf ('?');
-                if (separatorPos !== -1) {
-                    url = url.substr (0, separatorPos);
-                }
-                urls[i] = url;
-            }
-        }
-    }
-
-    let dialog = new OV.ButtonDialog ();
-    let urlsTextArea = $('<textarea>').addClass ('ov_dialog_textarea');
-    let contentDiv = dialog.Init ('Open Model from Url', [
-        {
-            name : 'Cancel',
-            subClass : 'outline',
-            onClick () {
-                dialog.Hide ();
-            }
-        },
-        {
-            name : 'OK',
-            onClick () {
-                let urls = [];
-                OV.ReadLines (urlsTextArea.val (), function (line) {
-                    urls.push (line);
-                });
-                dialog.Hide ();
-                CorrectFileHostUrls (urls);
-                onOk (urls);
-            }
-        }
-    ]);
-    let text = 'Here you can load models based on their urls. You can add more lines if your model builds up from multiple files.';
-    $('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
-    urlsTextArea.appendTo (contentDiv);
-    dialog.Show ();
-    urlsTextArea.focus ();
-    return dialog;
-};
-
-OV.ShowSharingDialog = function (importer, importSettings, camera)
-{
-    function AddCheckboxLine (parentDiv, text, id, onChange)
-    {
-        let line = $('<div>').addClass ('ov_dialog_table_row').appendTo (parentDiv);
-        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line);
-        $('<label>').attr ('for', id).html (text).appendTo (line);
-        check.change (function () {
-            onChange (check.prop ('checked'));
-        });
-    }
-
-    function GetSharingLink (params)
-    {
-        let builder = OV.CreateUrlBuilder ();
-        builder.AddModelUrls (params.files);
-        builder.AddColor (params.color);
-        let hashParameters = builder.GetParameterList ();
-        return 'https://3dviewer.net#' + hashParameters;
-    }
-
-    function GetEmbeddingCode (params)
-    {
-        let builder = OV.CreateUrlBuilder ();
-        builder.AddModelUrls (params.files);
-        builder.AddCamera (params.camera);
-        builder.AddColor (params.color);
-        let hashParameters = builder.GetParameterList ();
-
-        let embeddingCode = '';
-        embeddingCode += '<iframe';
-        embeddingCode += ' width="640" height="480"';
-        embeddingCode += ' style="border:1px solid #eeeeee;"';
-        embeddingCode += ' src="https://3dviewer.net/embed.html#' + hashParameters + '">';
-        embeddingCode += '</iframe>';
-        return embeddingCode;
-    }
-
-    function AddCopyableTextInput (parentDiv, getText)
-    {
-        let copyText = 'copy';
-        let copiedText = 'copied';
-        let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
-        let input = $('<input>').prop ('readonly', true).appendTo (container);
-        let button = $('<div>').addClass ('button').html (copyText).appendTo (container);
-        button.click (function () {
-            OV.CopyToClipboard (getText ());
-            button.fadeOut (200, function () {
-                button.html (copiedText).fadeIn (200);
-                setTimeout (function () {
-                    button.fadeOut (200, function () {
-                        button.html (copyText).fadeIn (200);
-                    });
-                }, 2000);
-            });
-        });
-        return input;
-    }
-
-    function AddSharingLinkTab (parentDiv, sharingLinkParams)
-    {
-        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.SetDefaultColor) {
-            optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
-        }
-        let sharingLinkInput = AddCopyableTextInput (section, function () {
-            return GetSharingLink (sharingLinkParams);
-        });
-        if (OV.FeatureSet.SetDefaultColor) {
-            AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
-                sharingLinkParams.color = checked ? importSettings.defaultColor : null;
-                sharingLinkInput.val (GetSharingLink (sharingLinkParams));
-            });
-            sharingLinkParams.color = importSettings.defaultColor;
-        }        
-        sharingLinkInput.val (GetSharingLink (sharingLinkParams));
-    }
-
-    function AddEmbeddingCodeTab (parentDiv, embeddingCodeParams)
-    {
-        let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
-        $('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
-        let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
-        let embeddingCodeInput = AddCopyableTextInput (section, function () {
-            return GetEmbeddingCode (embeddingCodeParams);
-        });
-        AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', function (checked) {
-            embeddingCodeParams.camera = checked ? camera : null;
-            embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-        });
-        if (OV.FeatureSet.SetDefaultColor) {
-            AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
-                embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
-                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-            });
-            embeddingCodeParams.color = importSettings.defaultColor;
-        }
-        embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-    }
-
-    if (!importer.IsOnlyFileSource (OV.FileSource.Url)) {
-        return OV.ShowMessageDialog (
-            'Embedding Failed',
-            'Embedding works only if you load files by url. Please upload your model files to a web server, open them by url, and try embedding again.',
-            null
-        );
-    }
-    
-    let files = importer.GetFileList ().GetFiles ();
-    let modelFiles = [];
-    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
-        let file = files[fileIndex];
-        modelFiles.push (file.fileUrl);
-    }
-
-    let sharingLinkParams = {
-        files : modelFiles,
-        color : null
-    };
-
-    let embeddingCodeParams = {
-        files : modelFiles,
-        camera : camera,
-        color : null
-    };
-
-    let dialog = new OV.ButtonDialog ();
-    let contentDiv = dialog.Init ('Share', [
-        {
-            name : 'Close',
-            onClick () {
-                dialog.Hide ();
-            }
-        }
-    ]);
-
-    AddSharingLinkTab (contentDiv, sharingLinkParams);
-    AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
-
-    dialog.Show ();
-    return dialog;
-};
-
-OV.ShowSettingsDialog = function (importSettings, onOk)
-{
-    let dialogSettings = {
-        defaultColor : importSettings.defaultColor
-    };
-    let dialog = new OV.ButtonDialog ();
-    let contentDiv = dialog.Init ('Settings', [
-        {
-            name : 'Cancel',
-            subClass : 'outline',
-            onClick () {
-                dialog.Hide ();
-            }
-        },
-        {
-            name : 'OK',
-            onClick () {
-                dialog.Hide ();                
-                onOk (dialogSettings);
-            }
-        }
-    ]);
-    
-    let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
-    $('<div>').html ('Default Color').addClass ('ov_dialog_table_row_name').appendTo (colorRow);
-    let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
-    let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
-    $('<span>').addClass ('ov_dialog_table_row_comment').html ('(For surfaces with no material)').appendTo (valueColumn);
-    colorInput.val ('#' + OV.ColorToHexString (dialogSettings.defaultColor));
-    colorInput.change (function () {
-        let colorStr = colorInput.val ().substr (1);
-        dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
-    });
-    dialog.Show ();
-    return dialog;
-};
-
 OV.ShowListPopup = function (button, items, callbacks)
 {
     let popup = new OV.ListPopup ();

website/o3dv/openurldialog.js

@@ -0,0 +1,56 @@
+
+OV.ShowOpenUrlDialog = function (onOk)
+{
+    function CorrectFileHostUrls (urls)
+    {
+        for (let i = 0; i < urls.length; i++) {
+            let url = urls[i];
+            if (url.search (/www\.dropbox\.com/u) !== -1) {
+                url = url.replace ('www.dropbox.com', 'dl.dropbox.com');
+                let separatorPos = url.indexOf ('?');
+                if (separatorPos !== -1) {
+                    url = url.substr (0, separatorPos);
+                }
+                urls[i] = url;
+            } else if (url.search (/github\.com/u) !== -1) {
+                url = url.replace ('github.com', 'raw.githubusercontent.com');
+                url = url.replace ('/blob', '');
+                let separatorPos = url.indexOf ('?');
+                if (separatorPos !== -1) {
+                    url = url.substr (0, separatorPos);
+                }
+                urls[i] = url;
+            }
+        }
+    }
+
+    let dialog = new OV.ButtonDialog ();
+    let urlsTextArea = $('<textarea>').addClass ('ov_dialog_textarea');
+    let contentDiv = dialog.Init ('Open Model from Url', [
+        {
+            name : 'Cancel',
+            subClass : 'outline',
+            onClick () {
+                dialog.Hide ();
+            }
+        },
+        {
+            name : 'OK',
+            onClick () {
+                let urls = [];
+                OV.ReadLines (urlsTextArea.val (), function (line) {
+                    urls.push (line);
+                });
+                dialog.Hide ();
+                CorrectFileHostUrls (urls);
+                onOk (urls);
+            }
+        }
+    ]);
+    let text = 'Here you can load models based on their urls. You can add more lines if your model builds up from multiple files.';
+    $('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
+    urlsTextArea.appendTo (contentDiv);
+    dialog.Show ();
+    urlsTextArea.focus ();
+    return dialog;
+};

website/o3dv/quantitiesdialog.js

@@ -0,0 +1,43 @@
+OV.ShowQuantitiesDialog = function (model)
+{
+    if (model === null) {
+        return OV.ShowMessageDialog (
+            'Quantity Calculation Failed',
+            'Please load a model before calculating quantities.',
+            null
+        );
+    }
+
+    let dialog = new OV.ButtonDialog ();
+    let contentDiv = dialog.Init ('Quantities', [
+        {
+            name : 'OK',
+            onClick () {
+                dialog.Hide ();
+            }
+        }
+    ]);
+
+    let progressDialog = new OV.ProgressDialog ();
+    progressDialog.Show ('Calculating Quantities');
+    OV.RunTaskAsync (function () {
+        progressDialog.Hide ();
+
+        const volume = OV.CalculateModelVolume (model);
+        const surfaceArea = OV.CalculateModelSurfaceArea (model);
+        
+        let volumeString = '';
+        if (volume === null) {
+            volumeString = 'Model is not closed';
+        } else {
+            volumeString = volume.toFixed (5);
+        }
+        const surfaceAreaString = surfaceArea.toFixed (5);
+        $('<div>').html ('Volume: ' + volumeString).appendTo (contentDiv);
+        $('<div>').html ('Surface Area: ' + surfaceAreaString).appendTo (contentDiv);
+
+        dialog.Show ();
+    
+    });
+    return dialog;
+};

website/o3dv/settingsdialog.js

@@ -0,0 +1,36 @@
+OV.ShowSettingsDialog = function (importSettings, onOk)
+{
+    let dialogSettings = {
+        defaultColor : importSettings.defaultColor
+    };
+    let dialog = new OV.ButtonDialog ();
+    let contentDiv = dialog.Init ('Settings', [
+        {
+            name : 'Cancel',
+            subClass : 'outline',
+            onClick () {
+                dialog.Hide ();
+            }
+        },
+        {
+            name : 'OK',
+            onClick () {
+                dialog.Hide ();                
+                onOk (dialogSettings);
+            }
+        }
+    ]);
+    
+    let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
+    $('<div>').html ('Default Color').addClass ('ov_dialog_table_row_name').appendTo (colorRow);
+    let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
+    let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
+    $('<span>').addClass ('ov_dialog_table_row_comment').html ('(For surfaces with no material)').appendTo (valueColumn);
+    colorInput.val ('#' + OV.ColorToHexString (dialogSettings.defaultColor));
+    colorInput.change (function () {
+        let colorStr = colorInput.val ().substr (1);
+        dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
+    });
+    dialog.Show ();
+    return dialog;
+};

website/o3dv/sharingdialog.js

@@ -0,0 +1,145 @@
+
+OV.ShowSharingDialog = function (importer, importSettings, camera)
+{
+    function AddCheckboxLine (parentDiv, text, id, onChange)
+    {
+        let line = $('<div>').addClass ('ov_dialog_table_row').appendTo (parentDiv);
+        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line);
+        $('<label>').attr ('for', id).html (text).appendTo (line);
+        check.change (function () {
+            onChange (check.prop ('checked'));
+        });
+    }
+
+    function GetSharingLink (params)
+    {
+        let builder = OV.CreateUrlBuilder ();
+        builder.AddModelUrls (params.files);
+        builder.AddColor (params.color);
+        let hashParameters = builder.GetParameterList ();
+        return 'https://3dviewer.net#' + hashParameters;
+    }
+
+    function GetEmbeddingCode (params)
+    {
+        let builder = OV.CreateUrlBuilder ();
+        builder.AddModelUrls (params.files);
+        builder.AddCamera (params.camera);
+        builder.AddColor (params.color);
+        let hashParameters = builder.GetParameterList ();
+
+        let embeddingCode = '';
+        embeddingCode += '<iframe';
+        embeddingCode += ' width="640" height="480"';
+        embeddingCode += ' style="border:1px solid #eeeeee;"';
+        embeddingCode += ' src="https://3dviewer.net/embed.html#' + hashParameters + '">';
+        embeddingCode += '</iframe>';
+        return embeddingCode;
+    }
+
+    function AddCopyableTextInput (parentDiv, getText)
+    {
+        let copyText = 'copy';
+        let copiedText = 'copied';
+        let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
+        let input = $('<input>').prop ('readonly', true).appendTo (container);
+        let button = $('<div>').addClass ('button').html (copyText).appendTo (container);
+        button.click (function () {
+            OV.CopyToClipboard (getText ());
+            button.fadeOut (200, function () {
+                button.html (copiedText).fadeIn (200);
+                setTimeout (function () {
+                    button.fadeOut (200, function () {
+                        button.html (copyText).fadeIn (200);
+                    });
+                }, 2000);
+            });
+        });
+        return input;
+    }
+
+    function AddSharingLinkTab (parentDiv, sharingLinkParams)
+    {
+        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.SetDefaultColor) {
+            optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
+        }
+        let sharingLinkInput = AddCopyableTextInput (section, function () {
+            return GetSharingLink (sharingLinkParams);
+        });
+        if (OV.FeatureSet.SetDefaultColor) {
+            AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
+                sharingLinkParams.color = checked ? importSettings.defaultColor : null;
+                sharingLinkInput.val (GetSharingLink (sharingLinkParams));
+            });
+            sharingLinkParams.color = importSettings.defaultColor;
+        }        
+        sharingLinkInput.val (GetSharingLink (sharingLinkParams));
+    }
+
+    function AddEmbeddingCodeTab (parentDiv, embeddingCodeParams)
+    {
+        let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
+        $('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
+        let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
+        let embeddingCodeInput = AddCopyableTextInput (section, function () {
+            return GetEmbeddingCode (embeddingCodeParams);
+        });
+        AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', function (checked) {
+            embeddingCodeParams.camera = checked ? camera : null;
+            embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+        });
+        if (OV.FeatureSet.SetDefaultColor) {
+            AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
+                embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
+                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+            });
+            embeddingCodeParams.color = importSettings.defaultColor;
+        }
+        embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+    }
+
+    if (!importer.IsOnlyFileSource (OV.FileSource.Url)) {
+        return OV.ShowMessageDialog (
+            'Sharing Failed',
+            'Sharing works only if you load files by url. Please upload your model files to a web server, open them by url, and try embedding again.',
+            null
+        );
+    }
+    
+    let files = importer.GetFileList ().GetFiles ();
+    let modelFiles = [];
+    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
+        let file = files[fileIndex];
+        modelFiles.push (file.fileUrl);
+    }
+
+    let sharingLinkParams = {
+        files : modelFiles,
+        color : null
+    };
+
+    let embeddingCodeParams = {
+        files : modelFiles,
+        camera : camera,
+        color : null
+    };
+
+    let dialog = new OV.ButtonDialog ();
+    let contentDiv = dialog.Init ('Share', [
+        {
+            name : 'Close',
+            onClick () {
+                dialog.Hide ();
+            }
+        }
+    ]);
+
+    AddSharingLinkTab (contentDiv, sharingLinkParams);
+    AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
+
+    dialog.Show ();
+    return dialog;
+};

website/o3dv/website.js

@@ -305,6 +305,12 @@ OV.Website = class
                 });
             });
         }
+        if (OV.FeatureSet.ModelQuantities) {
+            AddSeparator (this.toolbar, true);
+            AddButton (this.toolbar, 'settings', 'Model Quantities', true, function () {
+                obj.dialog = OV.ShowQuantitiesDialog (obj.model);
+            });
+        }
 
         this.parameters.fileInput.on ('change', function (ev) {
             if (ev.target.files.length > 0) {