Drive Pad

Drive-Pad.markdown

Drive Pad

DrivePad is intended for driving remote vehicles from a mobile device, such as a phone or tablet. It is a standalone plugin intended for hybrid Apps. This code snippet just handles the UI. It returns an X, Y, and a boolen (true or false) - indicating if the click (or touch) was in the circle.

A Pen by Jesse Monroy on CodePen.

License.

index.html

<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>

script.js

var myCircle = document.getElementById("circle");
var myResults = document.getElementById("results");
var myX = document.getElementById("x");
var myY = document.getElementById("y");
addEventListener('click', function(e) {
  // e = point clicked
  console.log("page", e.pageX, e.pageY);
  x = e.pageX;
  y = e.pageY;
  // myCircle = the circle on the screen
  // The bounding rectangle is given in coordinate relative to the viewport.
  // The parameters returned are:
  // https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
  boundObj = myCircle.getBoundingClientRect();
  radius = boundObj.height/2;
  // we'll use the top, right plus the radius to get our circle center
  cx = boundObj.left + radius;
  cy = boundObj.top + radius;
  console.log("center",cx,cy, radius);
  results = isPointInCircle(x,y,cx,cy,radius);  
  myResults.innerHTML = results;  
  myX.innerHTML = x;  
  myY.innerHTML = x;  
  console.log(results);
  // We're a plugin!
  // return {"x":x, "y":y, "inside":results};  
});

function isPointInCircle(x, y, cx, cy, radius) {
  return ((x-cx)*(x-cx)) + ((y-cy)*(y-cy)) < radius*radius;
};

style.css

#circle {height:100px;width:100px;border-radius:50px;background-color:#8888ee;}