Kombi Instrument EDAG

by Konstantin Heinrich

HTML

<div>
  <canvas id="combiInstrument">
    No support, sorry ;-()
  </canvas>
</div>

JavaScript

var currentSpeed = -48;
			$(document).ready(function(){
				setupCanvas();
			});
			$(document).keypress(function(e) {
			console.log(e);
			//not sure here if this will work with your keyboard
			//43 is here '+' and 45 is '-' 
			if(e.which == 43) {
				if(currentSpeed <= 180)
					currentSpeed++;
			}
			else if(e.which == 45){
				if(currentSpeed >= -48)
					currentSpeed--;
			}
			drawControl(currentSpeed);
			});

			function setupCanvas(){
				var canvas = $("#combiInstrument").get(0);
				canvas.width  = "1200";
				canvas.height = "715";
				canvas.style  = "border:1px solid #000000;";
				drawControl(currentSpeed);     
			};

			function drawControl(speed){
				var canvas = $("#combiInstrument").get(0);
				var ctx = canvas.getContext("2d");
				var xMiddle = canvas.width / 2;
				var yMiddle = canvas.height / 2;
				//clear before redraw new state
				ctx.clearRect(0, 0, 1200, 715);
				ctx.save();
				//translate ctx to center, because of rotation
				ctx.translate(xMiddle + 5,yMiddle + 10);
				ctx.rotate(speed * Math.PI / 180);
				//begin 
				ctx.beginPath();
				var controlLenght = 260;
				var controlPointx = controlLenght / 2
	
				//draw path
				ctx.moveTo(-controlLenght,0 + 2.5);
				ctx.arc(-controlLenght,0,2.5, 0.5 * Math.PI, 1.5 * Math.PI,false);  //25
				ctx.quadraticCurveTo(-controlPointx + 70,0 - 10,-15,-5);
				ctx.moveTo(-15,-5);
				ctx.arc(-15,0,5, 1.5 * Math.PI, 0.5 * Math.PI,false);
				ctx.quadraticCurveTo(-controlPointx + 70,0 + 10,-controlLenght,0 + 2.5);
				//setup fill gradient (backgroundColor)
				var grd = ctx.createLinearGradient(0,0,-controlLenght,0);
				grd.addColorStop(0,"#00bfff");
				grd.addColorStop(0.15,"#00ffff");
				grd.addColorStop(1,"#7f00ff");
				ctx.fillStyle = grd;
				ctx.fill();
    
				ctx.shadowBlur = 10;
				ctx.shadowColor="black";
				//setup stroke (borderline)
				ctx.strokeStyle="white";
				ctx.stroke();
				//finish
				ctx.closePath();
				//restore path for possible next...