initial page generation

index.html

@@ -26,7 +26,8 @@
         <input type="number" id="steps" min="10" /><br>
         <button id="generate">Generate!</button>
         <p id="len"></p>
-        <div id="output"></div>
+        <div id="output" style="display: none;"></div>
+	<iframe id="pdf" style="width:100%;height:1000px"></iframe>
         <script src="src/main.js" lang="js" type="module"></script>
     </body>
 </html>

src/main.js

@@ -1,4 +1,5 @@
 import * as maths from "./maths.js";
+import { createPdf } from "./print.js";
 
 let uInput = document.getElementById("u");
 let hInput = document.getElementById("h");
@@ -25,6 +26,9 @@ let pointsQ = [];
 let distances = [];
 
 let panelPoints = [];
+let panelPaths = [];
+let svgSize = { width: 0, height: 0 };
+let scaleFactor = 1;
 
 let n = 0;
 let unit = "px";
@@ -87,72 +91,84 @@ function generateCoordinates() {
     }
 }
 
+function createPerimeterPath(maxY) {
+	let path = `M `;
+	
+	// first arc
+	for (let i = 0; i < panelPoints.length; i++) {
+		let point = panelPoints[i];
+		path += `${maths.approx(point.x)},${maths.approx((maxY) - point.y)} `;
+	}
+	// second arc
+	for (let i = panelPoints.length-1; i>=0;i--) {
+		let point = panelPoints[i];
+		path +=`${maths.approx(point.x)},${maths.approx((point.y + maxY))} `;
+	}
+	path += `${maths.approx(panelPoints[0].x)},${maths.approx((maxY) - panelPoints[0].y)}`;
+	console.log(path);
+	return path;
+}
+
+function createCentrePath(maxY) {
+	return `M ${maths.approx(panelPoints[0].x)},${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2} ${panelPoints[panelPoints.length - 1].x},${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}`;
+}
+
 function plotSVG() {
 	let maxY = 0;
+	let minY = 1000;
     	let maxX = 0;
     	let minX = 1000;
     	panelPoints.forEach((point) => {
         	if (maxY < point.y) {
             		maxY = point.y;
         	}
+		if (minY > point.y) {
+			minY = point.y;
+		}
         	if (minX > point.x) {
             		minX = point.x;
         	}
         	if (maxX < point.x) {
             		maxX = point.x;
         	}
-    })
+    	});
-    let pathA = "M ";
+	svgSize.width = panelPoints[panelPoints.length - 1].x - maths.approx(panelPoints[0].x);
-    let pathB = "M ";
+	svgSize.height = (maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY)));
-	let pathTop = `M ${maths.approx(panelPoints[0].x)} ${maxY - maths.approx(panelPoints[0].y)} ${panelPoints[0].x} ${maxY - maths.approx(panelPoints[0].y)}`;
+	panelPaths[0] = createCentrePath(maxY);
-	let pathBottom = `M ${maths.approx(panelPoints[panelPoints.length - 1].x)} ${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)} ${panelPoints[panelPoints.length - 1].x} ${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}`;
+	panelPaths[1] = createPerimeterPath(maxY);
-	let pathCentre = `M ${maths.approx(panelPoints[0].x)} ${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2} ${panelPoints[panelPoints.length - 1].x} ${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}`;
-    for (let i = 0; i < panelPoints.length; i++) {
-        let point = panelPoints[i];
-        pathA += `${maths.approx(point.x)} ${(maxY) - maths.approx(point.y)} `;
-        pathB +=`${maths.approx(point.x)} ${maths.approx((point.y + maxY))} `;
-    }
 	outputdiv.innerHTML = `
 	<svg 	width="297mm"
 		height="210mm"
 		xmlns="http://www.w3.org/2000/svg">
 		<g id="layer1">
 			<path
-				d="${pathTop}"
+				d="${panelPaths[0]}"
 				fill="none"
 				stroke="black"
 				stroke-width="${strokeWidth}"
 			/>
 			<path
-				d="${pathBottom}"
+				d="${panelPaths[1]}"
 				fill="none"
 				stroke="black"
 				stroke-width="${strokeWidth}"
 			/>
-			<path
-				d="${pathCentre}"
-				fill="none"
-				stroke="black"
-				stroke-width="${strokeWidth}"
-			/>
-			<path
-				d="${pathA}"
-				stroke="black"
-				fill="none"
-				stroke-width="${strokeWidth}"
-			/>
-			<path
-				d="${pathB}"
-				stroke="black"
-				fill="none"
-				stroke-width="${strokeWidth}"
-			/>
 		</g>
-        </svg>
+	</svg>`;
-    `;
 	lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;
 }
 
+function calculateScaleFactor(unit) {
+	if (unit == "mm") {
+		scaleFactor = 72/25.4;
+	} else if (unit == "cm") {
+		scaleFactor = 72/2.54;
+	} else if (unit == "in") {
+		scaleFactor = 72;
+	} else if (unit == "px")  {
+		scaleFactor = 0.75;
+	}
+}
 
 // main func
 function generatePanel() {
@@ -163,6 +179,8 @@ function generatePanel() {
     getDistancesBetweenIntersections();
     generateCoordinates();
     plotSVG();
+	calculateScaleFactor(unit);
+	createPdf(panelPaths, svgSize, scaleFactor);
 }
 
 document.getElementById("generate").addEventListener("click", () => generatePanel());

src/print.js

@@ -0,0 +1,31 @@
+import { PDFDocument, degrees, rgb } from "pdf-lib";
+
+export async function createPdf(paths, svgSize, scaleFactor) {
+	const pdfDocument = await PDFDocument.create();
+	const page = pdfDocument.addPage();
+
+	const { width, height } = page.getSize();
+	console.log(svgSize);
+	console.log(`Scale factor ${scaleFactor}`);
+
+	const svgSettings = { 
+		x: (width + svgSize.height * scaleFactor)/2, 
+		y: height,
+		rotate: degrees(-90),
+		borderColor: rgb(0,0,0),
+		borderWidth: 1,
+		scale: scaleFactor
+	};
+
+	page.drawLine({
+		start: { x: width/2, y: height },
+		end: { x: width/2, y: 0 },
+	});
+
+	page.moveTo(5, height - 5);
+	page.drawSvgPath(paths[0], svgSettings);
+	page.drawSvgPath(paths[1], svgSettings);
+	const pdfDataUri = await pdfDocument.saveAsBase64({ dataUri: true });
+	document.getElementById("pdf").src = pdfDataUri;
+}
+