-
Notifications
You must be signed in to change notification settings - Fork 13
/
demo-lib.html
127 lines (97 loc) · 2.67 KB
/
demo-lib.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
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<style>
/*@media (min-width: 512px) {
.container { max-width: 1536px; }
}
*/
body {
font-family: Arial, serif;
font-size:13px;
color: #555;
padding-top:10px;
}
h1, .h1, h2,.h2, h3,.h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #333;
}
canvas {
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Relight!</h1>
<p>Click and drag on the image to test the RTI dataset. Shift drag for light.</p>
<!-- Change width and height to match your dataset -->
<canvas id="rticanvas" width="1024" height="800"></canvas>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- <script src="js/jquery-3.2.1.min.js"></script> -->
<script src="relight.js"></script>
<script>
//Change this to your dataset
var url = 'test/bilinear18';
var zoom = 1;
var canvas = $('#rticanvas');
var glopt = { antialias: false, depth: false };
var rti = new Relight(canvas[0], { url:url, layout:"deepzoom" });
//iip server test configuration, still not working.
//var rti = new RtiViewer(canvas[0], { layout:"iip", server:"/iipsrv/iipsrv.fcgi", path:"/var/www/html/relight1/test/front1044", url:url });
rti.onLoad = function(t) { /* not needed t.centerAndScale(0); */ }
var scrolling = null;
canvas.mousedown(function(e) {
if(e.button != 0) return;
scrolling = {
x: e.pageX - $(this).offset().left,
y: e.pageY - $(this).offset().top,
pos: rti.pos
};
e.preventDefault();
});
$(window).mousemove(function(e) {
if(!scrolling) return;
var x = e.pageX - canvas.offset().left;
var y = e.pageY - canvas.offset().top;
if(!e.shiftKey && !e.ctrlKey) {
var p = scrolling.pos;
var scale = Math.pow(2, p.z);
var dx = (x - scrolling.x)*scale;
var dy = (y - scrolling.y)*scale;
rti.setPosition(p.x - dx, p.y - dy, p.z, 100);
} else {
var w = canvas.width();
var h = canvas.height();
x = (w - x)/w*2 - 1;
y = (h - y)/h*2 - 1;
var r = Math.sqrt(x*x + y*y);
if(r > 1.0) {
x /= r;
y /= r;
r = 1.0;
}
var z = Math.sqrt(1 - r);
rti.setLight(-x, y, z);
}
e.preventDefault();
});
$(window).mouseup(function(e) { scrolling = null; });
$(window).bind('mousewheel DOMMouseScroll', function(e) {
var dz = 0;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { // scroll up
dz = 0.25;
}
else { // scroll down
dz = -0.25;
}
rti.zoom(dz, 100);
e.preventDefault();
});
</script>
</html>