index014.html

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.min.js"></script>

<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="testcam.js"></script>

<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">

// Cam/follower mechanism simulator by Jumpjack

// Version 0.1.4
// Added pressure angle path (hence circular cam moved to the right to get some space)
// Fixed bug of bad calculation of follower contact point;
// Added orange colorization for invalid concatc point of follower
// Added cam eccentricity (= follower horizontal offset); to do: fix flat path marker for eccentricity !=0
//


// Version 0.1.3
// Added flat path markers
// Added display of rotation angle value
// Added slider for manual rotation
// Added import/export SVG
// Grouped import/export buttons
// Cleaned up code
// Increased resolution of circular path (indepdendent of flat path resolution)

// Version 0.1.2
// Added exporting to SVG format.
// Please use one of these servies to convert to STL for 3d printing:
// https://rawgit.com/ryancalme/svg-to-stl/master/SVGtoSTL.html (source: https://github.com/rcalme/svg-to-stl )
// http://svg2stl.com/

// Version 0.1.1
//  Added pressure angle

// Version 0.1.0 - First public version - 11/11/2021
//	To do:
//	editable flat path;
//	export in SVG format;
//	export in STL format;
//	tunable rotation speed/direction;
//	add speed chart, angle chart, acceleration chart,...

// Known problems:
//	 Can't handle properly two points at same angle in flat path
///////////////////////////////////////////////////////////////



// Init internal variables and constants:
ANGLE_OFFSET 	= -90; // Internally used to have the cam profile starting at top rather than at right
CAM_RADIUS 		= 100;
CAM_CENTER_X 	= 500;
CAM_CENTER_Y	= 230;
GRID_X_OFFSET = 10;
GRID_Y_OFFSET = 10;
CAM_WIDTH 					= config.pathWidth;
CAM_LINE_COLOR 				= config.lineColor;
CAM_FILL_COLOR 				= config.fillColor;
CAM_POINTS_COLOR 			= config.pointsColor;
CAM_FLATPATH_COLOR 			= config.flatpathColor;
CAM_FLATPATH_POINTS_COLOR	= config.flatpathPointsColor;
CAM_FLATPATH_WIDTH 			= config.flatpathWidth;
CIRCULAR_PRECISION          = 1;

FOLLOWER_LENGTH 			= config.followerLength;
FOLLOWER_COLOR 				= config.followerColor;
FOLLOWER_WIDTH 				= config.followerWidth;
followerOffsetX 			= config.initialFollowerOffsetX;
followerOffsetY 			= config.initialFollowerOffsetY;
FOLLOWER_TOP 				= new Point(CAM_CENTER_X + followerOffsetX, CAM_CENTER_Y + followerOffsetY - CAM_RADIUS);
FOLLOWER_BOTTOM 			= new Point(CAM_CENTER_X + followerOffsetX, CAM_CENTER_Y + followerOffsetY - CAM_RADIUS - FOLLOWER_LENGTH);


MAX_PRESSURE = config.maxPressure;

NORMAL_COLOR = config.normalColor;
NORMAL_WIDTH = config.normalWidth;

ZERO_ZERO = new Point(0 + GRID_X_OFFSET, 0 + GRID_Y_OFFSET);
UPPER_POINT = new Point(0 + GRID_X_OFFSET,CAM_RADIUS+ GRID_Y_OFFSET);
BOTTOM = new Point(CAM_CENTER_X + GRID_X_OFFSET, CAM_CENTER_Y+200 + GRID_Y_OFFSET);

verticalLines = [];
radii =[]; // Reference lines
radiiReference = [];
gridToFront = false;
gridCircles = [];
gridCirclesCount = 0;
flatPathPointMarker = [];
intersector = null; // Vertical line intersecating flat cam profile, used to generate circular profile
allowRotation = false;
camCreated = false;
flatPath = new Path();
camPath = new Path();
camStaticReference = new Path();
camStaticReference.visible=false;
follower = new Path();
normalVector = new Path();
normalVector.strokeColor = NORMAL_COLOR;
normalVector.strokeWidth = NORMAL_WIDTH;

flatPathBall =  new Path.Circle({
            center: ZERO_ZERO.clone(),
            radius: 5,
            strokeColor: '#000000',
            fillColor: '#00AA00'
    });

