[mirror_novnc.git] / tests / viewport.html

<!DOCTYPE html>
<html>
    <head><title>Viewport Test</title>
        <link rel="stylesheet" href="../include/mobile.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/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, x1, y1;

            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.viewportChange(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.viewportChange(0, 0,
                p.offsetWidth - padW, p.offsetHeight - padH);
        }

        window.onload = function() {
            detectPad();
            display = new Display({'target': $D('canvas')});
            display.resize(1600, 1024);
            //display.resize(800, 600);
            ctx = display.get_context();
            mouse    = new Mouse({'target': $D('canvas'),
                                'onMouseButton': mouseButton,
                                'onMouseMove': mouseMove});

            Util.addEvent(window, 'resize', doResize);
            //doResize();
            setTimeout(doResize, 1);
            setInterval(dirtyRedraw, 50);
            mouse.grab();

            message("Display initialized");
        };
    </script>
</html>
Commit	Line	Data
4245363c JM	1	<!DOCTYPE html>
4245363c JM	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,
4245363c JM	45	inMove = false, lastPos = {},
54e7cbdf JM	46	padW = 0, padH = 0,
54e7cbdf JM	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) {
4245363c JM	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) {
	89	var deltaX, deltaY, x1, y1;
	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;
ec40268e JM	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) {
54e7cbdf JM	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");
ec40268e JM	188	};
4245363c JM	189	</script>
4245363c JM	190	</html>