').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
+ }
+
+ dialog.Show ();
+ this.callbacks.onDialog (dialog);
+ }
+};
diff --git a/website/o3dv/hashhandler.js b/website/o3dv/hashhandler.js
index 081f88f..44f5965 100644
--- a/website/o3dv/hashhandler.js
+++ b/website/o3dv/hashhandler.js
@@ -28,12 +28,6 @@ OV.HashHandler = class
this.SetHash ('');
}
- GetCameraFromHash ()
- {
- let parser = OV.CreateUrlParser (this.GetHash ());
- return parser.GetCamera ();
- }
-
GetModelFilesFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
@@ -42,10 +36,22 @@ OV.HashHandler = class
SetModelFilesToHash (files)
{
- let params = OV.CreateUrlParameters (files, null);
+ let params = OV.CreateModelUrlParameters (files);
this.SetHash (params);
}
+ GetCameraFromHash ()
+ {
+ let parser = OV.CreateUrlParser (this.GetHash ());
+ return parser.GetCamera ();
+ }
+
+ GetColorFromHash ()
+ {
+ let parser = OV.CreateUrlParser (this.GetHash ());
+ return parser.GetColor ();
+ }
+
GetHash ()
{
return window.location.hash.substr (1);
diff --git a/website/o3dv/info.js b/website/o3dv/info.js
index b52caaa..b06c25c 100644
--- a/website/o3dv/info.js
+++ b/website/o3dv/info.js
@@ -51,7 +51,7 @@ OV.InfoPanel = class
let infoContainer = $('
').addClass ('ov_info_box').appendTo (contentDiv);
AddRow (infoContainer, 'Color', function (valueDiv) {
- let colorString = '#' + info.diffuse.ToHexString ();
+ let colorString = '#' + OV.ColorToHexString (info.diffuse);
$('
').addClass ('ov_info_box_rgbbox').css ('background', colorString).attr ('title', colorString).appendTo (valueDiv);
$('
').addClass ('ov_info_box_rgbtext').html (colorString).attr ('title', colorString).appendTo (valueDiv);
});
@@ -128,7 +128,7 @@ OV.InfoPanel = class
let materialInfo = getMaterialInfo (info.usedMaterials[i]);
materialItems.push ({
name : OV.GetMaterialName (materialInfo.name),
- color : materialInfo.diffuse.ToHexString ()
+ color : OV.ColorToHexString (materialInfo.diffuse)
});
}
diff --git a/website/o3dv/modal.js b/website/o3dv/modal.js
index f1b53e1..60809f9 100644
--- a/website/o3dv/modal.js
+++ b/website/o3dv/modal.js
@@ -97,3 +97,137 @@ OV.Modal = class
}
}
};
+
+OV.ProgressDialog = class
+{
+ constructor ()
+ {
+ this.modal = new OV.Modal ();
+ this.modal.SetCloseable (false);
+ this.imageDiv = null;
+ this.textDiv = null;
+ }
+
+ SetText (text)
+ {
+ this.textDiv.html (text);
+ }
+
+ Show (text)
+ {
+ let contentDiv = this.modal.GetContentDiv ();
+ contentDiv.addClass ('ov_progress');
+
+ this.imageDiv = $('
![]()
').addClass ('ov_progress_img').attr ('src', 'assets/images/3dviewer_net_logo.svg').appendTo (contentDiv);
+ this.textDiv = $('
').addClass ('ov_progress_text').appendTo (contentDiv);
+
+ this.SetText (text);
+ this.modal.Open ();
+ }
+
+ Hide ()
+ {
+ this.modal.Close ();
+ }
+};
+
+OV.ButtonDialog = class
+{
+ constructor ()
+ {
+ this.modal = new OV.Modal ();
+ }
+
+ Init (title, buttons)
+ {
+ function AddButton (button, buttonsDiv)
+ {
+ let buttonDiv = $('
').addClass ('ov_dialog_button').html (button.name).appendTo (buttonsDiv);
+ if (button.subClass) {
+ buttonDiv.addClass (button.subClass);
+ }
+ buttonDiv.click (function () {
+ button.onClick ();
+ });
+ }
+
+ let contentDiv = this.modal.GetContentDiv ();
+ contentDiv.addClass ('ov_dialog');
+
+ $('
').addClass ('ov_dialog_title').html (title).appendTo (contentDiv);
+ let dialogContentDiv = $('
').addClass ('ov_dialog_content').appendTo (contentDiv);
+ let buttonsDiv = $('
').addClass ('ov_dialog_buttons').appendTo (contentDiv);
+ let buttonsInnerDiv = $('
').addClass ('ov_dialog_buttons_inner').appendTo (buttonsDiv);
+ for (let i = 0; i < buttons.length; i++) {
+ AddButton (buttons[i], buttonsInnerDiv);
+ }
+
+ return dialogContentDiv;
+ }
+
+ SetCloseHandler (closeHandler)
+ {
+ this.modal.SetCloseHandler (closeHandler);
+ }
+
+ Show ()
+ {
+ this.modal.Open ();
+ }
+
+ Hide ()
+ {
+ this.modal.Close ();
+ }
+};
+
+OV.ListPopup = class
+{
+ constructor ()
+ {
+ this.modal = new OV.Modal ();
+ this.listDiv = null;
+ }
+
+ Init ()
+ {
+ let contentDiv = this.modal.GetContentDiv ();
+ contentDiv.addClass ('ov_popup');
+ this.listDiv = $('
').addClass ('ov_popup_list').addClass ('ov_thin_scrollbar').appendTo (contentDiv);
+ }
+
+ SetCustomResizeHandler (customResizeHandler)
+ {
+ this.modal.SetCustomResizeHandler (customResizeHandler);
+ }
+
+ AddListItem (item, callbacks)
+ {
+ let listItemDiv = $('
').addClass ('ov_popup_list_item').appendTo (this.listDiv);
+ if (item.color) {
+ $('
').addClass ('ov_popup_list_item_rgbbox').css ('background', '#' + item.color).appendTo (listItemDiv);
+ }
+ $('
').addClass ('ov_popup_list_item_name').html (item.name).appendTo (listItemDiv);
+ listItemDiv.click (callbacks.onClick);
+ if (OV.IsHoverEnabled () && callbacks.onHoverStart && callbacks.onHoverStop) {
+ listItemDiv.hover (
+ function () {
+ callbacks.onHoverStart ();
+ },
+ function () {
+ callbacks.onHoverStop ();
+ }
+ );
+ }
+ }
+
+ Show ()
+ {
+ this.modal.Open ();
+ }
+
+ Hide ()
+ {
+ this.modal.Close ();
+ }
+};
diff --git a/website/o3dv/utils.js b/website/o3dv/utils.js
index 0e753f2..f886182 100644
--- a/website/o3dv/utils.js
+++ b/website/o3dv/utils.js
@@ -100,6 +100,16 @@ OV.CopyToClipboard = function (text)
document.body.removeChild (input);
};
+OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
+{
+ let link = document.createElement ('a');
+ link.href = OV.CreateObjectUrl (arrayBuffer);
+ link.download = fileName;
+ document.body.appendChild (link);
+ link.click ();
+ document.body.removeChild (link);
+};
+
OV.CreateIconButton = function (iconName, hoverIconName, title, link)
{
let buttonLink = $('
');
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index c6a54fd..30d42fc 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -449,23 +449,34 @@ div.ov_dialog textarea.ov_dialog_textarea
box-sizing: border-box;
}
-div.ov_dialog select.ov_dialog_select
+div.ov_dialog div.ov_dialog_select
{
- background-image: url('../assets/images/dialog/arrow_down.svg');
- background-repeat: no-repeat;
- background-size: 18px 18px;
- background-position: right 10px center;
- font-size: 14px;
- margin: 10px 0px;
- width: 100%;
- padding: 10px;
- border: 1px solid #cccccc;
+ margin: 20px 0px;
+ overflow: auto;
+}
+
+div.ov_dialog div.ov_dialog_select_option
+{
+ color: #3393bd;
+ text-align: center;
+ padding: 3px;
+ margin-right: 5px;
+ border: 1px solid #3393bd;
border-radius: 5px;
- outline: none;
- box-sizing: border-box;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ cursor: pointer;
+ float: left;
+}
+
+div.ov_dialog div.ov_dialog_select_option.selected
+{
+ color: #ffffff;
+ background: #3393bd;
+}
+
+div.ov_dialog input.ov_dialog_color
+{
+ width: 36px;
+ height: 18px;
}
div.ov_dialog div.ov_dialog_file_list
@@ -508,6 +519,28 @@ div.ov_dialog div.ov_dialog_inner_button
cursor: pointer;
}
+div.ov_dialog div.ov_dialog_table_row
+{
+ padding: 2px 0px;
+ overflow: auto;
+}
+
+div.ov_dialog div.ov_dialog_table_row_name
+{
+ width: 120px;
+ float: left;
+}
+
+div.ov_dialog div.ov_dialog_table_row_value
+{
+ float: left;
+}
+
+div.ov_dialog input.ov_dialog_table_radio
+{
+ margin-right: 10px;
+}
+
div.ov_popup
{
background: #ffffff;
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 1984567..d3629ef 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -7,6 +7,7 @@ OV.Website = class
this.hashHandler = new OV.HashHandler ();
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
this.menu = new OV.Menu (this.parameters.menuDiv);
+ this.importSettings = new OV.ImportSettings ();
this.modelLoader = new OV.ThreeModelLoader ();
this.highlightMaterial = new THREE.MeshPhongMaterial ({
color : 0x8ec9f0,
@@ -154,19 +155,24 @@ OV.Website = class
});
}
- LoadModelFromUrlList (urls)
+ LoadModelFromUrlList (urls, settings)
{
- this.modelLoader.LoadFromUrlList (urls);
+ this.modelLoader.LoadFromUrlList (urls, settings);
this.ClearHashIfNotOnlyUrlList ();
}
LoadModelFromFileList (files)
{
- if (files.length === 0) {
+ this.modelLoader.LoadFromFileList (files, this.importSettings);
+ this.ClearHashIfNotOnlyUrlList ();
+ }
+
+ ReloadFiles ()
+ {
+ if (this.model === null) {
return;
}
- this.modelLoader.LoadFromFileList (files);
- this.ClearHashIfNotOnlyUrlList ();
+ this.modelLoader.ReloadFiles (this.importSettings);
}
ClearHashIfNotOnlyUrlList ()
@@ -186,7 +192,13 @@ OV.Website = class
if (urls === null) {
return;
}
- this.LoadModelFromUrlList (urls);
+ let settings = new OV.ImportSettings ();
+ settings.defaultColor = this.importSettings.defaultColor;
+ let color = this.hashHandler.GetColorFromHash ();
+ if (color !== null) {
+ settings.defaultColor = color;
+ }
+ this.LoadModelFromUrlList (urls, settings);
} else {
this.ClearModel ();
this.parameters.introDiv.show ();
@@ -233,6 +245,8 @@ OV.Website = class
}
let obj = this;
+ let importer = this.modelLoader.GetImporter ();
+
AddButton (this.toolbar, 'open', 'Open model from your device', false, function () {
obj.OpenFileBrowserDialog ();
});
@@ -266,14 +280,36 @@ OV.Website = class
});
AddSeparator (this.toolbar, true);
AddButton (this.toolbar, 'export', 'Export model', true, function () {
- obj.dialog = OV.ShowExportDialog (obj.model);
- });
- AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () {
- obj.dialog = OV.ShowEmbeddingDialog (obj.modelLoader.GetImporter (), obj.viewer.GetCamera ());
+ let exportDialog = new OV.ExportDialog ({
+ onDialog : function (dialog) {
+ obj.dialog = dialog;
+ }
+ });
+ exportDialog.Show (obj.model);
});
+ AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () {
+ obj.dialog = OV.ShowEmbeddingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
+ });
+ if (OV.FeatureSet.SetDefaultColor) {
+ AddSeparator (this.toolbar, true);
+ AddButton (this.toolbar, 'settings', 'Settings', true, function () {
+ obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
+ let reload = false;
+ if (!OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor)) {
+ obj.importSettings.defaultColor = dialogSettings.defaultColor;
+ reload = true;
+ }
+ if (reload) {
+ obj.ReloadFiles ();
+ }
+ });
+ });
+ }
this.parameters.fileInput.on ('change', function (ev) {
- obj.LoadModelFromFileList (ev.target.files);
+ if (ev.target.files.length > 0) {
+ obj.LoadModelFromFileList (ev.target.files);
+ }
});
}
@@ -293,7 +329,9 @@ OV.Website = class
window.addEventListener ('drop', function (ev) {
ev.stopPropagation ();
ev.preventDefault ();
- obj.LoadModelFromFileList (ev.dataTransfer.files);
+ if (ev.dataTransfer.files.length > 0) {
+ obj.LoadModelFromFileList (ev.dataTransfer.files);
+ }
}, false);
}