Skip to content

Commit

Permalink
Issue #63 added an introduction page and FRED only accessable by pres…
Browse files Browse the repository at this point in the history 
…sing continue button
  • Loading branch information
@thompson318
thompson318 committed May 14, 2021
1 parent b3dbda1 commit 082088f
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 160 deletions.
7 changes: 7 additions & 0 deletions main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ def index():
"""
return render_template('index.html')

@app.route('/startfred', methods=['POST'])
def startfred():
"""
returns the fred page
"""
return render_template('fred.html')

@app.route('/defaultcontour', methods=['POST'])
def defaultcontour():
"""
Expand Down
29 changes: 29 additions & 0 deletions static/introduction.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
//========================================================================
// SciKit-SurgeryFRED Introduction
//========================================================================


function startfredo() {

console.log("starting fred");
fetch("/startfred", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"ok": 0
})
})
.then(resp => resp.text())
.then(data => {
console.log(data);
document.write('crumbs');
document.write(data);
})
.catch(err => {
console.log("error");
console.log("An error occured when trying to start fred", err.message);
window.alert("An error occured when trying to start fred");
})
}
2 changes: 0 additions & 2 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<script src="https://yui-s.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<script src="{{ url_for('static',filename='main.js') }}"></script>
<script src="{{ url_for('static',filename='game.js') }}"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap" rel="stylesheet">
</footer>
Expand Down
164 changes: 6 additions & 158 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,167 +14,15 @@
style="z-index:1; position:absolute; left:50px; top:10px;"/>
</div>


<div class="main" style"width:100%; overflow:hidden position:absolute; left:0px; top:100px">
<div id="image-box"
style="position:absolute; left:0px; top:120px;">
<img id="pre-operative-image" src = "static/brain512.png"
width="458px" height="512px" type="image/x-png"
style="z-index:1; position:absolute; left:50px; top:0px;"/>
<canvas id="pre-operative-canvas" width="1832px" height="2048px"
style="z-index:2; position:absolute; left:50px; top:0px; width:458px; height:512px">
</canvas>
<canvas id="intra-operative-contour" width="2048px" height="2048px"
style="z-index:3; position:absolute; left:650px; top:0px; width:512px; height:512px">
Browser doesn't support canvas's </canvas>
<canvas id="intra-operative-fiducials" width="2048px" height="2048px"
style="z-index:4; position:absolute; left:650px; top:0px; width:512px; height:512px"></canvas>

<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", style="align-items:left; position:absolute; left:1150px; top:-50px">
Actual TRE
<p id="actual-TRE"> - </p>
<div class="stathover">Target Registration Error, the difference between the actual target position in the intra-operative image and the position estimated by registration.</div>
</div>

<div id="actualfrediv" class="resultbox", style="align-items:left; position:absolute; left:1280px; top:-50px">
Actual FRE
<p id="actual-FRE"> - </p>
<div class="stathover">Fiducial Registration Error, the least squares residual error of the fiducial markers</div>
</div>

<div id="expectedtrediv" class="resultbox", style="align-items:left; position:absolute; left:1150px; top:020px">
Expected TRE
<p id="expected-TRE"> -</p>
<div class="stathover">Expected value of the Target Registration Error, a statistic calculated from expected value of the fiducial localisation error and the geometry of the fiducial markers and target.</div>
</div>

<div id="expectedfrediv" class="resultbox", style="align-items:left; position:absolute; left:1280px; top:20px">
Expected FRE
<p id="expected-FRE">-</p>
<div class="stathover">Expected value of Fiducial Registration Error, a statistic calculated from expected value of the fiducial localisation error. Increases in inverse proportion to the number of fiducial markers</div>
</div>

<div id="expectedflediv" class="resultbox", style="align-items:left; position:absolute; left:1150px; top:90px">
Expected FLE
<p id="expected-FLE">-</p>
<div class="stathover">Expected value of the Fiducial Localisation Error. The expected error when locating an individual fiducial marker.</div>
</div>


<div id="no-fidsdiv" class="resultbox", style="align-items:left; position:absolute; left:1280px; top:90px">
No. of Fids.
<p id="no-fids">0</p>
<div class="stathover">The number of fiducial markers placed.</div>
</div>

<div id="ableftdiv" class="scorebox", class="hidden" style="align-items:left; position:absolute; left:1150px; top:190px">
Ablations Left
<p id="repeats">-</p>
<div class="stathover">The number of ablations you have left before the game ends.</div>
</div>

