-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
119 lines (107 loc) · 4.29 KB
/
example.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>no.5 Seajax Utils Example</title>
<style type="text/css">
html, body {
margin:0px;
width:100%;
height:100%;
font-family: Verdana;
}
#viewer{
width:100%;
height:100%;
margin:0px;
color: white; /* for error messages */
}
</style>
<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>
<script type="text/javascript" src="lib/raphael-min.js"></script>
<script type="text/javascript" src="lib/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="seajax-utils.js"></script>
<script type="text/javascript">
var viewer;
function onZoomitResponse(response) {
if (response.error) {
alert(response.error);
return;
}
var content = response.content;
if (content.ready) {
viewer = new Seadragon.Viewer("viewer");
viewer.addEventListener("open", addOverlays);
viewer.openDzi(content.dzi);
} else if (content.failed) {
alert(content.url + " failed to convert.");
} else {
alert(content.url + " is " + Math.round(100 * content.progress) + "% done.");
}
}
$.ajax({
url: "http://api.zoom.it/v1/content/WwI0",
dataType: "jsonp",
success: onZoomitResponse
});
function addOverlays() {
// var ellipse = new No5.Seajax.Shapes.Ellipse(1500, 500);
// ellipse.attachTo(viewer, 20, 800);
// ellipse.getElement().attr({"fill":"#0fff00", "stroke-color":"#ff0000"});
var points = new Array();
points[0] = new Seadragon.Point(3065, 1278);
points[1] = new Seadragon.Point(3076, 1389);
points[2] = new Seadragon.Point(3116, 1401);
points[3] = new Seadragon.Point(3182, 1373);
points[4] = new Seadragon.Point(3232, 1319);
points[5] = new Seadragon.Point(3223, 1294);
points[6] = new Seadragon.Point(3163, 1279);
var hispania = new No5.Seajax.Shapes.Polygon(points);
hispania.getElement().attr({"fill":"#ffff44", "fill-opacity":0.5});
hispania.getElement().node.style.cursor = "pointer";
hispania.getElement().node.onmouseover = function() {
hispania.getElement().attr({"fill":"#ffffff"});
}
hispania.getElement().node.onmouseout = function() {
hispania.getElement().attr({"fill":"#ffff44"});
}
hispania.attachTo(viewer);
points = new Array();
points[0] = new Seadragon.Point(3076, 1017);
points[1] = new Seadragon.Point(3071, 1047);
points[2] = new Seadragon.Point(3076, 1082);
points[3] = new Seadragon.Point(3093, 1095);
points[4] = new Seadragon.Point(3090, 1115);
points[5] = new Seadragon.Point(3075, 1130);
points[6] = new Seadragon.Point(3076, 1144);
points[7] = new Seadragon.Point(3096, 1144);
points[8] = new Seadragon.Point(3068, 1158);
points[9] = new Seadragon.Point(3088, 1172);
points[10] = new Seadragon.Point(3178, 1159);
points[11] = new Seadragon.Point(3172, 1124);
points[12] = new Seadragon.Point(3145, 1107);
points[13] = new Seadragon.Point(3120, 1078);
points[14] = new Seadragon.Point(3112, 1047);
points[15] = new Seadragon.Point(3094, 1029);
var anglia = new No5.Seajax.Shapes.Polygon(points);
anglia.getElement().attr({"fill":"#4444ff", "fill-opacity":0.5});
anglia.getElement().node.style.cursor = "pointer";
anglia.getElement().node.onmouseover = function() {
anglia.getElement().attr({"fill":"#ffffff"});
}
anglia.getElement().node.onmouseout = function() {
anglia.getElement().attr({"fill":"#4444ff"});
}
anglia.attachTo(viewer);
// TODO introduce a mechanism that eliminates the need to do this...
setTimeout(function() {
// ellipse.redraw(viewer);
hispania.redraw(viewer);
anglia.redraw(viewer);
}, 500);
}
</script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>