mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-28 16:09:41 +00:00
54e7cbdf8f
Part of mobile device support: https://github.com/kanaka/noVNC/issues/48 The Display object is redefined as a larger display region with an equal or smaller visible viewport. The size of the full display region is set/changed using resize(). The viewport is set/changed using viewportChange(). All exposed routines that draw on the display now take coordinates that are absolute (relative to the full display region). For example, the result of fillRect(100, 100, 10, 10, [255,0,0]) will appear in the canvas at (0,0) if the viewport is set to (100,100). Details: - Move the generic part of the viewport code from tests/viewport.html into include/display. - Add two new routines to the Display interface: - viewportChange(deltaX, deltaY, width, height) - This adjusts the position of the visible viewport and/or the size of the viewport. - deltaX and deltaY specify how the position of the viewport should be shifted. The position of the viewport is clamped to the full region size (i.e. cannot outside the display region). - The clean and dirty regions of the display are updated based on calls to this routine. For example, if the viewport width is increased, then there is now a dirty box on the right side of the viewport. Another example, if the viewport is shifted down and to the left over the display region, there are now two dirty boxes: one on the left side and one on the bottom of the viewport. - getCleanDirtyReset() - This returns an object with the clean box and a list of dirty boxes (that need to be redrawn). {'cleanBox': {'x': x, 'y': y, 'w': w, 'h': h}, 'dirtyBoxes': [{'x': x, 'y': y, 'w': w, 'h': h}, ...] } - The coordinates in the clean and dirty boxes are absolute coordinates (relative to the full display region) but they are clipped to the visible viewport. - Calling this function also resets the clean rectangle to be the whole viewport (i.e. nothing visible needs to be redrawn dirty) so the caller of this routine is responsible for redrawing any
191 lines
6.1 KiB
HTML
191 lines
6.1 KiB
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>
|