chopster44/Parachute-SVG-Generator
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

initial page generation

Browse Source
This commit is contained in:
chopster44 committed 2026-10-03 17:09:54 +01:00
1 parent 3cb776566f
commit 90bfd67c71
3 files changed
+102 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+2 -1
View File
@@ -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
+69 -51
View File
@@ -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 maxX = 0;
let minX = 1000;
panelPoints.forEach((point) => {
if (maxY < point.y) {
maxY = point.y;
}
if (minX > point.x) {
minX = point.x;
}
if (maxX < point.x) {
maxX = point.x;
}
})
let pathA = "M ";
let pathB = "M ";
let pathTop = `M ${maths.approx(panelPoints[0].x)} ${maxY - maths.approx(panelPoints[0].y)} ${panelPoints[0].x} ${maxY - maths.approx(panelPoints[0].y)}`;
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))}`;
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 = `
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;
}
});
svgSize.width = panelPoints[panelPoints.length - 1].x - maths.approx(panelPoints[0].x);
svgSize.height = (maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY)));
panelPaths[0] = createCentrePath(maxY);
panelPaths[1] = createPerimeterPath(maxY);
outputdiv.innerHTML = `
<svg width="297mm"
height="210mm"
xmlns="http://www.w3.org/2000/svg">
<g id="layer1">
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>
`;
lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;
</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
+31
View File
@@ -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;
}