Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Measure tool experiment.

Browse Source
This commit is contained in:
kovacsv 2021-12-11 11:59:41 +01:00
parent 9371abf56f
commit 9b3fc02357
28 changed files with 446 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/icons/measure.svg Normal file
View File

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 18 18"
xml:space="preserve"
version="1.1"
id="svg6"
sodipodi:docname="measure.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata12"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs10" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview8"
showgrid="true"
inkscape:zoom="37.083822"
inkscape:cx="6.0889889"
inkscape:cy="8.7880095"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg6"><inkscape:grid
type="xygrid"
id="grid822" /></sodipodi:namedview><rect
style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#263238;stroke-width:1.00157475;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect826"
width="15"
height="7"
x="1.5007874"
y="5.4992127" /><path
style="fill:none;stroke:#263238;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 4.50005,5.9857575 V 8"
id="path828"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#263238;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 7.5317797,5.9857575 V 10"
id="path828-4"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#263238;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 10.50005,5.9857575 V 7.9928787"
id="path828-9"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#263238;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 13.50005,5.9857576 V 9.9928787"
id="path828-7"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
sandbox/embed_edges.html
View File

@ -71,6 +71,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_errors.html
View File

@ -71,6 +71,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_externallibs.html
View File

@ -71,6 +71,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_fullscreen.html
View File

@ -70,6 +70,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_manual.html
View File

@ -71,6 +71,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_multiple.html
View File

@ -71,6 +71,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->

1
sandbox/embed_selfhost_single.html
View File

@ -70,6 +70,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
<script type='text/javascript'>

1
sandbox/embed_selfhost_single_scroll.html
View File

@ -70,6 +70,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
<script type='text/javascript'>

13
source/viewer/domutils.js
View File

@ -66,14 +66,13 @@ OV.InsertDomElementAfter = function (newElement, existingElement)
existingElement.parentNode.insertBefore (newElement, existingElement.nextSibling);
};
OV.ShowDomElement = function (element)
OV.ShowDomElement = function (element, show)
{
element.style.display = 'block';
};
OV.HideDomElement = function (element)
{
element.style.display = 'none';
if (show) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
};
OV.IsDomElementVisible = function (element)

120
source/viewer/measuretool.js Normal file
View File

@ -0,0 +1,120 @@
OV.MeasureTool = class
{
constructor ()
{
this.viewer = null;
this.highlightColor = null;
this.isActive = false;
this.markers = [];
}
Init (viewer, highlightColor)
{
this.viewer = viewer;
this.highlightColor = highlightColor;
}
IsActive ()
{
return this.isActive;
}
SetActive (isActive)
{
this.isActive = isActive;
if (!this.isActive) {
this.Clear ();
}
}
Click (mouseCoordinates)
{
let intersection = this.viewer.GetMeshIntersectionUnderMouse (mouseCoordinates);
if (intersection === null) {
this.Clear ();
return;
}
if (this.markers.length === 2) {
this.Clear ();
}
this.AddMarker (intersection);
}
GetMarkerCount ()
{
return this.markers.length;
}
AddMarker (intersection)
{
this.markers.push (intersection);
this.GenerateMarker (intersection);
}
Calculate ()
{
if (this.markers.length !== 2) {
return null;
}
const a = this.markers[0];
const b = this.markers[1];
let result = {
pointsDistance : null,
parallelFacesDistance : null,
facesAngle : null
};
const aNormal = this.GetFaceWorldNormal (a);
const bNormal = this.GetFaceWorldNormal (b);
result.pointsDistance = a.point.distanceTo (b.point);
result.facesAngle = aNormal.angleTo (bNormal);
if (OV.IsEqual (result.facesAngle, 0.0) || OV.IsEqual (result.facesAngle, Math.PI)) {
let aPlane = new THREE.Plane ().setFromNormalAndCoplanarPoint (aNormal, a.point);
result.parallelFacesDistance = Math.abs (aPlane.distanceToPoint (b.point));
}
return result;
}
Clear ()
{
this.viewer.ClearExtra ();
this.markers = [];
}
GenerateMarker (intersection)
{
let boundingSphere = this.viewer.GetBoundingSphere ((meshUserData) => {
return true;
});
let coneHeight = boundingSphere.radius / 5.0;
let coneRadius = coneHeight / 2.0;
let coneGeometry = new THREE.ConeGeometry (coneRadius, coneHeight, 32);
coneGeometry.translate (0.0, -coneHeight / 2.0, 0.0);
coneGeometry.rotateX (-Math.PI / 2);
let coneMaterial = this.viewer.CreateHighlightMaterial (this.highlightColor);
let cone = new THREE.Mesh (coneGeometry, coneMaterial);
let faceNormal = this.GetFaceWorldNormal (intersection);
cone.lookAt (faceNormal);
cone.position.set (intersection.point.x, intersection.point.y, intersection.point.z);
this.viewer.AddExtraObject (cone);
}
GetFaceWorldNormal (intersection)
{
let normalMatrix = new THREE.Matrix4 ();
intersection.object.updateWorldMatrix (true, false);
normalMatrix.extractRotation (intersection.object.matrixWorld);
let faceNormal = intersection.face.normal.clone ();
faceNormal.applyMatrix4 (normalMatrix);
return faceNormal;
}
};

