Mercurial > hg > orthanc

comparison OrthancExplorer/explorer.html @ 3102:9b18c8d4d459

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
'fix' for Orthanc issue #21: added a select file button + a warning specific for Firefox users
author Alain Mazy <alain@mazy.be>
date Thu, 10 Jan 2019 10:10:26 +0100
parents 703d1e848907
children 6aa8d90aeee5
comparison
equal deleted inserted replaced
3069:3db9697a0a58 3102:9b18c8d4d459
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <html> 3 <html>
4 <head> 4
5 <meta charset="utf-8"> 5 <head>
6 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta charset="utf-8">
7 <title>Orthanc Explorer</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 8 <title>Orthanc Explorer</title>
9 <link rel="stylesheet" href="libs/jquery.mobile.min.css" /> 9
10 <link rel="stylesheet" href="libs/jqtree.css" /> 10 <link rel="stylesheet" href="libs/jquery.mobile.min.css" />
11 <link rel="stylesheet" href="libs/jquery.mobile.simpledialog.min.css" /> 11 <link rel="stylesheet" href="libs/jqtree.css" />
12 <link rel="stylesheet" href="libs/jquery-file-upload/css/style.css" /> 12 <link rel="stylesheet" href="libs/jquery.mobile.simpledialog.min.css" />
13 <link rel="stylesheet" href="libs/jquery-file-upload/css/jquery.fileupload-ui.css" /> 13 <link rel="stylesheet" href="libs/jquery-file-upload/css/style.css" />
14 <link rel="stylesheet" href="libs/slimbox2/slimbox2.css" /> 14 <link rel="stylesheet" href="libs/jquery-file-upload/css/jquery.fileupload-ui.css" />
15 15 <link rel="stylesheet" href="libs/slimbox2/slimbox2.css" />
16 <script src="libs/jquery.min.js"></script> 16
17 <script src="libs/jquery.mobile.min.js"></script> 17 <script src="libs/jquery.min.js"></script>
18 <script src="libs/jqm.page.params.js"></script> 18 <script src="libs/jquery.mobile.min.js"></script>
19 <script src="libs/tree.jquery.js"></script> 19 <script src="libs/jqm.page.params.js"></script>
20 <script src="libs/date.js"></script> 20 <script src="libs/tree.jquery.js"></script>
21 <script src="libs/jquery.mobile.simpledialog2.js"></script> 21 <script src="libs/date.js"></script>
22 <script src="libs/slimbox2.js"></script> 22 <script src="libs/jquery.mobile.simpledialog2.js"></script>
23 <script src="libs/jquery.blockui.js"></script> 23 <script src="libs/slimbox2.js"></script>
24 24 <script src="libs/jquery.blockui.js"></script>
25 <!-- https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin --> 25
26 <script src="libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script> 26 <!-- https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin -->
27 <script src="libs/jquery-file-upload/js/jquery.iframe-transport.js"></script> 27 <script src="libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
28 <script src="libs/jquery-file-upload/js/jquery.fileupload.js"></script> 28 <script src="libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
29 29 <script src="libs/jquery-file-upload/js/jquery.fileupload.js"></script>
30 <link rel="stylesheet" href="explorer.css" /> 30
31 <script src="file-upload.js"></script> 31 <link rel="stylesheet" href="explorer.css" />
32 <script src="explorer.js"></script> 32 <script src="file-upload.js"></script>
33 <script src="query-retrieve.js"></script> 33 <script src="explorer.js"></script>
34 <script src="../plugins/explorer.js"></script> 34 <script src="query-retrieve.js"></script>
35 </head> 35 <script src="../plugins/explorer.js"></script>
36 <body> 36 </head>
37 <div data-role="page" id="lookup" > 37
38 <div data-role="header" > 38 <body>
39 <h1><span class="orthanc-name"></span>Lookup studies</h1> 39 <div data-role="page" id="lookup">
40 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left"> 40 <div data-role="header">
41 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a> 41 <h1><span class="orthanc-name"></span>Lookup studies</h1>
42 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a> 42 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
43 </div> 43 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
44 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right"> 44 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
45 <a href="#upload" data-icon="gear" data-role="button">Upload</a> 45 </div>
46 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a> 46 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
47 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a> 47 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
48 </div> 48 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
49 </div> 49 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
50 <div data-role="content"> 50 </div>
51 <form data-ajax="false" id="lookup-form"> 51 </div>
52 <div data-role="fieldcontain"> 52 <div data-role="content">
53 <label for="lookup-patient-id">Patient ID:</label> 53 <form data-ajax="false" id="lookup-form">
54 <input type="text" name="lookup-patient-id" id="lookup-patient-id" value="" /> 54 <div data-role="fieldcontain">
55 </div> 55 <label for="lookup-patient-id">Patient ID:</label>
56 56 <input type="text" name="lookup-patient-id" id="lookup-patient-id" value="" />
57 <div data-role="fieldcontain"> 57 </div>
58 <label for="lookup-patient-name">Patient Name:</label> 58
59 <input type="text" name="lookup-patient-name" id="lookup-patient-name" value="" /> 59 <div data-role="fieldcontain">
60 </div> 60 <label for="lookup-patient-name">Patient Name:</label>
61 61 <input type="text" name="lookup-patient-name" id="lookup-patient-name" value="" />
62 <div data-role="fieldcontain"> 62 </div>
63 <label for="lookup-accession-number">Accession Number:</label> 63
64 <input type="text" name="lookup-accession-number" id="lookup-accession-number" value="" /> 64 <div data-role="fieldcontain">
65 </div> 65 <label for="lookup-accession-number">Accession Number:</label>
66 66 <input type="text" name="lookup-accession-number" id="lookup-accession-number" value="" />
67 <div data-role="fieldcontain"> 67 </div>
68 <label for="lookup-study-description">Study Description:</label> 68
69 <input type="text" name="lookup-study-description" id="lookup-study-description" value="" /> 69 <div data-role="fieldcontain">
70 </div> 70 <label for="lookup-study-description">Study Description:</label>
71 71 <input type="text" name="lookup-study-description" id="lookup-study-description" value="" />
72 <div data-role="fieldcontain"> 72 </div>
73 <label for="lookup-study-date">Study Date:</label> 73
74 <select name="lookup-study-date" id="lookup-study-date"> 74 <div data-role="fieldcontain">
75 </select> 75 <label for="lookup-study-date">Study Date:</label>
76 </div> 76 <select name="lookup-study-date" id="lookup-study-date">
77 77 </select>
78 <fieldset class="ui-grid-b"> 78 </div>
79 <div class="ui-block-a"> 79
80 <a href="#find-patients" data-role="button" data-theme="b" data-direction="reverse">All patients</a> 80 <fieldset class="ui-grid-b">
81 </div> 81 <div class="ui-block-a">
82 <div class="ui-block-b"> 82 <a href="#find-patients" data-role="button" data-theme="b" data-direction="reverse">All patients</a>
83 <a href="#find-studies" data-role="button" data-theme="b" data-direction="reverse">All studies</a> 83 </div>
84 </div> 84 <div class="ui-block-b">
85 <div class="ui-block-c"> 85 <a href="#find-studies" data-role="button" data-theme="b" data-direction="reverse">All studies</a>
86 <button id="lookup-submit" type="submit" data-theme="e">Do lookup</button> 86 </div>
87 </div> 87 <div class="ui-block-c">
88 </fieldset> 88 <button id="lookup-submit" type="submit" data-theme="e">Do lookup</button>
89 </div>
90 </fieldset>
91 <div>&nbsp;</div>
92 </form>
93 <div id="lookup-result">
94 <div id="lookup-alert">
95 <div class="ui-bar ui-bar-e">
96 <h3>Warning:</h3> Your lookup led to many results!
97 Showing only <span id="lookup-count">?</span> studies to
98 avoid performance issue. Please make your query more
99 specific, then relaunch the lookup.
100 </div>
89 <div>&nbsp;</div> 101 <div>&nbsp;</div>
90 </form> 102 </div>
91 <div id="lookup-result">
92 <div id="lookup-alert">
93 <div class="ui-bar ui-bar-e">
94 <h3>Warning:</h3> Your lookup led to many results!
95 Showing only <span id="lookup-count">?</span> studies to
96 avoid performance issue. Please make your query more
97 specific, then relaunch the lookup.
98 </div>
99 <div>&nbsp;</div>
100 </div>
101 <ul data-role="listview" data-inset="true" data-filter="true">
102 </ul>
103 </div>
104 </div>
105 </div>
106
107 <div data-role="page" id="find-patients" >
108 <div data-role="header" >
109 <h1><span class="orthanc-name"></span>All patients</h1>
110 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
111 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
112 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
113 </div>
114 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
115 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
116 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
117 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
118 </div>
119 </div>
120 <div data-role="content">
121 <div id="alert-patients">
122 <div class="ui-bar ui-bar-e">
123 <h3>Warning:</h3> This is a large Orthanc server. Showing
124 only <span id="count-patients">?</span> patients to avoid
125 performance issue. Make sure to use lookup if targeting
126 specific patients!
127 </div>
128 <div>&nbsp;</div>
129 </div>
130 <ul id="all-patients" data-role="listview" data-inset="true" data-filter="true">
131 </ul>
132 </div>
133 </div>
134
135 <div data-role="page" id="find-studies" >
136 <div data-role="header" >
137 <h1><span class="orthanc-name"></span>All studies</h1>
138 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
139 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
140 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
141 </div>
142 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
143 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
144 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
145 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
146 </div>
147 </div>
148 <div data-role="content">
149 <div id="alert-studies">
150 <div class="ui-bar ui-bar-e">
151 <h3>Warning:</h3> This is a large Orthanc server. Showing
152 only <span id="count-studies">?</span> studies to avoid
153 performance issue. Make sure to use lookup if targeting
154 specific studies!
155 </div>
156 <div>&nbsp;</div>
157 </div>
158 <ul id="all-studies" data-role="listview" data-inset="true" data-filter="true">
159 </ul>
160 </div>
161 </div>
162
163 <div data-role="page" id="upload">
164 <div data-role="header" >
165 <h1><span class="orthanc-name"></span>Upload DICOM files</h1>
166 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
167 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
168 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
169 </div>
170 </div>
171 <div data-role="content">
172 <div style="display:none">
173 <input id="fileupload" type="file" name="files[]" data-url="../instances/" multiple>
174 </div>
175 <p>
176 <ul data-role="listview" data-inset="true">
177 <li data-icon="arrow-r" data-theme="e"><a href="#" id="upload-button">Start the upload</a></li>
178 <!--li data-icon="gear" data-theme="e"><a href="#" id="upload-abort" class="ui-disabled">Abort the current upload</a></li-->
179 <li data-icon="delete" data-theme="e"><a href="#" id="upload-clear">Clear the pending uploads</a></li>
180 </ul>
181 <div id="progress" class="ui-corner-all">
182 <span class="bar ui-corner-all"></span>
183 <div class="label"></div>
184 </div>
185 </p>
186 <ul id="upload-list" data-role="listview" data-inset="true">
187 <li data-role="list-divider">Drag and drop DICOM files here</li>
188 </ul>
189 </div>
190 </div>
191
192 <div data-role="page" id="patient" >
193 <div data-role="header" >
194 <h1><span class="orthanc-name"></span>Patient</h1>
195 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
196 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
197 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
198 </div>
199 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
200 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
201 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
202 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
203 </div>
204 </div>
205 <div data-role="content">
206 <div class="ui-grid-a">
207 <div class="ui-block-a" style="width:30%">
208 <div style="padding-right:10px">
209 <ul data-role="listview" data-inset="true" data-theme="a" id="patient-info">
210 </ul>
211 <p>
212 <div class="switch-container">
213 <select name="protection" id="protection" data-role="slider">
214 <option value="off">Unprotected</option>
215 <option value="on">Protected</option>
216 </select>
217 </div>
218 </p>
219 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
220 <li data-role="list-divider">Interact</li>
221 <li data-icon="delete"><a href="#" id="patient-delete">Delete this patient</a></li>
222 <li data-icon="forward"><a href="#" id="patient-store">Send to remote modality</a></li>
223 <li data-icon="star"><a href="#" id="patient-anonymize">Anonymize</a></li>
224 </ul>
225
226 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
227 <li data-role="list-divider">Access</li>
228 <li data-icon="info" data-theme="e" style="display:none">
229 <a href="#" id="patient-anonymized-from">Before anonymization</a>
230 </li>
231 <li data-icon="info" data-theme="e" style="display:none">
232 <a href="#" id="patient-modified-from">Before modification</a>
233 </li>
234 <li data-icon="gear"><a href="#" id="patient-archive">Download ZIP</a></li>
235 <li data-icon="gear"><a href="#" id="patient-media">Download DICOMDIR</a></li>
236 </ul>
237 </div>
238 </div>
239 <div class="ui-block-b" style="width:70%">
240 <div style="padding:10px">
241 <ul id="list-studies" data-role="listview" data-inset="true" data-filter="true">
242 </ul>
243 </div>
244 </div>
245 </div>
246 </div>
247 </div>
248
249 <div data-role="page" id="study">
250 <div data-role="header">
251 <h1>
252 <span class="orthanc-name"></span>
253 <a href="#" class="patient-link">Patient</a> &raquo;
254 Study
255 </h1>
256 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
257 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
258 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
259 </div>
260 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
261 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
262 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
263 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
264 </div>
265 </div>
266 <div data-role="content">
267 <div class="ui-grid-a">
268 <div class="ui-block-a" style="width:30%">
269 <div style="padding-right:10px">
270 <ul data-role="listview" data-inset="true" data-theme="a" id="study-info">
271 </ul>
272
273 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
274 <li data-role="list-divider">Interact</li>
275 <li data-icon="delete"><a href="#" id="study-delete">Delete this study</a></li>
276 <li data-icon="forward"><a href="#" id="study-store">Send to DICOM modality</a></li>
277 <li data-icon="star"><a href="#" id="study-anonymize">Anonymize</a></li>
278 </ul>
279
280 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
281 <li data-role="list-divider">Access</li>
282 <li data-icon="info" data-theme="e" style="display:none">
283 <a href="#" id="study-anonymized-from">Before anonymization</a>
284 </li>
285 <li data-icon="info" data-theme="e" style="display:none">
286 <a href="#" id="study-modified-from">Before modification</a>
287 </li>
288 <li data-icon="gear"><a href="#" id="study-archive">Download ZIP</a></li>
289 <li data-icon="gear"><a href="#" id="study-media">Download DICOMDIR</a></li>
290 </ul>
291 </div>
292 </div>
293 <div class="ui-block-b" style="width:70%">
294 <div style="padding:10px">
295 <ul id="list-series" data-role="listview" data-inset="true" data-filter="true">
296 </ul>
297 </div>
298 </div>
299 </div>
300 </div>
301 </div>
302
303 <div data-role="page" id="series">
304 <div data-role="header">
305 <h1>
306 <span class="orthanc-name"></span>
307 <a href="#" class="patient-link">Patient</a> &raquo;
308 <a href="#" class="study-link">Study</a> &raquo;
309 Series
310 </h1>
311 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
312 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
313 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
314 </div>
315 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
316 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
317 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
318 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
319 </div>
320 </div>
321 <div data-role="content">
322 <div class="ui-grid-a">
323 <div class="ui-block-a" style="width:30%">
324 <div style="padding-right:10px">
325 <ul data-role="listview" data-inset="true" data-theme="a" id="series-info">
326 </ul>
327
328 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
329 <li data-role="list-divider">Interact</li>
330 <li data-icon="delete"><a href="#" id="series-delete">Delete this series</a></li>
331 <li data-icon="forward"><a href="#" id="series-store">Send to DICOM modality</a></li>
332 <li data-icon="star"><a href="#" id="series-anonymize">Anonymize</a></li>
333 </ul>
334
335 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
336 <li data-role="list-divider">Access</li>
337 <li data-icon="info" data-theme="e" style="display:none">
338 <a href="#" id="series-anonymized-from">Before anonymization</a>
339 </li>
340 <li data-icon="info" data-theme="e" style="display:none">
341 <a href="#" id="series-modified-from">Before modification</a>
342 </li>
343 <li data-icon="search"><a href="#" id="series-preview">Preview this series</a></li>
344 <li data-icon="gear"><a href="#" id="series-archive">Download ZIP</a></li>
345 <li data-icon="gear"><a href="#" id="series-media">Download DICOMDIR</a></li>
346 </ul>
347 </div>
348 </div>
349 <div class="ui-block-b" style="width:70%">
350 <div style="padding:10px">
351 <ul id="list-instances" data-role="listview" data-inset="true" data-filter="true">
352 </ul>
353 </div>
354 </div>
355 </div>
356 </div>
357 </div>
358
359 <div data-role="page" id="instance">
360 <div data-role="header">
361 <h1>
362 <span class="orthanc-name"></span>
363 <a href="#" class="patient-link">Patient</a> &raquo;
364 <a href="#" class="study-link">Study</a> &raquo;
365 <a href="#" class="series-link">Series</a> &raquo;
366 Instance
367 </h1>
368 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
369 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
370 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
371 </div>
372 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
373 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
374 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
375 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
376 </div>
377 </div>
378 <div data-role="content">
379 <div class="ui-grid-a">
380 <div class="ui-block-a" style="width:30%">
381 <div style="padding-right:10px">
382 <ul data-role="listview" data-inset="true" data-theme="a" id="instance-info">
383 </ul>
384
385 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
386 <li data-role="list-divider">Interact</li>
387 <li data-icon="delete"><a href="#" id="instance-delete">Delete this instance</a></li>
388 <li data-icon="forward"><a href="#" id="instance-store">Send to DICOM modality</a></li>
389 </ul>
390
391 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
392 <li data-role="list-divider">Access</li>
393 <li data-icon="info" data-theme="e" style="display:none">
394 <a href="#" id="instance-anonymized-from">Before anonymization</a>
395 </li>
396 <li data-icon="info" data-theme="e" style="display:none">
397 <a href="#" id="instance-modified-from">Before modification</a>
398 </li>
399 <li data-icon="arrow-d"><a href="#" id="instance-download-dicom">Download the DICOM file</a></li>
400 <li data-icon="arrow-d"><a href="#" id="instance-download-json">Download the JSON file</a></li>
401 <li data-icon="search"><a href="#" id="instance-preview">Preview the instance</a></li>
402 </ul>
403 </div>
404 </div>
405 <div class="ui-block-b" style="width:70%">
406 <div style="padding:10px">
407 <div class="ui-body ui-body-b">
408 <h1>DICOM Tags</h1>
409 <p align="right">
410 <input type="checkbox" id="show-tag-name" checked="checked" class="custom" data-mini="true" />
411 <label for="show-tag-name">Show tag description</label>
412 </p>
413 <div id="dicom-tree"></div>
414 </div>
415 </div>
416 </div>
417 </div>
418 </div>
419 </div>
420
421 <div data-role="page" id="plugins" >
422 <div data-role="header" >
423 <h1><span class="orthanc-name"></span>Plugins</h1>
424 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
425 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
426 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
427 </div>
428 </div>
429 <div data-role="content">
430 <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true">
431 </ul>
432 </div>
433 </div>
434
435 <div data-role="page" id="query-retrieve" >
436 <div data-role="header" >
437 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (1/4)</h1>
438 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
439 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
440 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
441 </div>
442 </div>
443 <div data-role="content">
444 <form data-ajax="false">
445 <div data-role="fieldcontain">
446 <label for="qr-server">DICOM server:</label>
447 <select name="qr-server" id="qr-server">
448 </select>
449 </div>
450
451 <div data-role="fieldcontain" id="qr-fields">
452 <fieldset data-role="controlgroup">
453 <legend>Field of interest:</legend>
454 <input type="radio" name="qr-field" id="qr-patient-id" value="PatientID" checked="checked" />
455 <label for="qr-patient-id">Patient ID</label>
456 <input type="radio" name="qr-field" id="qr-patient-name" value="PatientName" />
457 <label for="qr-patient-name">Patient Name</label>
458 <input type="radio" name="qr-field" id="qr-accession-number" value="AccessionNumber" />
459 <label for="qr-accession-number">Accession Number</label>
460 <input type="radio" name="qr-field" id="qr-study-description" value="StudyDescription" />
461 <label for="qr-study-description">Study Description</label>
462 </fieldset>
463 </div>
464
465 <div data-role="fieldcontain">
466 <label for="qr-value">Value for this field:</label>
467 <input type="text" name="qr-value" id="qr-value" value="*" />
468 </div>
469
470 <div data-role="fieldcontain">
471 <label for="qr-date">Study date:</label>
472 <select name="qr-date" id="qr-date">
473 </select>
474 </div>
475
476 <div data-role="fieldcontain" id="qr-modalities">
477 <div data-role="fieldcontain">
478 <fieldset data-role="controlgroup" data-type="horizontal">
479 <legend>Modalities:</legend>
480 <input type="checkbox" name="CR" id="qr-cr" class="custom" /> <label for="qr-cr">CR</label>
481 <input type="checkbox" name="CT" id="qr-ct" class="custom" /> <label for="qr-ct">CT</label>
482 <input type="checkbox" name="MR" id="qr-mr" class="custom" /> <label for="qr-mr">MR</label>
483 <input type="checkbox" name="NM" id="qr-nm" class="custom" /> <label for="qr-nm">NM</label>
484 <input type="checkbox" name="PT" id="qr-pt" class="custom" /> <label for="qr-pt">PT</label>
485 <input type="checkbox" name="US" id="qr-us" class="custom" /> <label for="qr-us">US</label>
486 <input type="checkbox" name="XA" id="qr-xa" class="custom" /> <label for="qr-xa">XA</label>
487 <input type="checkbox" name="DR" id="qr-dr" class="custom" /> <label for="qr-dr">DR</label>
488 <input type="checkbox" name="DX" id="qr-dx" class="custom" /> <label for="qr-dx">DX</label>
489 </fieldset>
490 </div>
491 </div>
492
493 <fieldset class="ui-grid-a">
494 <div class="ui-block-a">
495 <button id="qr-echo" data-theme="a">Test Echo</button>
496 </div>
497 <div class="ui-block-b">
498 <button id="qr-submit" type="submit" data-theme="b">Search studies</button>
499 </div>
500 </fieldset>
501 </form>
502 </div>
503 </div>
504
505
506 <div data-role="page" id="query-retrieve-2" >
507 <div data-role="header" >
508 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (2/4)</h1>
509 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
510 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
511 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
512 </div>
513 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
514 </div>
515 <div data-role="content">
516 <ul data-role="listview" data-inset="true" data-filter="true" data-split-icon="arrow-d" data-split-theme="b">
517 </ul>
518 </div>
519 </div>
520
521
522 <div data-role="page" id="query-retrieve-3" >
523 <div data-role="header" >
524 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (3/4)</h1>
525 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
526 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
527 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
528 </div>
529 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
530 </div>
531 <div data-role="content">
532 <ul data-role="listview" data-inset="true" data-filter="true"> 103 <ul data-role="listview" data-inset="true" data-filter="true">
533 </ul> 104 </ul>
534 </div> 105 </div>
535 </div> 106 </div>
536 107 </div>
537 108
538 <div data-role="page" id="query-retrieve-4" > 109 <div data-role="page" id="find-patients">
539 <div data-role="header" > 110 <div data-role="header">
540 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (4/4)</h1> 111 <h1><span class="orthanc-name"></span>All patients</h1>
541 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left"> 112 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
542 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a> 113 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
543 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a> 114 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
544 </div> 115 </div>
545 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a> 116 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
546 </div> 117 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
547 118 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
548 <div data-role="content"> 119 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
549 <form data-ajax="false" id="retrieve-form"> 120 </div>
121 </div>
122 <div data-role="content">
123 <div id="alert-patients">
124 <div class="ui-bar ui-bar-e">
125 <h3>Warning:</h3> This is a large Orthanc server. Showing
126 only <span id="count-patients">?</span> patients to avoid
127 performance issue. Make sure to use lookup if targeting
128 specific patients!
129 </div>
130 <div>&nbsp;</div>
131 </div>
132 <ul id="all-patients" data-role="listview" data-inset="true" data-filter="true">
133 </ul>
134 </div>
135 </div>
136
137 <div data-role="page" id="find-studies">
138 <div data-role="header">
139 <h1><span class="orthanc-name"></span>All studies</h1>
140 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
141 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
142 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
143 </div>
144 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
145 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
146 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
147 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
148 </div>
149 </div>
150 <div data-role="content">
151 <div id="alert-studies">
152 <div class="ui-bar ui-bar-e">
153 <h3>Warning:</h3> This is a large Orthanc server. Showing
154 only <span id="count-studies">?</span> studies to avoid
155 performance issue. Make sure to use lookup if targeting
156 specific studies!
157 </div>
158 <div>&nbsp;</div>
159 </div>
160 <ul id="all-studies" data-role="listview" data-inset="true" data-filter="true">
161 </ul>
162 </div>
163 </div>
164
165 <div data-role="page" id="upload">
166 <div data-role="header">
167 <h1><span class="orthanc-name"></span>Upload DICOM files</h1>
168 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
169 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
170 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
171 </div>
172 </div>
173 <div data-role="content">
174 <div>
175 <!-- It's very difficult to style a "file" input so we actually hide it and create a "proxy" button that is forwarding its click to the "file" input -->
176 <input id="fileupload" type="file" name="files[]" data-url="../instances/" style="display:none" multiple>
177 <ul data-role="listview" data-inset="true">
178 <li id="fileupload-proxy" onclick="$('#fileupload').click()" data-icon="arrow-r" data-theme="d"><a href="#">Select
179 files to upload ...</a></li>
180 </ul>
181 </div>
182 <p>
183 <ul data-role="listview" data-inset="true">
184 <li data-icon="arrow-r" data-theme="e"><a href="#" id="upload-button">Start the upload</a></li>
185 <!--li data-icon="gear" data-theme="e"><a href="#" id="upload-abort" class="ui-disabled">Abort the current upload</a></li-->
186 <li data-icon="delete" data-theme="e"><a href="#" id="upload-clear">Clear the pending uploads</a></li>
187 </ul>
188 <div id="progress" class="ui-corner-all">
189 <span class="bar ui-corner-all"></span>
190 <div class="label"></div>
191 </div>
192 </p>
193 <ul id="upload-list" data-role="listview" data-inset="true">
194 <li data-role="list-divider">Drag and drop DICOM files here</li>
195 </ul>
196 <div class="ui-bar ui-bar-e" id="issue-21-warning">
197 <h3>Warning:</h3> Orthanc issue #21: On Firefox, especially on Linux & OSX systems, files might be missing when
198 using drag-and-drop. Use the "Select files to upload" button instead !
199 </div>
200 </div>
201 </div>
202
203 <div data-role="page" id="patient">
204 <div data-role="header">
205 <h1><span class="orthanc-name"></span>Patient</h1>
206 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
207 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
208 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
209 </div>
210 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
211 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
212 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
213 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
214 </div>
215 </div>
216 <div data-role="content">
217 <div class="ui-grid-a">
218 <div class="ui-block-a" style="width:30%">
219 <div style="padding-right:10px">
220 <ul data-role="listview" data-inset="true" data-theme="a" id="patient-info">
221 </ul>
222 <p>
223 <div class="switch-container">
224 <select name="protection" id="protection" data-role="slider">
225 <option value="off">Unprotected</option>
226 <option value="on">Protected</option>
227 </select>
228 </div>
229 </p>
230 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
231 <li data-role="list-divider">Interact</li>
232 <li data-icon="delete"><a href="#" id="patient-delete">Delete this patient</a></li>
233 <li data-icon="forward"><a href="#" id="patient-store">Send to remote modality</a></li>
234 <li data-icon="star"><a href="#" id="patient-anonymize">Anonymize</a></li>
235 </ul>
236
237 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
238 <li data-role="list-divider">Access</li>
239 <li data-icon="info" data-theme="e" style="display:none">
240 <a href="#" id="patient-anonymized-from">Before anonymization</a>
241 </li>
242 <li data-icon="info" data-theme="e" style="display:none">
243 <a href="#" id="patient-modified-from">Before modification</a>
244 </li>
245 <li data-icon="gear"><a href="#" id="patient-archive">Download ZIP</a></li>
246 <li data-icon="gear"><a href="#" id="patient-media">Download DICOMDIR</a></li>
247 </ul>
248 </div>
249 </div>
250 <div class="ui-block-b" style="width:70%">
251 <div style="padding:10px">
252 <ul id="list-studies" data-role="listview" data-inset="true" data-filter="true">
253 </ul>
254 </div>
255 </div>
256 </div>
257 </div>
258 </div>
259
260 <div data-role="page" id="study">
261 <div data-role="header">
262 <h1>
263 <span class="orthanc-name"></span>
264 <a href="#" class="patient-link">Patient</a> &raquo;
265 Study
266 </h1>
267 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
268 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
269 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
270 </div>
271 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
272 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
273 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
274 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
275 </div>
276 </div>
277 <div data-role="content">
278 <div class="ui-grid-a">
279 <div class="ui-block-a" style="width:30%">
280 <div style="padding-right:10px">
281 <ul data-role="listview" data-inset="true" data-theme="a" id="study-info">
282 </ul>
283
284 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
285 <li data-role="list-divider">Interact</li>
286 <li data-icon="delete"><a href="#" id="study-delete">Delete this study</a></li>
287 <li data-icon="forward"><a href="#" id="study-store">Send to DICOM modality</a></li>
288 <li data-icon="star"><a href="#" id="study-anonymize">Anonymize</a></li>
289 </ul>
290
291 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
292 <li data-role="list-divider">Access</li>
293 <li data-icon="info" data-theme="e" style="display:none">
294 <a href="#" id="study-anonymized-from">Before anonymization</a>
295 </li>
296 <li data-icon="info" data-theme="e" style="display:none">
297 <a href="#" id="study-modified-from">Before modification</a>
298 </li>
299 <li data-icon="gear"><a href="#" id="study-archive">Download ZIP</a></li>
300 <li data-icon="gear"><a href="#" id="study-media">Download DICOMDIR</a></li>
301 </ul>
302 </div>
303 </div>
304 <div class="ui-block-b" style="width:70%">
305 <div style="padding:10px">
306 <ul id="list-series" data-role="listview" data-inset="true" data-filter="true">
307 </ul>
308 </div>
309 </div>
310 </div>
311 </div>
312 </div>
313
314 <div data-role="page" id="series">
315 <div data-role="header">
316 <h1>
317 <span class="orthanc-name"></span>
318 <a href="#" class="patient-link">Patient</a> &raquo;
319 <a href="#" class="study-link">Study</a> &raquo;
320 Series
321 </h1>
322 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
323 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
324 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
325 </div>
326 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
327 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
328 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
329 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
330 </div>
331 </div>
332 <div data-role="content">
333 <div class="ui-grid-a">
334 <div class="ui-block-a" style="width:30%">
335 <div style="padding-right:10px">
336 <ul data-role="listview" data-inset="true" data-theme="a" id="series-info">
337 </ul>
338
339 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
340 <li data-role="list-divider">Interact</li>
341 <li data-icon="delete"><a href="#" id="series-delete">Delete this series</a></li>
342 <li data-icon="forward"><a href="#" id="series-store">Send to DICOM modality</a></li>
343 <li data-icon="star"><a href="#" id="series-anonymize">Anonymize</a></li>
344 </ul>
345
346 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
347 <li data-role="list-divider">Access</li>
348 <li data-icon="info" data-theme="e" style="display:none">
349 <a href="#" id="series-anonymized-from">Before anonymization</a>
350 </li>
351 <li data-icon="info" data-theme="e" style="display:none">
352 <a href="#" id="series-modified-from">Before modification</a>
353 </li>
354 <li data-icon="search"><a href="#" id="series-preview">Preview this series</a></li>
355 <li data-icon="gear"><a href="#" id="series-archive">Download ZIP</a></li>
356 <li data-icon="gear"><a href="#" id="series-media">Download DICOMDIR</a></li>
357 </ul>
358 </div>
359 </div>
360 <div class="ui-block-b" style="width:70%">
361 <div style="padding:10px">
362 <ul id="list-instances" data-role="listview" data-inset="true" data-filter="true">
363 </ul>
364 </div>
365 </div>
366 </div>
367 </div>
368 </div>
369
370 <div data-role="page" id="instance">
371 <div data-role="header">
372 <h1>
373 <span class="orthanc-name"></span>
374 <a href="#" class="patient-link">Patient</a> &raquo;
375 <a href="#" class="study-link">Study</a> &raquo;
376 <a href="#" class="series-link">Series</a> &raquo;
377 Instance
378 </h1>
379 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
380 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
381 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
382 </div>
383 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
384 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
385 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
386 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
387 </div>
388 </div>
389 <div data-role="content">
390 <div class="ui-grid-a">
391 <div class="ui-block-a" style="width:30%">
392 <div style="padding-right:10px">
393 <ul data-role="listview" data-inset="true" data-theme="a" id="instance-info">
394 </ul>
395
396 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
397 <li data-role="list-divider">Interact</li>
398 <li data-icon="delete"><a href="#" id="instance-delete">Delete this instance</a></li>
399 <li data-icon="forward"><a href="#" id="instance-store">Send to DICOM modality</a></li>
400 </ul>
401
402 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
403 <li data-role="list-divider">Access</li>
404 <li data-icon="info" data-theme="e" style="display:none">
405 <a href="#" id="instance-anonymized-from">Before anonymization</a>
406 </li>
407 <li data-icon="info" data-theme="e" style="display:none">
408 <a href="#" id="instance-modified-from">Before modification</a>
409 </li>
410 <li data-icon="arrow-d"><a href="#" id="instance-download-dicom">Download the DICOM file</a></li>
411 <li data-icon="arrow-d"><a href="#" id="instance-download-json">Download the JSON file</a></li>
412 <li data-icon="search"><a href="#" id="instance-preview">Preview the instance</a></li>
413 </ul>
414 </div>
415 </div>
416 <div class="ui-block-b" style="width:70%">
417 <div style="padding:10px">
418 <div class="ui-body ui-body-b">
419 <h1>DICOM Tags</h1>
420 <p align="right">
421 <input type="checkbox" id="show-tag-name" checked="checked" class="custom" data-mini="true" />
422 <label for="show-tag-name">Show tag description</label>
423 </p>
424 <div id="dicom-tree"></div>
425 </div>
426 </div>
427 </div>
428 </div>
429 </div>
430 </div>
431
432 <div data-role="page" id="plugins">
433 <div data-role="header">
434 <h1><span class="orthanc-name"></span>Plugins</h1>
435 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
436 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
437 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
438 </div>
439 </div>
440 <div data-role="content">
441 <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true">
442 </ul>
443 </div>
444 </div>
445
446 <div data-role="page" id="query-retrieve">
447 <div data-role="header">
448 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (1/4)</h1>
449 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
450 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
451 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
452 </div>
453 </div>
454 <div data-role="content">
455 <form data-ajax="false">
456 <div data-role="fieldcontain">
457 <label for="qr-server">DICOM server:</label>
458 <select name="qr-server" id="qr-server">
459 </select>
460 </div>
461
462 <div data-role="fieldcontain" id="qr-fields">
463 <fieldset data-role="controlgroup">
464 <legend>Field of interest:</legend>
465 <input type="radio" name="qr-field" id="qr-patient-id" value="PatientID" checked="checked" />
466 <label for="qr-patient-id">Patient ID</label>
467 <input type="radio" name="qr-field" id="qr-patient-name" value="PatientName" />
468 <label for="qr-patient-name">Patient Name</label>
469 <input type="radio" name="qr-field" id="qr-accession-number" value="AccessionNumber" />
470 <label for="qr-accession-number">Accession Number</label>
471 <input type="radio" name="qr-field" id="qr-study-description" value="StudyDescription" />
472 <label for="qr-study-description">Study Description</label>
473 </fieldset>
474 </div>
475
476 <div data-role="fieldcontain">
477 <label for="qr-value">Value for this field:</label>
478 <input type="text" name="qr-value" id="qr-value" value="*" />
479 </div>
480
481 <div data-role="fieldcontain">
482 <label for="qr-date">Study date:</label>
483 <select name="qr-date" id="qr-date">
484 </select>
485 </div>
486
487 <div data-role="fieldcontain" id="qr-modalities">
550 <div data-role="fieldcontain"> 488 <div data-role="fieldcontain">
551 <label for="retrieve-target">Target AET:</label> 489 <fieldset data-role="controlgroup" data-type="horizontal">
552 <input type="text" name="retrieve-target" id="retrieve-target"></input> 490 <legend>Modalities:</legend>
553 </div> 491 <input type="checkbox" name="CR" id="qr-cr" class="custom" /> <label for="qr-cr">CR</label>
554 492 <input type="checkbox" name="CT" id="qr-ct" class="custom" /> <label for="qr-ct">CT</label>
555 <fieldset class="ui-grid-b"> 493 <input type="checkbox" name="MR" id="qr-mr" class="custom" /> <label for="qr-mr">MR</label>
556 <div class="ui-block-a"></div> 494 <input type="checkbox" name="NM" id="qr-nm" class="custom" /> <label for="qr-nm">NM</label>
557 <div class="ui-block-b"> 495 <input type="checkbox" name="PT" id="qr-pt" class="custom" /> <label for="qr-pt">PT</label>
558 <button id="retrieve-submit" type="submit" data-theme="b">Retrieve</button> 496 <input type="checkbox" name="US" id="qr-us" class="custom" /> <label for="qr-us">US</label>
559 </div> 497 <input type="checkbox" name="XA" id="qr-xa" class="custom" /> <label for="qr-xa">XA</label>
560 <div class="ui-block-c"></div> 498 <input type="checkbox" name="DR" id="qr-dr" class="custom" /> <label for="qr-dr">DR</label>
561 </fieldset> 499 <input type="checkbox" name="DX" id="qr-dx" class="custom" /> <label for="qr-dx">DX</label>
562 </form> 500 </fieldset>
563 </div> 501 </div>
564 </div> 502 </div>
565 503
566 504 <fieldset class="ui-grid-a">
567 <div data-role="page" id="jobs" > 505 <div class="ui-block-a">
568 <div data-role="header" > 506 <button id="qr-echo" data-theme="a">Test Echo</button>
569 <h1><span class="orthanc-name"></span>Jobs</h1> 507 </div>
570 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left"> 508 <div class="ui-block-b">
571 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a> 509 <button id="qr-submit" type="submit" data-theme="b">Search studies</button>
572 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a> 510 </div>
573 </div> 511 </fieldset>
574 </div> 512 </form>
575 <div data-role="content"> 513 </div>
576 <ul id="all-jobs" data-role="listview" data-inset="true" data-filter="true"> 514 </div>
577 </ul> 515
578 </div> 516
579 </div> 517 <div data-role="page" id="query-retrieve-2">
580 518 <div data-role="header">
581 <div data-role="page" id="job" > 519 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (2/4)</h1>
582 <div data-role="header" > 520 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
583 <h1><span class="orthanc-name"></span>Job</h1> 521 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
584 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left"> 522 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
585 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a> 523 </div>
586 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a> 524 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
587 </div> 525 </div>
588 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right"> 526 <div data-role="content">
589 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a> 527 <ul data-role="listview" data-inset="true" data-filter="true" data-split-icon="arrow-d" data-split-theme="b">
590 </div> 528 </ul>
591 </div> 529 </div>
592 <div data-role="content"> 530 </div>
593 <ul data-role="listview" data-inset="true" data-filter="true" id="job-info"> 531
594 </ul> 532
533 <div data-role="page" id="query-retrieve-3">
534 <div data-role="header">
535 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (3/4)</h1>
536 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
537 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
538 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
539 </div>
540 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
541 </div>
542 <div data-role="content">
543 <ul data-role="listview" data-inset="true" data-filter="true">
544 </ul>
545 </div>
546 </div>
547
548
549 <div data-role="page" id="query-retrieve-4">
550 <div data-role="header">
551 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (4/4)</h1>
552 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
553 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
554 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
555 </div>
556 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
557 </div>
558
559 <div data-role="content">
560 <form data-ajax="false" id="retrieve-form">
561 <div data-role="fieldcontain">
562 <label for="retrieve-target">Target AET:</label>
563 <input type="text" name="retrieve-target" id="retrieve-target"></input>
564 </div>
595 565
596 <fieldset class="ui-grid-b"> 566 <fieldset class="ui-grid-b">
597 <div class="ui-block-a"></div> 567 <div class="ui-block-a"></div>
598 <div class="ui-block-b"> 568 <div class="ui-block-b">
599 <button id="job-cancel" data-theme="b">Cancel job</button> 569 <button id="retrieve-submit" type="submit" data-theme="b">Retrieve</button>
600 <button id="job-resubmit" data-theme="b">Resubmit job</button>
601 <button id="job-pause" data-theme="b">Pause job</button>
602 <button id="job-resume" data-theme="b">Resume job</button>
603 </div> 570 </div>
604 <div class="ui-block-c"></div> 571 <div class="ui-block-c"></div>
605 </fieldset> 572 </fieldset>
606 </div> 573 </form>
607 </div> 574 </div>
608 575 </div>
609 <div id="peer-store" style="display:none;" class="ui-body-c"> 576
610 <p align="center"><b>Sending to Orthanc peer...</b></p> 577
611 <p><img src="libs/images/ajax-loader.gif" alt="" /></p> 578 <div data-role="page" id="jobs">
612 </div> 579 <div data-role="header">
613 580 <h1><span class="orthanc-name"></span>Jobs</h1>
614 <div id="dicom-store" style="display:none;" class="ui-body-c"> 581 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
615 <p align="center"><b>Sending to DICOM modality...</b></p> 582 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
616 <p><img src="libs/images/ajax-loader.gif" alt="" /></p> 583 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
617 </div> 584 </div>
618 585 </div>
619 <div id="info-retrieve" style="display:none;" class="ui-body-c"> 586 <div data-role="content">
620 <p align="center"><b>Retrieving images from DICOM modality...</b></p> 587 <ul id="all-jobs" data-role="listview" data-inset="true" data-filter="true">
621 <p><img src="libs/images/ajax-loader.gif" alt="" /></p> 588 </ul>
622 </div> 589 </div>
623 590 </div>
624 <div id="dialog" style="display:none" > 591
625 </div> 592 <div data-role="page" id="job">
626 </body> 593 <div data-role="header">
594 <h1><span class="orthanc-name"></span>Job</h1>
595 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
596 <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
597 <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
598 </div>
599 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
600 <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
601 </div>
602 </div>
603 <div data-role="content">
604 <ul data-role="listview" data-inset="true" data-filter="true" id="job-info">
605 </ul>
606
607 <fieldset class="ui-grid-b">
608 <div class="ui-block-a"></div>
609 <div class="ui-block-b">
610 <button id="job-cancel" data-theme="b">Cancel job</button>
611 <button id="job-resubmit" data-theme="b">Resubmit job</button>
612 <button id="job-pause" data-theme="b">Pause job</button>
613 <button id="job-resume" data-theme="b">Resume job</button>
614 </div>
615 <div class="ui-block-c"></div>
616 </fieldset>
617 </div>
618 </div>
619
620 <div id="peer-store" style="display:none;" class="ui-body-c">
621 <p align="center"><b>Sending to Orthanc peer...</b></p>
622 <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
623 </div>
624
625 <div id="dicom-store" style="display:none;" class="ui-body-c">
626 <p align="center"><b>Sending to DICOM modality...</b></p>
627 <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
628 </div>
629
630 <div id="info-retrieve" style="display:none;" class="ui-body-c">
631 <p align="center"><b>Retrieving images from DICOM modality...</b></p>
632 <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
633 </div>
634
635 <div id="dialog" style="display:none">
636 </div>
637 </body>
638
627 </html> 639 </html>