Adding help

klevis-a · Oct 16, 2020 · 3e76cf7 · 3e76cf7
1 parent 93e6d2e
commit 3e76cf7
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 4 deletions.
diff --git a/js/main.js b/js/main.js
@@ -22,3 +22,10 @@ Promise.all([landmarkInit, timeSeriesCsvInit, humerusLoader]).then(([landmarkRes
     const timeSeriesInfo = new STA_CSV_Processor.TimeSeriesSTAInfo(timeSeriesResults);
     const sceneManager = new SceneManager(landmarksInfo, timeSeriesInfo, humerusGeometry);
 });
+
+// close button
+const closeBtn = document.getElementById('help-close-btn');
+const helpDiv = document.getElementById('help-div');
+const helpBtn = document.getElementById('help-btn');
+closeBtn.onclick = () => helpDiv.style.display = "none";
+helpBtn.onclick = () => helpDiv.style.display = "block";
diff --git a/main.html b/main.html
@@ -10,6 +10,69 @@
 </head>
 <body>
 <div id="topContainer">
+    <div id="help-btn-div"><a href="#" id="help-btn">?</a></div>
+    <div id="help-div">
+            <div id="close-container"><a href="#" class="close" id="help-close-btn"></a></div>
+            <p>
+            <b>Introduction</b>
+            <br/>
+            The purpose of this application is to highlight differences between various orientation decomposition
+            sequences for the humerus. Because the user interface is a work in progress, this documentation aims to
+            provide just enough guidance to allow for meaningful interaction with the application. Once the
+            application is more complete, these instructions will be updated.
+            </p>
+
+            <p>
+            <b>Frame Selection</b>
+            <br/>
+            The slider bar at the top of the page allows you to select the frame in the data capture which you would
+            like to analyze. Notice that as you change the frame number, the orientation of the semi-transparent humerus
+            in each view is updated. Once you have chosen a frame to analyze, click the downward facing arrow next to
+            the slider bar. This action decomposes the chosen humerus orientation in all 4 views.
+            </p>
+
+            <p>
+            <b>The Views</b>
+            <br/>
+            Each of the 4 views decomposes the humerus orientation according to the label shown in its lower-left or
+            lower-right corner. It's important to keep in mind that all decompositions express the orientation of the
+            humerus with respect to the torso. As such, the humerus is initially aligned with the torso coordinate
+            system (the triad in the middle of the view) and rotated to its final orientation via a sequence of
+            sub-rotations. The two decompositions of interest are "Intrinsic" and "Axial". The "SVD" and "One Step"
+            decomposition are ideas that I have experimented with, but will likely not be included in the final version
+            of the application.
+            <br/><br/>
+            "Intrinsic" performs a yx'y'' intrinsic Euler angle decomposition of the humerus
+            orientation according to guidelines provided by the International Society of Biomechanics. "Axial"
+            decomposes the orientation of the humerus into two sub-rotations. The first sub-rotation performs the
+            smallest rotation possible to align the long axis of the humerus from its initial state (aligned with the
+            torso) to its final state. The second sub-rotation performs a rotation around the long axis of the humerus
+            to account for axial rotation.
+            </p>
+
+            <p>
+            <b>Interactions</b>
+            <br/>
+            The views are linked to each other so as you rotate, pan, or zoom in one view, the same action happens in
+            the other 3 views. Rotate by dragging the left mouse button, zoom using the scroll-wheel, and pan by
+            dragging the right mouse button. To maximize one of the views, double-click on it. Another double-click
+            brings you back to the 4-pane view.
+            </p>
+
+            <p>
+            <b>Animations</b>
+            <br/>
+            Once you have selected a frame to decompose (see <b>Frame Selection</b>) the application allows you to
+            animate the sub-rotations associated with each decomposition. All the decompositions depicted contain at
+            most 3 sub-rotations. The state buttons at bottom of the application allow you to choose which sub-rotation
+            you would like to animate. Once you select a sub-rotation, the play/pause button and slide bar at the bottom
+            of the page provide control of the animation for the selected sub-rotation. Again, the views are linked - a
+            sub-rotation will be animated in all views. No animation will occur if a view does not contain the selected
+            sub-rotation. For example, axial decomposition contains only 2 sub-rotations, so nothing will happen in that
+            view when you animate sub-rotation #3. This portion of the user interface will likely change significantly
+            in the future.
+            </p>
+    </div>
     <div id="views">
         <canvas id="canvas"></canvas>
         <div id="view1" class="quarter">

diff --git a/styles/main.css b/styles/main.css
@@ -1,5 +1,5 @@
 body {
-    margin: 0px;
+    margin: 0;
     overflow: hidden;
     color: white;
     text-align: center;
@@ -38,8 +38,8 @@ body {
 }
 
 .zero {
-    width: 0%;
-    height: 0%;
+    width: 0;
+    height: 0;
 }
 
 #canvas {
@@ -90,4 +90,79 @@ body {
     padding: 5px;
     background-color: black;
     color: white;
-}
+}
+
+#help-div {
+    border-radius: 25px;
+    border: 2px solid #73AD21;
+    position: absolute;
+    background-color: white;
+    left: 30%;
+    top: 7.5%;
+    width: 40%;
+    height: 85%;
+    z-index: 10;
+    color: black;
+    text-align: left;
+    padding: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: auto;
+}
+
+.close {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    width: 32px;
+    height: 32px;
+    opacity: 0.3;
+}
+
+.close:hover {
+    opacity: 1;
+}
+
+.close:before, .close:after {
+    position: absolute;
+    left: 15px;
+    content: ' ';
+    height: 32px;
+    width: 2px;
+    background-color: #333;
+}
+
+.close:before {
+    transform: rotate(45deg);
+}
+
+.close:after {
+    transform: rotate(-45deg);
+}
+
+#close-container {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+#help-btn-div {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    z-index: 10;
+}
+
+#help-btn {
+    color: #666;
+    text-decoration: none;
+    vertical-align: middle;
+    font-size: x-large;
+    font-weight: bolder;
+}
+
+#help-btn:hover {
+    color: #000;
+}