20
source/viewer/viewer.js
View File

@ -529,6 +529,11 @@ OV.Viewer = class
});
}
GetCanvas ()
{
return this.canvas;
}
GetCamera ()
{
return this.navigation.GetCamera ();
@ -667,6 +672,12 @@ OV.Viewer = class
this.Render ();
}
ClearExtra ()
{
this.extraGeometry.Clear ();
this.Render ();
}
SetMeshesVisibility (isVisible)
{
this.geometry.EnumerateMeshes ((mesh) => {
@ -695,8 +706,7 @@ OV.Viewer = class
return highlightMaterials;
}
const showEdges = this.geometry.edgeSettings.showEdges;
const highlightMaterial = this.shading.CreateHighlightMaterial (highlightColor, showEdges);
const highlightMaterial = this.CreateHighlightMaterial (highlightColor);
this.geometry.EnumerateMeshes ((mesh) => {
let highlighted = isHighlighted (mesh.userData);
if (highlighted) {
@ -715,6 +725,12 @@ OV.Viewer = class
this.Render ();
}
CreateHighlightMaterial (highlightColor)
{
const showEdges = this.geometry.edgeSettings.showEdges;
return this.shading.CreateHighlightMaterial (highlightColor, showEdges);
}
GetMeshUserDataUnderMouse (mouseCoords)
{
let intersection = this.GetMeshIntersectionUnderMouse (mouseCoords);

2
tools/config.json
View File

@ -61,6 +61,7 @@
"source/viewer/domutils.js",
"source/viewer/navigation.js",
"source/viewer/viewer.js",
"source/viewer/measuretool.js",
"source/viewer/domviewer.js"
],
"website_files_js" : [
@ -87,6 +88,7 @@
"website/o3dv/js/sidebarpanel.js",
"website/o3dv/js/sidebardetailspanel.js",
"website/o3dv/js/sidebarsettingspanel.js",
"website/o3dv/js/sidebarmeasurepanel.js",
"website/o3dv/js/sidebar.js",
"website/o3dv/js/hashhandler.js",
"website/o3dv/js/threemodelloaderui.js",

2
website/embed.html
View File

@ -77,6 +77,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
@ -115,6 +116,7 @@
<script type="text/javascript" src="o3dv/js/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebardetailspanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebarsettingspanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebarmeasurepanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>

2
website/index.html
View File

@ -79,6 +79,7 @@
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
@ -117,6 +118,7 @@
<script type="text/javascript" src="o3dv/js/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebardetailspanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebarsettingspanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebarmeasurepanel.js"></script>
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>

BIN
website/o3dv/css/O3DVIcons/O3DVIcons.woff
View File

Binary file not shown.

35
website/o3dv/css/icons.css
View File

@ -1,6 +1,6 @@
@font-face {
font-family: "O3DVIcons";
src: url("O3DVIcons/O3DVIcons.woff?9f1e775b55726eccac0336790d9d9b2f") format("woff");
src: url("O3DVIcons/O3DVIcons.woff?a94a3e222e39f4785c00ccb77bce301e") format("woff");
}
i[class^="icon-"]:before, i[class*=" icon-"]:before {
@ -86,48 +86,51 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.icon-materials:before {
content: "\f118";
}
.icon-meshes:before {
.icon-measure:before {
content: "\f119";
}
.icon-missing_files:before {
.icon-meshes:before {
content: "\f11a";
}
.icon-model:before {
.icon-missing_files:before {
content: "\f11b";
}
.icon-open_url:before {
.icon-model:before {
content: "\f11c";
}
.icon-open:before {
.icon-open_url:before {
content: "\f11d";
}
.icon-settings:before {
.icon-open:before {
content: "\f11e";
}
.icon-share:before {
.icon-settings:before {
content: "\f11f";
}
.icon-theme:before {
.icon-share:before {
content: "\f120";
}
.icon-tree_mesh:before {
.icon-theme:before {
content: "\f121";
}
.icon-tree_view:before {
.icon-tree_mesh:before {
content: "\f122";
}
.icon-twitter:before {
.icon-tree_view:before {
content: "\f123";
}
.icon-up_y:before {
.icon-twitter:before {
content: "\f124";
}
.icon-up_z:before {
.icon-up_y:before {
content: "\f125";
}
.icon-visible:before {
.icon-up_z:before {
content: "\f126";
}
.icon-warning:before {
.icon-visible:before {
content: "\f127";
}
.icon-warning:before {
content: "\f128";
}

17
website/o3dv/css/sidebar.css
View File

@ -46,6 +46,12 @@ div.ov_sidebar_content
overflow: auto;
}
div.ov_sidebar_section
{
margin: 10px 0px;
overflow: auto;
}
div.ov_sidebar_content div.ov_sidebar_settings_content
{
margin-bottom: 20px;
@ -83,6 +89,17 @@ div.ov_sidebar_content div.ov_sidebar_settings_padded
overflow: hidden;
}
div.ov_sidebar_content div.ov_sidebar_measure_name
{
font-weight: bold;
margin-bottom: 5px;
}
div.ov_sidebar_content div.ov_sidebar_measure_value
{
margin-bottom: 10px;
}
div.ov_sidebar_content button.pcr-button
{
width: 30px;

1
website/o3dv/js/featureset.js
View File

@ -1,3 +1,4 @@
OV.FeatureSet =
{
MeasureTool : false
};

6
website/o3dv/js/navigator.js
View File

@ -64,11 +64,7 @@ OV.Navigator = class
this.panelSet.Init ({
onResize : () => {
if (this.panelSet.IsPanelsVisible ()) {
OV.ShowDomElement (this.splitterDiv);
} else {
OV.HideDomElement (this.splitterDiv);
}
OV.ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ());
this.callbacks.onResize ();
},
onShowHidePanels : (show) => {

13
website/o3dv/js/navigatormeshespanel.js
View File

@ -157,15 +157,10 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
buttons.flatList.iconDiv.classList.add ('selected');
buttons.treeView.iconDiv.classList.remove ('selected');
}
if (showTree && isHierarchical) {
OV.ShowDomElement (buttons.separator);
OV.ShowDomElement (buttons.expandAll.div);
OV.ShowDomElement (buttons.collapseAll.div);
} else {
OV.HideDomElement (buttons.separator);
OV.HideDomElement (buttons.expandAll.div);
OV.HideDomElement (buttons.collapseAll.div);
}
let showExpandButtons = showTree && isHierarchical;
OV.ShowDomElement (buttons.separator, showExpandButtons);
OV.ShowDomElement (buttons.expandAll.div, showExpandButtons);
OV.ShowDomElement (buttons.collapseAll.div, showExpandButtons);
}
function UpdateView (panel, importResult, isHierarchical)

12
website/o3dv/js/panelset.js
View File

@ -4,7 +4,7 @@ OV.Panel = class
{
this.parentDiv = parentDiv;
this.panelDiv = OV.AddDiv (parentDiv);
OV.HideDomElement (this.panelDiv);
OV.ShowDomElement (this.panelDiv, false);
this.visible = false;
}
@ -25,11 +25,7 @@ OV.Panel = class
}
this.visible = show;
if (this.visible) {
OV.ShowDomElement (this.panelDiv);
} else {
OV.HideDomElement (this.panelDiv);
}
OV.ShowDomElement (this.panelDiv, this.visible);
}
Resize ()
@ -101,7 +97,7 @@ OV.PanelSet = class
this.panelsVisible = show;
if (this.panelsVisible) {
OV.ShowDomElement (this.contentDiv);
OV.ShowDomElement (this.contentDiv, true);
OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth + this.panelsPrevWidth);
} else {
for (let panelButton of this.panelButtons) {
@ -112,7 +108,7 @@ OV.PanelSet = class
}
this.panelsPrevWidth = this.contentDiv.offsetWidth;
OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth);
OV.HideDomElement (this.contentDiv);
OV.ShowDomElement (this.contentDiv, false);
}
this.callbacks.onShowHidePanels (this.panelsVisible);

21
website/o3dv/js/sidebar.js
View File

@ -8,9 +8,13 @@ OV.Sidebar = class
this.detailsPanel = new OV.SidebarDetailsPanel (this.panelSet.GetContentDiv ());
this.settingsPanel = new OV.SidebarSettingsPanel (this.panelSet.GetContentDiv (), settings);
this.measurePanel = new OV.SidebarMeasurePanel (this.panelSet.GetContentDiv ());
this.panelSet.AddPanel (this.detailsPanel);
this.panelSet.AddPanel (this.settingsPanel);
if (OV.FeatureSet.MeasureTool) {
this.panelSet.AddPanel (this.measurePanel);
}
this.panelSet.ShowPanel (this.detailsPanel);
}
@ -30,11 +34,7 @@ OV.Sidebar = class
this.panelSet.Init ({
onResize : () => {
if (this.panelSet.IsPanelsVisible ()) {
OV.ShowDomElement (this.splitterDiv);
} else {
OV.HideDomElement (this.splitterDiv);
}
OV.ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ());
this.callbacks.onResize ();
},
onShowHidePanels : (show) => {
@ -57,6 +57,12 @@ OV.Sidebar = class
}
});
this.measurePanel.Init ({
onActivatedChange : (isActivated) => {
this.callbacks.onMeasureToolActivedChange (isActivated);
}
});
OV.InstallVerticalSplitter (this.splitterDiv, this.mainDiv, true, () => {
this.callbacks.onResize ();
});
@ -67,6 +73,11 @@ OV.Sidebar = class
this.settingsPanel.UpdateSettings (hasDefaultMaterial);
}
UpdateMeasureTool (measureTool)
{
this.measurePanel.UpdateMeasureTool (measureTool);
}
Resize (height)
{
OV.SetDomElementOuterHeight (this.mainDiv, height);

97
website/o3dv/js/sidebarmeasurepanel.js Normal file
View File

@ -0,0 +1,97 @@
OV.SidebarMeasurePanel = class extends OV.SidebarPanel
{
constructor (parentDiv)
{
super (parentDiv);
this.helpSection = null;
this.resultSection = null;
}
GetName ()
{
return 'Measure';
}
GetIcon ()
{
return 'measure';
}
Init (callbacks)
{
super.Init (callbacks);
let isActive = false;
let activateButton = OV.AddDiv (this.contentDiv, 'ov_button ov_sidebar_button', 'Activate');
activateButton.addEventListener ('click', () => {
isActive = !isActive;
if (isActive) {
activateButton.classList.add ('outline');
activateButton.innerHTML = 'Deactivate';
} else {
activateButton.classList.remove ('outline');
activateButton.innerHTML = 'Activate';
}
this.callbacks.onActivatedChange (isActive);
});
this.helpSection = OV.AddDiv (this.contentDiv, 'ov_sidebar_section');
this.resultSection = OV.AddDiv (this.contentDiv, 'ov_sidebar_section');
}
UpdateMeasureTool (measureTool)
{
OV.ClearDomElement (this.helpSection);
OV.ClearDomElement (this.resultSection);
OV.ShowDomElement (this.helpSection, true);
OV.ShowDomElement (this.resultSection, false);
if (measureTool.IsActive ()) {
let markerCount = measureTool.GetMarkerCount ();
if (markerCount === 0) {
this.helpSection.innerHTML = 'Select a model point to start measure.';
} else if (markerCount === 1) {
this.helpSection.innerHTML = 'Select another model point to start measure.';
} else if (markerCount === 2) {
OV.ShowDomElement (this.helpSection, false);
OV.ShowDomElement (this.resultSection, true);
let calculatedValues = measureTool.Calculate ();
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_name', 'Distance of points');
let pointsDistanceStr = calculatedValues.pointsDistance.toLocaleString (undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6
});
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_value', pointsDistanceStr);
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_name', 'Distance of parallel faces');
if (calculatedValues.parallelFacesDistance !== null) {
let facesDistanceStr = calculatedValues.parallelFacesDistance.toLocaleString (undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6
});
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_value', facesDistanceStr);
} else {
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_value', 'Faces are not parallel');
}
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_name', 'Angle of faces');
let facesAngleDegree = calculatedValues.facesAngle * OV.RadDeg;
let facesAngleStr = facesAngleDegree.toLocaleString (undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6
});
OV.AddDiv (this.resultSection, 'ov_sidebar_measure_value', facesAngleStr + '°');
}
}
}
Clear ()
{
}
};

18
website/o3dv/js/sidebarsettingspanel.js
View File

@ -58,11 +58,7 @@ OV.SettingsColorSection = class
Show (show)
{
if (show) {
OV.ShowDomElement (this.contentDiv);
} else {
OV.HideDomElement (this.contentDiv);
}
OV.ShowDomElement (this.contentDiv, show);
}
Update (color)
@ -139,11 +135,11 @@ OV.SettingsEdgeDisplaySection = class
this.buttons = [];
let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => {
OV.HideDomElement (this.edgeSettingsDiv);
OV.ShowDomElement (this.edgeSettingsDiv, false);
callbacks.onShowEdgesChange (false);
});
let onButton = AddRadioButton (buttonsDiv, 'on', 'Show Edges', () => {
OV.ShowDomElement (this.edgeSettingsDiv);
OV.ShowDomElement (this.edgeSettingsDiv, true);
callbacks.onShowEdgesChange (true);
});
this.buttons.push (offButton);
@ -166,11 +162,7 @@ OV.SettingsEdgeDisplaySection = class
ShowEdgeSettings (show)
{
if (show) {
OV.ShowDomElement (this.edgeSettingsDiv);
} else {
OV.HideDomElement (this.edgeSettingsDiv);
}
OV.ShowDomElement (this.edgeSettingsDiv, show);
}
Clear ()
@ -338,7 +330,7 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel
AddResetToDefaultsButton ()
{
let defaultSettings = new OV.Settings ();
let resetToDefaultsButton = OV.AddDiv (this.contentDiv, 'ov_button outline ov_sidebar_button', 'Reset to Default');
let resetToDefaultsButton = OV.AddDiv (this.contentDiv, 'ov_button ov_sidebar_button outline', 'Reset to Default');
resetToDefaultsButton.addEventListener ('click', () => {
this.settings.backgroundColor = defaultSettings.backgroundColor;
this.settings.defaultColor = defaultSettings.defaultColor;

16
website/o3dv/js/toolbar.js
View File

@ -41,6 +41,11 @@ OV.ToolbarButton = class
this.buttonImg.classList.remove (className);
}
IsSelected ()
{
return this.selected;
}
SetSelected (selected)
{
this.selected = selected;
@ -66,6 +71,17 @@ OV.Toolbar = class
return button;
}
AddImagePushButton (image, imageTitle, isSelected, onClick)
{
let button = new OV.ToolbarButton (image, imageTitle, () => {
button.SetSelected (!button.IsSelected ());
onClick ();
});
button.AddDomElements (this.mainDiv);
button.SetSelected (isSelected);
return button;
}
AddImageRadioButton (buttonData, selectedIndex, onClick)
{
let buttons = [];

8
website/o3dv/js/treeview.js
View File

@ -154,10 +154,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
return;
}
if (this.isVisible) {
OV.ShowDomElement (this.mainElement);
OV.ShowDomElement (this.mainElement, true);
this.childrenDiv.classList.add ('ov_tree_view_children');
} else {
OV.HideDomElement (this.mainElement);
OV.ShowDomElement (this.mainElement, false);
this.childrenDiv.classList.remove ('ov_tree_view_children');
}
}
@ -170,10 +170,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
}
if (show) {
OV.SetSvgIconImageElement (this.openCloseButton, this.openButtonIcon);
OV.ShowDomElement (this.childrenDiv);
OV.ShowDomElement (this.childrenDiv, true);
} else {
OV.SetSvgIconImageElement (this.openCloseButton, this.closeButtonIcon);
OV.HideDomElement (this.childrenDiv);
OV.ShowDomElement (this.childrenDiv, false);
}
}

51
website/o3dv/js/website.js
View File

@ -13,6 +13,7 @@ OV.Website = class
this.parameters = parameters;
this.settings = new OV.Settings ();
this.viewer = new OV.Viewer ();
this.measureTool = new OV.MeasureTool ();
this.hashHandler = new OV.HashHandler ();
this.cookieHandler = new OV.CookieHandler ();
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
@ -33,6 +34,7 @@ OV.Website = class
this.SwitchTheme (this.settings.themeId, false);
this.InitViewer ();
this.InitMeasureTool ();
this.InitToolbar ();
this.InitDragAndDrop ();
this.InitSidebar ();
@ -111,17 +113,17 @@ OV.Website = class
this.uiState = uiState;
if (this.uiState === OV.WebsiteUIState.Intro) {
OV.ShowDomElement (this.parameters.introDiv);
OV.HideDomElement (this.parameters.mainDiv);
OV.ShowDomElement (this.parameters.introDiv, true);
OV.ShowDomElement (this.parameters.mainDiv, false);
ShowOnlyOnModelElements (false);
} else if (this.uiState === OV.WebsiteUIState.Model) {
OV.HideDomElement (this.parameters.introDiv);
OV.ShowDomElement (this.parameters.mainDiv);
OV.ShowDomElement (this.parameters.introDiv, false);
OV.ShowDomElement (this.parameters.mainDiv, true);
ShowOnlyOnModelElements (true);
this.UpdatePanelsVisibility ();
} else if (this.uiState === OV.WebsiteUIState.Loading) {
OV.HideDomElement (this.parameters.introDiv);
OV.HideDomElement (this.parameters.mainDiv);
OV.ShowDomElement (this.parameters.introDiv, false);
OV.ShowDomElement (this.parameters.mainDiv, false);
ShowOnlyOnModelElements (false);
}
@ -133,6 +135,7 @@ OV.Website = class
this.HidePopups ();
this.model = null;
this.parameters.fileNameDiv.innerHTML = '';
this.measureTool.Clear ();
this.viewer.Clear ();
this.navigator.Clear ();
this.sidebar.Clear ();
@ -151,13 +154,21 @@ OV.Website = class
OnModelClicked (button, mouseCoordinates)
{
if (button === 1) {
let meshUserData = this.viewer.GetMeshUserDataUnderMouse (mouseCoordinates);
if (meshUserData === null) {
this.navigator.SetSelection (null);
} else {
this.navigator.SetSelection (new OV.Selection (OV.SelectionType.Mesh, meshUserData.originalMeshId));
}
if (button !== 1) {
return;
}
if (this.measureTool.IsActive ()) {
this.measureTool.Click (mouseCoordinates);
this.sidebar.UpdateMeasureTool (this.measureTool);
return;
}
let meshUserData = this.viewer.GetMeshUserDataUnderMouse (mouseCoordinates);
if (meshUserData === null) {
this.navigator.SetSelection (null);
} else {
this.navigator.SetSelection (new OV.Selection (OV.SelectionType.Mesh, meshUserData.originalMeshId));
}
}
@ -422,6 +433,11 @@ OV.Website = class
]);
}
InitMeasureTool ()
{
this.measureTool.Init (this.viewer, this.highlightColor);
}
InitToolbar ()
{
function AddButton (toolbar, eventHandler, imageName, imageTitle, classNames, onClick)
@ -568,6 +584,15 @@ OV.Website = class
onThemeChange : () => {
this.SwitchTheme (this.settings.themeId, true);
},
onMeasureToolActivedChange : (isActivated) => {
if (isActivated) {
this.navigator.SetSelection (null);
this.measureTool.SetActive (true);
} else {
this.measureTool.SetActive (false);
}
this.sidebar.UpdateMeasureTool (this.measureTool);
},
onResize : () => {
this.Resize ();
},