forked from informatics-isi-edu/openseadragon-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmy_mview.html
108 lines (100 loc) · 4.59 KB
/
my_mview.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
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<meta charset="utf-8">
<html>
<head>
<title> 2D+ mviewer </title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/alertify.core.css" rel="stylesheet">
<link href="css/alertify.default.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/viewer.css" rel="stylesheet">
<link href="css/osea_viewer.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/jquery.ui.slider.js'></script>
<script type="text/javascript" src="js/alertify.min.js"> </script>
<script type="text/javascript" src="js/debug.js"> </script>
<!-- for openseadragon and viewer -->
<script type="text/javascript" src="js/jquery.viewer_multi.js"> </script>
<script type="text/javascript" src="js/openseadragon.js"> </script>
<script type="text/javascript" src="js/openseadragon-filtering.js"> </script>
<!-- for annotorious -->
<link href="css/annotorious/themes/dark/annotorious-dark.css" rel="stylesheet">
<link href="css/anno_viewer.css" rel="stylesheet">
<script type="text/javascript" src="js/annotorious.js"> </script>
<script type="text/javascript" src="js/jquery.anno_viewer.js"> </script>
`
<style>
#content {
width: 100%;
height: 100%;
background-color: #d9d9d9;
}
.filtercontrol {
margin:2px;
}
.left, .middle, .right {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
font-size: 12px;
}
.left {
width: 20%;
}
.middle {
width: 20%;
}
.right {
width: 20%;
}
.h-slider {
background: -webkit-linear-gradient(left, hsla(0, 100%, 50%, 1),
hsla(10, 100%, 50%, 1),hsla(20, 100%, 50%, 1),hsla(30, 100%, 50%, 1),
hsla(40, 100%, 50%, 1),hsla(50, 100%, 50%, 1),hsla(60, 100%, 50%, 1),
hsla(70, 100%, 50%, 1),hsla(80, 100%, 50%, 1),hsla(90, 100%, 50%, 1),
hsla(100, 100%, 50%, 1),hsla(110, 100%, 50%, 1),hsla(120, 100%, 50%, 1),
hsla(130, 100%, 50%, 1),hsla(140, 100%, 50%, 1),hsla(150, 100%, 50%, 1),
hsla(160, 100%, 50%, 1),hsla(170, 100%, 50%, 1),hsla(180, 100%, 50%, 1),
hsla(190, 100%, 50%, 1),hsla(200, 100%, 50%, 1),hsla(210, 100%, 50%, 1),
hsla(220, 100%, 50%, 1),hsla(230, 100%, 50%, 1),hsla(240, 100%, 50%, 1),
hsla(250, 100%, 50%, 1),hsla(260, 100%, 50%, 1),hsla(270, 100%, 50%, 1),
hsla(280, 100%, 50%, 1),hsla(290, 100%, 50%, 1),hsla(300, 100%, 50%, 1),
hsla(310, 100%, 50%, 1),hsla(320, 100%, 50%, 1),hsla(330, 100%, 50%, 1),
hsla(340, 100%, 50%, 1),hsla(350, 100%, 50%, 1),hsla(360, 100%, 50%, 1));
background: -moz-linear-gradient(left, hsla(0, 100%, 50%, 1),
hsla(10, 100%, 50%, 1),hsla(20, 100%, 50%, 1),hsla(30, 100%, 50%, 1),
hsla(40, 100%, 50%, 1),hsla(50, 100%, 50%, 1),hsla(60, 100%, 50%, 1),
hsla(70, 100%, 50%, 1),hsla(80, 100%, 50%, 1),hsla(90, 100%, 50%, 1),
hsla(100, 100%, 50%, 1),hsla(110, 100%, 50%, 1),hsla(120, 100%, 50%, 1),
hsla(130, 100%, 50%, 1),hsla(140, 100%, 50%, 1),hsla(150, 100%, 50%, 1),
hsla(160, 100%, 50%, 1),hsla(170, 100%, 50%, 1),hsla(180, 100%, 50%, 1),
hsla(190, 100%, 50%, 1),hsla(200, 100%, 50%, 1),hsla(210, 100%, 50%, 1),
hsla(220, 100%, 50%, 1),hsla(230, 100%, 50%, 1),hsla(240, 100%, 50%, 1),
hsla(250, 100%, 50%, 1),hsla(260, 100%, 50%, 1),hsla(270, 100%, 50%, 1),
hsla(280, 100%, 50%, 1),hsla(290, 100%, 50%, 1),hsla(300, 100%, 50%, 1),
hsla(310, 100%, 50%, 1),hsla(320, 100%, 50%, 1),hsla(330, 100%, 50%, 1),
hsla(340, 100%, 50%, 1),hsla(350, 100%, 50%, 1),hsla(360, 100%, 50%, 1));
}
</style>
</head>
<body>
<!-- The viewer -->
<div class="content">
<div id="viewer" style="position:relative; width:800px; height:500px; margin-bottom:0px; border:4px solid blue;">
<div id="openseadragon" class="openseadragon" style="background-color:white;"></div>
<div id="anno-button">
<input id="map-annotate-button" type="button" onmouseover="annoBtnEnter()" onmouseout="annoBtnExit()" onclick="annotate()"/>
</div>
</div>
<div id="control" style="width:800px;">
<div id="selections" style="margin-left:40px;">
<input id="filtersBtn" type="button" value="addFilters" onclick="toggleFilters()"/>
<input id="collectionRowBtn" type="button" value="toRow" onclick="toggleCollectionMode();"/>
<div>
<div id='itemList'></div>
</div>
</div>
</body>
</html>