Mercurial > hg > orthanc

comparison OrthancExplorer/explorer.html @ 1371:f528849ee9f7 query-retrieve

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
DICOM Query/Retrieve available from Orthanc Explorer
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 27 May 2015 17:33:13 +0200
parents f1c01451a8ee
children ed3c112a71ea
comparison
equal deleted inserted replaced
1370:7b6f5115607f 1371:f528849ee9f7
28 <script src="libs/jquery-file-upload/js/jquery.fileupload.js"></script> 28 <script src="libs/jquery-file-upload/js/jquery.fileupload.js"></script>
29 29
30 <link rel="stylesheet" href="explorer.css" /> 30 <link rel="stylesheet" href="explorer.css" />
31 <script src="file-upload.js"></script> 31 <script src="file-upload.js"></script>
32 <script src="explorer.js"></script> 32 <script src="explorer.js"></script>
33 <script src="query-retrieve.js"></script>
33 <script src="../plugins/explorer.js"></script> 34 <script src="../plugins/explorer.js"></script>
34 </head> 35 </head>
35 <body> 36 <body>
36 <div data-role="page" id="find-patients" > 37 <div data-role="page" id="find-patients" >
37 <div data-role="header" > 38 <div data-role="header" >
38 <h1><span class="orthanc-name"></span>Find a patient</h1> 39 <h1><span class="orthanc-name"></span>Find a patient</h1>
39 <a href="#plugins" data-icon="grid" class="ui-btn-left" data-direction="reverse">Plugins</a> 40 <a href="#plugins" data-icon="grid" class="ui-btn-left" data-direction="reverse">Plugins</a>
40 <a href="#upload" data-icon="gear" class="ui-btn-right">Upload DICOM</a> 41 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
42 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
43 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
44 </div>
41 </div> 45 </div>
42 <div data-role="content"> 46 <div data-role="content">
43 <ul id="all-patients" data-role="listview" data-inset="true" data-filter="true"> 47 <ul id="all-patients" data-role="listview" data-inset="true" data-filter="true">
44 </ul> 48 </ul>
45 </div> 49 </div>
73 77
74 <div data-role="page" id="patient" > 78 <div data-role="page" id="patient" >
75 <div data-role="header" > 79 <div data-role="header" >
76 <h1><span class="orthanc-name"></span>Patient</h1> 80 <h1><span class="orthanc-name"></span>Patient</h1>
77 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a> 81 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
78 <a href="#upload" data-icon="gear" class="ui-btn-right">Upload DICOM</a> 82 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
83 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
84 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
85 </div>
79 </div> 86 </div>
80 <div data-role="content"> 87 <div data-role="content">
81 <div class="ui-grid-a"> 88 <div class="ui-grid-a">
82 <div class="ui-block-a" style="width:30%"> 89 <div class="ui-block-a" style="width:30%">
83 <div style="padding-right:10px"> 90 <div style="padding-right:10px">
127 <span class="orthanc-name"></span> 134 <span class="orthanc-name"></span>
128 <a href="#" class="patient-link">Patient</a> &raquo; 135 <a href="#" class="patient-link">Patient</a> &raquo;
129 Study 136 Study
130 </h1> 137 </h1>
131 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a> 138 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
132 <a href="#upload" data-icon="gear" class="ui-btn-right">Upload DICOM</a> 139 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
140 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
141 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
142 </div>
133 </div> 143 </div>
134 <div data-role="content"> 144 <div data-role="content">
135 <div class="ui-grid-a"> 145 <div class="ui-grid-a">
136 <div class="ui-block-a" style="width:30%"> 146 <div class="ui-block-a" style="width:30%">
137 <div style="padding-right:10px"> 147 <div style="padding-right:10px">
176 <a href="#" class="study-link">Study</a> &raquo; 186 <a href="#" class="study-link">Study</a> &raquo;
177 Series 187 Series
178 </h1> 188 </h1>
179 189
180 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a> 190 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
181 <a href="#upload" data-icon="gear" class="ui-btn-right">Upload DICOM</a> 191 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
192 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
193 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
194 </div>
182 </div> 195 </div>
183 <div data-role="content"> 196 <div data-role="content">
184 <div class="ui-grid-a"> 197 <div class="ui-grid-a">
185 <div class="ui-block-a" style="width:30%"> 198 <div class="ui-block-a" style="width:30%">
186 <div style="padding-right:10px"> 199 <div style="padding-right:10px">
226 <a href="#" class="study-link">Study</a> &raquo; 239 <a href="#" class="study-link">Study</a> &raquo;
227 <a href="#" class="series-link">Series</a> &raquo; 240 <a href="#" class="series-link">Series</a> &raquo;
228 Instance 241 Instance
229 </h1> 242 </h1>
230 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a> 243 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
231 <a href="#upload" data-icon="gear" class="ui-btn-right">Upload DICOM</a> 244 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
245 <a href="#upload" data-icon="gear" data-role="button">Upload</a>
246 <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
247 </div>
232 </div> 248 </div>
233 <div data-role="content"> 249 <div data-role="content">
234 <div class="ui-grid-a"> 250 <div class="ui-grid-a">
235 <div class="ui-block-a" style="width:30%"> 251 <div class="ui-block-a" style="width:30%">
236 <div style="padding-right:10px"> 252 <div style="padding-right:10px">
282 <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true"> 298 <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true">
283 </ul> 299 </ul>
284 </div> 300 </div>
285 </div> 301 </div>
286 302
303 <div data-role="page" id="query-retrieve" >
304 <div data-role="header" >
305 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (1/3)</h1>
306 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
307 </div>
308 <div data-role="content">
309 <form data-ajax="false">
310 <div data-role="fieldcontain">
311 <label for="qr-server">DICOM server:</label>
312 <select name="qr-server" id="qr-server">
313 </select>
314 </div>
315
316 <div data-role="fieldcontain" id="qr-fields">
317 <fieldset data-role="controlgroup">
318 <legend>Field of interest:</legend>
319 <input type="radio" name="qr-field" id="qr-patient-id" value="PatientID" checked="checked" />
320 <label for="qr-patient-id">Patient ID</label>
321 <input type="radio" name="qr-field" id="qr-patient-name" value="PatientName" />
322 <label for="qr-patient-name">Patient Name</label>
323 <input type="radio" name="qr-field" id="qr-accession-number" value="AccessionNumber" />
324 <label for="qr-accession-number">Accession Number</label>
325 <input type="radio" name="qr-field" id="qr-study-description" value="StudyDescription" />
326 <label for="qr-study-description">Study Description</label>
327 </fieldset>
328 </div>
329
330 <div data-role="fieldcontain">
331 <label for="qr-value">Value for this field:</label>
332 <input type="text" name="qr-value" id="qr-value" value="*" />
333 </div>
334
335 <div data-role="fieldcontain">
336 <label for="qr-date">Study date:</label>
337 <select name="qr-date" id="qr-date">
338 </select>
339 </div>
340
341 <div data-role="fieldcontain" id="qr-modalities">
342 <div data-role="fieldcontain">
343 <fieldset data-role="controlgroup" data-type="horizontal">
344 <legend>Modalities:</legend>
345 <input type="checkbox" name="CR" id="qr-cr" class="custom" /> <label for="qr-cr">CR</label>
346 <input type="checkbox" name="CT" id="qr-ct" class="custom" /> <label for="qr-ct">CT</label>
347 <input type="checkbox" name="MR" id="qr-mr" class="custom" /> <label for="qr-mr">MR</label>
348 <input type="checkbox" name="NM" id="qr-nm" class="custom" /> <label for="qr-nm">NM</label>
349 <input type="checkbox" name="PT" id="qr-pt" class="custom" /> <label for="qr-pt">PT</label>
350 <input type="checkbox" name="US" id="qr-us" class="custom" /> <label for="qr-us">US</label>
351 <input type="checkbox" name="XA" id="qr-xa" class="custom" /> <label for="qr-xa">XA</label>
352 </fieldset>
353 </div>
354 </div>
355
356 <button id="qr-submit" type="submit" data-theme="b">Search studies</button>
357 </form>
358 </div>
359 </div>
360
361
362 <div data-role="page" id="query-retrieve-2" >
363 <div data-role="header" >
364 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (2/3)</h1>
365 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
366 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
367 </div>
368 <div data-role="content">
369 <ul data-role="listview" data-inset="true" data-filter="true" data-split-icon="arrow-d" data-split-theme="b">
370 </ul>
371 </div>
372 </div>
373
374
375 <div data-role="page" id="query-retrieve-3" >
376 <div data-role="header" >
377 <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (3/3)</h1>
378 <a href="#find-patients" data-icon="home" class="ui-btn-left" data-direction="reverse">Patients</a>
379 <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
380 </div>
381 <div data-role="content">
382 <ul data-role="listview" data-inset="true" data-filter="true" data-split-icon="arrow-d" data-split-theme="b">
383 </ul>
384 </div>
385 </div>
386
287 387
288 <div id="peer-store" style="display:none;" class="ui-body-c"> 388 <div id="peer-store" style="display:none;" class="ui-body-c">
289 <p align="center"><b>Sending to Orthanc peer...</b></p> 389 <p align="center"><b>Sending to Orthanc peer...</b></p>
290 <p><img src="libs/images/ajax-loader2.gif" alt="" /></p> 390 <p><img src="libs/images/ajax-loader2.gif" alt="" /></p>
291 </div> 391 </div>
293 <div id="dicom-store" style="display:none;" class="ui-body-c"> 393 <div id="dicom-store" style="display:none;" class="ui-body-c">
294 <p align="center"><b>Sending to DICOM modality...</b></p> 394 <p align="center"><b>Sending to DICOM modality...</b></p>
295 <p><img src="libs/images/ajax-loader2.gif" alt="" /></p> 395 <p><img src="libs/images/ajax-loader2.gif" alt="" /></p>
296 </div> 396 </div>
297 397
398 <div id="info-retrieve" style="display:none;" class="ui-body-c">
399 <p align="center"><b>Retrieving images from DICOM modality...</b></p>
400 <p><img src="libs/images/ajax-loader2.gif" alt="" /></p>
401 </div>
402
298 <div id="dialog" style="display:none" > 403 <div id="dialog" style="display:none" >
299 </div> 404 </div>
300 </body> 405 </body>
301 </html> 406 </html>