').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv);
- let titleImg = OV.CreateSvgIcon (this.titleDiv, 'assets/images/sidebar/close.svg', 'ov_sidebar_title_img');
+ let titleImg = OV.CreateSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img');
titleImg.click (() => {
callbacks.onClose ();
});
diff --git a/website/o3dv/js/toolbar.js b/website/o3dv/js/toolbar.js
index 34c46b8..07d0e9e 100644
--- a/website/o3dv/js/toolbar.js
+++ b/website/o3dv/js/toolbar.js
@@ -13,8 +13,7 @@ OV.ToolbarButton = class
CreateDomElement (parentDiv)
{
this.buttonDiv = $('
').addClass ('ov_toolbar_button').appendTo (parentDiv);
- this.buttonImg = OV.CreateSvgIcon (this.buttonDiv);
- this.buttonImg.attr ('src', this.image);
+ this.buttonImg = OV.CreateSvgIcon (this.buttonDiv, this.image);
if (this.onClick !== null) {
this.buttonDiv.click (this.onClick);
}
@@ -27,6 +26,21 @@ OV.ToolbarButton = class
this.buttonDiv.addClass (className);
}
+ RemoveClass (className)
+ {
+ this.buttonDiv.removeClass (className);
+ }
+
+ AddImageClass (className)
+ {
+ this.buttonImg.addClass (className);
+ }
+
+ RemoveImageClass (className)
+ {
+ this.buttonImg.removeClass (className);
+ }
+
SetSelected (selected)
{
this.selected = selected;
@@ -36,12 +50,6 @@ OV.ToolbarButton = class
this.buttonDiv.addClass ('selected');
}
}
-
- SetImage (image)
- {
- this.image = image;
- this.buttonImg.attr ('src', this.image);
- }
};
OV.Toolbar = class
diff --git a/website/o3dv/js/treeview.js b/website/o3dv/js/treeview.js
index 6247f13..3a5004a 100644
--- a/website/o3dv/js/treeview.js
+++ b/website/o3dv/js/treeview.js
@@ -18,7 +18,7 @@ OV.TreeViewButton = class
SetImage (imagePath)
{
this.imagePath = imagePath;
- this.domElement.attr ('src', this.imagePath);
+ OV.SetSvgIconImage (this.domElement, this.imagePath);
}
OnClick (clickHandler)
@@ -147,8 +147,8 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
this.childrenDiv = null;
this.showChildren = false;
this.openCloseButton = null;
- this.openButtonPath = 'assets/images/navigator/arrow_down.svg';
- this.closeButtonPath = 'assets/images/navigator/arrow_up.svg';
+ this.openButtonIcon = 'arrow_down';
+ this.closeButtonIcon = 'arrow_up';
this.animated = true;
this.openCloseHandler = null;
}
@@ -180,7 +180,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
return;
}
if (show) {
- this.openCloseButton.attr ('src', this.openButtonPath);
+ OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon);
if (this.animated) {
this.childrenDiv.slideDown (400, onComplete);
} else {
@@ -190,7 +190,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
}
}
} else {
- this.openCloseButton.attr ('src', this.closeButtonPath);
+ OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon);
if (this.animated) {
this.childrenDiv.slideUp (400, onComplete);
} else {
@@ -236,7 +236,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
this.CreateMainElement (parentDiv);
OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon');
let buttonContainer = $('
').addClass ('ov_tree_item_button_container').appendTo (this.mainElement);
- this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonPath, 'ov_tree_item_button');
+ this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button');
this.CreateNameElement ();
}
};
diff --git a/website/o3dv/js/utils.js b/website/o3dv/js/utils.js
index b70c840..14cdf06 100644
--- a/website/o3dv/js/utils.js
+++ b/website/o3dv/js/utils.js
@@ -116,36 +116,30 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
OV.DownloadUrlAsFile (url, fileName);
};
-OV.CreateSvgIcon = function (parent, sourceImage, extraClass)
+OV.CreateSvgIcon = function (parent, iconName, extraClass)
{
- let img = $('
![]()
').addClass ('ov_svg_icon').appendTo (parent);
- if (sourceImage !== undefined && sourceImage !== null) {
- img.attr ('src', sourceImage);
- }
+ let div = $('
').addClass ('ov_svg_icon').appendTo (parent);
+ $('
').addClass ('icon').addClass ('icon-' + iconName).appendTo (div);
if (extraClass !== undefined && extraClass !== null) {
- img.addClass (extraClass);
+ div.addClass (extraClass);
}
- return img;
+ return div;
};
-OV.CreateHeaderButton = function (iconName, hoverIconName, title, link)
+OV.SetSvgIconImage = function (icon, iconName)
+{
+ icon.empty ();
+ $('').addClass ('icon').addClass ('icon-' + iconName).appendTo (icon);
+};
+
+OV.CreateHeaderButton = function (iconName, title, link)
{
let buttonLink = $('');
buttonLink.attr ('href', link);
buttonLink.attr ('target', '_blank');
buttonLink.attr ('rel', 'noopener noreferrer');
OV.InstallTooltip (buttonLink, title);
- let imgElem = $('![]()
').attr ('src', iconName).appendTo (buttonLink);
- if (hoverIconName !== null && OV.IsHoverEnabled ()) {
- buttonLink.hover (
- () => {
- imgElem.attr ('src', hoverIconName);
- },
- () => {
- imgElem.attr ('src', iconName);
- }
- );
- }
+ OV.CreateSvgIcon (buttonLink, iconName, 'header_button');
return buttonLink;
};
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index c745a2b..2781ae1 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -157,7 +157,7 @@ OV.Website = class
if (meshUserData === null) {
items.push ({
name : 'Fit model to window',
- icon : 'assets/images/context/fit.svg',
+ icon : 'fit',
onClick : () => {
this.FitModelToWindow (false);
}
@@ -165,7 +165,7 @@ OV.Website = class
if (this.navigator.HasHiddenMesh ()) {
items.push ({
name : 'Show all meshes',
- icon : 'assets/images/context/show.svg',
+ icon : 'visible',
onClick : () => {
this.navigator.ShowAllMeshes ();
}
@@ -175,14 +175,14 @@ OV.Website = class
let meshIndex = meshUserData.originalMeshIndex;
items.push ({
name : 'Hide mesh',
- icon : 'assets/images/context/hide.svg',
+ icon : 'hidden',
onClick : () => {
this.navigator.ToggleMeshVisibility (meshIndex);
}
});
items.push ({
name : 'Fit mesh to window',
- icon : 'assets/images/context/fit.svg',
+ icon : 'fit',
onClick : () => {
this.navigator.FitMeshToWindow (meshIndex);
}
@@ -191,7 +191,7 @@ OV.Website = class
let isMeshIsolated = this.navigator.IsMeshIsolated (meshIndex);
items.push ({
name : isMeshIsolated ? 'Remove isolation' : 'Isolate mesh',
- icon : isMeshIsolated ? 'assets/images/context/deisolate.svg' : 'assets/images/context/isolate.svg',
+ icon : isMeshIsolated ? 'deisolate' : 'isolate',
onClick : () => {
this.navigator.IsolateMesh (meshIndex);
}
@@ -317,8 +317,7 @@ OV.Website = class
{
function AddButton (toolbar, eventHandler, imageName, imageTitle, onlyFullWidth, onClick)
{
- let image = 'assets/images/toolbar/' + imageName + '.svg';
- let button = toolbar.AddImageButton (image, imageTitle, () => {
+ let button = toolbar.AddImageButton (imageName, imageTitle, () => {
eventHandler.HandleEvent ('toolbar_clicked', { item : imageName });
onClick ();
});
@@ -335,7 +334,7 @@ OV.Website = class
let imageName = imageNames[i];
let imageTitle = imageTitles[i];
imageData.push ({
- image : 'assets/images/toolbar/' + imageName + '.svg',
+ image : imageName,
title : imageTitle
});
}
@@ -476,8 +475,7 @@ OV.Website = class
{
function AddSidebarButton (toolbar, eventHandler, sidebarPanel, onClick)
{
- let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
- let button = toolbar.AddImageButton (image, sidebarPanel.title, () => {
+ let button = toolbar.AddImageButton (sidebarPanel.image, sidebarPanel.title, () => {
eventHandler.HandleEvent ('sidebar_clicked', { item : sidebarPanel.image });
onClick ();
});
@@ -492,11 +490,9 @@ OV.Website = class
for (let i = 0; i < sidebarPanels.length; i++) {
let sidebarPanel = sidebarPanels[i];
if (sidebarPanel.panelId === visiblePanelId) {
- let image = 'assets/images/toolbar/' + sidebarPanel.image + '_active.svg';
- sidebarPanel.button.SetImage (image);
+ sidebarPanel.button.AddImageClass ('selected');
} else {
- let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
- sidebarPanel.button.SetImage (image);
+ sidebarPanel.button.RemoveImageClass ('selected');
}
}
}
). Here you can select all the
- relevant files.
+ Use the open button on the toolbar. Here you can select all the relevant files.
).
+ You can load models by url with the open url button on the toolbar.
Here you can list all of the model files. You should place every file in a separate line.
). It means that your model
+ Sometimes you see missing files in the tree. It means that your model
refers to another files, but they are not selected to import. To solve the issue you have to import the model again together with the referenced
files, or just import the missing files on their own.
) in the toolbar.
+ To get the sharing link or the embedding code, click on the share model button in the toolbar.
) on the toolbar.
+ You can access model and visualization settings by clicking on the settings icon on the toolbar.
).
+ You can export your model in several file formats. To achieve this, click on the export button in the toolbar.
After that select the format you would like to export to, and download the resulting files one by one.