]>
Commit | Line | Data |
---|---|---|
4245363c JM |
1 | <!DOCTYPE html> |
2 | <html> | |
ec40268e JM |
3 | <head><title>Viewport Test</title> |
4 | <link rel="stylesheet" href="../include/mobile.css"> | |
5 | <!-- | |
6 | <meta name="apple-mobile-web-app-capable" content="yes" /> | |
7 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
8 | --> | |
9 | <meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
10 | </head> | |
4245363c | 11 | <body> |
54e7cbdf JM |
12 | <div class="flex-layout"> |
13 | <div> | |
14 | Canvas: | |
15 | <input id="move-selector" type="button" value="Move" | |
16 | onclick="toggleMove();"> | |
17 | <br> | |
18 | </div> | |
19 | <div class="container flex-box"> | |
20 | <canvas id="canvas" class="canvas"> | |
21 | Canvas not supported. | |
22 | </canvas> | |
23 | <br> | |
24 | </div> | |
25 | <div> | |
26 | <br> | |
27 | Results:<br> | |
28 | <textarea id="messages" style="font-size: 9;" cols=80 rows=8></textarea> | |
29 | </div> | |
ec40268e | 30 | </div> |
4245363c JM |
31 | </body> |
32 | ||
33 | <!-- | |
34 | <script type='text/javascript' | |
35 | src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> | |
36 | --> | |
37 | <script src="../include/util.js"></script> | |
38 | <script src="../include/webutil.js"></script> | |
39 | <script src="../include/base64.js"></script> | |
40 | <script src="../include/input.js"></script> | |
41 | <script src="../include/display.js"></script> | |
42 | <script> | |
43 | var msg_cnt = 0, iterations, | |
4245363c JM |
44 | penDown = false, doMove = false, |
45 | inMove = false, lastPos = {}, | |
54e7cbdf JM |
46 | padW = 0, padH = 0, |
47 | display, ctx, keyboard, mouse; | |
4245363c JM |
48 | |
49 | var newline = "\n"; | |
50 | if (Util.Engine.trident) { | |
51 | var newline = "<br>\n"; | |
52 | } | |
53 | ||
54 | function message(str) { | |
55 | console.log(str); | |
56 | cell = $D('messages'); | |
57 | cell.innerHTML += msg_cnt + ": " + str + newline; | |
58 | cell.scrollTop = cell.scrollHeight; | |
59 | msg_cnt++; | |
60 | } | |
61 | ||
62 | function mouseButton(x, y, down, bmask) { | |
63 | //msg = 'mouse x,y: ' + x + ',' + y + ' down: ' + down; | |
64 | //msg += ' bmask: ' + bmask; | |
65 | //message(msg); | |
66 | ||
67 | if (doMove) { | |
68 | if (down && !inMove) { | |
69 | inMove = true; | |
70 | lastPos = {'x': x, 'y': y}; | |
4245363c JM |
71 | } else if (!down && inMove) { |
72 | inMove = false; | |
54e7cbdf | 73 | //dirtyRedraw(); |
4245363c JM |
74 | } |
75 | return; | |
76 | } | |
77 | ||
78 | if (down && ! penDown) { | |
79 | penDown = true; | |
80 | ctx.beginPath(); | |
81 | ctx.moveTo(x, y); | |
82 | } else if (!down && penDown) { | |
83 | penDown = false; | |
84 | ctx.closePath(); | |
85 | } | |
86 | } | |
87 | ||
88 | function mouseMove(x, y) { | |
608e0f52 | 89 | var deltaX, deltaY; |
4245363c JM |
90 | |
91 | if (inMove) { | |
54e7cbdf JM |
92 | //deltaX = x - lastPos.x; // drag viewport |
93 | deltaX = lastPos.x - x; // drag frame buffer | |
94 | //deltaY = y - lastPos.y; // drag viewport | |
95 | deltaY = lastPos.y - y; // drag frame buffer | |
96 | lastPos = {'x': x, 'y': y}; | |
97 | ||
98 | display.viewportChange(deltaX, deltaY); | |
4245363c JM |
99 | return; |
100 | } | |
101 | ||
102 | if (penDown) { | |
103 | ctx.lineTo(x, y); | |
104 | ctx.stroke(); | |
105 | } | |
106 | } | |
107 | ||
54e7cbdf JM |
108 | function dirtyRedraw() { |
109 | if (inMove) { | |
110 | // Wait for user to stop moving viewport | |
ec40268e JM |
111 | return; |
112 | } | |
ec40268e | 113 | |
54e7cbdf | 114 | var d = display.getCleanDirtyReset(); |
4245363c | 115 | |
54e7cbdf JM |
116 | for (i = 0; i < d.dirtyBoxes.length; i++) { |
117 | //showBox(d.dirtyBoxes[i], "dirty[" + i + "]: "); | |
118 | drawArea(d.dirtyBoxes[i]); | |
4245363c JM |
119 | } |
120 | } | |
121 | ||
54e7cbdf JM |
122 | function drawArea(b) { |
123 | var data = [], pixel, x, y; | |
4245363c | 124 | |
54e7cbdf | 125 | //message("draw "+b.x+","+b.y+" ("+b.w+","+b.h+")"); |
4245363c | 126 | |
54e7cbdf JM |
127 | for (var i = 0; i < b.w; i++) { |
128 | x = b.x + i; | |
129 | for (var j = 0; j < b.h; j++) { | |
130 | y = b.y + j; | |
131 | pixel = (j * b.w * 4 + i * 4); | |
132 | data[pixel + 0] = ((x * y) / 13) % 256; | |
133 | data[pixel + 1] = ((x * y) + 392) % 256; | |
134 | data[pixel + 2] = ((x + y) + 256) % 256; | |
4245363c JM |
135 | data[pixel + 3] = 255; |
136 | } | |
137 | } | |
138 | //message("i: " + i + ", j: " + j + ", pixel: " + pixel); | |
54e7cbdf | 139 | display.blitImage(b.x, b.y, b.w, b.h, data, 0); |
4245363c JM |
140 | } |
141 | ||
142 | function toggleMove() { | |
143 | if (doMove) { | |
144 | doMove = false; | |
145 | $D('move-selector').style.backgroundColor = ""; | |
146 | $D('move-selector').style.color = ""; | |
147 | } else { | |
148 | doMove = true; | |
149 | $D('move-selector').style.backgroundColor = "black"; | |
150 | $D('move-selector').style.color = "lightgray"; | |
151 | } | |
152 | } | |
153 | ||
54e7cbdf JM |
154 | function detectPad() { |
155 | var c = $D('canvas'), p = c.parentNode; | |
156 | c.width = 10; | |
157 | c.height = 10; | |
158 | padW = c.offsetWidth - 10; | |
159 | padH = c.offsetHeight - 10; | |
160 | message("padW: " + padW + ", padH: " + padH); | |
161 | } | |
ec40268e | 162 | |
54e7cbdf JM |
163 | function doResize() { |
164 | var p = $D('canvas').parentNode; | |
165 | message("doResize1: [" + (p.offsetWidth - padW) + | |
166 | "," + (p.offsetHeight - padH) + "]"); | |
167 | display.viewportChange(0, 0, | |
168 | p.offsetWidth - padW, p.offsetHeight - padH); | |
169 | } | |
ec40268e | 170 | |
4245363c | 171 | window.onload = function() { |
54e7cbdf JM |
172 | detectPad(); |
173 | display = new Display({'target': $D('canvas')}); | |
174 | display.resize(1600, 1024); | |
175 | //display.resize(800, 600); | |
176 | ctx = display.get_context(); | |
4245363c JM |
177 | mouse = new Mouse({'target': $D('canvas'), |
178 | 'onMouseButton': mouseButton, | |
179 | 'onMouseMove': mouseMove}); | |
180 | ||
54e7cbdf JM |
181 | Util.addEvent(window, 'resize', doResize); |
182 | //doResize(); | |
183 | setTimeout(doResize, 1); | |
184 | setInterval(dirtyRedraw, 50); | |
4245363c | 185 | mouse.grab(); |
4245363c | 186 | |
ec40268e JM |
187 | message("Display initialized"); |
188 | }; | |
4245363c JM |
189 | </script> |
190 | </html> |