GfA
/
novnc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!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/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.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);
            /*
            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.viewportChange(0, 0, 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.viewportChange(0, 0, 10, 10);
            setTimeout(doResize, 1);
            setInterval(dirtyRedraw, 50);

            message("Display initialized");
        };
    </script>
</html>