Skip to content

Commit 213368e

Browse files
author
Christian Herz
committed
ENH: added lightbox for anatomical overview
- added DSC before and after registration - changed text on website
1 parent ede2d3a commit 213368e

12 files changed

+306
-8
lines changed

‎css/4cols.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* GRID OF THREE ============================================================================= */
2+
3+
4+
.span_3_of_3 {
5+
width: 100%;
6+
}
7+
8+
.span_2_of_3 {
9+
width: 66.13%;
10+
}
11+
12+
.span_1_of_3 {
13+
width: 32.26%;
14+
}
15+
16+
17+
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
18+
19+
@media only screen and (max-width: 480px) {
20+
.span_3_of_3 {
21+
width: 100%;
22+
}
23+
.span_2_of_3 {
24+
width: 100%;
25+
}
26+
.span_1_of_3 {
27+
width: 100%;
28+
}
29+
}

‎css/lightbox.css

+210
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/* Preload images */
2+
body:after {
3+
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
4+
display: none;
5+
}
6+
7+
.lightboxOverlay {
8+
position: absolute;
9+
top: 0;
10+
left: 0;
11+
z-index: 9999;
12+
background-color: black;
13+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14+
opacity: 0.8;
15+
display: none;
16+
}
17+
18+
.lightbox {
19+
position: absolute;
20+
left: 0;
21+
width: 100%;
22+
z-index: 10000;
23+
text-align: center;
24+
line-height: 0;
25+
font-weight: normal;
26+
}
27+
28+
.lightbox .lb-image {
29+
display: block;
30+
height: auto;
31+
max-width: inherit;
32+
-webkit-border-radius: 3px;
33+
-moz-border-radius: 3px;
34+
-ms-border-radius: 3px;
35+
-o-border-radius: 3px;
36+
border-radius: 3px;
37+
}
38+
39+
.lightbox a img {
40+
border: none;
41+
}
42+
43+
.lb-outerContainer {
44+
position: relative;
45+
background-color: white;
46+
*zoom: 1;
47+
width: 250px;
48+
height: 250px;
49+
margin: 0 auto;
50+
-webkit-border-radius: 4px;
51+
-moz-border-radius: 4px;
52+
-ms-border-radius: 4px;
53+
-o-border-radius: 4px;
54+
border-radius: 4px;
55+
}
56+
57+
.lb-outerContainer:after {
58+
content: "";
59+
display: table;
60+
clear: both;
61+
}
62+
63+
.lb-container {
64+
padding: 4px;
65+
}
66+
67+
.lb-loader {
68+
position: absolute;
69+
top: 43%;
70+
left: 0;
71+
height: 25%;
72+
width: 100%;
73+
text-align: center;
74+
line-height: 0;
75+
}
76+
77+
.lb-cancel {
78+
display: block;
79+
width: 32px;
80+
height: 32px;
81+
margin: 0 auto;
82+
background: url(../images/loading.gif) no-repeat;
83+
}
84+
85+
.lb-nav {
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
height: 100%;
90+
width: 100%;
91+
z-index: 10;
92+
}
93+
94+
.lb-container > .nav {
95+
left: 0;
96+
}
97+
98+
.lb-nav a {
99+
outline: none;
100+
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
101+
}
102+
103+
.lb-prev, .lb-next {
104+
height: 100%;
105+
cursor: pointer;
106+
display: block;
107+
}
108+
109+
.lb-nav a.lb-prev {
110+
width: 34%;
111+
left: 0;
112+
float: left;
113+
background: url(../images/prev.png) left 48% no-repeat;
114+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
115+
opacity: 0;
116+
-webkit-transition: opacity 0.6s;
117+
-moz-transition: opacity 0.6s;
118+
-o-transition: opacity 0.6s;
119+
transition: opacity 0.6s;
120+
}
121+
122+
.lb-nav a.lb-prev:hover {
123+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
124+
opacity: 1;
125+
}
126+
127+
.lb-nav a.lb-next {
128+
width: 64%;
129+
right: 0;
130+
float: right;
131+
background: url(../images/next.png) right 48% no-repeat;
132+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
133+
opacity: 0;
134+
-webkit-transition: opacity 0.6s;
135+
-moz-transition: opacity 0.6s;
136+
-o-transition: opacity 0.6s;
137+
transition: opacity 0.6s;
138+
}
139+
140+
.lb-nav a.lb-next:hover {
141+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
142+
opacity: 1;
143+
}
144+
145+
.lb-dataContainer {
146+
margin: 0 auto;
147+
padding-top: 5px;
148+
*zoom: 1;
149+
width: 100%;
150+
-moz-border-radius-bottomleft: 4px;
151+
-webkit-border-bottom-left-radius: 4px;
152+
border-bottom-left-radius: 4px;
153+
-moz-border-radius-bottomright: 4px;
154+
-webkit-border-bottom-right-radius: 4px;
155+
border-bottom-right-radius: 4px;
156+
}
157+
158+
.lb-dataContainer:after {
159+
content: "";
160+
display: table;
161+
clear: both;
162+
}
163+
164+
.lb-data {
165+
padding: 0 4px;
166+
color: #ccc;
167+
}
168+
169+
.lb-data .lb-details {
170+
width: 85%;
171+
float: left;
172+
text-align: left;
173+
line-height: 1.1em;
174+
}
175+
176+
.lb-data .lb-caption {
177+
font-size: 13px;
178+
font-weight: bold;
179+
line-height: 1em;
180+
}
181+
182+
.lb-data .lb-number {
183+
display: block;
184+
clear: left;
185+
padding-bottom: 1em;
186+
font-size: 12px;
187+
color: #999999;
188+
}
189+
190+
.lb-data .lb-close {
191+
display: block;
192+
float: right;
193+
width: 30px;
194+
height: 30px;
195+
background: url(../images/close.png) top right no-repeat;
196+
text-align: right;
197+
outline: none;
198+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
199+
opacity: 0.7;
200+
-webkit-transition: opacity 0.2s;
201+
-moz-transition: opacity 0.2s;
202+
-o-transition: opacity 0.2s;
203+
transition: opacity 0.2s;
204+
}
205+
206+
.lb-data .lb-close:hover {
207+
cursor: pointer;
208+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
209+
opacity: 1;
210+
}

‎css/style.css

+14
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,17 @@ position: relative;
5151
left: -20px;
5252
top: 33px;
5353
}
54+
55+
.btn {
56+
font-family: Arial;
57+
color: #ffffff;
58+
font-size: 20px;
59+
background: #252525;
60+
padding: 10px 20px 10px 20px;
61+
border: solid #ffffff 1px;
62+
text-decoration: none;
63+
}
64+
65+
.btn:hover {
66+
text-decoration: none;
67+
}

‎database.sqlite

96 KB
Binary file not shown.

‎images/anatomical_overview.png

290 KB
Loading

‎images/close.png

280 Bytes
Loading

‎images/loading.gif

8.28 KB
Loading

‎images/next.png

1.32 KB
Loading

‎images/prev.png

1.33 KB
Loading

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>QUANTIFICATION OF INTRAOP MOTION DURING MRI GUIDED TRANSPERINEAL PROSTATE BIOPSY</title> <meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site."> <meta name="keywords" content="responsive, grid, system, web design"> <meta http-equiv="cleartype" content="on"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/html5reset.css" media="all"> <link rel="stylesheet" href="css/col.css" media="all"> <link rel="stylesheet" href="css/2cols.css" media="all"> <link rel="stylesheet" href="css/3cols.css" media="all"> <link rel="stylesheet" href="css/style.css" media="all"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/sql.js"></script> <!--https://github.com/kripken/sql.js--> <script src="js/helpers.js"></script></head><body> <div class="section group"> <div class="col span_1_of_2"> <h1>QUANTIFICATION OF INTRAOP MOTION DURING MRI GUIDED TRANSPERINEAL PROSTATE BIOPSY</h1> </div> <div class="col span_1_of_2"> <img src="imgs/logo.png" style="float:right; max-width:70%;"> </div> </div> <div class="section group"> <div class="col span_1_of_3"> <img class="special" src="imgs/orangedot.png"><h2> ABOUT THIS SITE</h2> <p>This site contains the result of our intra-procedural prostate motion study. Verification of deformable registration results remains difficult due to misleading metrics such as target registration error (TRE) and dice coefficients. We decided to publish the whole set of data with respect to the guidelines of open science.</p> <div class="col span_1_of_2" style="width:48.2%;"> <a href="https://www.google.de/"><img src="imgs/code.png"></a> </div> <div class="col span_1_of_2" style="width:48.2%;"> <a href="https://www.google.de/"><img src="imgs/paper.png"></a> </div> <img class="special" src="imgs/pinkdot.png"><h2> WHAT YOU SEE</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus cursus eros id condimentum. Suspendisse congue nulla ut arcu rutrum suscipit. Sed pulvinar ut augue sit amet pretium. Proin condimentum maximus sodales. Ut vitae quam sollicitudin, porttitor orci eu, sagittis nisl. Fusce at nisi id lectus lacinia fringilla. Proin nec risus nunc.</p> </div> <div class="col span_2_of_3"> <div class="col span_1_of_3"> <p>PATIENT</p> <select id="patientDropDown" SIZE="1" onchange="setPatientId(this.options[this.selectedIndex].value);"> </select> </div> <div class="col span_1_of_3"> <p>NEEDLE IMAGE</p> <select id="needleDropDown" SIZE="1" onChange="setNeedleImage(this.options[this.selectedIndex].text);"> </select> </div> <div class="col span_1_of_3"> <p>REGISTRATION</p> <select id="registrationMode" SIZE="1" onChange="setRegistrationMode(this.options[this.selectedIndex].value);"> <option selected value=false>OFF</option> <option value=true>ON</option> </select> </div> <img id="imageToSwap" src="" style="float:right; width:100%;visibility:hidden"> </div> </div></body> </html>
1+
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Open-source platform for prostate motion tracking during in-bore targeted MRI-guided biopsy</title> <meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site."> <meta name="keywords" content="responsive, grid, system, web design"> <meta http-equiv="cleartype" content="on"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/html5reset.css" media="all"> <link rel="stylesheet" href="css/col.css" media="all"> <link rel="stylesheet" href="css/2cols.css" media="all"> <link rel="stylesheet" href="css/3cols.css" media="all"> <link rel="stylesheet" href="css/style.css" media="all"> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/sql.js"></script> <!--https://github.com/kripken/sql.js--> </head><body> <div class="section group"> <div class="col span_1_of_2"> <h1>Open-source platform for prostate motion tracking during in-bore targeted MRI-guided biopsy</h1> </div> <div class="col span_1_of_2"> <img src="imgs/logo.png" style="float:right; max-width:70%;"> </div> </div> <div class="section group"> <div class="col span_1_of_3"> <img class="special" src="imgs/orangedot.png"><h2> ABOUT THIS SITE</h2> <p>This site contains the visualization of the result of our intra-procedural prostate motion study for each dataset used in the evaluation. Verification of deformable registration results remains difficult, since metrics such as landmark registration error (LRE) and Dice ovelap coefficient (DSC) are often not sufficient to characterize the results of the registration. To provide a more complete characterization, we include these results before and after registration for the reader's reference. </p> <img class="special" src="imgs/pinkdot.png"><h2> WHAT YOU SEE</h2> <p>Panel on the right shows "flicker" interchanging views of the consecutive slices from the needle confirmation image volume and the moving image (when registration is "OFF"), and needle confirmation image volume and the registered image (when registration is "ON"). Patient and needle image selector allow to select a specific dataset used in the evaluation. Shown DSC values illustrate a comparison of the contoured gland of the first and the last needle confirmation image with and without registration. </p> <div class="col span_1_of_2" style="width:48.2%;"> <a href="https://www.google.de/"><img src="imgs/code.png"></a> <a href="https://www.google.de/"><img src="imgs/paper.png"></a> </div> <a class="btn" href="images/anatomical_overview.png" data-lightbox="example-1">Anatomical Overview</a> </div> <div class="col span_2_of_3"> <div class="col span_1_of_3"> <p>PATIENT</p> <select id="patientDropDown" SIZE="1" onchange="setPatientId(this.options[this.selectedIndex].value);"> </select> <div id="before"></div> <div id="after"></div> </div> <div class="col span_1_of_3"> <p>NEEDLE IMAGE</p> <select id="needleDropDown" SIZE="1" onChange="setNeedleImage(this.options[this.selectedIndex].text);"> </select> </div> <div class="col span_1_of_3" style="text-align:right"> <p style="text-align: right">REGISTRATION</p> <select id="registrationMode" SIZE="1" onChange="setRegistrationMode(this.options[this.selectedIndex].value);"> <option selected value=false>OFF</option> <option value=true>ON</option> </select> </div> <img id="imageToSwap" src="" style="float:right; width:100%;visibility:hidden"> </div> </div> <script src="js/helpers.js"></script> <script src="js/lightbox-plus-jquery.min.js"></script></body> </html>

