Spaces:
Running
Running
File size: 10,968 Bytes
118d76c 75907a1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laser Cut Box Designer</title>
<style>
body { font-family: sans-serif; margin: 20px; }
.controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 600px; margin-bottom: 20px; }
.controls label { display: block; margin-bottom: 5px; }
.controls input { width: 100%; padding: 8px; box-sizing: border-box; }
#preview-container { border: 1px solid #ccc; width: 100%; max-width: 800px; height: 500px; margin-top: 20px; overflow: auto; }
#preview-svg { width: 100%; height: 100%; }
button { padding: 10px 15px; margin-right: 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>Laser Cut Box Designer</h1>
<div class="controls">
<div>
<label for="width">Width (in):</label>
<input type="number" id="width" value="4" step="0.1">
</div>
<div>
<label for="depth">Depth (in):</label>
<input type="number" id="depth" value="3" step="0.1">
</div>
<div>
<label for="height">Height (in):</label>
<input type="number" id="height" value="2" step="0.1">
</div>
<div>
<label for="materialThickness">Material Thickness (in):</label>
<input type="number" id="materialThickness" value="0.125" step="0.001">
</div>
<div>
<label for="kerf">Kerf (in, optional):</label>
<input type="number" id="kerf" value="0.005" step="0.001">
</div>
<div>
<label for="boxType">Box Type:</label>
<input type="radio" id="closedBox" name="boxType" value="closed" checked> <label for="closedBox">Closed Box</label><br>
<input type="radio" id="openBox" name="boxType" value="open"> <label for="openBox">Open Box</label>
</div>
<h3>Face Spacing (0 for standard wall, >0 for gap/offset)</h3>
<div>
<label for="spacingTop">Top Face Spacing (in):</label>
<input type="number" id="spacingTop" value="0" step="0.1">
</div>
<div>
<label for="spacingBottom">Bottom Face Spacing (in):</label>
<input type="number" id="spacingBottom" value="0" step="0.1">
</div>
<div>
<label for="spacingFront">Front Face Spacing (in):</label>
<input type="number" id="spacingFront" value="0" step="0.1">
</div>
<div>
<label for="spacingBack">Back Face Spacing (in):</label>
<input type="number" id="spacingBack" value="0" step="0.1">
</div>
<div>
<label for="spacingLeft">Left Face Spacing (in):</label>
<input type="number" id="spacingLeft" value="0" step="0.1">
</div>
<div>
<label for="spacingRight">Right Face Spacing (in):</label>
<input type="number" id="spacingRight" value="0" step="0.1">
</div>
</div>
<button id="calculateBtn">Calculate & Preview Design</button>
<button id="exportSvgBtn">Export as SVG</button>
<button id="exportPdfBtn">Export as PDF</button>
<h2>Design Preview:</h2>
<div id="preview-container">
<svg id="preview-svg" viewBox="0 0 800 500"></svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
// Placeholder for box generation logic (this is the complex part)
function generateBoxSVG(width, depth, height, materialThickness, kerf, boxType, spacing) {
let svgContent = '';
const fingerLength = materialThickness * 2; // Example finger length
const numFingers = 5; // Example number of fingers (you'd calculate this dynamically)
// For simplicity, let's just draw rectangles representing the faces
// In a real application, you'd calculate precise finger joint paths
// Front face (example)
svgContent += `<rect x="0" y="0" width="${width}" height="${height}" fill="lightblue" stroke="black" stroke-width="0.01"/>`;
// Add finger joints here based on calculations
// Top face (example - adjusted for spacing if applicable)
let topY = height + 1; // Some spacing for layout
if (boxType === 'closed' || spacing.top === 0) {
// For a closed box, draw the top. If spacingTop is 0, draw it.
svgContent += `<rect x="0" y="${topY}" width="${width}" height="${depth}" fill="lightgreen" stroke="black" stroke-width="0.01"/>`;
} else if (spacing.top > 0) {
// If there's spacing, you might draw a visual indicator or just omit the piece
// For this example, we'll just omit it if spacing is greater than 0 for "open"
// In a real design, spacing might affect how joints are cut or if a face is present.
}
// ... repeat for other faces (back, left, right, bottom)
// The "spacing" input would modify *how* each face is drawn or if it's drawn at all.
// For example, if spacingTop is > 0 and it's an "open" box, you might completely omit the top face.
// If it's a closed box and spacingTop is > 0, it means there's a gap between the top and the walls.
// This is the most complex part of the user's request and requires careful geometric calculation for each joint.
return svgContent;
}
function calculateAndPreview() {
const width = parseFloat(document.getElementById('width').value);
const depth = parseFloat(document.getElementById('depth').value);
const height = parseFloat(document.getElementById('height').value);
const materialThickness = parseFloat(document.getElementById('materialThickness').value);
const kerf = parseFloat(document.getElementById('kerf').value);
const boxType = document.querySelector('input[name="boxType"]:checked').value;
const spacing = {
top: parseFloat(document.getElementById('spacingTop').value),
bottom: parseFloat(document.getElementById('spacingBottom').value),
front: parseFloat(document.getElementById('spacingFront').value),
back: parseFloat(document.getElementById('spacingBack').value),
left: parseFloat(document.getElementById('spacingLeft').value),
right: parseFloat(document.getElementById('spacingRight').value),
};
if (isNaN(width) || isNaN(depth) || isNaN(height) || isNaN(materialThickness) || isNaN(kerf)) {
alert("Please enter valid numeric dimensions.");
return;
}
const svgElement = document.getElementById('preview-svg');
// Clear previous design
svgElement.innerHTML = '';
const generatedSVG = generateBoxSVG(width, depth, height, materialThickness, kerf, boxType, spacing);
svgElement.innerHTML = generatedSVG; // This is a simplified example
// For a real application, you'd use a dedicated SVG library
// For example, with Maker.js:
/*
const makerjs = require('makerjs'); // if using Node.js or a bundler
// Or if directly in browser: makerjs.models.something...
const boxModel = new makerjs.models.Bolt(width, depth, height, materialThickness); // (example)
const svgOutput = makerjs.exporter.toSVG(boxModel);
svgElement.innerHTML = svgOutput;
*/
}
function exportSVG() {
const svgElement = document.getElementById('preview-svg');
const svgData = new XMLSerializer().serializeToString(svgElement);
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'laser_cut_box.svg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function exportPDF() {
const width = parseFloat(document.getElementById('width').value);
const depth = parseFloat(document.getElementById('depth').value);
const height = parseFloat(document.getElementById('height').value);
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Example: Add text and a simple rectangle to the PDF
doc.text("Laser Cut Box Design", 10, 10);
doc.text(`Dimensions: ${width}x${depth}x${height} inches`, 10, 20);
// You would draw the actual box panels on the PDF here,
// translating your SVG drawing logic to jsPDF commands.
// This is more involved than just converting the SVG element directly
// unless you use a library like html2pdf.js to capture the whole HTML.
// A more robust solution might involve:
// 1. Get the bounding box of your generated SVG content to scale it appropriately.
// 2. Iterate through your calculated panel shapes and draw them using jsPDF's drawing primitives (rect, line, etc.).
// Alternatively, if html2pdf.js is used:
/*
const element = document.getElementById('preview-container'); // Or the SVG element itself
html2pdf().from(element).save('laser_cut_box.pdf');
*/
// For this simple example, we'll just save a blank PDF with some text.
doc.save('laser_cut_box.pdf');
}
document.getElementById('calculateBtn').addEventListener('click', calculateAndPreview);
document.getElementById('exportSvgBtn').addEventListener('click', exportSVG);
document.getElementById('exportPdfBtn').addEventListener('click', exportPDF);
// Initial preview on load
calculateAndPreview();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
|