3 <head><title>Viewport Test
</title>
4 <link rel=
"stylesheet" href=
"viewport.css">
6 <meta name="apple-mobile-web-app-capable" content="yes" />
7 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
9 <meta name=viewport
content=
"width=device-width, initial-scale=1.0, user-scalable=no">
12 <div class=
"flex-layout">
15 <input id=
"move-selector" type=
"button" value=
"Move"
16 onclick=
"toggleMove();">
19 <div class=
"container flex-box">
20 <canvas id=
"canvas" class=
"canvas">
28 <textarea id=
"messages" style=
"font-size: 9;" cols=
80 rows=
8></textarea>
34 <script type='text/javascript'
35 src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
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/keysymdef.js"></script>
41 <script src=
"../include/keyboard.js"></script>
42 <script src=
"../include/input.js"></script>
43 <script src=
"../include/display.js"></script>
45 var msg_cnt =
0, iterations,
46 penDown = false, doMove = false,
47 inMove = false, lastPos = {},
49 display, ctx, keyboard, mouse;
52 if (Util.Engine.trident) {
53 var newline =
"<br>\n";
56 function message(str) {
58 cell = $D('messages');
59 cell.innerHTML += msg_cnt +
": " + str + newline;
60 cell.scrollTop = cell.scrollHeight;
64 function mouseButton(x, y, down, bmask) {
65 //msg = 'mouse x,y: ' + x + ',' + y + ' down: ' + down;
66 //msg += ' bmask: ' + bmask;
70 if (down && !inMove) {
72 lastPos = {'x': x, 'y': y};
73 } else if (!down && inMove) {
80 if (down && ! penDown) {
84 } else if (!down && penDown) {
90 function mouseMove(x, y) {
94 //deltaX = x - lastPos.x; // drag viewport
95 deltaX = lastPos.x - x; // drag frame buffer
96 //deltaY = y - lastPos.y; // drag viewport
97 deltaY = lastPos.y - y; // drag frame buffer
98 lastPos = {'x': x, 'y': y};
100 display.viewportChangePos(deltaX, deltaY);
110 function dirtyRedraw() {
112 // Wait for user to stop moving viewport
116 var d = display.getCleanDirtyReset();
118 for (i =
0; i < d.dirtyBoxes.length; i++) {
119 //showBox(d.dirtyBoxes[i],
"dirty[" + i +
"]: ");
120 drawArea(d.dirtyBoxes[i]);
124 function drawArea(b) {
125 var data = [], pixel, x, y;
127 //message(
"draw "+b.x+
","+b.y+
" ("+b.w+
","+b.h+
")");
129 for (var i =
0; i < b.w; i++) {
131 for (var j =
0; j < b.h; j++) {
133 pixel = (j * b.w *
4 + i *
4);
134 data[pixel +
0] = ((x * y) /
13) %
256;
135 data[pixel +
1] = ((x * y) +
392) %
256;
136 data[pixel +
2] = ((x + y) +
256) %
256;
137 data[pixel +
3] =
255;
140 //message(
"i: " + i +
", j: " + j +
", pixel: " + pixel);
141 display.blitImage(b.x, b.y, b.w, b.h, data,
0);
144 function toggleMove() {
147 $D('move-selector').style.backgroundColor =
"";
148 $D('move-selector').style.color =
"";
151 $D('move-selector').style.backgroundColor =
"black";
152 $D('move-selector').style.color =
"lightgray";
156 function detectPad() {
157 var c = $D('canvas'), p = c.parentNode;
160 padW = c.offsetWidth -
10;
161 padH = c.offsetHeight -
10;
162 message(
"padW: " + padW +
", padH: " + padH);
165 function doResize() {
166 var p = $D('canvas').parentNode;
167 message(
"doResize1: [" + (p.offsetWidth - padW) +
168 "," + (p.offsetHeight - padH) +
"]");
169 display.viewportChangeSize(p.offsetWidth - padW, p.offsetHeight - padH);
171 var pos, new_w, new_h;pos
172 pos = Util.getPosition($D('canvas').parentNode);
173 new_w = window.innerWidth - pos.x;
174 new_h = window.innerHeight - pos.y;
175 display.viewportChangeSize(new_w, new_h);
179 window.onload = function() {
182 display = new Display({'target': $D('canvas')});
183 display.resize(
1600,
1024);
184 display.set_viewport(true);
185 ctx = display.get_context();
187 mouse = new Mouse({'target': $D('canvas'),
188 'onMouseButton': mouseButton,
189 'onMouseMove': mouseMove});
193 Util.addEvent(window, 'resize', doResize);
194 // Shrink viewport for first resize call so that the
195 // scrollbars are disabled
196 display.viewportChangeSize(
10,
10);
197 setTimeout(doResize,
1);
198 setInterval(dirtyRedraw,
50);
200 message(
"Display initialized");