Skip to content

Instantly share code, notes, and snippets.

@maelp
Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maelp/11523985 to your computer and use it in GitHub Desktop.
Save maelp/11523985 to your computer and use it in GitHub Desktop.
Fast prototyping tricks - Display prototype on device
<!DOCTYPE html>
<meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="utf-8">
<style>
/* Avoid swipe gesture selecting part of the app */
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: #444;
/* make sure the body cannot be scrolled */
overflow: hidden;
position: fixed;
top:0;
left:0;
}
circle {
fill: #f48;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.min.js"></script>
<script type='text/javascript'>
(function () {
var color = d3.scale.category20c(d3.range(0, 20));
window.addEventListener('load', function () {
var width = window.innerWidth;
var height = window.innerHeight;
var svg = d3.select('body').append('svg')
.attr('width', '100%')
.attr('height', '100%');
var r = Math.min(width, height) / 8;
var circle = svg.append('circle')
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', r);
Hammer(circle.node()).on('tap', function (event) {
var cx = r + (width - 2 * r) * Math.random();
var cy = r + (height - 2 * r) * Math.random();
circle
.transition()
.duration(500)
.ease('bounce')
.attr('cx', cx)
.attr('cy', cy);
});
Hammer(d3.select('body').node()).on('swipe', function (event) {
circle.style('fill', color(Math.floor(Math.random() * 20)));
});
document.body.addEventListener('touchmove', function (e) { e.preventDefault(); })
});
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment