Just like DrivePad, except it is intended to be standalone.
A Pen by Jesse Monroy on CodePen.
Just like DrivePad, except it is intended to be standalone.
A Pen by Jesse Monroy on CodePen.
<div id=circle></div> | |
<div>isPointInCircle: <span id=results>false</span></div> | |
<div>click: x:<span id=x>x</span>,y:<span id=y>y</span></div> |
var myCircle = document.getElementById("circle"); | |
var myResults = document.getElementById("results"); | |
var myX = document.getElementById("x"); | |
var myY = document.getElementById("y"); | |
var drivePad = { | |
theCallback : null, | |
cx : null, | |
cy : null, | |
radius : null, | |
// | |
init : function(type, circleId, watchId, callback) { | |
// save the callback | |
theCallback = callback; | |
// assign a handler | |
switch (type) { | |
case 'click': | |
watchId.addEventListener('click', drivePad.handleClick); | |
break; | |
case 'touch': | |
watchId.addEventListener('touchstart', drivePad.handleTouch); | |
watchId.addEventListener('touchend', drivePad.handleTouch); | |
watchId.addEventListener('touchmove', drivePad.handleTouch); | |
break; | |
} | |
// get the center of our circle, and it's radius | |
// BUG: WebView (ala Phonegap/Android) has a rather nasty bug | |
// that requires assignment to a single object, then demuxing (as seen) | |
var data = drivePad.getCenter(circleId); | |
drivePad.cx = data[0]; | |
drivePad.cy = data[1]; | |
drivePad.radius = data[2]; | |
console.log("center", drivePad.cx, drivePad.cy, drivePad.radius); | |
}, | |
handleClick : function(e) { | |
// e = point clicked | |
//console.log("page", e.pageX, e.pageY); | |
x = e.pageX; | |
y = e.pageY; | |
results = drivePad.isPointInCircle(x, y, drivePad.cx, drivePad.cy, drivePad.radius); | |
//console.log(results); | |
theCallback({"x":x, "y":y, "inside":results}); | |
}, | |
handleTouch : function(evt) { | |
theCallback(null); | |
}, | |
// | |
// | |
// | |
isPointInCircle : function(x, y, cx, cy, radius) { | |
//console.log("checking", x, y, cx, cy, radius); | |
return ((x-cx)*(x-cx)) + ((y-cy)*(y-cy)) < radius*radius; | |
}, | |
getCenter : function(myCircle) { | |
// myCircle = the circle on the screen | |
// https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect | |
var boundObj = myCircle.getBoundingClientRect(); | |
radius = boundObj.height/2; | |
// we'll use the left, top plus the radius to get our circle center | |
cx = boundObj.left + radius; | |
cy = boundObj.top + radius; | |
console.log("get", cx, cy, radius); | |
return [cx, cy, radius]; | |
} | |
}; | |
function showResults(r) { | |
myResults.innerHTML = r.inside; | |
myX.innerHTML = r.x; | |
myY.innerHTML = r.y; | |
console.log(r); | |
} | |
drivePad.init('click', myCircle, document.body, showResults); | |
#circle {height:100px;width:100px;border-radius:50px;background-color:#4444ee;} |