<html lang="de">
<head>
<meta charset="UTF-8">
<title>CNC Fingerzinken Generator</title>
<style>
body { font-family: sans-serif; margin: 20px; background: #f5f5f5; color: #333; }
.container { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; }
.controls { background: white:emoji_stuck_out_tongue_winking_eye:adding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 320px; }
.visualizer { flex-grow: 1; background: white:emoji_stuck_out_tongue_winking_eye:adding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; }
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 14px; }
input, select { width: 100%:emoji_stuck_out_tongue_winking_eye:adding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
button { width: 100%:emoji_stuck_out_tongue_winking_eye:adding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; margin-top: 10px; }
button:hover { background: #0056b3; }
svg { border: 1px solid #ddd; background: #fafafa; max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>CNC Fingerzinken Generator mit Kerf & Dogbone</h1>
<div class="container">
<!-- Links: Eingabemaske -->
<div class="controls">
<div class="form-group">
<label for="fraeser">Fräser Durchmesser (mm):</label>
<input type="number" id="fraeser" value="6" step="0.1" oninput="draw()">
</div>
<div class="form-group">
<label for="kerf">Kerf / Passungsspiel (mm):</label>
<input type="number" id="kerf" value="0.2" step="0.05" oninput="draw()">
</div>
<div class="form-group">
<label for="staerke">Materialstärke (mm):</label>
<input type="number" id="staerke" value="18" step="1" oninput="draw()">
</div>
<div class="form-group">
<label for="zapfen">Gewünschte Zapfenbreite (mm):</label>
<input type="number" id="zapfen" value="30" step="1" oninput="draw()">
</div>
<div class="form-group">
<label for="breite">Bauteil Breite (mm):</label>
<input type="number" id="breite" value="150" step="1" oninput="draw()">
</div>
<div class="form-group">
<label for="typ">Ecken-Typ:</label>
<select id="typ" onchange="draw()">
<option value="dogbone">Dogbone (45° Ecke)</option>
<option value="mauseohr">Mauseohr (Zentriert)</option>
<option value="keine">Keine Freifräsung</option>
</select>
</div>
<button onclick="downloadSVG()">SVG Exportieren</button>
</div>
<!-- Rechts: Live-Vorschau -->
<div class="visualizer">
<h3>2D-Fräspfad (Vorschau)</h3>
<div id="svg-container"></div>
</div>
</div>
<script>
function draw() {
// Parameter einlesen
const d_fraeser = parseFloat(document.getElementById('fraeser').value);
const kerf = parseFloat(document.getElementById('kerf').value);
const staerke = parseFloat(document.getElementById('staerke').value);
const z_breite_wunsch = parseFloat(document.getElementById('zapfen').value);
const b_breite = parseFloat(document.getElementById('breite').value);
const ecken_typ = document.getElementById('typ').value;
const r_fraeser = d_fraeser / 2;
const offset_dogbone = r_fraeser * Math.sqrt(0.5);
// Exakte Anzahl der Zapfen berechnen, damit es symmetrisch aufgeht
const anzahl_segmente = Math.round(b_breite / z_breite_wunsch);
const z_breite = b_breite / anzahl_segmente;
// SVG Dimensionen festlegen (mit etwas Sicherheitsabstand)
const padding = 20;
const svg_w = b_breite + (padding * 2);
const svg_h = (staerke * 4) + (padding * 3);
let svgPath1 = `M ${padding} ${padding + staerke}`;
let svgElements = "";
// --- PLATTE 1 (ZAPFEN-LOGIK) ---
// Startpunkt oben links der Zinkenverbindung
let current_x = padding;
let current_y = padding + staerke;
for (let i = 0; i < anzahl_segmente; i++) {
let x_start = padding + (i * z_breite);
let x_ende = padding + ((i + 1) * z_breite);
if (i % 2 === 0) {
// Zapfen steht vor (wird durch das Kerf minimal schmaler)
let z_links = x_start + (kerf / 2);
let z_rechts = x_ende - (kerf / 2);
svgPath1 += ` L ${z_links} ${current_y}`;
svgPath1 += ` L ${z_links} ${current_y - staerke}`;
svgPath1 += ` L ${z_rechts} ${current_y - staerke}`;
svgPath1 += ` L ${z_rechts} ${current_y}`;
} else {
// Tasche geht rein (wird durch das Kerf minimal breiter)
let t_links = x_start - (kerf / 2);
let t_rechts = x_ende + (kerf / 2);
svgPath1 += ` L ${t_links} ${current_y}`;
// Freifräsungen generieren
if (ecken_typ === 'dogbone') {
svgElements += `<circle cx="${t_links - offset_dogbone}" cy="${current_y}" r="${r_fraeser}" fill="none" stroke="red" stroke-width="0.5" />`;
svgElements += `<circle cx="${t_rechts + offset_dogbone}" cy="${current_y}" r="${r_fraeser}" fill="none" stroke="red" stroke-width="0.5" />`;
} else if (ecken_typ === 'mauseohr') {
svgElements += `<circle cx="${t_links}" cy="${current_y}" r="${r_fraeser}" fill="none" stroke="red" stroke-width="0.5" />`;
svgElements += `<circle cx="${t_rechts}" cy="${current_y}" r="${r_fraeser}" fill="none" stroke="red" stroke-width="0.5" />`;
}
svgPath1 += ` L ${t_rechts} ${current_y}`;
}
}
// Rest der Außenkontur für Platte 1 schließen
svgPath1 += ` L ${padding + b_breite} ${padding + staerke + 40}`;
svgPath1 += ` L ${padding} ${padding + staerke + 40} Z`;
// --- HTML GENERIEREN ---
const svgCode = `
<svg width="${svg_w}" height="${svg_h}" viewBox="0 0 ${svg_w} ${svg_h}" xmlns="http://w3.org" id="cnc-svg">
<!-- Platte 1 (Holzkontur) -->
<path d="${svgPath1}" fill="#e6c280" stroke="#8b5a2b" stroke-width="2" />
<!-- CNC Freifräsungen (Bohrungen) -->
${svgElements}
</svg>
`;
document.getElementById('svg-container').innerHTML = svgCode;
}
function downloadSVG() {
const svgElement = document.getElementById('cnc-svg');
if (!svgElement) return;
const serializer = new XMLSerializer();
let source = serializer.serializeToString(svgElement);
// Download-Link im Hintergrund triggern
const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
const downloadLink = document.createElement("a");
downloadLink.href = url;
downloadLink.download = "cnc_fingerzinken.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
// Initialer Start beim Laden der Seite
window.onload = draw;
</script>
</body>
</html>
Die Grundfunktionalität ist allerdings sowieso gegeben.