pressureAnglePointInitialY = 220  + GRID_Y_OFFSET;
pressureAnglePointInitialPosition = new Point(0 + GRID_X_OFFSET, pressureAnglePointInitialY );
pressureAnglePoint =  new Path.Circle({
            center: pressureAnglePointInitialPosition,
            radius: 5,
            strokeColor: '#000000',
            fillColor: '#FFFF00'
    });
pressureAnglePath = new Path();
pressureAnglePath.strokeColor = '#000000';
pressureAnglePath.strokeWidth = 3;
pressureAnglePath.visible=true;
pointToAdd = null;
pressureAngle= 0;
prevX = 0;
prevY = 0;
contactExists = false;

camType = "JSON"; // Default preloaded cam

function drawMarkers() {
	localAngle = 360-totAngle;
	if (localAngle < 0) localAngle += 360;
    pressureAnglePoint.position.x = localAngle + GRID_X_OFFSET;
    pressureAnglePoint.position.y = pressureAnglePointInitialY + pressureAngle;
	flatPathBall.position.x = localAngle  + GRID_X_OFFSET;
	flatPathBall.position.y = followerContactPoint.y - 130  + GRID_Y_OFFSET;
}



function createPressureAnglePath() {
    pressureAnglePath.clear();
	for (var i=0; i < 360; i++) {
	    pressureAnglePath.add(new Point(i + GRID_X_OFFSET, pressureAnglePointInitialY + pressureAngle ));
	}

	dummy = new Path();
	dummy.strokeColor = '#000000';
	dummy.moveTo(new Point(15 + GRID_X_OFFSET, pressureAnglePointInitialY - 90 ));
	dummy.add(new Point(360 + GRID_X_OFFSET, pressureAnglePointInitialY - 90 ));

	var pressureText = new paper.PointText();
	pressureText.content='+90';
	pressureText.position.y = pressureAnglePointInitialY -  90 ;

	dummy = new Path(); // Max
	dummy.strokeColor = '#FF0000';
	dummy.moveTo(new Point(15 + GRID_X_OFFSET, pressureAnglePointInitialY - MAX_PRESSURE ));
	dummy.add(new Point(360 + GRID_X_OFFSET, pressureAnglePointInitialY - MAX_PRESSURE ));

	var pressureText = new paper.PointText();
	pressureText.content='Max';
	pressureText.position.y = pressureAnglePointInitialY - MAX_PRESSURE - 10 ;


	dummy = new Path();
	dummy.strokeColor = '#000000';
	dummy.moveTo(new Point(15 + GRID_X_OFFSET, pressureAnglePointInitialY ));
	dummy.add(new Point(360 + GRID_X_OFFSET, pressureAnglePointInitialY ));

	var pressureText = new paper.PointText();
	pressureText.content='-90';
	pressureText.position.y = pressureAnglePointInitialY + 90 ;



	dummy = new Path(); // Min
	dummy.strokeColor = '#FF0000';
	dummy.moveTo(new Point(15 + GRID_X_OFFSET, pressureAnglePointInitialY + MAX_PRESSURE ));
	dummy.add(new Point(360 + GRID_X_OFFSET, pressureAnglePointInitialY + MAX_PRESSURE  ));

	var pressureText = new paper.PointText();
	pressureText.content='Min';
	pressureText.position.y = pressureAnglePointInitialY + MAX_PRESSURE - 10 + GRID_Y_OFFSET;



	dummy = new Path();
	dummy.strokeColor = '#000000';
	dummy.moveTo(new Point(15 + GRID_X_OFFSET, pressureAnglePointInitialY + 90 ));
	dummy.add(new Point(360 + GRID_X_OFFSET, pressureAnglePointInitialY + 90 ));

	var pressureText = new paper.PointText();
	pressureText.content='Pressure Angle:';
	pressureText.position.y = 115 + GRID_Y_OFFSET ;
}

camStartPoint = new Point();
CSR= camStartPoint.clone();
totAngle=0;

origin = new Point(CAM_CENTER_X,CAM_CENTER_Y);
INITIAL_FOLLOWER = new Path(origin, origin); // Dummy coordinates, just for creation;


intersector = new Path(); // Invisible object, used internally to determine local radius of cam profile
intersector.moveTo(new Point(0 + GRID_X_OFFSET, CAM_RADIUS + GRID_Y_OFFSET));
intersector.add(new Point(0 + GRID_X_OFFSET, 0 + GRID_Y_OFFSET));

intersectorRay = new Path(); // Invisibile object, static: a vertical line crossing the cam, used to determine follower contact point
intersectorRay.moveTo(new Point(CAM_CENTER_X + followerOffsetX, CAM_CENTER_Y + followerOffsetY + 100));
intersectorRay.add(new Point(CAM_CENTER_X  + followerOffsetX, CAM_CENTER_Y  + followerOffsetY - CAM_RADIUS - 100));
intersectorRay.strokeColor = '#000000';


function moveFollower() {
    followerOffsetX = rngFollowerOffset.value*1;
	follower.segments[0].point.x = FOLLOWER_TOP.x + followerOffsetX;
    intersectorRay.segments[0].point.x = FOLLOWER_TOP.x + followerOffsetX;
	follower.segments[1].point.x = FOLLOWER_TOP.x + followerOffsetX;
    intersectorRay.segments[1].point.x = FOLLOWER_TOP.x + followerOffsetX;
	normalVector.bringToFront();
}


function importSVG() {
// Load SVG file containing definition of circular path //
  var input, file, fr;
  if (typeof window.FileReader !== 'function') {
    alert("The file API isn't supported on this browser yet.");
    return;
  }
  input = document.getElementById('SVGfileinput');
  if (!input) {
    alert("Um, couldn't find the fileinput element.");
  }
  else if (!input.files) {
    alert("This browser doesn't seem to support the `files` property of file inputs.");
  }
  else if (!input.files[0]) {
  }
  else {
	file = input.files[0];
    fr = new FileReader();
    fr.onload = processReceivedTextSVG;
    fr.readAsText(file);
  }
}


function processReceivedTextSVG(e) {
	console.log("SVG loaded, importing...",e);
	flatPath.clear();
	camPath.clear();
	camStaticReference.remove();
	CSR.remove();
	camStartPoint.remove();
	for (var i=0; i< flatPathPointMarker.length; i++) {
    	flatPathPointMarker[i].remove();
	}


	var lines = e.target.result;
	filename.innerHTML = SVGfileinput.value;
	SVGfileinput.value="";
  	fileContentsSVG.value=lines;
	fileContents.value = "";
	rawPathStart = lines.indexOf("path");
	rawPathStart = lines.indexOf("d=", rawPathStart+1) + 3;
	rawPathEnd = lines.indexOf('"', rawPathStart+1) - 1;
	rawPathLen = rawPathEnd - rawPathStart + 1;
	rawPath = lines.substr(rawPathStart, rawPathLen);
	try {
		camPath = new Path(rawPath);
	} catch (e){
		alert("Invalid SVG file:" + e);
		console.log("Invalid SVG file:" + e);
		return -1;
	}


  	camStartPoint = new Path.Circle({
            center: startPosition,
            radius: 5,
            strokeColor: '#000000',
            fillColor: '#FFFF00'
    });
	CSR = camStartPoint.clone()

	// Cam first point:
	camStart = new Point(startPosition.x, startPosition.y); // Define start position of circular cam path
	camPath.moveTo(camStart); // Set first point of cam path to user-defined start position
	camPath.position = origin;

    camPath.strokeColor = CAM_LINE_COLOR;
    camPath.selectedColor = CAM_POINTS_COLOR;
	camPath.strokeWidth = CAM_WIDTH;
	camPath.fillColor = CAM_FILL_COLOR;
	camCreated = true;

    camStaticReference = camPath.clone();
	camStaticReference.visible=false;
	camPath.visible = true;
    camType = "SVG";
console.log("Cam SVG loading complete.");
}


function loadFile() {
// Load json file containing definition of flat path //
  var input, file, fr;

  if (typeof window.FileReader !== 'function') {
    alert("The file API isn't supported on this browser yet.");
    return;
  }

  input = document.getElementById('fileinput');

  if (!input) {
    alert("Um, couldn't find the fileinput element.");
  }
  else if (!input.files) {
    alert("This browser doesn't seem to support the `files` property of file inputs.");
  }
  else if (!input.files[0]) {
  }
  else {
	file = input.files[0];
	try {
	    fr = new FileReader();
	    fr.onload = processReceivedText;
	    fr.readAsText(file);
	} catch (e) {
		alert("Error loading file");
		console.log("Error loading file, " , e);
	}
  }
}




function processReceivedText(e) {
	var lines = e.target.result;
	try {
		camData = JSON.parse(lines);
		fileContents.value = lines;
		fileContentsSVG.value = "";
	} catch (e){
		alert("Invalid JSON file:" + e);
		console.log("Invalid JSON file:" + e);
		return -1;
	}

	flatPath.clear();
	camPath.clear();
	camStaticReference.remove();
	CSR.remove();
	camStartPoint.remove();
	for (var i=0; i< flatPathPointMarker.length; i++) {
    	flatPathPointMarker[i].remove();
	}
	camCreated = false;
    fileinput.value="";
	console.log("Recreating cam from JSON...");
	assignCamData();
	createCam();
	console.log("Done.");
	resetRotation();

	camPath.bringToFront();
  	camStartPoint.bringToFront();

    camType = "JSON";

}



function saveCam () {
		allowRotation = false;
		resetRotation();
        var filename = "cam.json";
        var text = fileContents.value;
        var blob = new Blob([text], {type:'text/plain'});
        var link = document.createElement("a");
        link.download = filename;
        link.href = window.URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        setTimeout(function()  {
            document.body.removeChild(link);
            window.URL.revokeObjectURL(link.href);
        }, 100);
    }




function update() {
// Security restrictions prevent from reloading a modified file without user intervention, hence "reload"
// is performed on temporary data shown on the page
	try {
		console.log("JSON REloaded, parsing...");
		camData = JSON.parse(fileContents.value);
//		fileContents.innerHTML = lines;
		console.log("cam data Reloaded: ", camData);
	} catch (e){
		alert("Invalid JSON file:" + e);
		console.log("Invalid JSON file:" + e);
	}
	console.log("Applying...");
	ctx=myCanvas.getContext("2d");
	ctx.fillStyle = "#ffffff";
	ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
	flatPath.clear();
	camPath.clear();

	flatPath.clear();
	camPath.clear();
	camStaticReference.remove();
	CSR.remove();
	camStartPoint.remove();
	for (var i=0; i< flatPathPointMarker.length; i++) {
    	flatPathPointMarker[i].remove();
	}

	assignCamData();
	createCam();
	resetRotation();
	camPath.bringToFront();
	camPath.visible=true;
  	camStartPoint.bringToFront();

	console.log("Done.");

}




function assignCamData() {
	CAM_ROTATION_SPEED 			= camData.rotSpeed;
	CAM_STEPS_WIDTH 			= camData.stepsWidth;
	ROTATION_DIRECTION 			= camData.rotationDir;


	camPath.clear();
	camPath.strokeColor = CAM_LINE_COLOR;
	camPath.selectedColor = CAM_POINTS_COLOR;
	camPath.strokeWidth = CAM_WIDTH;
	camPath.fillColor = CAM_FILL_COLOR;

	flatPath.clear();
	flatPath.strokeColor = CAM_FLATPATH_COLOR;
	flatPath.selectedColor = CAM_FLATPATH_POINTS_COLOR;
	flatPath.strokeWidth = CAM_FLATPATH_WIDTH;


	follower.remove();
	follower = INITIAL_FOLLOWER.clone();
	follower.segments[0].point = FOLLOWER_TOP;
	follower.segments[1].point =  FOLLOWER_BOTTOM;
    follower.segments[0].point.x = FOLLOWER_TOP.x + followerOffsetX;
    follower.segments[1].point.x = FOLLOWER_BOTTOM.x + followerOffsetX;
	follower.strokeColor = FOLLOWER_COLOR;
	follower.strokeWidth = FOLLOWER_WIDTH;
	follower.bringToFront();
	normalVector.bringToFront();

	drawGrid({x:0, y:0}, {x:360, y:CAM_RADIUS}, 10, 10);

}




function startRotation() {
	if (!camCreated) return -1;
	allowRotation=true;
}




function stopRotation() {
	if (!camCreated) return -1;
	allowRotation=false;
}


