768 lines
33 KiB
HTML
768 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>2D DWG Drawing Viewer | HOOPS Web Viewer</title>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<!-- Google Tag Manager -->
|
|
<script>(function (w, d, s, l, i) {
|
|
w[l] = w[l] || []; w[l].push({
|
|
'gtm.start':
|
|
new Date().getTime(), event: 'gtm.js'
|
|
}); var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-PB9P4KS');</script>
|
|
<!-- End Google Tag Manager -->
|
|
|
|
<link rel="stylesheet" href="stylesheets/TreeControl.css" />
|
|
<link rel="stylesheet" href="stylesheets/Toolbar.css" />
|
|
<link rel="stylesheet" href="stylesheets/Common.css" />
|
|
<link rel="stylesheet" href="stylesheets/Desktop.css" />
|
|
<link rel="stylesheet" href="stylesheets/NoteText.css" />
|
|
<link rel="stylesheet" href="stylesheets/PropertyWindow.css" />
|
|
<link rel="stylesheet" href="stylesheets/ViewerSettings.css" />
|
|
<link rel="stylesheet" href="stylesheets/jquery.minicolors.css" />
|
|
<link rel="stylesheet" href="stylesheets/jquery-ui.min.css" />
|
|
<link rel="stylesheet" href="stylesheets/drop-down.css"/>
|
|
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/jquery-3.3.1.min.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/jquery.ui.touch-punch.min.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/jquery.minicolors.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/keymaster.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/iscroll.min.js"></script>
|
|
|
|
<script>
|
|
const HWP_VERSION = "2022.1.2";
|
|
const HWP_ENGINE_PATH = "https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer@2022.1.2/";
|
|
const HWP_VIEWER_PATH = "https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer@2022.1.2/hoops_web_viewer.js?v=2022.1.2";
|
|
</script>
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer@2022.1.2/hoops_web_viewer.js?v=2022.1.2"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/web_viewer_ui.js?v=2022.1.2" id="hwvUI"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/communicator_server_integration.js?v=2022.1.2"></script>
|
|
<script type="text/javascript" src="javascripts/communicator_scripts/sample.js?v=2022.1.2"></script>
|
|
<script type="text/javascript" src="javascripts/custom.js"></script>
|
|
|
|
<script>
|
|
var viewer = null;
|
|
</script>
|
|
|
|
<script type="module">
|
|
|
|
var model_name = Sample._getParameterByName("instance");
|
|
|
|
viewer = new Communicator.WebViewer({
|
|
containerId: "viewer-container",
|
|
endpointUri: `data/${model_name}.scs`,
|
|
});
|
|
|
|
const uiConfig = {
|
|
containerId: "content",
|
|
screenConfiguration: Sample.screenConfiguration,
|
|
};
|
|
|
|
viewer.setCallbacks({
|
|
sceneReady: function (camera) {
|
|
if(model_name == "Clinic_Architectural_First_Floor_With_Perspective"){
|
|
document.getElementById("sheets").style.visibility = "hidden";
|
|
}
|
|
},
|
|
modelStructureReady: function () {
|
|
$(".dropdown").css("display", "inline-block");
|
|
},
|
|
});
|
|
|
|
const ui = new Communicator.Ui.Desktop.DesktopUi(viewer, uiConfig);
|
|
|
|
viewer.start();
|
|
|
|
window.onresize = function () {
|
|
viewer.resizeCanvas();
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PB9P4KS" height="0" width="0"
|
|
style="display:none;visibility:hidden"></iframe></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
|
|
<div id="content">
|
|
<div id="viewer-container"></div>
|
|
|
|
<div class="dropdown">
|
|
<button class="drop-button">Models</button>
|
|
<div class="dropdown-content">
|
|
<a href="/2D-DWG-Drawing-Viewer/index.html?instance=HotelFloorplan" style="width: 90%; float: left">
|
|
<img src="stylesheets/images/Hotel Floorplan.PNG" alt="Landing Gear Main Shaft" style="float: left" />
|
|
<div class="dropdown-text" style="width: 50%; float: right">
|
|
Hotel Floorplan
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/2D-DWG-Drawing-Viewer/index.html?instance=Clinic_Architectural_First_Floor_With_Perspective" style="width: 90%; float: left">
|
|
<img src="stylesheets/images/Clinic.PNG" alt="Landing Gear Main Shaft" style="float: left" />
|
|
<div class="dropdown-text" style="width: 50%; float: right">
|
|
Clinic Floor Plan
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/2D-DWG-Drawing-Viewer/index.html?instance=Chieasa_Dives" style="width: 90%; float: left">
|
|
<img src="stylesheets/images/Chieasa Dives.png" alt="Landing Gear Main Shaft" style="float: left" />
|
|
<div class="dropdown-text" style="width: 50%; float: right">
|
|
Chieasa Dives Floor Plan
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button class="drop-button">Views</button>
|
|
<div class="dropdown-content">
|
|
<a href="javascript:void(0);" onmousedown='setView(0)' style="width: 90%; float: left; text-align: center;">
|
|
<p id="view 1 text"> View 1 </p>
|
|
</a>
|
|
|
|
<a href="javascript:void(0);" onmousedown='setView(1)' style="width: 90%; float: left; text-align: center;">
|
|
<p id="view 1 text"> View 2 </p>
|
|
</a>
|
|
|
|
<a href="javascript:void(0);" onmousedown='setView(2)' style="width: 90%; float: left; text-align: center;">
|
|
<p id="view 1 text"> View 3 </p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown" id="sheets">
|
|
<button class="drop-button">Sheets</button>
|
|
<div class="dropdown-content">
|
|
<a href="javascript:void(0);" onmousedown='switchSheet(0)' style="width: 90%; float: left; text-align: center;">
|
|
<p id="view 1 text"> Sheet 1 </p>
|
|
</a>
|
|
|
|
<a href="javascript:void(0);" onmousedown='switchSheet(1)' style="width: 90%; float: left; text-align: center;">
|
|
<p id="view 1 text"> Sheet 2 </p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Toolbar HTML-->
|
|
<div id="toolBar">
|
|
<div class="toolbar-tools">
|
|
<div id="home-button" title="Reset Camera" data-operatorclass="toolbar-home" class="hoops-tool">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="tool_separator_1" class="tool-separator"></div>
|
|
<div id="view-button" title="Camera Menu" data-operatorclass="toolbar-camera" data-submenu="view-submenu"
|
|
class="hoops-tool toolbar-menu">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="edgeface-button" title="Wireframe on Shaded" data-operatorclass="toolbar-wireframeshaded"
|
|
data-submenu="edgeface-submenu" class="hoops-tool toolbar-menu">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="tool_separator_2" class="tool-separator"></div>
|
|
<div id="redline-button" title="Redline Note" data-operatorclass="toolbar-redline-note"
|
|
data-submenu="redline-submenu" class="hoops-tool toolbar-radio">
|
|
<div class="smarrow"></div>
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="click-button" title="Select" data-operatorclass="toolbar-select" data-submenu="click-submenu"
|
|
class="hoops-tool toolbar-radio active-tool">
|
|
<div class="smarrow"></div>
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="camera-button" title="Orbit Camera" data-operatorclass="toolbar-orbit" data-submenu="camera-submenu"
|
|
class="hoops-tool toolbar-menu">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="tool_separator_3" class="tool-separator"></div>
|
|
<div id="explode-button" title="Explode Menu" data-operatorclass="toolbar-explode" data-submenu="explode-slider"
|
|
class="hoops-tool toolbar-menu-toggle">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="cuttingplane-button" title="Cutting Plane Menu" data-operatorclass="toolbar-cuttingplane"
|
|
data-submenu="cuttingplane-submenu" class="hoops-tool toolbar-menu-toggle">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="tool_separator_4" class="tool-separator"></div>
|
|
<div id="snapshot-button" title="Snapshot" data-operatorclass="toolbar-snapshot" class="hoops-tool">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
<div id="settings-button" title="Settings" data-operatorclass="toolbar-settings" class="hoops-tool">
|
|
<div class="tool-icon"></div>
|
|
</div>
|
|
</div>
|
|
<div id="submenus">
|
|
<div id="redline-submenu" data-button="redline-button" class="toolbar-submenu submenus">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="redline-circle-button" title="Redline Circle" data-operatorclass="toolbar-redline-circle"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="redline-rectangle-button" title="Redline Rectangle"
|
|
data-operatorclass="toolbar-redline-rectangle" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="redline-note" title="Redline Note" data-operatorclass="toolbar-redline-note"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="redline-freehand" title="Redline Freehand" data-operatorclass="toolbar-redline-freehand"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="camera-submenu" data-button="camera-button" class="toolbar-submenu submenus">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="operator-camera-walk" title="Walk" data-operatorclass="toolbar-walk" class="submenu-icon">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="operator-camera-turntable" title="Turntable" data-operatorclass="toolbar-turntable"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="operator-camera-orbit" title="Orbit Camera" data-operatorclass="toolbar-orbit"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="edgeface-submenu" data-button="edgeface-button" class="toolbar-submenu submenus">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="viewport-wireframe-on-shaded" title="Shaded With Lines"
|
|
data-operatorclass="toolbar-wireframeshaded" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="viewport-shaded" title="Shaded" data-operatorclass="toolbar-shaded" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div title="Hidden Line" data-operatorclass="toolbar-hidden-line" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="viewport-wireframe" title="Wireframe" data-operatorclass="toolbar-wireframe"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="viewport-xray" title="XRay" data-operatorclass="toolbar-xray" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="view-submenu" class="toolbar-submenu submenus">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="view-face" title="Orient Camera To Selected Face" data-operatorclass="toolbar-face"
|
|
class="submenu-icon disabled"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="view-iso" title="Iso View" data-operatorclass="toolbar-iso" class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-ortho" title="Orthographic Projection" data-operatorclass="toolbar-ortho"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-persp" title="Perspective Projection" data-operatorclass="toolbar-persp"
|
|
class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="view-left" title="Left View" data-operatorclass="toolbar-left" class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-right" title="Right View" data-operatorclass="toolbar-right" class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-bottom" title="Bottom View" data-operatorclass="toolbar-bottom" class="submenu-icon">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="view-front" title="Front View" data-operatorclass="toolbar-front" class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-back" title="Back View" data-operatorclass="toolbar-back" class="submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="view-top" title="Top View" data-operatorclass="toolbar-top" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="click-submenu" data-button="click-button" class="toolbar-submenu submenus">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="note-button" title="Create Note-Pin" data-operatorclass="toolbar-note" class="submenu-icon">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div id="measure-point-to-point" title="Measure Point to Point"
|
|
data-operatorclass="toolbar-measure-point" class="submenu-icon"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="select-parts" title="Select Parts" data-operatorclass="toolbar-select" class="submenu-icon">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div id="area-select" title="Area Select" data-operatorclass="toolbar-area-select" class="submenu-icon">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="explode-slider" class="toolbar-submenu slider-menu submenus">
|
|
<div id="explosion-slider" style="height:90px;" class="toolbar-slider"></div>
|
|
</div>
|
|
<div id="cuttingplane-submenu" class="toolbar-submenu cutting-plane submenus no-modal">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div id="cuttingplane-face" title="Create Cutting Plane On Selected Face" data-plane="face"
|
|
data-operatorclass="toolbar-cuttingplane-face" class="toolbar-cp-plane submenu-icon disabled"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="cuttingplane-x" title="Cutting Plane X" data-plane="x"
|
|
data-operatorclass="toolbar-cuttingplane-x" class="toolbar-cp-plane submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="cuttingplane-section" title="Cutting Plane Visibility Toggle" data-plane="section"
|
|
data-operatorclass="toolbar-cuttingplane-section" class="toolbar-cp-plane submenu-icon disabled">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="cuttingplane-y" title="Cutting Plane Y" data-plane="y"
|
|
data-operatorclass="toolbar-cuttingplane-y" class="toolbar-cp-plane submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="cuttingplane-toggle" title="Cutting Plane Section Toggle" data-plane="toggle"
|
|
data-operatorclass="toolbar-cuttingplane-toggle" class="toolbar-cp-plane submenu-icon disabled"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="cuttingplane-z" title="Cutting Plane Z" data-plane="z"
|
|
data-operatorclass="toolbar-cuttingplane-z" class="toolbar-cp-plane submenu-icon"></div>
|
|
</td>
|
|
<td>
|
|
<div id="cuttingplane-reset" title="Cutting Plane Reset" data-plane="reset"
|
|
data-operatorclass="toolbar-cuttingplane-reset" class="toolbar-cp-plane submenu-icon disabled"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewer-settings-dialog-container">
|
|
<!-- Viewer Settings Window -->
|
|
<div id="viewer-settings-dialog" class="hoops-ui-window">
|
|
|
|
<!-- Header -->
|
|
<div class="hoops-ui-window-header">
|
|
<span class="tab selected" id="settings-tab-label-general">General</span>
|
|
<span class="tab" id="settings-tab-label-walk">Walk</span>
|
|
<span class="tab" id="settings-tab-label-drawing">Drawing</span>
|
|
</div>
|
|
|
|
<!-- Drawing tab -->
|
|
<div class="hoops-ui-window-body" id="settings-tab-drawing">
|
|
<div class="settings-group-header">Drawing</div>
|
|
<div class="settings-group settings-group-general">
|
|
<div class="settings-block">
|
|
<div>Drawing Colors:</div>
|
|
<div>
|
|
<input type="text" id="settings-drawing-background" class="color-picker" data-position="bottom left" />
|
|
<label>Background</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="settings-drawing-sheet" class="color-picker" data-position="bottom left" />
|
|
<label>Sheet</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="settings-drawing-sheet-shadow" class="color-picker"
|
|
data-position="bottom left" />
|
|
<label>Sheet Shadow</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="settings-drawing-background-enabled" />
|
|
<label>Show Sheet Background</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Walk tab -->
|
|
<div class="hoops-ui-window-body" id="settings-tab-walk">
|
|
<div class="settings-group-header">Walk Mode</div>
|
|
<div class="settings-group settings-group-general">
|
|
<div class="settings-block">
|
|
<label>Walk Mode:</label>
|
|
<select id="settings-walk-mode" class="right-align">
|
|
<option value="0">Mouse</option>
|
|
<option value="1">Keyboard</option>
|
|
</select>
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
|
|
<div class="settings-block" id="walk-navigation-keys">
|
|
<div id="walk-navigation-text" class="center-align bold">Navigation Keys</div>
|
|
<div>
|
|
<span id="walk-key-forward">W</span> /
|
|
<span id="walk-key-left">A</span> /
|
|
<span id="walk-key-backward">S</span> /
|
|
<span id="walk-key-right">D</span>
|
|
<span class="right-align">Move</span>
|
|
</div>
|
|
<div>
|
|
<span id="walk-key-rotate-left">Q</span> /
|
|
<span id="walk-key-rotate-right">E</span>
|
|
<span class="right-align">rotate</span>
|
|
</div>
|
|
<div>
|
|
<span id="walk-key-up">X</span> /
|
|
<span id="walk-key-down">C</span>
|
|
<span class="right-align">Up / Down</span>
|
|
</div>
|
|
<div>
|
|
<span id="walk-key-tilt-up">R</span> /
|
|
<span id="walk-key-tilt-down">F</span>
|
|
<span id="move-keys" class="right-align">Tilt</span>
|
|
</div>
|
|
<div>
|
|
<span id="walk-key-toggle-collision">V</span>
|
|
<span class="right-align">Toggle Collision Detection</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<span id="walk-rotation-text">Rotation (Deg/s):</span>
|
|
<input type="number" min="0" id="settings-walk-rotation" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<span id="walk-speed-text">Walk Speed (<span id="walk-speed-units">m</span>/s):</span>
|
|
<input type="number" min="0" id="settings-walk-speed" step=".1" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span id="walk-elevation-text">Elevation Speed (<span id="elevation-speed-units">m</span>/s):</span>
|
|
<input type="number" min="0" id="settings-walk-elevation" step=".1" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span id="walk-view-angle-text">Field of View (Deg):</span>
|
|
<input type="number" min="30" max="150" id="settings-walk-view-angle" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span id="walk-mouse-look-text">Enable Mouse Look:</span>
|
|
<input type="checkbox" id="settings-mouse-look-enabled" />
|
|
|
|
<span id="settings-mouse-look-style" class="grayed-out right-align">
|
|
<label>Speed: </label>
|
|
<input id="settings-mouse-look-speed" type="number" />
|
|
</span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span id="walk-bim-mode-text">Enable Collision Detection:</span>
|
|
<input type="checkbox" id="settings-bim-mode-enabled" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--General tab-->
|
|
<div class="hoops-ui-window-body selected" id="settings-tab-general">
|
|
<!-- general -->
|
|
<div class="settings-group-header">General</div>
|
|
<div class="settings-group settings-group-general">
|
|
<div class="settings-block">
|
|
<label>Projection Mode:</label>
|
|
<select id="settings-projection-mode" class="right-align">
|
|
<option value="0">Orthographic</option>
|
|
<option value="1">Perspective</option>
|
|
</select>
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span class="framerate-text">Framerate (fps):</span>
|
|
<input type="number" min="0" id="settings-framerate" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Hidden Line Opacity (0-1): </span>
|
|
<input id="settings-hidden-line-opacity" class="right-align" type="number" min="0" max="1" step=".1" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<label for="settings-show-backfaces">Show Backfaces:</label>
|
|
<input type="checkbox" id="settings-show-backfaces" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<label for="settings-show-capping-geometry">Show Capping Geometry:</label>
|
|
<input type="checkbox" id="settings-show-capping-geometry" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Enable Face / Line Selection: </span>
|
|
<input type="checkbox" id="settings-enable-face-line-selection" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Selection Honors Scene Visibility:</span>
|
|
<input type="checkbox" id="settings-select-scene-invisible" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Rotate Around Camera Center:</span>
|
|
<input type="checkbox" id="settings-orbit-mode" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- effects -->
|
|
<div class="settings-group-header">Effects</div>
|
|
<div class="settings-group settings-group-general">
|
|
|
|
<div class="settings-block">
|
|
<span>Enable Ambient Occlusion:</span>
|
|
<input type="checkbox" id="settings-ambient-occlusion" />
|
|
<input id="settings-ambient-occlusion-radius" type="number" min="0" max="10" step=".01"
|
|
class="right-align" />
|
|
<div class="right-align">Radius: </div>
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<span>Enable Anti-Aliasing:</span>
|
|
<input type="checkbox" id="settings-anti-aliasing" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<div>
|
|
<span>Enable Bloom:</span>
|
|
<input type="checkbox" id="settings-bloom-enabled" class="right-align" />
|
|
</div>
|
|
<span id="settings-bloom-style" class="grayed-out">
|
|
<label>Intensity Scale:</label>
|
|
<input id="settings-bloom-intensity" type="number" min="0" step=".1" class="right-align" disabled />
|
|
<span class="clear-both"></span>
|
|
<label>Threshold:</label>
|
|
<input type="range" id="settings-bloom-threshold" min="0" max="1" step="0.1" class="right-align"
|
|
disabled />
|
|
</span>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<div>
|
|
<span>Silhouette Edges:</span>
|
|
<input type="checkbox" id="settings-silhouette-enabled" class="right-align" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<div>
|
|
<span>Reflection Planes:</span>
|
|
<input type="checkbox" id="settings-reflection-enabled" class="right-align" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-block">
|
|
<div>
|
|
<span>Enable Shadows:</span>
|
|
<input type="checkbox" id="settings-shadow-enabled" class="right-align" />
|
|
</div>
|
|
<span id="settings-shadow-style" class="grayed-out">
|
|
<span>Interactive:</span>
|
|
<input type="checkbox" id="settings-shadow-interactive" class="right-align" disabled />
|
|
<span class="clear-both"></span>
|
|
|
|
<label>Blur Samples:</label>
|
|
<input type="range" id="settings-shadow-blur-samples" min="0" max="20" step="1" class="right-align"
|
|
disabled />
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- axis -->
|
|
<div class="settings-group-header">Axis</div>
|
|
<div class="settings-group settings-group-general">
|
|
<div class="settings-block">
|
|
<span>Show Axis Triad:</span>
|
|
<input type="checkbox" id="settings-axis-triad" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Show Nav Cube:</span>
|
|
<input type="checkbox" id="settings-nav-cube" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- point cloud -->
|
|
<div class="settings-group-header">Point Cloud</div>
|
|
<div class="settings-group settings-group-general">
|
|
<div class="settings-block">
|
|
<span>Enable Splats:</span>
|
|
<input type="checkbox" id="settings-splat-rendering-enabled" />
|
|
|
|
<span id="settings-splat-enabled-style" class="grayed-out right-align">
|
|
<label>Size: </label>
|
|
<input id="settings-splat-rendering-size" step=".01" type="number" />
|
|
|
|
<label>Mode:</label>
|
|
<select id="settings-splat-rendering-point-size-unit">
|
|
<option value="0">ScreenPixels</option>
|
|
<option value="1">CSSPixels</option>
|
|
<option value="2">World</option>
|
|
<option value="3">ScreenWidth</option>
|
|
<option value="4">ScreenHeight</option>
|
|
<option value="5">BoundingDiagonal</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span>Enable Eye-Dome Lighting:</span>
|
|
<input type="checkbox" id="settings-eye-dome-lighting-enabled" class="right-align" />
|
|
<span class="clear-both"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!--color-->
|
|
<div class="settings-group-header">Color</div>
|
|
<div class="settings-group settings-group-colors">
|
|
<div class="settings-block">
|
|
<div>Background Color:</div>
|
|
<div>
|
|
<input type="text" id="settings-background-top" class="color-picker" data-position="top left" />
|
|
<label>Top</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="settings-background-bottom" class="color-picker" data-position="top left" />
|
|
<label>Bottom</label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-block">
|
|
<div>Capping Geometry:</div>
|
|
<div>
|
|
<input type="text" id="settings-capping-face-color" class="color-picker" data-position="top left" />
|
|
<label>Face</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="settings-capping-line-color" class="color-picker" data-position="top left" />
|
|
<label>Line</label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-block">
|
|
<div>Selection Color:</div>
|
|
<input type="text" id="settings-selection-color-body" class="color-picker" data-position="top left" />
|
|
<label>Body</label>
|
|
<div>
|
|
<span id="settings-selection-color-face-line-style">
|
|
<input type="text" id="settings-selection-color-face-line" class="color-picker"
|
|
data-position="top left" />
|
|
<label>Faces and Lines</label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-block">
|
|
<input type="text" id="settings-measurement-color" class="color-picker" data-position="top left" />
|
|
<label>Measurement Color</label>
|
|
</div>
|
|
<div class="settings-block">
|
|
<span id="settings-pmi-color-style" class="grayed-out">
|
|
<input type="text" id="settings-pmi-color" class="color-picker" data-position="top left" disabled />
|
|
<label>PMI Override Color</label>
|
|
</span>
|
|
<input type="checkbox" id="settings-pmi-enabled" />
|
|
<label>Enable</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div>
|
|
<div class="hoops-ui-window-footer">
|
|
<div class="version">
|
|
Viewer Version:
|
|
<span id="settings-viewer-version"></span>, Format Version:
|
|
<span id="settings-format-version"></span>
|
|
</div>
|
|
<div class="hoops-ui-footer-buttons">
|
|
<button id="viewer-settings-ok-button">Ok</button>
|
|
<button id="viewer-settings-cancel-button">Cancel</button>
|
|
<button id="viewer-settings-apply-button">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="snapshot-dialog" class="hoops-ui-window">
|
|
<div class="hoops-ui-window-header">Snapshot</div>
|
|
<div class="hoops-ui-window-body">
|
|
<img id="snapshot-dialog-image" class="snapshot-image" alt="Snapshot" />
|
|
<div class="snapshot-text">Right Click to Save image</div>
|
|
</div>
|
|
<div class="hoops-ui-window-footer">
|
|
<div class="hoops-ui-footer-buttons">
|
|
<button id="snapshot-dialog-cancel-button">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |