Steering

Steering algorithm for an RC-Car that translates x and y to left and right

by Alex Oros

HTML

<div id="content">
  <h1>Steering</h1>
  <div id="steercontainter">
      <img id="video" src="http://www.leipzig.travel/blog/wp-content/uploads/2016/09/SchachzentrumUmgebung_RobinKunz-500x500.jpg" >  
      <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;" class="overlay">
      </canvas> 
  </div>
  <div class="container">
    <div id="xy" class="fixed">x y</div>
    <div id="cxcy" class="fixed">cx cy</div>
    <div id="lr" class="fixed">left right</div>
  </div>

  </div>
        <div id="console"></div>  
</div>

CSS

#content {
  width: 502px;
  height: 800px;
  position: relative;
  margin: 0 auto;
  border:1px solid #000000;
}
#steercontainer {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}
#myCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#video {
  position: absolute;
  top: 0;
  left: 0;
}
.container {
	display: flex;
  position: relative;
  margin: 0 auto;
  top: 450px;
}
.fixed {
	width: 120px;
}

JavaScript

Number.prototype.map = function (in_min, in_max, out_min, out_max) {
		  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
		}
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var rect = canvas.getBoundingClientRect();
		var mdown = false;
		canvas.addEventListener("mousedown", inputStart, false);
		canvas.addEventListener("mouseup", inputEnd, false);
		canvas.addEventListener("mouseout", function(e) {
			mdown = false;
		}, false);
		canvas.addEventListener('mousemove', inputMove, false);
		canvas.addEventListener("touchstart", inputStart, false);
		canvas.addEventListener("touchend", inputEnd, false);
		canvas.addEventListener("touchmove", inputMove, false);
		function inputStart() {
			mdown = true;
		}
		function inputEnd() {
    	inputMove({ clientX: Math.round(rect.width/2+rect.left), clientY: Math.round(rect.height/2+rect.top)});
			mdown = false;
		}
		function inputMove(e) {
    	document.getElementById("console").innerHTML = "inputMove()";

			if(mdown) {
				var pos = getMousePos(e);
				centerPos(pos);
        //mapCenterPos(pos);
				toLeftRight(pos);
				printPos(pos);
				drawHandle(pos);
        event.preventDefault();
			}
		}
		function getMousePos(evt) {	
			var pos = {
			  x: evt.clientX - Math.round(rect.left),
			  y: evt.clientY - Math.round(rect.top)
			};
			pos.ox = pos.x;
			pos.oy = pos.y;
			return pos;
		}
		function centerPos(pos) {
			pos.cx = pos.x-rect.width/2;
			pos.cy = rect.height/2-pos.y;
		}
		function toLeftRight(pos) {
			pos.left = Math.min(pos.cy+pos.cx, 254);
			pos.right = Math.min(pos.cy-pos.cx, 254);
			return pos;
		}
		function mapCenterPos(pos) {
			pos.cx = Math.round(pos.cx.map(0, rect.width/2, 0, 254));
			pos.cy = 254 - Math.round(pos.cy.map(0, rect.height/2, 0, 254));
		}
		function printPos(pos) {
			document.getElementById("xy").innerHTML = "x:"+pos.x + "  y:" + pos.y;
			document.getElementById("cxcy").innerHTML = "cx:"+pos.cx + "  cy:"...