function rotateCam(angle, type) {

		camPath.remove();
		camPath = camStaticReference.clone();
		camStartPoint.remove();
		camStartPoint = CSR.clone();


	if (type == "manual") {
        totAngle = angle; // Manual --> absolute angle
        rngRotation.value = totAngle;
	} else {
		// anim --> delta angle
		totAngle += angle;
		if (totAngle > 360) {
			totAngle = totAngle - 360;
		}
		if (totAngle < 0) {
			totAngle =  totAngle + 360;
		}
		rngRotation.value = totAngle;
	}
	lblAngle.innerHTML = rngRotation.value;

	camPath.rotate(totAngle, origin);

	// Rotate reference lines
	for (var i=0; i< radii.length; i++) {
    if (radii[i]) {
			radii[i].remove();
		}
		radii[i] = radiiReference[i].clone();
		radii[i].strokeColor = "#FF0000";
		radii[i].rotate(totAngle, origin);
	}


	calculatePressureAngle();
	indexPressure = 360 - (totAngle - 1);
	if (indexPressure < 0) indexPressure = 0;
	if (indexPressure >360 ) indexPressure = indexPressure - 360;
	try {
		pressureAnglePath.segments[indexPressure].point.y = pressureAnglePointInitialY + pressureAngle;
	} catch (e) {
		console.log("Warning, cannot update pressure angle curve");
	}
	indexPressure++;
	if (indexPressure > 359) {
        indexPressure = indexPressure - 360;
	}
	try {
		pressureAnglePath.segments[indexPressure].point.y = pressureAnglePointInitialY + pressureAngle + 1;
	} catch (e) {
		console.log("Warning 2, cannot update pressure angle curve");
	}

	drawMarkers();

	camStartPoint.rotate(totAngle, origin);
	camPath.bringToFront();
	camStartPoint.bringToFront();

	setCircularGridVisibvility(gridToFront);

	camStaticReference.visible=false;
	camPath.visible = true;
}



function rotateBySlider() {
	rotateCam(rngRotation.value * 1, "manual");
}


function toggleCamSelection() {
	if (!camCreated) return -1;
	camPath.fullySelected = !camPath.fullySelected;
	flatPath.fullySelected = !flatPath.fullySelected;
}

function toggleCircularGrid() {
  gridToFront = !gridToFront;
	setCircularGridVisibvility(gridToFront)
}

function setCircularGridVisibvility(front){
	// Rays:
	for (var i=0; i < radii.length; i++) {
		if (front) {
			radii[i].bringToFront();
		} else {
			radii[i].sendToBack();
		}
	}

	// Circles:
	for (var i=0; i < gridCirclesCount; i++) {
		if (front) {
			gridCircles[i].bringToFront();
		} else {
			gridCircles[i].sendToBack();
		}
	}
}

function onFrame(event) {
	///// At each frame rotate cam and update follower position ////

	if (!camCreated) return -1;
	if (allowRotation === false) return;

	// Rotate cam
	rotateCam(ROTATION_DIRECTION * CAM_ROTATION_SPEED, "anim");

	follower.bringToFront();
	normalVector.bringToFront();
	camStartPoint.bringToFront();

}


function calculatePressureAngle() {
	// Calculate point of contact of follower with cam:
    intersections = intersectorRay.getIntersections(camPath);
	if (intersections.length>0) {
		followerContactPoint = intersections[intersections.length-1].point;
		prevX = followerContactPoint.x;
		prevY = followerContactPoint.y;
		follower.strokeColor = FOLLOWER_COLOR;
        contactExists = true;
	} else {
        followerContactPoint = new Point(prevX, CAM_CENTER_Y + CAM_RADIUS);
		follower.strokeColor = '#FFAA00';
		contactExists=false;
		//return -1;
	}

	// Update follower position:
	follower.segments[1].point.y = followerContactPoint.y;
	follower.segments[0].point.y = followerContactPoint.y - FOLLOWER_LENGTH;

	if (!contactExists) return -1;

	contactOffset = camPath.getOffsetOf(followerContactPoint);
	normal = camPath.getNormalAt(contactOffset)*50;
	if (normalVector)	 {
		normalVector.clear();
		normalVector.remove();
		normalVector= new Path({
	        segments: [followerContactPoint, followerContactPoint + normal]
	    });
		normalVector.strokeColor = NORMAL_COLOR;
		normalVector.strokeWidth = NORMAL_WIDTH;
        normalVector.bringToFront();
	} else {
    	normalVector[0]= new Point(followerContactPoint, followerContactPoint + normal);
        normalVector.bringToFront();
	}

	pressureAngle = (-90-normal.angle);
	if (-pressureAngle * ROTATION_DIRECTION > MAX_PRESSURE) {
	    spnPressure.style="color:#FF0000;";
		follower.strokeColor = '#FF0000';
	} else {
	    spnPressure.style="color:#000000;";
		follower.strokeColor =  FOLLOWER_COLOR;
	}
	normalVector.bringToFront();
	document.getElementById("spnPressure").innerHTML = pressureAngle.toFixed(0);

}


function resetRotation () {
// debug: aggiustare in modo che non cancelli la camma caricata ////
	if (!camCreated) return -1;

	rngRotation.value = 0;
	rotateCam(0,"manual");
  camStartPoint.bringToFront();

}




function drawGrid(topLeft, bottomRight, gridStepX, gridStepY) {
	// Draw vertical lines of grid
	for (var x=topLeft.x; x < bottomRight.x; x += gridStepX) {
		segment = new Path();
		segment.strokeColor = '#DDDDDD';
		segment.strokeWidth = 1;
		segment.moveTo(new Point(x  + GRID_X_OFFSET, topLeft.y + GRID_Y_OFFSET));
		segment.add(new Point(x + GRID_X_OFFSET    , bottomRight.y + GRID_Y_OFFSET));
	}

	// Draw horizontal lines of grid and circles on cam
	for (var y=topLeft.y; y <= bottomRight.y; y += gridStepY) {
		segment = new Path();
		segment.strokeColor = '#DDDDDD';
		segment.strokeWidth = 1;
		segment.moveTo(new Point(0 + GRID_X_OFFSET, y + GRID_Y_OFFSET));
		segment.add(new Point(bottomRight.x + GRID_X_OFFSET, y + GRID_Y_OFFSET));

		gridCircles.push(new Path.Circle({
	            center: new Point(CAM_CENTER_X, CAM_CENTER_Y),
	            radius: y,
	            strokeColor: '#BBBBBB'
	    }));

		gridCirclesCount++;
	}

	// Draw top and bottom line of grid
	segment = new Path();
	segment.strokeColor = '#000000';
	segment.moveTo(ZERO_ZERO);
	segment.add(new Point(bottomRight.x + GRID_X_OFFSET,0 + GRID_Y_OFFSET));

	segment = new Path();
	segment.strokeColor = '#000000';
	segment.moveTo(UPPER_POINT);
	segment.add(new Point(bottomRight.x + GRID_X_OFFSET,CAM_RADIUS + GRID_Y_OFFSET));
}


function createCam() {
//	if (camCreated) return -1;
    camCreated = true;

	// Draw flat path of cam on grid:
	var start = ZERO_ZERO.clone();
	flatPath.moveTo(start);
	for (var i=0; i < camData.segments.length; i++) {
		flatPathPoint = new Point(camData.segments[i].x + GRID_X_OFFSET, camData.segments[i].y + GRID_Y_OFFSET);
		flatPath.add(flatPathPoint);
  		flatPathPointMarker.push(new Path.Circle({
        	   center: flatPathPoint,
	            radius: 5,
	            strokeColor: '#000000',
	            fillColor: '#FF0000'
	    }));
	}
	flatPath.bringToFront();

	//// Create the circular profile of the cam starting from the flat profile ////
	intersector.position.x = 0 + GRID_X_OFFSET; // Intersector is the vertical line which crosses the flat path, and is used to determine "local cam radius"
intersector.visible=true;
//console.log(intersector);
	intersection = flatPath.getIntersections(intersector);
console.log(intersection);
	startPosition = new Point(CAM_CENTER_X + (CAM_RADIUS-intersection[0].point.y) + GRID_X_OFFSET, CAM_CENTER_Y ) ; // Start from right, then proceed CCW
	startPosition = startPosition.rotate(ANGLE_OFFSET, origin); // Rotate startig point from righ side to top side

  	camStartPoint = new Path.Circle({
            center: startPosition,
            radius: 5,
            strokeColor: '#000000',
            fillColor: '#FFFF00'
    });
	CSR = camStartPoint.clone()

	// Cam first point:
	camStart = new Point(startPosition.x, startPosition.y); // Define start position of circular cam path
	camPath.moveTo(camStart); // Set first point of cam path to user-defined start position

	// Draw cam points:
	var vector = origin + startPosition; // Create point w.r.t a base position, i.e. a vector
	for (var degr = 0 ; degr <= 360; degr += CIRCULAR_PRECISION) {
		intersector.position.x = degr + GRID_X_OFFSET; // "Move" intersector along flat profile
		intersection = flatPath.getIntersections(intersector); // Calculate intersection to determine cam local radius
		vector.angle = degr + ANGLE_OFFSET; // Rotate the vector at each step/segment of the flat path
		vector.length = CAM_RADIUS - intersection[0].point.y + GRID_Y_OFFSET; // Set cam local radius
		relativePoint = origin + vector; // Calculate position of point representing local radius of cam
		camPath.add(new Point(relativePoint.x, relativePoint.y)); // Add point to circular profile
	}
	camStaticReference = camPath.clone(); // Reference cam for rotation, constant
	drawReferenceRays(vector);
	camPath.bringToFront();
  camStartPoint.bringToFront();
	camStaticReference.visible=false;
	camPath.visible = true;
}

