Mercurial > hg > orthanc

comparison OrthancServer/OrthancExplorer/explorer.html @ 4044:d25f4c0fa160 framework

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