forked from ivmartel/dwv
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (149 loc) · 6.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
<title>DICOM Web Viewer</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<style>
body { font-size: 80%; }
#pageHeader h1 { display: inline-block; margin: 0; }
#pageHeader #toolbar { display: inline-block; float: right; }
#toolbox li:first-child { list-style-type: none; padding-bottom: 10px; margin-left: -20px; }
#pageMain { position: absolute; height: 92%; width: 99%; bottom: 5px; left: 5px; background-color: #333; }
#infotl { color: #333; text-shadow: 0 1px 0 #fff; }
#infotr { color: #333; text-shadow: 0 1px 0 #fff; }
</style>
<link rel="stylesheet" href="ext/jquery/ui/1.10.2/themes/ui-darkness/jquery-ui-1.10.2.min.css">
<!-- Third party -->
<script type="text/javascript" src="ext/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/1.10.2/jquery-ui-1.10.2.min.js"></script>
<script type="text/javascript" src="ext/flot/jquery.flot.min.js"></script>
<!-- Local -->
<script type="text/javascript" src="src/dwv.js"></script>
<script type="text/javascript" src="src/application.js"></script>
<script type="text/javascript" src="src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="src/dicom/dictionary.js"></script>
<script type="text/javascript" src="src/html/gui.js"></script>
<script type="text/javascript" src="src/html/gui_ui.js"></script>
<script type="text/javascript" src="src/html/html.js"></script>
<script type="text/javascript" src="src/html/style.js"></script>
<script type="text/javascript" src="src/html/layer.js"></script>
<script type="text/javascript" src="src/image/filter.js"></script>
<script type="text/javascript" src="src/image/image.js"></script>
<script type="text/javascript" src="src/image/view.js"></script>
<script type="text/javascript" src="src/image/luts.js"></script>
<script type="text/javascript" src="src/image/reader.js"></script>
<script type="text/javascript" src="src/math/shapes.js"></script>
<script type="text/javascript" src="src/math/bucketQueue.js"></script>
<script type="text/javascript" src="src/math/scissors.js"></script>
<script type="text/javascript" src="src/utils/string.js"></script>
<!-- Tools: beware order is important... -->
<script type="text/javascript" src="src/tools/toolbox.js"></script>
<script type="text/javascript" src="src/tools/windowLevel.js"></script>
<script type="text/javascript" src="src/tools/info.js"></script>
<script type="text/javascript" src="src/tools/draw.js"></script>
<script type="text/javascript" src="src/tools/line.js"></script>
<script type="text/javascript" src="src/tools/rectangle.js"></script>
<script type="text/javascript" src="src/tools/roi.js"></script>
<script type="text/javascript" src="src/tools/circle.js"></script>
<script type="text/javascript" src="src/tools/livewire.js"></script>
<script type="text/javascript" src="src/tools/zoom.js"></script>
<script type="text/javascript" src="src/tools/filter.js"></script>
<script type="text/javascript" src="src/tools/undo.js"></script>
<script type="text/javascript">
function toggle(dialogId)
{
if( $(dialogId).dialog('isOpen') )
{
$(dialogId).dialog('close');
}
else
{
$(dialogId).dialog('open');
}
}
// main application
var app = new dwv.App();
// jquery
$(document).ready(function(){
// initialise buttons
$("button").button();
$("#toggleInfoLayer").button({ icons:
{ primary: "ui-icon-comment" }, text: false });
// create dialogs
$("#openData").dialog({ position:
{my: "left top", at: "left top", of: "#pageMain"} });
$("#toolbox").dialog({ position:
{my: "left top+200", at: "left top", of: "#pageMain"} });
$("#history").dialog({ position:
{my: "left top+370", at: "left top", of: "#pageMain"},
autoOpen: false });
$("#tags").dialog({ position:
{my: "right top", at: "right top", of: "#pageMain"},
autoOpen: false, width: 500, height: 590 });
// image dialog
$("#layerDialog").dialog({ position:
{my: "left+320 top", at: "left top", of: "#pageMain"}});
// default size
$("#layerDialog").dialog({ width: "auto", resizable: false });
// Resizable but keep aspect ratio
// TODO it seems to add a border that bothers getting the cursor position...
//$("#layerContainer").resizable({ aspectRatio: true });
// initialise the application
app.init();
// align layers when the window is resized
window.onresize = app.resize;
// possible load from URL
var inputUrls = dwv.html.getUriParam();
if( inputUrls && inputUrls.length > 0 ) app.loadURL(inputUrls);
});
</script>
</head>
<body>
<div id="pageHeader">
<!-- Title -->
<h1>DICOM Web Viewer (<a href="https://github.com/ivmartel/dwv">dwv</a> v0.4beta)</h1>
<!-- Toolbar -->
<div id="toolbar">
<button onclick="toggle('#openData')">File</button>
<button onclick="toggle('#toolbox')">Toolbox</button>
<button onclick="toggle('#history')">History</button>
<button onclick="toggle('#tags')">Tags</button>
<button onclick="toggle('#layerDialog')">Image</button>
<button onclick="app.toggleInfoLayerDisplay()">Info</button>
</div><!-- /toolbar -->
</div><!-- /pageHeader -->
<div id="pageMain">
<!-- Open file -->
<div id="openData" title="File">
<form><p>
Path: <input type="file" id="imagefiles" multiple />
URL: <input type="url" id="imageurl" />
</p></form>
<div id="progressbar"></div>
</div>
<!-- Toolbox -->
<div id="toolbox" title="Toolbox">
<ul id="toolList"></ul>
</div>
<!-- History -->
<div id="history" title="History"></div>
<!-- Tags -->
<div id="tags" title="Tags" style="display:none;"></div>
<!-- Layer Container -->
<div id="layerDialog" title="Image">
<div id="layerContainer">
<canvas id="imageLayer">Only for HTML5 compatible browsers...</canvas>
<canvas id="drawLayer">Only for HTML5 compatible browsers...</canvas>
<canvas id="tempLayer">Only for HTML5 compatible browsers...</canvas>
<div id="infoLayer">
<div id="infotl"></div>
<div id="infotr"></div>
<div id="infobl"></div>
<div id="infobr"><div id="plot"></div></div>
</div><!-- /infoLayer -->
</div><!-- /layerContainer -->
</div><!-- /layerDialog -->
</div><!-- /pageMain -->
</body>
</html>