Example tweaks

xeokit · Apr 22, 2021 · 61eccfa · 61eccfa
1 parent c308770
commit 61eccfa
Show file tree

Hide file tree

Showing 25 changed files with 73 additions and 66 deletions.
diff --git a/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json b/docs/ast/source/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json
diff --git a/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json b/docs/ast/source/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.json
diff --git a/...s/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html b/...s/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html
@@ -173,7 +173,7 @@ <h2 id="example-1--creating-anglemeasurements-programmatically">Example 1: Creat
      });
 });</code>
 </code></pre>
-<h2 id="example-2--creating-anglemeasurements-interactively">Example 2: Creating AngleMeasurements Interactively</h2><p>In our second example, we&apos;ll use an <span><a href="class/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html">XKTLoaderPlugin</a></span> to load a model, then we&apos;ll use the AngleMeasurementPlugin&apos;s <span><a href="class/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.js~AngleMeasurementsControl.html">AngleMeasurementsControl</a></span> to interactively create <span><a href="class/plugins/AngleMeasurementsPlugin/AngleMeasurement.js~AngleMeasurement.html">AngleMeasurement</a></span>s with mouse or touch input.</p>
+<h2 id="example-2--creating-anglemeasurements-interactively">Example 2: Creating AngleMeasurements Interactively</h2><p>In our second example, we&apos;ll use an <span><a href="class/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html">XKTLoaderPlugin</a></span> to load a model, then we&apos;ll use the AngleMeasurementsPlugin&apos;s <span><a href="class/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.js~AngleMeasurementsControl.html">AngleMeasurementsControl</a></span> to interactively create <span><a href="class/plugins/AngleMeasurementsPlugin/AngleMeasurement.js~AngleMeasurement.html">AngleMeasurement</a></span>s with mouse or touch input.</p>
 <p>After we&apos;ve activated the AngleMeasurementsControl, the first click on any <span>Entity</span> begins constructing a AngleMeasurement, fixing its
 origin to that Entity. The next click on any Entity will fix the AngleMeasurement&apos;s corner, and the next click after
 that will fix its target and complete the AngleMeasurement.</p>

diff --git a/...c/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html b/...c/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html
@@ -267,7 +267,7 @@ <h2 id="example-1--creating-anglemeasurements-programmatically">Example 1: Creat
      });
 });</code>
 </code></pre>
-<h2 id="example-2--creating-anglemeasurements-interactively">Example 2: Creating AngleMeasurements Interactively</h2><p>In our second example, we&apos;ll use an <span><a href="class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html">XKTLoaderPlugin</a></span> to load a model, then we&apos;ll use the AngleMeasurementPlugin&apos;s <span><a href="class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.js~AngleMeasurementsControl.html">AngleMeasurementsControl</a></span> to interactively create <span><a href="class/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js~AngleMeasurement.html">AngleMeasurement</a></span>s with mouse or touch input.</p>
+<h2 id="example-2--creating-anglemeasurements-interactively">Example 2: Creating AngleMeasurements Interactively</h2><p>In our second example, we&apos;ll use an <span><a href="class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html">XKTLoaderPlugin</a></span> to load a model, then we&apos;ll use the AngleMeasurementsPlugin&apos;s <span><a href="class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.js~AngleMeasurementsControl.html">AngleMeasurementsControl</a></span> to interactively create <span><a href="class/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js~AngleMeasurement.html">AngleMeasurement</a></span>s with mouse or touch input.</p>
 <p>After we&apos;ve activated the AngleMeasurementsControl, the first click on any <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span> begins constructing a AngleMeasurement, fixing its
 origin to that Entity. The next click on any Entity will fix the AngleMeasurement&apos;s corner, and the next click after
 that will fix its target and complete the AngleMeasurement.</p>

diff --git a/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html b/docs/file/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html
@@ -163,7 +163,7 @@
  *
  * ## Example 2: Creating AngleMeasurements Interactively
  *
- * In our second example, we&apos;ll use an {@link XKTLoaderPlugin} to load a model, then we&apos;ll use the AngleMeasurementPlugin&apos;s {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.
+ * In our second example, we&apos;ll use an {@link XKTLoaderPlugin} to load a model, then we&apos;ll use the AngleMeasurementsPlugin&apos;s {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.
  *
  * After we&apos;ve activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its
  * origin to that Entity. The next click on any Entity will fix the AngleMeasurement&apos;s corner, and the next click after

diff --git a/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html b/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js.html
@@ -257,7 +257,7 @@
  *
  * ## Example 2: Creating AngleMeasurements Interactively
  *
- * In our second example, we&apos;ll use an {@link XKTLoaderPlugin} to load a model, then we&apos;ll use the AngleMeasurementPlugin&apos;s {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.
+ * In our second example, we&apos;ll use an {@link XKTLoaderPlugin} to load a model, then we&apos;ll use the AngleMeasurementsPlugin&apos;s {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.
  *
  * After we&apos;ve activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its
  * origin to that Entity. The next click on any Entity will fix the AngleMeasurement&apos;s corner, and the next click after

diff --git a/docs/index.json b/docs/index.json
diff --git a/examples/css/pageStyle.css b/examples/css/pageStyle.css
@@ -1,9 +1,10 @@
 
 body {
-    font-family: 'Roboto', sans-serif;
-    font-size: 15px;
-    line-height: 1.50;
-    color: #444444;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
     background-color: white;
     text-decoration: none;
     word-spacing: normal;
@@ -35,7 +36,7 @@ body {
     height: 100%;
     overflow-y: scroll;
     transition: all 300ms ease-in-out;
-    border-left: 2px solid #444444;
+    border-left: 2px solid #212529;
     margin-top: 0;
     padding: 0px 10px 10px 20px;
 }
@@ -56,7 +57,6 @@ body {
 
 .info-button {
     position: absolute;
-    color: #444444;
     right: 15px;
     top: 12px;
     z-index: 1;
@@ -82,41 +82,39 @@ body {
 }
 
 h1, h2, h3 {
-    font-weight: normal;
+    font-family: inherit;
+    line-height: 1.2;
+    color: inherit;
     -webkit-transform-origin: 0% 100%;
 }
 
 h1 {
+    font-weight:500;
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 15px;
-    font-size: 22px;
-    font-weight: normal;
+    font-size: 1.4rem;
 }
 
 h1 a {
     color: #fffbfb;
 }
 
 h2 {
-    font-size: 18px;
-    line-height: 1.2;
+    font-size: 1.0rem;
+    font-weight: 550;
     padding-top: 30px;
     padding-left: 0px;
-    font-weight: bold;
     margin-top: 0px;
     padding-bottom: 10px;
     margin-bottom: 0;
     letter-spacing: 0px;
     /*border-bottom: 2px solid #d4d4d4;*/
-    color: #4E7A4A;
 }
 
 h3 {
-    font-size: 14px;
-    line-height: 1.2;
-    font-weight: bold;
-    color: #8F3434;
+    font-size: 1.0rem;
+    font-weight: 550;
     padding: 0;
     margin: 0;
     padding-left: 0px;
@@ -134,8 +132,16 @@ h3 {
     border: 2px solid #ebebeb;
     background: #4444;
     visibility: hidden;
-    box-shadow: 5px 5px 15px 1px #444444;
+    box-shadow: 5px 5px 15px 1px #212529;
     z-index: 10000;
     pointer-events: none;
 }
 
+a {
+    /*text-decoration: none;*/
+    /*color: #212529;*/
+}
+
+a:hover {
+    text-decoration: underline;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -13,10 +13,10 @@
     <style>
 
         body {
-            font-family: 'Roboto', sans-serif;
-            font-size: 15px;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-size: 1rem;
             line-height: 1.50;
-            color: #000000;
+            color: #212529;
             background-color: #000000;
             text-decoration: none;
             word-spacing: normal;
@@ -35,32 +35,30 @@
             height: 100%;
             background: #fdfdfd;
             overflow: auto;
-            border-right: 2px solid #444444;
+            border-right: 2px solid #212529;
             padding: 20px;
             padding-bottom: 100px;
             user-select: none;
         }
 
         #index a {
-            text-decoration: none;
+            /*text-decoration: none;*/
         }
 
         #index h1 {
-            color: #000000;
             margin-top: 0;
             margin-bottom: 0;
-            font-size: 25px;
+            font-size: 1.8rem;
             font-weight: normal;
             text-decoration: none !important;
         }
 
         #index h1 a {
-            color: #000000;
+            color: #212529;
         }
 
         #index h2 {
-            color: #000000;
-            font-size: 20px;
+            font-size: 1.4rem;
             font-weight: normal;
             padding-top: 20px;
             padding-bottom: 10px;
@@ -83,7 +81,6 @@
             padding-left: 5px !important;
             padding-top: 0;
             padding-bottom: 0;
-            color: #000000;
             border: 1px solid #676767;
             background: #FFFF44;
         }
@@ -170,7 +167,6 @@
         .index-button {
             position: absolute;
             font-size: 18px;
-            color: #444444;
             top: 15px;
             left: 20px;
             text-align: center;
@@ -189,20 +185,20 @@
 
         .page-title {
             position: absolute;
-            font-size: 22px;
-            color: #444444;
+            font-size: 1.6rem;
             top: 17px;
             left: 75px;
-            text-align: center;
+            text-align: left;
             -webkit-user-select: none;
             -ms-user-select: none;
             user-select: none;
             z-index: 5;
             transition: all 300ms ease-in-out;
+            max-width: calc(100% - 400px);
+            pointer-events: none;
         }
 
         .viewSourceButton {
-            color: #444444;
             position: absolute;
             left: 20px;
             bottom: 15px;
@@ -262,13 +258,13 @@
 
         "Annotations": [
             "#Pinning 3D labels on models",
-            ["annotations_clickShowLabels", "Click annotation markers to show their labels"],
-            ["annotations_hoverShowLabels", "Hover over annotation markers to show their labels"],
-            ["annotations_clickFlyToPosition", "Click each annotation marker to move to its vantage point"],
+            ["annotations_clickShowLabels", "Click annotation markers to show labels"],
+            ["annotations_hoverShowLabels", "Hover annotation markers to show labels"],
+            ["annotations_clickFlyToPosition", "Click annotation markers to go to vantage points"],
             ["annotations_createWithMouse", "Click on the model to create annotations"],
             ["annotations_createAtCenterOfClickedObject", "Click objects to create annotations at their centers"],
             ["annotations_externalElements", "Annotations with externally-provided DOM elements"],
-            ["annotations_occlusionDisabled", "Annotations without occlusion culling (always visible)"],
+            ["annotations_occlusionDisabled", "Annotations with occlusion culling disabled"],
         ],
 
         "AxisGizmo": [

diff --git a/examples/loading_XKT_ConvenienceStore.html b/examples/loading_XKT_ConvenienceStore.html
@@ -14,7 +14,8 @@
 <canvas id="myCanvas"></canvas>
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/bim_icon.png"/>
-    <h1>Loading a BIM Model from the File System</h1><br>
+    <h1>XKTLoaderPlugin</h1>
+    <p>Loading a BIM Model from the File System</p>
     <h3>Stats</h3>
     <ul>
         <li>

diff --git a/examples/measurements_angle_createWithMouse.html b/examples/measurements_angle_createWithMouse.html
@@ -14,7 +14,7 @@
 <canvas id="myCanvas"></canvas>
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/measure_angle_icon.png"/>
-    <h1>AngleMeasurementPlugin</h1>
+    <h1>AngleMeasurementsPlugin</h1>
     <h2>Click on the model to create angle measurements</h2>
     <p>In this example, we're loading a BIM model from the file system, then creating angle measurements wherever the
         user clicks on the model.</p>

diff --git a/examples/measurements_angle_modelWithMeasurements.html b/examples/measurements_angle_modelWithMeasurements.html
@@ -14,7 +14,7 @@
 <canvas id="myCanvas"></canvas>
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/measure_angle_icon.png"/>
-    <h1>AngleMeasurementPlugin</h1>
+    <h1>AngleMeasurementsPlugin</h1>
     <h2>Creating angle measurements programmatically</h2>
     <p>In this example, we're loading a BIM model from the file system, then programmatically creating a couple of
         angle measurements on the model's surface.</p>

diff --git a/examples/storeyViews_StoreyViewsPlugin_createStoreyMap.html b/examples/storeyViews_StoreyViewsPlugin_createStoreyMap.html
@@ -29,7 +29,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>Using createStoreyMap() to create a storey map PNG</h2>
+    <p>Using createStoreyMap() to create a storey map PNG</p>
     <h3>Components Used</h3>
     <ul>
         <li>

diff --git a/examples/storeyViews_StoreyViewsPlugin_createStoreyMap_height.html b/examples/storeyViews_StoreyViewsPlugin_createStoreyMap_height.html
@@ -28,7 +28,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>Using createStoreyMap() to create a storey map PNG</h2>
+    <p>Using createStoreyMap() to create a storey map PNG</p>
     <h3>Components Used</h3>
     <ul>
         <li>

diff --git a/examples/storeyViews_StoreyViewsPlugin_gotoStoreyCamera.html b/examples/storeyViews_StoreyViewsPlugin_gotoStoreyCamera.html
@@ -15,7 +15,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>Using gotoStoreyCamera() and showStoreyObjects()</h2>
+    <p>Using gotoStoreyCamera() and showStoreyObjects()</p>
     <p>Positioning the camera for an orthographic plan view, while showing only the objects within a given
         IfcBuildingStorey.</p>
     <h3>Components used</h3>

diff --git a/examples/storeyViews_StoreyViewsPlugin_gotoStoreyCamera2.html b/examples/storeyViews_StoreyViewsPlugin_gotoStoreyCamera2.html
@@ -15,7 +15,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>Using gotoStoreyCamera() and showStoreyObjects()</h2>
+    <p>Using gotoStoreyCamera() and showStoreyObjects()</p>
     <p>Positioning the camera for an orthographic plan view, while showing only the objects within a given
         IfcBuildingStorey.</p>
     <h3>Components used</h3>

diff --git a/examples/storeyViews_StoreyViewsPlugin_pickStoreyMap.html b/examples/storeyViews_StoreyViewsPlugin_pickStoreyMap.html
@@ -41,7 +41,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>Using createStoreyMap() and pickStoreyMap()</h2>
+    <p>Using createStoreyMap() and pickStoreyMap()</p>
     <h3>Components Used</h3>
     <ul>
         <li>

diff --git a/examples/storeyViews_StoreyViewsPlugin_recipe1.html b/examples/storeyViews_StoreyViewsPlugin_recipe1.html
@@ -30,7 +30,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>UX Recipe #1: using createStoreyMap() and pickStoreyMap()</h2>
+    <p>UX Recipe #1: using createStoreyMap() and pickStoreyMap()</p>
     <p>Click a room in the 2D plan to fit it within the 3D View.</p>
     <p>Click empty space in the 2D plan to fit the whole model.</p>
     <h3>Components Used</h3>

diff --git a/examples/storeyViews_StoreyViewsPlugin_showStoreyObjects.html b/examples/storeyViews_StoreyViewsPlugin_showStoreyObjects.html
@@ -15,7 +15,7 @@
 <div class="slideout-sidebar">
     <img class="info-icon" src="../assets/images/storey_views_icon.png"/>
     <h1>StoreyViewsPlugin</h1>
-    <h2>showStoreyObjects</h2>
+    <p>showStoreyObjects</p>
     <p>Showing only the objects within an IfcBuildingStorey</p>
     <h3>Components used</h3>
     <ul>

diff --git a/examplesDrafts/BIMOffline_glTF_Duplex.html b/examplesDrafts/BIMOffline_glTF_Duplex.html
@@ -20,7 +20,7 @@
                 position: absolute;
                 background-color: rgba(255, 255, 255, 0.2);
                 color: black;
-                top: 60px;
+                top: 80px;
                 z-index: 200000;
                 float: left;
                 left: 0;
@@ -112,6 +112,7 @@
 <div class="slideout-sidebar">
     <h1>GLTFLoaderPlugin</h1>
     <h2>Loading an IFC model from the file system</h2>
+    <h3>Stats</h3>
     <ul>
         <li>
             <div id="time">Loading JavaScript modules...</div>

diff --git a/examplesDrafts/BIMOffline_glTF_OTCConferenceCenter.html b/examplesDrafts/BIMOffline_glTF_OTCConferenceCenter.html
@@ -107,6 +107,7 @@
 <div class="slideout-sidebar">
     <h1>GLTFLoaderPlugin</h1>
     <h2>Loading an IFC model from the file system</h2>
+    <h3>Stats</h3>
     <ul>
         <li>
             <div id="time">Loading JavaScript modules...</div>

diff --git a/examplesDrafts/BIMOffline_glTF_Schependomlaan.html b/examplesDrafts/BIMOffline_glTF_Schependomlaan.html
@@ -111,6 +111,7 @@
 <div class="slideout-sidebar">
     <h1>GLTFLoaderPlugin</h1>
     <h2>Loading an IFC model from the file system</h2>
+    <h3>Stats</h3>
     <ul>
         <li>
             <div id="time">Loading JavaScript modules...</div>

diff --git a/examplesDrafts/BIMOffline_glTF_includeTypes_PlanView.html b/examplesDrafts/BIMOffline_glTF_includeTypes_PlanView.html
@@ -14,14 +14,14 @@
         /* ----------------------------------------------------------------------------------------------------------*/
 
         #treeViewContainer {
-            pointer-events: none;
+            pointer-events: all;
             height: 100%;
             overflow-y: scroll;
             overflow-x: hidden;
             position: absolute;
             background-color: rgba(255, 255, 255, 0.2);
             color: black;
-            top: 60px;
+            top: 80px;
             z-index: 200000;
             float: left;
             left: 0;

diff --git a/examplesDrafts/BIMOffline_glTF_objectDefaults.html b/examplesDrafts/BIMOffline_glTF_objectDefaults.html
@@ -102,6 +102,7 @@
     <h1>GLTFLoaderPlugin</h1>
     <h2>Overriding object appearances by IFC type</h2>
     <p>Configuring GLTFLoaderPlugin with our own map of initial default visual states for IFC objects</p>
+    <h3>Stats</h3>
     <ul>
         <li>
             <div id="time">Loading JavaScript modules...</div>