forked from r03ert0/reorient
-
Notifications
You must be signed in to change notification settings - Fork 2
/
doc.html
166 lines (150 loc) · 8.46 KB
/
doc.html
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
<!-- Do not add doctype here, it breaks the css -->
<head>
<title>Reorient documentation</title>
<link
rel="icon"
sizes="any"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='rgba(0, 80, 170,0.8)'/%3E%3C/svg%3E"
>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&family=VT323&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,100&family=VT323&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap" rel="stylesheet">
<style>
#menu {
float: right;
margin-right: 10px;
}
#menu img {
margin-left: 15px;
}
.mui {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 200;
}
#text-container{
max-width: 700px;
position: absolute;
left: 50%;
transform: translateX( -50% );
margin-top: 20px;
}
.doc {
font-family: "Roboto Mono", monospace;
font-size: 14px;
font-weight: 100;
line-height: 1.5rem;
text-indent: -0.5rem;
color: white;
text-align: left;
}
h1 {
font-family: "Roboto Mono", monospace;
font-weight: 500;
}
p {
margin-top: 1.5rem;
}
code {
font-family: "Source Code Pro", monospace;
/* font-family: 'VT323', monospace; */
}
img.button {
width: 0.9rem;
height: 0.9rem;
margin: 8px 2px;
vertical-align: middle;
cursor: pointer;
}
img.button:hover {
opacity: 0.5;
}
img.icon {
width: 1rem;
height: 1rem;
margin: 4px 2px;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div id="header">
<!-- Top-right menu bar -->
<div id="menu">
<img id="doc" class="button" title="documentation" src="img/doc.svg"/>
<a href="https://github.com/neuroanatomy/reorient/issues" target="_blank"><img id="bug" class="button" title="report a bug" src="img/bug.svg"/></a>
<a href="https://github.com/neuroanatomy/reorient" target="_blank"><img id="github" class="button" title="join our github project" style="width:15px;height:15px" src="img/github.svg"/></a>
</div>
<!-- Left-top logo -->
<div style="display:inline-block;margin:10px">
<a href="https://neuroanatomy.github.io" target="_blank" ><img src="./img/naat-bw.svg" style="width:30px;position:relative;top:12.5px;" /></a>
<a href="/" style="text-decoration:none">
<img style="height:28px;vertical-align:middle;padding-left:12px;;" src="img/reorient-logo.svg"/>
</a>
</div>
</div>
<!-- Documentation -->
<div id="text-container" style="display: flex">
<div class="doc">
<h1>Documentation</h1>
<p>
<b>Load & navigate data.</b> To load your data, simply drag and drop your nifti volume (.nii.gz or .nii) onto the upload box. Your MRI will appear in a stereotaxic viewer. Navigate through the slices using the sliders below each viewer.
</p>
<p>
<b>Translation.</b> Click into the viewer and drag your volume to the desired position. The 3 viewers are synchronised and updated in real-time as are the matrices displayed in the left panel. The translate tool is selected by default when the data has been loaded.
</p>
<p>
<b>Rotation.</b> Select the Rotate tool in the left panel, and then drag your volume clockwise or counterclockwise into the desired position. The 3 viewers are synchronised and updated in real-time as are the matrices.
</p>
<p>
<b>Cropping.</b> Click the Select tool in the left panel and drag the 4 boundaries of the selection box to enclose the desired part of the image. Note: The selection box is very small by default. An alert will remind you in case you forgot to adjust it.
</p>
<p>
<b>Saving.</b> Save the rotation matrix and the selection box together with your reoriented nifti volume for a fully reproducible workflow.<br />
<p2 style="font-weight: 400;">Save Rotation Matrix</p2> saves the affine matrix converting voxel indices to world coordinates of the current MRI to a text file. The matrix is saved in standard .mat format with 4 rows of 4 numbers separated by spaces and can easily be read using python or other languages. It can be used with <a href="https://github.com/neuroanatomy/reorient/blob/master/reorient.py" style="color:white;">reorient.py</a> to reproduce the reoriented nifti volume in an offline workflow.<br />
<p2 style="font-weight: 400;">Save Selection Box</p2> saves the current selection to a text file. The first row in the selection format represents the coordinates of the "minimum" corner, the second row the coordinates of the "maximum" corner. It can be used with <a href="https://github.com/neuroanatomy/reorient/blob/master/reorient.py" style="color:white;">reorient.py</a> to reproduce the reoriented nifti volume in an offline workflow.<br/>
<p2 style="font-weight: 400;">Save Nifti</p2> saves the transformed version of the current MRI in nifti format. The voxels are isotropic, and set to the median of the 3 voxel dimensions. Depending on the size of your volume, the save may take a moment without printing anything on screen. Patience 🙃
</p>
<p>
<p2 style="font-weight: 400;">Load Selection Box.</p2> Load the volume selection from a text file. It will update the crop box boundaries (which are only displayed when the Selection tool is selected).
</p>
<p>
<b>Load new rotation matrix.</b> Load an affine matrix from a text file, and replace the original_matrix in the current MRI by the loaded matrix.
</p>
<p>
<b>Append rotation matrix.</b> Load an affine matrix from a text file and append it to the one in the current MRI, i.e. change the original matrix into original matrix * loaded matrix.
</p>
<p>
<b>Reset matrix.</b> Reset the MRI affine matrix to its original value.<br />
</p>
<p>
<b>Reset selection.</b> Reset the selection box to its default size (small box at center).<br />
</p>
<p>
<b>Load new MRI file.</b> Simply reload the webpage to start working with a new MRI.<br />
</p>
<p>
<b>Reproduce the workflow offline.</b> Once you downloaded the rotation matrix and selection box, you will be able to reproduce the reoriented cropped MRI volume using the <a href="https://github.com/neuroanatomy/reorient/blob/master/reorient.py" style="color:white;">reorient.py</a> script. It will take the source MRI, the reorient.mat file, and the selection.txt file to produce the reoriented volume, as in <br /><code style="font-family: 'Share Tech Mono';line-height:2.1">python reorient.py input_nifti rotation_file selection_file output_nifti</code>.<br />
</p>
<p>
<b>How to cite reorient.</b> Heuer, K and Toro, R (2020). Reorient: A Web tool for reorienting and cropping MRI data. Journal of Open Source Software, 5(53), 2670. <a href="https://doi.org/10.21105/joss.02670" style="color:white">https://doi.org/10.21105/joss.02670.</a><br />🥰 Thank you. <br />
</p>
<img style="max-width:700px;padding-top:30px;padding-bottom:30px;" src="https://raw.githubusercontent.com/neuroanatomy/reorient/master/img/reorient_180mm_HeuerToro_web.png" alt=""/>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.1.1/dist/jquery.min.js"></script>
<!-- <script>window.jQuery || document.write('<script src="http://localhost/libs/jquery/3.1.1/jquery.min.js"><\/script>')</script> -->
<script src="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.js"></script>
<!-- <script>window.MUI || document.write('<script src="http://localhost/muijs/mui.js"><\/script>')</script> -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.css" />
<!-- <link rel="stylesheet" type="text/css" href="http://localhost/muijs/mui.css" /> -->
<link rel="stylesheet" type="text/css" href="reorient.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet" />
<script>
initUI(MUI);
</script>
</body>
</html>