openstack/deb-novnc
Code Issues Proposed changes
master
deb-novnc/tests/viewport.html

204 lines
6.6 KiB
HTML
Raw Permalink Normal View History

Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
<!DOCTYPE html>
<html>
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
<head><title>Viewport Test</title>
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
<link rel="stylesheet" href="viewport.css">
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
<!--
<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>
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
<body>
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
<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>
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
</div>
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
</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>
Keyboard Handling [6/8]: Update everything to include the new keyboard handling scripts
2013-11-27 15:24:05 +01:00
<script src="../include/keysymdef.js"></script>
<script src="../include/keyboard.js"></script>
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
<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 = {},
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
padW = 0, padH = 0,
display, ctx, keyboard, mouse;
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
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;
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
//dirtyRedraw();
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
}
return;
}
if (down && ! penDown) {
penDown = true;
ctx.beginPath();
ctx.moveTo(x, y);
} else if (!down && penDown) {
penDown = false;
ctx.closePath();
}
}
function mouseMove(x, y) {
Some CSS style and DOM id/class cleanup.
2011-09-14 09:24:30 -05:00
var deltaX, deltaY;
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
if (inMove) {
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
//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};
Support automatic resize [Part 1/4]: display.js * Split viewportChange into two functions, one for changing size and the other for changing position. * Modified viewport code to be capable of changing to a bigger size in the context of a client-initiated resize. * Made clearer distinctions between when viewport-clipping or not. * Added public function for telling when viewport-clipping. * Updated tests that were using viewportChange.
2015-02-06 16:43:45 +01:00
display.viewportChangePos(deltaX, deltaY);
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
return;
}
if (penDown) {
ctx.lineTo(x, y);
ctx.stroke();
}
}
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
function dirtyRedraw() {
if (inMove) {
// Wait for user to stop moving viewport
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
return;
}
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
var d = display.getCleanDirtyReset();
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
for (i = 0; i < d.dirtyBoxes.length; i++) {
//showBox(d.dirtyBoxes[i], "dirty[" + i + "]: ");
drawArea(d.dirtyBoxes[i]);
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
}
}
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
function drawArea(b) {
var data = [], pixel, x, y;
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
//message("draw "+b.x+","+b.y+" ("+b.w+","+b.h+")");
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
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;
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
data[pixel + 3] = 255;
}
}
//message("i: " + i + ", j: " + j + ", pixel: " + pixel);
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
display.blitImage(b.x, b.y, b.w, b.h, data, 0);
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
}
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";
}
}
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
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);
}
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
function doResize() {
var p = $D('canvas').parentNode;
message("doResize1: [" + (p.offsetWidth - padW) +
"," + (p.offsetHeight - padH) + "]");
Support automatic resize [Part 1/4]: display.js * Split viewportChange into two functions, one for changing size and the other for changing position. * Modified viewport code to be capable of changing to a bigger size in the context of a client-initiated resize. * Made clearer distinctions between when viewport-clipping or not. * Added public function for telling when viewport-clipping. * Updated tests that were using viewportChange.
2015-02-06 16:43:45 +01:00
display.viewportChangeSize(p.offsetWidth - padW, p.offsetHeight - padH);
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
/*
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;
Support automatic resize [Part 1/4]: display.js * Split viewportChange into two functions, one for changing size and the other for changing position. * Modified viewport code to be capable of changing to a bigger size in the context of a client-initiated resize. * Made clearer distinctions between when viewport-clipping or not. * Added public function for telling when viewport-clipping. * Updated tests that were using viewportChange.
2015-02-06 16:43:45 +01:00
display.viewportChangeSize(new_w, new_h);
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
*/
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
}
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
window.onload = function() {
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
detectPad();
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
display = new Display({'target': $D('canvas')});
display.resize(1600, 1024);
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
display.set_viewport(true);
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
ctx = display.get_context();
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
mouse = new Mouse({'target': $D('canvas'),
'onMouseButton': mouseButton,
'onMouseMove': mouseMove});
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
mouse.grab();
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
Util.addEvent(window, 'resize', doResize);
Viewport clip/drag for mobile/touchscreen devices. API changes (forward compatible): - Display: add 'viewport' conf option to turn on and off viewport mode. - RFB: add 'viewportDrag' option to enable/disable viewport dragging mode. Other: - Add clip mode setting to default UI. For touch devices, clipping is forced on. - Use CSS media queries to adjust visual elements based on screen size. Especially disconnected logo size/position and button text size. - Catch page unload while connected and give a confirm dialog. - Change mouse button selector to a single button that changes between ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being moved and doesn't send clicks). - include/ui.js:setViewClip() routine sets the clipping of the viewport to the current size of the viewport area (if clipping is enabled). - include/ui.js:setViewDrag() toggles/enables/disables viewport dragging mode. - Add several images for the UI and for Apple devices: - images/clipboard.png: clipboard menu icon - images/connect.png: connect menu icon - images/disconnect.png: disconnect button icon - images/keyboard.png: show keyboard button - images/move.png: viewport drag/move toggle button - images/settings.png: settings menu icon - images/screen_320x460.png: iOS app/desktop link start image - images/screen_57x57.png: iOS app icon - images/screen_700x700.png: full size noVNC image
2011-09-22 10:36:23 -05:00
// Shrink viewport for first resize call so that the
// scrollbars are disabled
Support automatic resize [Part 1/4]: display.js * Split viewportChange into two functions, one for changing size and the other for changing position. * Modified viewport code to be capable of changing to a bigger size in the context of a client-initiated resize. * Made clearer distinctions between when viewport-clipping or not. * Added public function for telling when viewport-clipping. * Updated tests that were using viewportChange.
2015-02-06 16:43:45 +01:00
display.viewportChangeSize(10, 10);
Viewport handling in include/display.js 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
2011-09-13 09:54:44 -05:00
setTimeout(doResize, 1);
setInterval(dirtyRedraw, 50);
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
Working viewport test. Tested on iOS (iPhone and iPad). The viewport is correctly clipped to the screen/browser size and resizing works correctly. This uses the CSS3 Flexible Box Layout model.
2011-08-22 11:21:55 -05:00
message("Display initialized");
};
Add a viewport example/test. Tested with an iPad 2. This example shows a 400x200 viewport of an 800x400 display. It tries to be intelligent about how much it redraws. It copies what it can, and then when the user releases the mouse, it redraws the "dirty" areas that were newly revealed.
2011-08-03 18:18:41 -05:00
</script>
</html>
Copy Permalink