From 3e76cf7d63e5b226070d1945dd69ac03d2403964 Mon Sep 17 00:00:00 2001 From: Klevis Date: Fri, 16 Oct 2020 13:35:57 -0600 Subject: [PATCH] Adding help --- js/main.js | 7 +++++ main.html | 63 +++++++++++++++++++++++++++++++++++++ styles/main.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 149 insertions(+), 4 deletions(-) diff --git a/js/main.js b/js/main.js index 1ad1fd2..8df1d21 100644 --- 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 index a7c7c86..5543b0b 100644 --- a/main.html +++ b/main.html @@ -10,6 +10,69 @@
+ +
+
+

+ Introduction +
+ 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. +

+ +

+ Frame Selection +
+ 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. +

+ +

+ The Views +
+ 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. +

+ "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. +

+ +

+ Interactions +
+ 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. +

+ +

+ Animations +
+ Once you have selected a frame to decompose (see Frame Selection) 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. +

+
diff --git a/styles/main.css b/styles/main.css index f541350..20836c3 100644 --- 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; -} \ No newline at end of file +} + +#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; +}