<div id="tscorediv" class="scorebox", class="hidden" style="align-items:left; position:absolute; left:1280px; top:190px">
Total Score
<p id="totalscore">-</p>
<div class="stathover">The sum of all your scores so far.</div>
</div>

<div id="scorediv" class="scorebox", class="hidden" style="align-items:left; position:absolute; left:1150px; top:260px">
Last Score
<p id="lastscore">-</p>
<div class="stathover">The score for your last ablation. You score 1000 points for a complete ablation of the target, then points are deducted for the volume of damage to surrounding tissue.</div>
</div>
This is SciKit-SurgeryFRED, press the button to continue.

<div id="ablation_dial", style="position:absolute; left:1150px; top:350px"
class="gameelement" class="hidden"></div>
<input type="button" id="ablation_button" class="gameelement" class = "hidden" value="Fire" onclick="ablate();" style="position:absolute; left:1330px; top:390px" disabled = true class=gameelement />

<div class="form-popup" id="submitScoreForm" class = "hidden">
<h1>High Score</h1>
<p>You have a high score, enter your name to be recorded in the hall of fame.</p>
<label for="name"><b>Name</b></label>
<input type="text" name="name" id="nameid" required>
<button type="submit" class="btn" onclick="submitHighScore()">Submit</button>
<button type="button" class="btn cancel" onclick="closeSubmitScoreForm()">Cancel</button>
</div>

<div id="highScoreTable" style="position:absolute; left:200px; top:50px; border:2px solid rgb(49, 98, 158); width:400px">
<h2>Hall of Fame</h2>
<table id="highscoretable" >
<tr>
<td style="width:50px">
<p>Rank</p>
</td>

<td style="width:300px">
<p>Player Name</p>
</td>
<td style="width:50px">
<p>Score</p>
</td>

<tr>
<td>
<p id = "ranks">-</p>
</td>
<td>
<p id = "names">-</p>
</td>
<td>
<p id = "scores">-</p>
</td>
</tr>
</table>
</div>
<svg id="loader" class="hidden" viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>

<div style="margin-bottom: 2rem; position:absolute; left:650px;">
<input type="button" id="newtargetbutton" value="New Target" class="button" onclick="reset();" />
<input type="button" id="downloadbutton" value="Download Results" class="button" onclick="downloadResults();" />
<input type="button" id="plot_button" value="Plot Results" class="button" onclick="plotResults();" />
<input type="button" id="game_button" value="Play Game" class="button" onclick="gameMode();" />
<input type="button" id="go_to_fred" value="Continue" onclick="startfredo();" style="position:relative; left:0.5; top:390px" enabled = true />
</div>
</body>

</div>
<footer>
<script src="{{ url_for('static',filename='introduction.js') }}"></script>
</footer>

<div style="margin-bottom: 2rem; position:absolute; left:0px; top:80px">
<table id="plot-table" class="hidden">
<tr>
<td style="width:550px">
<div class = "result-plot" >
<img src = "static/fredlogo.svg" width = "450px">
<p id="result-text" style="font-size:1.8rem; font-weight: 300;text-align:center">0 Registrations</p>
</div></td>
<td style="width:550px">
<div id = "trevsfre-plot" class = "result-plot">
<canvas id="trevsfre-canvas" width = "450px" height ="300px">trevsfrecanvas</canvas>
</div></td>
<td style="width:550px">
<div id = "trevsexptre-plot" class = "result-plot">
<canvas id="trevsexptre-canvas" width = "450px" height ="300px">trevsexptrecanvas</canvas>
</div></td>
</tr>
<tr style="height:650px">
<td style="width:550px">
<div id = "trevsexpfre-plot" class = "result-plot">
<canvas id="trevsexpfre-canvas" width = "450px" height ="300px">trevsexptrecanvas</canvas>
</div></td>
<td style="width:550px">
<div id = "trevsfle-plot" class = "result-plot">
<canvas id="trevsfle-canvas" width = "450px" height ="300px">trevsflecanvas</canvas>
</div></td>
<td style="width:550px">
<div id = "trevsnofids-plot" class = "result-plot">
<canvas id="trevsnofids-canvas" width = "450px" height ="300px">trevsnofidscanvas</canvas>
</div></td>
</tr>
</table>
</div>
</body>
{% endblock %}

0 comments on commit 082088f

Please sign in to comment.