generated from pathologyatlas/template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
HE.html
122 lines (84 loc) · 3.33 KB
/
HE.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
<html> <!-- do not use <!DOCTYPE html> -->
<head>
<title>lymphocytic gastritis lenfositik gastrit</title>
<meta name="keywords"
content="lymphocytic gastritis, lenfositik gastrit, patoloji, atlas, pathology, whole slide image, HE">
<meta name="description" content="lymphocytic gastritis lenfositik gastrit">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="https://images.patolojiatlasi.com/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://images.patolojiatlasi.com/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://images.patolojiatlasi.com/img/favicon-16x16.png">
<link rel="manifest" href="https://images.patolojiatlasi.com/img/site.webmanifest">
<link rel="icon" href="https://images.patolojiatlasi.com/img/favicon.ico" type="image/x-icon" />
<script src="https://images.patolojiatlasi.com/openseadragon/openseadragon.min.js"></script>
<script src="./openseadragon/openseadragon.min.js"></script>
<!-- <script src="openseadragon/openseadragon-scalebar.js"></script> -->
</head>
<body>
<div id="openseadragon1" style="width: 100%; height: 95%;"></div>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: 'openseadragon1',
// prefixUrl: 'https://images.patolojiatlasi.com/openseadragon/images/',
prefixUrl: './openseadragon/images/',
showHomeControl: false,
showRotationControl: true,
showNavigator: true,
showFlipControl: true,
navigatorBackground: 'rgb(240, 240, 240)',
tileSources: {
Image: {
Url: './HE_files/', // name of image folder
TileSize: '254', // see .dzi file
Overlap: '1', // see .dzi file
Format: 'jpeg', // see .dzi file
ServerFormat: 'Default', // optional
xmlns: 'http://schemas.microsoft.com/deepzoom/2008', // see .dzi file
Size: {
Width: '79923', // see .dzi file
Height: '42180' // see .dzi file
}
}
}
// ,
// tileSources: "yourwsi.dzi",
// sequenceMode: false,
// autoHideControls: true,
// animationTime: 1.0,
// blendTime: 0.6,
// constrainDuringPan: true,
// maxZoomPixelRatio: 1,
// visibilityRatio: 1,
// zoomPerScrolli: 1,
// defaultZoomLevel: 1,
// showReferenceStrip: true,
// showNavigator: true,
// showFullPageControl: false
});
/* viewer.scalebar({
minWidth: '100px',
pixelsPerMeter: '1.98255e+06',
fontFamily: 'Arial',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
fontSize: 'small',
barThickness: '2',
xOffset: '10',
yOffset: '10'
}); */
// Add a keydown event listener to the document
document.addEventListener("keydown", function (event) {
// Check if the pressed key is 'Z' (key code 90) to zoom in
if (event.keyCode === 90) {
// Zoom in
viewer.viewport.zoomBy(1.2);
}
// Check if the pressed key is 'X' (key code 88) to zoom out
else if (event.keyCode === 88) {
// Zoom out
viewer.viewport.zoomBy(0.8);
}
});
</script>
</body>
</html>