function drawReferenceRays(vect) {
	vect.length = CAM_RADIUS;
	// Draw reference "rays" (one per segment):
	for (var index = 0 ; index < flatPath.segments.length; index++) {
		vect.angle = flatPath.segments[index].point.x + ANGLE_OFFSET + GRID_X_OFFSET;
		relativePoint = origin + vect;
    if (radii[index]) {
			radii[index].remove();
		}
		radii.push(new Path(origin, relativePoint));
		radiiReference.push(new Path(origin, relativePoint));
		radii[index].strokeColor = "#FF0000";

		vertLine = new Path(new Point(flatPath.segments[index].point.x ,0 + GRID_Y_OFFSET), new Point(flatPath.segments[index].point.x ,CAM_RADIUS + GRID_X_OFFSET));
    if (verticalLines[index]) {
			verticalLines[index].remove();
		}
		verticalLines.push(vertLine);
		verticalLines[index].strokeColor = "#FF0000";
    verticalLines[index].bringToFront();
	}
}


function exportSVG() {
  	allowRotation = false;
	resetRotation();

	SVGheader = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300">\
	<g fill="#AAA" stroke="#000000" stroke-width="1">';

	SVGfooter = '  </g>\
	</svg>';

	SVGtext = camPath.exportSVG(   { asString: true}   );

	// Before exporting, create a copy of cam and reposition it:
	copy = camPath.clone();

	// Define new center for cam
    X_MARGIN = 10;
    Y_MARGIN = 10;
	newCenterX = camPath.bounds.width/2 + X_MARGIN;
	newCenterY = camPath.bounds.height/2 + Y_MARGIN;

	// Move copy to new position
	copy.position = new Point(newCenterX, newCenterY );

	// Create SVG export string
	SVGtext = SVGheader + copy.exportSVG(   { asString: true}   ) + SVGfooter;

	// Ask user to download the SVG version of the cam:
	fileName = "cam.svg"; // Default suggested name
	var url = "data:image/svg+xml;utf8," + encodeURIComponent(SVGtext); // Convert SVG string into downloadable format
	copy.remove(); // Remove clone of the cam

	// Prompt user for downloading:
	var link = document.createElement("a");
	link.download = fileName;
	link.href = url;
	link.click();
}



/*
function onMouseDown(event) {

}
*/


/*
function onMouseMove(event) {

}
*/


/*
function onMouseUp(event) {

}
*/


/*function onMouseDrag(event) {

}
*/



	drawGrid({x:0, y:0}, {x:360, y:CAM_RADIUS}, 10, 10);
	camCreated = false;
	assignCamData();
	createCam();
	fileContents.value = JSON.stringify(camData,null,4);
	camPath.bringToFront();
  	camStartPoint.bringToFront();

	createPressureAnglePath();
