Skip to content

N
noVNC
Commit ec40268e authored by Joel Martin's avatar Joel Martin
Browse files
Options

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.
parent 46c62117
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 27 deletions
include/mobile.css 0 → 100644
View file @ ec40268e
.fullscreen {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9999;
margin: 0;
padding: 0;
}
.flex-layout {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
}
.flex-box {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
}
tests/viewport.html
View file @ ec40268e
<!DOCTYPE html>
<html>
<head><title>Viewport Test</title></head>
<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>
<br><br>
Canvas:
<input id="move-selector" type="button" value="Move"
onclick="toggleMove();">
<br>
<canvas id="canvas" width="640" height="20"
style="border-style: dotted; border-width: 1px;">
Canvas not supported.
</canvas>
<br>
Results:<br>
<textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
<div class="fullscreen flex-layout">
<div>
Canvas:
<input id="move-selector" type="button" value="Move"
onclick="toggleMove();">
<br>
</div>
<div id="container" class="flex-box">
<canvas id="canvas"
style="border-style: dotted; border-width: 1px;">
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>
<!--
......@@ -30,10 +46,8 @@
<script>
var msg_cnt = 0, iterations,
fb_width = 800,
fb_height = 600,
viewport = {
'x': 0, 'y': 0,
'w' : 400, 'h' : 200 },
fb_height = 768,
viewport = {'x': 0, 'y': 0, 'w' : 0, 'h' : 0 },
cleanRect = {},
penDown = false, doMove = false,
inMove = false, lastPos = {},
......@@ -112,17 +126,24 @@
deltaX = - v.x;
}
if ((vx2 + deltaX) >= fb_width) {
deltaX -= ((vx2 + deltaX) - fb_width);
deltaX -= ((vx2 + deltaX) - fb_width + 1);
}
v.x += deltaX;
vx2 += deltaX;
if ((v.y + deltaY) < 0) {
deltaY = - v.y;
}
if ((vy2 + deltaY) >= fb_height) {
deltaY -= ((vy2 + deltaY) - fb_height);
deltaY -= ((vy2 + deltaY) - fb_height + 1);
}
if ((deltaX === 0) && (deltaY === 0)) {
//message("skipping");
return;
}
message("deltaX: " + deltaX + ", deltaY: " + deltaY);
v.x += deltaX;
vx2 += deltaX;
v.y += deltaY;
vy2 += deltaY;
......@@ -197,6 +218,7 @@
}
function drawArea(x, y, w, h) {
message("draw "+x+","+y+" ("+w+","+h+")");
var imgData = ctx.createImageData(w, h),
data = imgData.data, pixel, realX, realY;
......@@ -227,6 +249,28 @@
}
}
window.onresize = function() {
var v = viewport,
cw = $D('container').offsetWidth,
ch = $D('container').offsetHeight;
message("container: " + cw + "," + ch);
if (cw > fb_width) {
cw = fb_width;
}
if (ch > fb_height) {
ch = fb_height;
}
if ((cw !== v.w) || (ch !== v.h)) {
v.w = cw;
v.h = ch;
message("new viewport: " + v.w + "," + v.h);
canvas.resize(v.w, v.h);
drawArea(0, 0, v.w, v.h);
}
};
window.onload = function() {
canvas = new Display({'target' : $D('canvas')});
ctx = canvas.get_context();
......@@ -234,11 +278,10 @@
'onMouseButton': mouseButton,
'onMouseMove': mouseMove});
canvas.resize(viewport.w, viewport.h, true);
window.onresize();
mouse.grab();
message("Display initialized");
drawArea(0, 0, viewport.w, viewport.h);
}
message("Display initialized");
};
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment