217 lines
7.2 KiB
HTML
217 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>My (fake) PACS</title>
|
|
<style>
|
|
body {
|
|
background-color: #efefef;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.listview img {float:left; padding:0px 10px 10px 0px;}
|
|
.listview li {list-style-type: none; padding-top: 10px;}
|
|
ul li {clear:both;}
|
|
ul li h2 {font-size:90%;}
|
|
ul a {text-decoration:none;}
|
|
ul li p {font-size:80%;}
|
|
</style>
|
|
<!-- Can't make it work, problem of DOM loading, all pages loaded after are messed up...
|
|
(see http://jquerymobile.com/demos/1.3.0/docs/faq/dom-ready-not-working.html )...-->
|
|
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
|
|
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>-->
|
|
<script type="text/javascript">
|
|
var githubRaw = "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/";
|
|
var dataDicom = [
|
|
{
|
|
title: "Baby MRI",
|
|
uri: githubRaw + "?file=bbmri-53323851.dcm&file=bbmri-53323707.dcm&file=bbmri-53323563.dcm&file=bbmri-53323419.dcm&file=bbmri-53323275.dcm&file=bbmri-53323131.dcm",
|
|
uriargs: "&dwvReplaceMode=void",
|
|
img: "babymri.png",
|
|
desc: "Brain MR, 256*256*5, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11"
|
|
},
|
|
{
|
|
title: "Toutatix",
|
|
uri: githubRaw + "?file=osirix-toutatix-100.dcm&file=osirix-toutatix-101.dcm",
|
|
uriargs: "&dwvReplaceMode=void",
|
|
img: "toutatix.png",
|
|
desc: "Chest CT(A), 512*512*1, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11, from the Osirix examples, hosted on the dwv github."
|
|
},
|
|
{
|
|
title: "Goudurix",
|
|
uri: githubRaw + "osirix-goudurix.dcm",
|
|
img: "goudurix.png",
|
|
desc: "Chest CT(A), 512*512*1, LittleEndianImplicit [1.2.840.10008.1.2], bits: 16-12-11, from the Osirix examples, hosted on the dwv github.",
|
|
},
|
|
{
|
|
title: "US",
|
|
uri: githubRaw + "gdcm-US-RGB-8-epicard.dcm",
|
|
img: "us.png",
|
|
desc: "US, 640*480*1, BigEndianExplicit [1.2.840.10008.1.2.2], bits: 8-8-7, from the GDCM examples, hosted on the dwv github.",
|
|
},
|
|
{
|
|
title: "Cerebrix",
|
|
uri: githubRaw + "osirix-cerebrix.dcm",
|
|
img: "cerebrix.png",
|
|
desc: "Brain SC (Secondary Capture), 176*224*1, JPEG2000 [1.2.840.10008.1.2.4.91], bits: 16-16-15, from the Osirix examples, hosted on the dwv github.",
|
|
},
|
|
{
|
|
title: "Multiframe",
|
|
uri: githubRaw + "multiframe-test1.dcm",
|
|
img: "multiframe-test1.png",
|
|
desc: "Heart MR, 256*256*1*16, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 8-8-7, contributed by @yulia-tue, hosted on the dwv github.",
|
|
}
|
|
];
|
|
var dataImg = [
|
|
{
|
|
title: "JPEG",
|
|
uri: "https://upload.wikimedia.org/wikipedia/commons/c/c6/PET-image.jpg",
|
|
img: "brainpet-jpg.png",
|
|
desc: "Brain PET from wikipedia (https://en.wikipedia.org/wiki/File:PET-image.jpg), 531*600*1."
|
|
},
|
|
{
|
|
title: "PNG",
|
|
uri: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Brain_MRI_112010_rgbca.png",
|
|
img: "brainmri-png.png",
|
|
desc: "Brain MRI from wikipedia (https://en.wikipedia.org/wiki/File:Brain_MRI_112010_rgbca.png), 389*504*1."
|
|
},
|
|
{
|
|
title: "JPG",
|
|
uri: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Acute_leukemia-ALL.jpg",
|
|
img: "acute_leukemia.png",
|
|
desc: "Acute Leukimia from wikipedia (https://en.wikipedia.org/wiki/File:Acute_leukemia-ALL.jpg), 347*395*1."
|
|
}
|
|
];
|
|
|
|
function setDwv(obj)
|
|
{
|
|
// update page links
|
|
var elements = document.getElementsByClassName('dwvlink');
|
|
var tmp;
|
|
var url;
|
|
for (var i = 0; i < elements.length; ++i) {
|
|
url = getDwvBaseUrl(obj.value)
|
|
tmp = elements[i].href.split('?');
|
|
if ( tmp.length === 2 ) {
|
|
url += '?'+tmp[1];
|
|
}
|
|
elements[i].href = url;
|
|
}
|
|
}
|
|
function getDwvBaseUrl(flag)
|
|
{
|
|
var path = "../../viewers";
|
|
if( flag === "dwvmobile" ) {
|
|
path += "/mobile";
|
|
} else if( flag === "dwvstatic" ) {
|
|
path += "/static";
|
|
} else if( flag === "dwvsimple" ) {
|
|
path += "/simple";
|
|
} else if( flag === "dwvsimplistic" ) {
|
|
path += "/simplistic";
|
|
}
|
|
path += "/index.html";
|
|
return path;
|
|
}
|
|
function getDwvUrl(uri)
|
|
{
|
|
var flag = "dwvmobile";
|
|
if( document.getElementById('select-dwv') ) {
|
|
var select = document.getElementById('select-dwv');
|
|
flag = select.options[select.selectedIndex].value;
|
|
}
|
|
var url = getDwvBaseUrl(flag);
|
|
if ( typeof uri !== "undefined" ) {
|
|
url += "?input="+encodeURIComponent(uri);
|
|
}
|
|
return url;
|
|
}
|
|
function createAndPutHtml(data, id)
|
|
{
|
|
for( var i = 0; i < data.length; ++i )
|
|
{
|
|
// image
|
|
var image = document.createElement("img");
|
|
image.src = "images/"+data[i].img;
|
|
// title
|
|
var title = document.createElement("h2");
|
|
title.appendChild(document.createTextNode(data[i].title));
|
|
// description
|
|
var desc = document.createElement("p");
|
|
desc.appendChild(document.createTextNode(data[i].desc));
|
|
if( data[i].comment ) {
|
|
var comment = document.createElement("b");
|
|
comment.appendChild(document.createTextNode(" "+data[i].comment));
|
|
desc.appendChild(comment);
|
|
}
|
|
|
|
// link
|
|
var link = document.createElement("a");
|
|
link.href = getDwvUrl(data[i].uri);
|
|
if( data[i].uriargs ) {
|
|
link.href += data[i].uriargs;
|
|
}
|
|
link.className = "dwvlink";
|
|
link.appendChild(image);
|
|
|
|
// list item
|
|
var li = document.createElement("li");
|
|
li.appendChild(link);
|
|
li.appendChild(title);
|
|
li.appendChild(desc);
|
|
var ul = document.getElementById(id);
|
|
ul.appendChild(li);
|
|
}
|
|
}
|
|
|
|
// create html once ready
|
|
window.onload = function() {
|
|
createAndPutHtml(dataDicom, "uldatadicom");
|
|
createAndPutHtml(dataImg, "uldataimg");
|
|
document.getElementById("empty-launch").href = getDwvUrl();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
<div data-role="content">
|
|
|
|
<h1>My (fake) PACS</h1>
|
|
|
|
<p>These are a few data example that are displayed as they could
|
|
be on a web interface to a PACS system. Click on the list item to launch DWV with the selected data.
|
|
Direct link: <a href="#" id="empty-launch" class="dwvlink">launch</a>.</p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<label for="select-dwv">Choose which DWV to launch:</label>
|
|
<select id="select-dwv" data-inline="true" data-mini="true" onClick="setDwv(this);">
|
|
<option value="dwvmobile">DWV Mobile</option>
|
|
<option value="dwvstatic">DWV Static</option>
|
|
<option value="dwvsimple">DWV Simple</option>
|
|
<option value="dwvsimplistic">DWV Simplistic</option>
|
|
</select>
|
|
</div>
|
|
|
|
<ul class="listview" data-role="listview" data-inset="true" id="uldatadicom"></ul>
|
|
|
|
<br style="clear:both">
|
|
|
|
<p>Non DICOM Image formats:</p>
|
|
<ul class="listview" data-role="listview" data-inset="true" id="uldataimg"></ul>
|
|
|
|
<br style="clear:both">
|
|
|
|
<p>Data sources:</p>
|
|
<ul>
|
|
<li><a href="http://www.babymri.org/">Baby MRI</a></li>
|
|
<li><a href="http://www.osirix-viewer.com/datasets/">Osirix datasets</a></li>
|
|
<li><a href="http://www.creatis.insa-lyon.fr/software/public/Gdcm/Main.html">GDCM (Creatis)</a></li>
|
|
</ul>
|
|
|
|
</div><!-- /page -->
|
|
</div><!-- /content -->
|
|
|
|
</body>
|
|
</html>
|