[mirror_novnc.git] / tests / viewport.html

<!DOCTYPE html>
<html>
    <head><title>Viewport Test</title>
        <link rel="stylesheet" href="viewport.css">
        <!--
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        -->
        <meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=no">
    </head>
    <body>
        <div class="flex-layout">
            <div>
                Canvas:
                    <input id="move-selector" type="button" value="Move"
                        onclick="toggleMove();">
                <br>
            </div>
            <div class="container flex-box">
                <canvas id="canvas" class="canvas">
                    Canvas not supported.
                </canvas>
                <br>
            </div>
            <div>
                <br>
                Results:<br>
                <textarea id="messages" style="font-size: 9;" cols=80 rows=8></textarea>
            </div>
        </div>
    </body>

    <!--
    <script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    -->
    <script src="../include/util.js"></script>
    <script src="../include/webutil.js"></script> 
    <script src="../include/base64.js"></script>
    <script src="../include/keysymdef.js"></script>
    <script src="../include/keyboard.js"></script>
    <script src="../include/input.js"></script> 
    <script src="../include/display.js"></script>
    <script>
        var msg_cnt = 0, iterations,
            penDown = false, doMove = false,
            inMove = false, lastPos = {},
            padW = 0, padH = 0,
            display, ctx, keyboard, mouse;

        var newline = "\n";
        if (Util.Engine.trident) {
            var newline = "<br>\n";
        }

        function message(str) {
            console.log(str);
            cell = $D('messages');
            cell.innerHTML += msg_cnt + ": " + str + newline;
            cell.scrollTop = cell.scrollHeight;
            msg_cnt++;
        }

        function mouseButton(x, y, down, bmask) {
            //msg = 'mouse x,y: ' + x + ',' + y + '  down: ' + down;
            //msg += ' bmask: ' + bmask;
            //message(msg);

            if (doMove) {
                if (down && !inMove) {
                    inMove = true;
                    lastPos = {'x': x, 'y': y};
                } else if (!down && inMove) {
                    inMove = false;
                    //dirtyRedraw();
                }
                return;
            }

            if (down && ! penDown) {
                penDown = true;
                ctx.beginPath();
                ctx.moveTo(x, y);
            } else if (!down && penDown) {
                penDown = false;
                ctx.closePath();
            }
        }

        function mouseMove(x, y) {
            var deltaX, deltaY;

            if (inMove) {
                //deltaX = x - lastPos.x; // drag viewport
                deltaX = lastPos.x - x; // drag frame buffer
                //deltaY = y - lastPos.y; // drag viewport
                deltaY = lastPos.y - y; // drag frame buffer
                lastPos = {'x': x, 'y': y};

                display.viewportChangePos(deltaX, deltaY);
                return;
            }

            if (penDown) {
                ctx.lineTo(x, y);
                ctx.stroke();
            }
        }

        function dirtyRedraw() {
            if (inMove) {
                // Wait for user to stop moving viewport
                return;
            }

            var d = display.getCleanDirtyReset();

            for (i = 0; i < d.dirtyBoxes.length; i++) {
                //showBox(d.dirtyBoxes[i], "dirty[" + i + "]: ");
                drawArea(d.dirtyBoxes[i]);
            }
        }

        function drawArea(b) {
            var data = [], pixel, x, y;

            //message("draw "+b.x+","+b.y+" ("+b.w+","+b.h+")");

            for (var i = 0; i < b.w; i++) {
                x = b.x + i;
                for (var j = 0; j < b.h; j++) {
                    y = b.y + j;
                    pixel = (j * b.w * 4 + i * 4);
                    data[pixel + 0] = ((x * y) / 13) % 256;
                    data[pixel + 1] = ((x * y) + 392) % 256;
                    data[pixel + 2] = ((x + y) + 256) % 256;
                    data[pixel + 3] = 255;
                }
            }
            //message("i: " + i + ", j: " + j + ", pixel: " + pixel);
            display.blitImage(b.x, b.y, b.w, b.h, data, 0);
        }

        function toggleMove() {
            if (doMove) {
                doMove = false;
                $D('move-selector').style.backgroundColor = "";
                $D('move-selector').style.color = "";
            } else {
                doMove = true;
                $D('move-selector').style.backgroundColor = "black";
                $D('move-selector').style.color = "lightgray";
            }
        }

        function detectPad() {
            var c = $D('canvas'), p = c.parentNode;
            c.width = 10;
            c.height = 10;
            padW = c.offsetWidth - 10;
            padH = c.offsetHeight - 10;
            message("padW: " + padW + ", padH: " + padH);
        }

        function doResize() {
            var p = $D('canvas').parentNode;
            message("doResize1: [" + (p.offsetWidth - padW) +
                    "," + (p.offsetHeight - padH) + "]");
            display.viewportChangeSize(p.offsetWidth - padW, p.offsetHeight - padH);
            /*
            var pos, new_w, new_h;pos
            pos = Util.getPosition($D('canvas').parentNode);
            new_w = window.innerWidth - pos.x;
            new_h = window.innerHeight - pos.y;
            display.viewportChangeSize(new_w, new_h);
            */
        }

        window.onload = function() {
            detectPad();

            display = new Display({'target': $D('canvas')});
            display.resize(1600, 1024);
            display.set_viewport(true);
            ctx = display.get_context();

            mouse    = new Mouse({'target': $D('canvas'),
                                'onMouseButton': mouseButton,
                                'onMouseMove': mouseMove});
            mouse.grab();


            Util.addEvent(window, 'resize', doResize);
            // Shrink viewport for first resize call so that the
            // scrollbars are disabled
            display.viewportChangeSize(10, 10);
            setTimeout(doResize, 1);
            setInterval(dirtyRedraw, 50);

            message("Display initialized");
        };
    </script>
</html>
Commit	Line	Data
4245363c JM	1	<!DOCTYPE html>
4245363c JM	2	<html>
ec40268e	3	<head><title>Viewport Test</title>
a5df24b4	4	<link rel="stylesheet" href="viewport.css">
ec40268e JM	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>
2ea40fdf	40	<script src="../include/keysymdef.js"></script>
2ea40fdf	41	<script src="../include/keyboard.js"></script>
4245363c JM	42	<script src="../include/input.js"></script>
	43	<script src="../include/display.js"></script>
	44	<script>
	45	var msg_cnt = 0, iterations,
4245363c JM	46	penDown = false, doMove = false,
4245363c JM	47	inMove = false, lastPos = {},
54e7cbdf JM	48	padW = 0, padH = 0,
54e7cbdf JM	49	display, ctx, keyboard, mouse;
4245363c JM	50
	51	var newline = "\n";
	52	if (Util.Engine.trident) {
	53	var newline = "<br>\n";
	54	}
	55
	56	function message(str) {
	57	console.log(str);
	58	cell = $D('messages');
	59	cell.innerHTML += msg_cnt + ": " + str + newline;
	60	cell.scrollTop = cell.scrollHeight;
	61	msg_cnt++;
	62	}
	63
	64	function mouseButton(x, y, down, bmask) {
	65	//msg = 'mouse x,y: ' + x + ',' + y + ' down: ' + down;
	66	//msg += ' bmask: ' + bmask;
	67	//message(msg);
	68
	69	if (doMove) {
	70	if (down && !inMove) {
	71	inMove = true;
	72	lastPos = {'x': x, 'y': y};
4245363c JM	73	} else if (!down && inMove) {
4245363c JM	74	inMove = false;
54e7cbdf	75	//dirtyRedraw();
4245363c JM	76	}
	77	return;
	78	}
	79
	80	if (down && ! penDown) {
	81	penDown = true;
	82	ctx.beginPath();
	83	ctx.moveTo(x, y);
	84	} else if (!down && penDown) {
	85	penDown = false;
	86	ctx.closePath();
	87	}
	88	}
	89
	90	function mouseMove(x, y) {
608e0f52	91	var deltaX, deltaY;
4245363c JM	92
4245363c JM	93	if (inMove) {
54e7cbdf JM	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};
	99
636be753	100	display.viewportChangePos(deltaX, deltaY);
4245363c JM	101	return;
	102	}
	103
	104	if (penDown) {
	105	ctx.lineTo(x, y);
	106	ctx.stroke();
	107	}
	108	}
	109
54e7cbdf JM	110	function dirtyRedraw() {
	111	if (inMove) {
	112	// Wait for user to stop moving viewport
ec40268e JM	113	return;
ec40268e JM	114	}
ec40268e	115
54e7cbdf	116	var d = display.getCleanDirtyReset();
4245363c	117
54e7cbdf JM	118	for (i = 0; i < d.dirtyBoxes.length; i++) {
	119	//showBox(d.dirtyBoxes[i], "dirty[" + i + "]: ");
	120	drawArea(d.dirtyBoxes[i]);
4245363c JM	121	}
	122	}
	123
54e7cbdf JM	124	function drawArea(b) {
54e7cbdf JM	125	var data = [], pixel, x, y;
4245363c	126
54e7cbdf	127	//message("draw "+b.x+","+b.y+" ("+b.w+","+b.h+")");
4245363c	128
54e7cbdf JM	129	for (var i = 0; i < b.w; i++) {
	130	x = b.x + i;
	131	for (var j = 0; j < b.h; j++) {
	132	y = b.y + 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;
4245363c JM	137	data[pixel + 3] = 255;
	138	}
	139	}
	140	//message("i: " + i + ", j: " + j + ", pixel: " + pixel);
54e7cbdf	141	display.blitImage(b.x, b.y, b.w, b.h, data, 0);
4245363c JM	142	}
	143
	144	function toggleMove() {
	145	if (doMove) {
	146	doMove = false;
	147	$D('move-selector').style.backgroundColor = "";
	148	$D('move-selector').style.color = "";
	149	} else {
	150	doMove = true;
	151	$D('move-selector').style.backgroundColor = "black";
	152	$D('move-selector').style.color = "lightgray";
	153	}
	154	}
	155
54e7cbdf JM	156	function detectPad() {
	157	var c = $D('canvas'), p = c.parentNode;
	158	c.width = 10;
	159	c.height = 10;
	160	padW = c.offsetWidth - 10;
	161	padH = c.offsetHeight - 10;
	162	message("padW: " + padW + ", padH: " + padH);
	163	}
ec40268e	164
54e7cbdf JM	165	function doResize() {
	166	var p = $D('canvas').parentNode;
	167	message("doResize1: [" + (p.offsetWidth - padW) +
	168	"," + (p.offsetHeight - padH) + "]");
636be753	169	display.viewportChangeSize(p.offsetWidth - padW, p.offsetHeight - padH);
a5df24b4 JM	170	/*
	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;
636be753	175	display.viewportChangeSize(new_w, new_h);
a5df24b4	176	*/
54e7cbdf	177	}
ec40268e	178
4245363c	179	window.onload = function() {
54e7cbdf	180	detectPad();
a5df24b4	181
54e7cbdf JM	182	display = new Display({'target': $D('canvas')});
54e7cbdf JM	183	display.resize(1600, 1024);
a5df24b4	184	display.set_viewport(true);
54e7cbdf	185	ctx = display.get_context();
a5df24b4	186
4245363c JM	187	mouse = new Mouse({'target': $D('canvas'),
	188	'onMouseButton': mouseButton,
	189	'onMouseMove': mouseMove});
a5df24b4 JM	190	mouse.grab();
a5df24b4 JM	191
4245363c	192
54e7cbdf	193	Util.addEvent(window, 'resize', doResize);
a5df24b4 JM	194	// Shrink viewport for first resize call so that the
a5df24b4 JM	195	// scrollbars are disabled
636be753	196	display.viewportChangeSize(10, 10);
54e7cbdf JM	197	setTimeout(doResize, 1);
54e7cbdf JM	198	setInterval(dirtyRedraw, 50);
4245363c	199
ec40268e JM	200	message("Display initialized");
ec40268e JM	201	};
4245363c JM	202	</script>
4245363c JM	203	</html>