-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
123 lines (112 loc) · 5.7 KB
/
Copy pathindex.html
File metadata and controls
123 lines (112 loc) · 5.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/style.css" />
<!-- empty favicon: suppress the browser's default /favicon.ico request (404) -->
<link rel="icon" href="data:," />
<title>EdgeReg — browser MRI registration</title>
</head>
<body>
<header>
<div class="row">
<strong class="brand">EdgeReg</strong>
<label for="sliceType">View</label>
<select id="sliceType" title="Slice layout applied to all three panels">
<option value="0">Axial</option>
<option value="1">Coronal</option>
<option value="2">Sagittal</option>
<option value="4">Render</option>
<option value="3" selected>A+C+S+R</option>
</select>
<label class="check" title="Remove excess neck from an image of the brain (niimath -robustfov) before registration">
<input type="checkbox" id="robustfovCheck" /> Robust FOV
</label>
<span class="spacer"></span>
<button id="aboutBtn">About</button>
</div>
</header>
<main id="panels">
<!-- Column 1: moving image (native space) — a preset picker + drop target -->
<section class="panel" data-slot="moving">
<div class="panel-head">
<span class="caption">Moving</span>
<select id="movingSelect" title="Choose a predefined moving image"></select>
<button class="infoBtn" id="infoMoving" title="Image header details" aria-label="Moving header info">ⓘ</button>
</div>
<div class="panel-canvas"><canvas id="glMoving"></canvas></div>
</section>
<!-- Column 2: stationary / template image — a preset picker + drop target -->
<section class="panel" data-slot="stationary">
<div class="panel-head">
<span class="caption">Template (stationary)</span>
<select id="stationarySelect" title="Choose a predefined stationary/template image"></select>
<button class="infoBtn" id="infoStationary" title="Image header details" aria-label="Template header info">ⓘ</button>
</div>
<div class="panel-canvas"><canvas id="glStationary"></canvas></div>
</section>
<!-- Column 3: resliced moving image (output of registration) — not editable -->
<section class="panel" data-slot="resliced">
<div class="panel-head">
<span class="caption">Resliced (moving → template)</span>
<span class="spacer"></span>
<button id="saveBtn" disabled title="Save the resliced image">Save</button>
<button class="infoBtn" id="infoResliced" title="Image header details" aria-label="Resliced header info">ⓘ</button>
</div>
<div class="panel-canvas"><canvas id="glResliced"></canvas></div>
</section>
</main>
<footer>
<div class="statusbar">
<span class="statusleft">
<span class="drophint">Drag & drop a NIfTI image or a DICOM folder onto the Moving or Template panel</span>
<span id="location"></span>
</span>
<span class="statusright">
<div id="loadingCircle" class="loading-circle"></div>
<label id="statusMsg" class="hidden"></label>
</span>
</div>
</footer>
<!-- Bound to whichever panel triggered a multi-series DICOM conversion -->
<select id="dicomPick" class="hidden" aria-label="Pick a converted NIfTI series"></select>
<dialog id="aboutDialog">
<form method="dialog">
<h3><a href="https://github.com/rordenlab/EdgeReg" target="_blank" rel="noopener">EdgeReg</a></h3>
<p>Rigid/affine MRI registration, <strong>entirely in your browser</strong> — no upload, no server.
Register a <em>moving</em> image to a <em>stationary</em> template and view the resliced result.</p>
<p>Registration runs
<a href="https://github.com/rordenlab/niimath" target="_blank" rel="noopener">niimath</a>'s
affine <code>-allineate</code> engine (<a href="https://afni.nimh.nih.gov/" target="_blank"
rel="noopener">3dAllineate</a>-style, BSD) in WebAssembly, computing the moving→stationary
transform and reslicing the moving image into template space:</p>
<pre>niimath moving [-robustfov] -allineate template -gz 0 resliced</pre>
<ul>
<li><strong>Moving</strong> (left) — the image being registered; native resolution.</li>
<li><strong>Template</strong> (middle, stationary) — the fixed reference.</li>
<li><strong>Resliced</strong> (right) — the moving image after registration, in template space.
The middle and right panels share crosshairs (bidirectional sync).</li>
</ul>
<p>Drag a NIfTI image (or a DICOM folder) onto the Moving or Template panel to replace it;
registration re-runs automatically. The <strong>Robust FOV</strong> checkbox crops the
moving image's neck/inferior slices (<code>-robustfov</code>) before registration.</p>
<p>Visualization uses <a href="https://niivue.com/" target="_blank" rel="noopener">NiiVue</a>;
DICOM import uses <a href="https://github.com/rordenlab/dcm2niix" target="_blank" rel="noopener">dcm2niix</a>.</p>
<p><small>Built on the BSD-2 build of
<a href="https://github.com/rordenlab/niimath" target="_blank" rel="noopener">niimath</a>, so this app is
licensed <strong>BSD-2-Clause</strong>. Requires a browser with WebGPU
(recent desktop Chrome, Edge, or Safari).</small></p>
<button autofocus value="default">Close</button>
</form>
</dialog>
<dialog id="infoDialog">
<form method="dialog">
<h3 id="infoTitle">Image header</h3>
<pre id="infoText"></pre>
<button autofocus value="default">Close</button>
</form>
</dialog>
<script type="module" src="/src/main.ts"></script>
</body>
</html>