Issue #12 got hover working

SciKit-Surgery · Nov 27, 2020 · 5c0ccf5 · 5c0ccf5
1 parent 8b1f730
commit 5c0ccf5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/static/main.css b/static/main.css
@@ -58,6 +58,18 @@ body {
   opacity: 0.2;
 }
 
+.resultbox
+{
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  margin: 10px;
+  float: left;
+  padding: 30px;
+  text-align: center;
+  background-color: lightgray;
+}
+
 #pre-operative-image {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin-right: 20px; float: left;

diff --git a/static/main.js b/static/main.js
@@ -43,6 +43,11 @@ const noFidsText = document.getElementById("no-fids");
 // Add event listeners
 preOpCanvas.addEventListener("click", preOpImageClick)
 intraOpTargetCanvas.addEventListener("click", intraOpImageClick)
+actualTREText.addEventListener("onmouseover", trehover)
+
+function trehover(){
+	console.log("Hovering on TRE");
+}
 
 async function loadDefaultContour() {
   console.log("Default contour");

diff --git a/templates/index.html b/templates/index.html
@@ -32,8 +32,10 @@ <h3>SciKit-SurgeryFRED</h3>
 
     <canvas id="intra-operative-target" width="2048px" height="2048px"
       style="z-index:5; position:absolute; left:650px; top:0px; width:512px; height:512px"></canvas>
-
+
+    <div id="actualtrediv" class="resultbox" onmouseover="trehover()">
     <p id="actual-TRE" style="align-items:left; position:absolute; left:1150px; top:0px; width:200px">Actual TRE: -</p>
+    </div>
     <p id="actual-FRE" style="align-items:right; position:absolute; left:1150px; top:60px; width:200px">Actual FRE: -</p>
     <p id="expected-TRE" style="align-items:right; position:absolute; left:1150px; top:120px; width:200px">Expected TRE: -</p>
     <p id="expected-FRE" style="align-items:right; position:absolute; left:1150px; top:180px; width:200px">Expected FRE: -</p>