‎js/helpers.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,24 @@ function setupPatients() {
3131
setPatientId(patientId.value);
3232
}
3333

34-
function setPatientId(selectedPatientID) {
35-
patientId = selectedPatientID;
36-
var contents = db.exec("SELECT imageId FROM images where caseId="+patientId);
34+
function setPatientId(selectedPatientId) {
35+
var contents = db.exec("SELECT imageId FROM images where caseId="+selectedPatientId);
3736
var dropdown = document.getElementById('needleDropDown');
3837
setupDropDown(dropdown, contents[0].values);
3938
updateView();
4039
var src = $('#imageToSwap').attr('src');
41-
src = src.replace(/Case[0-9]*_/, "Case"+patientId+"_");
40+
src = src.replace(/Case[0-9]*_/, "Case"+selectedPatientId+"_");
4241
$('#imageToSwap').attr('src', src);
42+
updateDSCForPatientId(selectedPatientId);
43+
}
44+
45+
function updateDSCForPatientId(patientId) {
46+
var contents = db.exec("SELECT before, after FROM DSC where caseId="+patientId);
47+
contents = contents[0].values[0];
48+
var before = contents[0];
49+
var after = contents[1];
50+
$('#before').text("DSC before registration: " + before);
51+
$('#after').text("DSC after registration: " + after);
4352
}
4453

4554
function updateView() {
@@ -74,9 +83,7 @@ function addOption(element, value) {
7483
function setRegistrationMode(useRegistration) {
7584
var src = $('#imageToSwap').attr('src');
7685
if(useRegistration == "true") {
77-
src = src.replace('before','after');
78-
console.log(useRegistration);
79-
86+
src = src.replace('before','after');
8087
} else {
8188
src = src.replace('after','before');
8289
}

0 commit comments

Comments
 (0)