Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
206 lines (146 sloc) 5.31 KB
<!DOCTYPE html>
<html>
<head>
<title>Swipey (Mapped to device pixels)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- There's no meta viewport here as the native helper writes it into the <head> -->
<link rel="stylesheet" href="common/style.css" type="text/css" media="screen">
<!-- important files (non-optional) -->
<script src="../src/viewporter.js"></script>
<script src="../src/viewporter.native.js"></script><!-- important: this has to be in the <head>! -->
<!-- the following two are optional, and just for this demo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// adapted and inspired from Adam Cole, 2011-Sept-14
function rainbow(numOfSteps, step) {
var r, g, b, h = step / numOfSteps, i = ~~(h * 6), f = h * 6 - i, q = 1 - f;
switch(i % 6) {
case 0: r = 1, g = f, b = 0; break;
case 1: r = q, g = 1, b = 0; break;
case 2: r = 0, g = 1, b = f; break;
case 3: r = 0, g = q, b = 1; break;
case 4: r = f, g = 0, b = 1; break;
case 5: r = 1, g = 0, b = q; break;
}
return [((~ ~(r * 255))), (~ ~(g * 255)), (~ ~(b * 255))];
}
function drawingPointer(context, color) {
var clickX = [];
var clickY = [];
var clickDrag = [];
this.painting = false;
var timestamp = null;
this.addPoint = function(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
};
this.start = function() {
this.clear();
this.painting = true;
};
this.clear = function() {
clickX = [];
clickY = [];
clickDrag = [];
timestamp = null;
};
this.stop = function() {
this.painting = false;
timestamp = Date.now();
};
this.redraw = function() {
var opacity = timestamp ? (300 - (Date.now() - timestamp)) / 300 : 1;
if(opacity <= 0) {
this.clear();
return;
}
context.strokeStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + opacity + ")";
context.lineJoin = "round";
context.lineWidth = (window.devicePixelRatio || 1) * 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i) {
context.moveTo(clickX[i-1], clickY[i-1]);
} else {
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
};
};
$(window).bind(viewporter.ACTIVE ? 'viewportready' : 'load', function() {
var canvas = $('canvas')[0];
var context = canvas.getContext('2d');
var iOS = (/iphone|ipad/i).test(navigator.userAgent);
var pointers = {};
// handle resizing / rotating of the viewport
var width, height;
$(window).bind(viewporter.ACTIVE ? 'viewportchange' : 'resize', function() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight
}).trigger(viewporter.ACTIVE ? 'viewportchange' : 'resize');
$('canvas').bind(iOS ? 'touchstart' : 'mousedown', function(e) {
e.preventDefault();
var touches = iOS ? e.originalEvent.changedTouches : [e.originalEvent];
var identifier;
for (var i = 0; i < touches.length; i++) {
identifier = touches[i].identifier || 'mouse';
// if no pointer has been created for this finger yet, do it
if(!pointers[identifier]) {
pointers[identifier] = new drawingPointer(context, rainbow(8, Object.keys(pointers).length));
}
pointers[identifier].start();
pointers[identifier].addPoint(touches[i].pageX, touches[i].pageY);
}
});
$('canvas').bind(iOS ? 'touchmove' : 'mousemove', function(e) {
var touches = iOS ? e.originalEvent.changedTouches : [e.originalEvent];
var identifier;
for (var i = 0; i < touches.length; i++) {
identifier = touches[i].identifier || 'mouse';
if(pointers[identifier] && pointers[identifier].painting) {
pointers[identifier].addPoint(touches[i].pageX, touches[i].pageY, true);
}
}
});
$('canvas').bind(iOS ? 'touchend' : 'mouseup', function(e) {
var touches = iOS ? e.originalEvent.changedTouches : [e.originalEvent];
var identifier;
for (var i = 0; i < touches.length; i++) {
identifier = touches[i].identifier || 'mouse';
if(pointers[identifier]) {
// stop the pointer (fades it out)
pointers[identifier].stop();
// delete it from the pointers object after 300ms (fade out time)
(function(identifier) {
setTimeout(function() {
delete pointers[identifier];
}, 300);
})(identifier);
}
}
});
window.setInterval(function() {
context.clearRect(0, 0, width, height);
var counter = 0, ratio = window.devicePixelRatio || 1;
for(var identifier in pointers) {
pointers[identifier].redraw();
counter++;
}
context.font = (10 * ratio) + 'pt Arial';
context.fillText(counter + ' active pointers', 15 * ratio, 25 * ratio);
}, 16);
});
</script>
</head>
<body>
<div id="viewporter">
<canvas></canvas>
</div>
</body>
</html>