/////////////



	document.getElementById("btnStart").addEventListener("click", startRotation);
	document.getElementById("btnStop").addEventListener("click", stopRotation);
	document.getElementById("btnReset").addEventListener("click", resetRotation);
	document.getElementById("btnShow").addEventListener("click", toggleCamSelection);
	document.getElementById("btnUpdate").addEventListener("click", update);
	document.getElementById("fileinput").addEventListener("change", loadFile);
	document.getElementById("SVGfileinput").addEventListener("change", importSVG);
	document.getElementById("btnExportSVG").addEventListener("click", exportSVG);
	document.getElementById("btnSave").addEventListener("click", saveCam);
	document.getElementById("rngRotation").addEventListener("change", rotateBySlider);
	document.getElementById("rngRotation").addEventListener("input", rotateBySlider);
	document.getElementById("btnGrid").addEventListener("click", toggleCircularGrid);
	document.getElementById("rngFollowerOffset").addEventListener("change", moveFollower);
	document.getElementById("rngFollowerOffset").addEventListener("input", moveFollower);
	//document.getElementById("btnPressure").addEventListener("click", createPressureAnglePath);


</script>
</head>

<body>
<center><big><big>Javascript Cam/Follower mechanism generator/simulator</big></big><br>
v. 0.1.4 - 18/11/2021<br>
Made with <a href="http://paperjs.org/tutorials/">paper.js</a> by Jumpjack<br>
Source code: <a href="https://github.com/jumpjack/CamFollowerJS">link</a><br>

<table border=1>
<tr><td colspan=2><center>File loaded:<span id="filename" name="filename">none</span></center></td></tr>
<tr>
	<td style="vertical-align:top;">
		Flat profile (JSON format):<br>
		<input type='file' id='fileinput' name='fileinput' accept=".json" style="display:none;">
		<input type="button" id="btnLoadJSON" name="btnLoadJSON" value="Load" onclick="document.getElementById('fileinput').click();" />
		<button id="btnSave" name="btnSave">Save</button><br>
		<br>
		Circular profile (SVG format):<br>
		<input type='file' id='SVGfileinput' name='SVGfileinput'  accept=".svg" style="display:none;">
		<input type="button" id="btnLoadSVG" name="btnLoadSVG" value="Load" onclick="document.getElementById('SVGfileinput').click();" />
		<button id="btnExportSVG" name="btnExportSVG">Save</button><br>
		<br>
        Raster to SVG online converter:<a href="https://image.online-convert.com/convert-to-svg">link</a><br>
		<br>
		<br>
	Rotation: <button id="btnStart" name="btnStart">Start</button><button id="btnStop" name="btnStop">Stop</button>	<button id="btnReset" name="btnStop">Reset</button><br>
	<br>
	Please use one of these services to convert SVG file to STL format for 3d printing:<br>
    <a href="https://rawgit.com/ryancalme/svg-to-stl/master/SVGtoSTL.html">https://rawgit.com/ryancalme/svg-to-stl/master/SVGtoSTL.html</a><br>
    <a href="http://svg2stl.com/">http://svg2stl.com/</a><br>
	<br>
	Status: <span id="status" name="status">-</span><br>
	<br>
	Pressure angle: <span id="spnPressure" name="spnPressure" style="color:#000000;">0</pan><br>
	</td>

	<td>
	<canvas id="myCanvas" width=650 height=400 style="background:#EEEEEE;"></canvas><br>
	<center>
	Follower offset: <input type="range" id="rngFollowerOffset" name="rngFollowerOffset" value = "0" min= "-100" max = "100"><br>
	<button id="btnGrid" name="btnGrid">Grid back/front</button>
	<button id="btnShow" name="btnShow">Points</button><br>
	<div class="slidecontainer">
	  <input type="range" min="0" max="360" value="5" class="slider" id="rngRotation" name="rngRotation">
	</div>
	Angle: <span id="lblAngle" name="lblAngle">0</span><br>
	</center>
	</td>

</tr>
<tr>
	<td>
		JSON imported data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' id='btnUpdate' name='btnUpdate' value='Update' ><input type='button' id='btnSmooth' name='btnSmooth' value='Smooth' onclick="camPath.smooth()"><br>
		<textarea id="fileContents" name="fileContents" cols=50 rows=30>
		</textarea><br>
		
		SVG imported data:<br>
		<textarea id="fileContentsSVG" name="fileContentsSVG" cols=50 rows=30>
		</textarea><br>
	</td>
	<td style="vertical-align:top;">
	</td>
</tr>

</table>
</body>
</html>