tracer.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teil nachzeichnen &rarr; Maße &amp; SCAD</title>
<style>
  :root{--bg:#12151a;--panel:#1a1e26;--panel2:#212632;--line:#2c333f;--txt:#e6e9ef;
    --mut:#9aa5b4;--acc:#e0862f;--blue:#3a78c2;--grn:#4a9d5b;--red:#d9534f}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
  header{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  header h1{font-size:15px;margin:0;font-weight:600}
  header .sub{color:var(--mut);font-size:12px}
  .wrap{display:grid;grid-template-columns:1fr 380px;gap:0;height:calc(100vh - 46px)}
  @media(max-width:900px){.wrap{grid-template-columns:1fr;height:auto}}
  .stage{padding:12px;overflow:auto;background:#0d1014}
  .wrap>*{min-width:0}
  .toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .toolbar button,.chip{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
    border-radius:7px;padding:9px 13px;min-height:40px;cursor:pointer;font-size:13px;
    display:inline-flex;align-items:center;gap:6px;touch-action:manipulation}
  .toolbar button.on{background:var(--acc);border-color:var(--acc);color:#161616;font-weight:600}
  .toolbar .sep{width:1px;background:var(--line);margin:0 3px}
  .subbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
  .subbar .lbl{color:var(--mut);font-size:12px}
  .subbar button{background:var(--panel2);border:1px solid var(--line);color:var(--mut);
    border-radius:6px;padding:8px 12px;min-height:40px;cursor:pointer;font-size:12px;
    display:inline-flex;align-items:center;gap:5px;touch-action:manipulation}
  .subbar button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .subbar button svg{flex:none}
  .mm-in{width:70px;background:#0d1014;border:1px solid var(--line);color:var(--txt);
    border-radius:5px;padding:8px 6px;text-align:right}
  button:hover,.chip:hover{border-color:var(--mut)}
  button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .chip:focus-within{outline:2px solid var(--blue);outline-offset:2px}
  .vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  canvas{max-width:100%;border:1px solid var(--line);border-radius:6px;cursor:crosshair;display:block;touch-action:manipulation}
  .side{background:var(--panel);border-left:1px solid var(--line);padding:14px;overflow:auto}
  .card{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:11px;margin-bottom:12px}
  .card h3{margin:0 0 8px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.03em}
  .kv{display:flex;justify-content:space-between;font-size:13px;padding:2px 0;color:var(--mut)}
  .kv b{color:var(--txt)}
  .row{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:13px;color:var(--mut)}
  .row input{width:70px;background:var(--bg);border:1px solid var(--line);color:var(--txt);
    border-radius:5px;padding:8px 6px;text-align:right}
  .btn{background:var(--acc);color:#161616;border:none;border-radius:7px;padding:11px 13px;
    min-height:44px;font-weight:600;cursor:pointer;font-size:13px;width:100%;margin-top:4px;
    touch-action:manipulation}
  .btn.sec{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
  pre{background:#0d1014;border:1px solid var(--line);border-radius:7px;padding:10px;overflow:auto;
    font:11px/1.45 ui-monospace,Consolas,monospace;color:#cdd6e2;max-height:260px;margin:8px 0 0}
  .hint{font-size:12px;color:var(--mut);background:rgba(58,120,194,.12);border-left:3px solid var(--blue);
    padding:8px 10px;border-radius:0 6px 6px 0;margin-bottom:10px}
  .ok{color:var(--grn)} .warn{color:var(--acc)}
</style>
</head>
<body>
<header>
  <h1>Teil nachzeichnen</h1>
  <span class="sub">1. Kalibrieren &rarr; 2. Kontur &rarr; 3. Löcher &rarr; 4. Dorne &rarr; SCAD fertig</span>
</header>
<div class="wrap">
  <div class="stage">
    <div class="toolbar">
      <button id="m_kalib" class="on" data-mode="kalib">1 · Kalibrieren</button>
      <button id="m_kontur" data-mode="kontur">2 · Kontur</button>
      <button id="m_loch" data-mode="loch">3 · Löcher</button>
      <button id="m_dorn" data-mode="dorn">4 · Dorne</button>
      <span class="sep"></span>
      <button id="undo"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3L2.5 6.5 6 10"/><path d="M2.5 6.5H10a4 4 0 0 1 0 8H7"/></svg>Rückgängig</button>
      <button id="reset"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9"/><path d="M13.5 1.5v3h-3"/></svg>Reset</button>
      <label class="chip" style="cursor:pointer"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.5" cy="6.5" r="1.2"/><path d="M2 12l3.5-3.5 2.5 2.5 3-3L14.5 11"/></svg>Bild laden<input id="imgfile" type="file" accept="image/*" class="vh"></label>
    </div>
    <div class="subbar" id="subbar"></div>
    <canvas id="cv"></canvas>
  </div>

  <div class="side">
    <div class="hint" id="hint"></div>

    <div class="card">
      <h3>Maße (automatisch)</h3>
      <div class="kv"><span>Maßstab</span><b id="o_scale">—</b></div>
      <div class="kv"><span>Bounding B×H</span><b id="o_bbox">—</b></div>
      <div class="kv"><span>Konturpunkte</span><b id="o_np">0</b></div>
      <div class="kv"><span>Löcher</span><b id="o_nh">0</b></div>
      <div class="kv"><span>Dorne</span><b id="o_nd">0</b></div>
    </div>

    <div class="card">
      <h3>Parameter</h3>
      <div class="row"><span>Dicke</span><input id="p_dicke" type="number" value="3" step="0.1" inputmode="decimal" aria-label="Dicke in mm"><span>mm</span></div>
      <div class="row"><span>Stab-Ø</span><input id="p_stabd" type="number" value="2.8" step="0.1" inputmode="decimal" aria-label="Stab-Durchmesser in mm"><span>mm</span></div>
      <div class="row"><span>Stab-Länge</span><input id="p_stabl" type="number" value="20" step="1" inputmode="decimal" aria-label="Stab-Länge in mm"><span>mm</span></div>
      <div class="row"><span>Eck-Radius</span><input id="p_eck" type="number" value="2" step="0.5" inputmode="decimal" aria-label="Eck-Radius in mm"><span>mm</span></div>
    </div>

    <div class="card">
      <h3>SCAD-Ausgabe</h3>
      <button class="btn" id="dl">fertige .scad herunterladen</button>
      <button class="btn sec" id="cp" style="margin-top:6px">Code kopieren</button>
      <span id="copied" class="ok" style="font-size:12px"></span>
      <pre id="code">—</pre>
    </div>
  </div>
</div>

<script>
const IMG_SRC = null;
const cv=document.getElementById("cv"), ctx=cv.getContext("2d");
const img=new Image();
let ready=false;

const S={
  mode:"kalib", lochTyp:"bogen", dornRicht:"links",
  calib:{pts:[], mm:140, scale:null},
  kontur:[], loecher:[], dorne:[]
};

// ---- Subbar je Modus ----
const ARROW=deg=>`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="transform:rotate(${deg}deg)"><path d="M2 8h11M9 4l4 4-4 4"/></svg>`;
const SUB={
  kalib:`<span class="lbl">2 Punkte einer bekannten Kante klicken, dann Länge eingeben:</span>
         <input id="calmm" type="number" min="1" step="any" inputmode="decimal" class="mm-in" aria-label="Kantenlänge in mm"> mm`,
  kontur:`<span class="lbl">Ecken der Platte der Reihe nach klicken (Dorne NICHT). Schließt automatisch.</span>`,
  loch:`<span class="lbl">Loch-Typ wählen, dann Mitte klicken:</span>
        <button data-typ="bogen" class="on">Bogen ∩</button>
        <button data-typ="c">C-Haken</button>
        <button data-typ="rund">Rund</button>`,
  dorn:`<span class="lbl">Richtung wählen, dann Ansatzpunkt am Rand klicken:</span>
        <button data-richt="links" class="on">${ARROW(180)} links</button>
        <button data-richt="rechts">rechts ${ARROW(0)}</button>
        <button data-richt="oben">${ARROW(-90)} oben</button>
        <button data-richt="unten">${ARROW(90)} unten</button>`
};
function buildSub(){
  const sb=document.getElementById("subbar");
  sb.innerHTML=SUB[S.mode];
  if(S.mode==="kalib"){ const i=document.getElementById("calmm");
    i.value=S.calib.mm;
    i.oninput=()=>{const v=parseFloat(i.value); S.calib.mm=(v>0)?v:140; recompute();}; }
  if(S.mode==="loch") sb.querySelectorAll("button").forEach(b=>{
    b.classList.toggle("on", b.dataset.typ===S.lochTyp);
    b.onclick=()=>{S.lochTyp=b.dataset.typ;
      sb.querySelectorAll("button").forEach(x=>x.classList.remove("on")); b.classList.add("on");};});
  if(S.mode==="dorn") sb.querySelectorAll("button").forEach(b=>{
    b.classList.toggle("on", b.dataset.richt===S.dornRicht);
    b.onclick=()=>{S.dornRicht=b.dataset.richt;
      sb.querySelectorAll("button").forEach(x=>x.classList.remove("on")); b.classList.add("on");};});
}

// ---- Modus-Buttons ----
document.querySelectorAll(".toolbar [data-mode]").forEach(b=>b.onclick=()=>{
  S.mode=b.dataset.mode;
  document.querySelectorAll(".toolbar [data-mode]").forEach(x=>x.classList.remove("on"));
  b.classList.add("on"); buildSub(); draw();
});
document.getElementById("undo").onclick=()=>{
  if(S.mode==="kalib") S.calib.pts.pop();
  else if(S.mode==="kontur") S.kontur.pop();
  else if(S.mode==="loch") S.loecher.pop();
  else if(S.mode==="dorn") S.dorne.pop();
  recompute();
};
document.getElementById("reset").onclick=()=>{
  S.calib.pts=[]; S.calib.scale=null; S.kontur=[]; S.loecher=[]; S.dorne=[]; recompute();
};

// ---- Klick auf Canvas ----
cv.onclick=(e)=>{
  if(!ready)return;
  const r=cv.getBoundingClientRect();
  const x=(e.clientX-r.left)*(cv.width/r.width);
  const y=(e.clientY-r.top)*(cv.height/r.height);
  if(S.mode==="kalib"){
    if(S.calib.pts.length>=2) S.calib.pts=[];
    S.calib.pts.push({x,y});
    if(S.calib.pts.length===2){
      const el=document.getElementById("calmm");
      const mmv=el?parseFloat(el.value):NaN;
      S.calib.mm=(mmv>0)?mmv:140;
    }
  } else if(S.mode==="kontur"){ S.kontur.push({x,y}); }
  else if(S.mode==="loch"){ S.loecher.push({x,y,typ:S.lochTyp}); }
  else if(S.mode==="dorn"){ S.dorne.push({x,y,richt:S.dornRicht}); }
  recompute();
};

// ---- Maßstab ----
function calcScale(){
  if(S.calib.pts.length===2){
    const a=S.calib.pts[0], b=S.calib.pts[1];
    const d=Math.hypot(a.x-b.x,a.y-b.y);
    S.calib.scale = d>0 ? S.calib.mm/d : null;
  } else S.calib.scale=null;
}
// mm-Transform (origin = links/unten der Kontur-Bbox)
function frame(){
  const ppx=S.calib.scale;
  let pts=S.kontur.length?S.kontur:S.calib.pts;
  if(!pts.length) return {ppx, ox:0, oy:0};
  const minX=Math.min(...pts.map(p=>p.x)), maxY=Math.max(...pts.map(p=>p.y));
  return {ppx, ox:minX, oy:maxY};
}
function toMM(p){
  const f=frame(); if(!f.ppx) return null;
  return [ +( (p.x-f.ox)*f.ppx ).toFixed(1), +( (f.oy-p.y)*f.ppx ).toFixed(1) ];
}

// ---- Zeichnen ----
function draw(){
  if(!ready)return;
  ctx.clearRect(0,0,cv.width,cv.height);
  ctx.drawImage(img,0,0,cv.width,cv.height);
  // Kalibrier-Linie
  if(S.calib.pts.length){
    ctx.strokeStyle="#4a9d5b"; ctx.fillStyle="#4a9d5b"; ctx.lineWidth=2;
    ctx.beginPath();
    S.calib.pts.forEach((p,i)=>{ i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y);
      ctx.fillRect(p.x-4,p.y-4,8,8); });
    ctx.stroke();
    if(S.calib.pts.length===2){
      const a=S.calib.pts[0],b=S.calib.pts[1];
      ctx.fillStyle="#4a9d5b"; ctx.font="14px sans-serif";
      ctx.fillText(S.calib.mm+" mm",(a.x+b.x)/2+6,(a.y+b.y)/2-6);
    }
  }
  // Kontur
  if(S.kontur.length){
    ctx.strokeStyle="#e0862f"; ctx.fillStyle="#e0862f"; ctx.lineWidth=2;
    ctx.beginPath();
    S.kontur.forEach((p,i)=> i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y));
    if(S.kontur.length>2) ctx.closePath();
    ctx.stroke();
    S.kontur.forEach((p,i)=>{ ctx.fillRect(p.x-4,p.y-4,8,8);
      ctx.fillStyle="#fff"; ctx.font="12px sans-serif"; ctx.fillText(i+1,p.x+6,p.y-6); ctx.fillStyle="#e0862f"; });
  }
  // Löcher
  S.loecher.forEach(h=>{
    ctx.strokeStyle= h.typ==="rund"?"#c678dd":(h.typ==="c"?"#56b6c2":"#e5c07b");
    ctx.lineWidth=2; ctx.beginPath(); ctx.arc(h.x,h.y,7,0,Math.PI*2); ctx.stroke();
    ctx.fillStyle=ctx.strokeStyle; ctx.font="11px sans-serif";
    ctx.fillText(h.typ==="bogen"?"∩":(h.typ==="c"?"C":"○"),h.x-4,h.y+4);
  });
  // Dorne
  S.dorne.forEach(d=>{
    ctx.strokeStyle="#61afef"; ctx.fillStyle="#61afef"; ctx.lineWidth=3;
    const L=26, dir={links:[-1,0],rechts:[1,0],oben:[0,-1],unten:[0,1]}[d.richt];
    ctx.beginPath(); ctx.moveTo(d.x,d.y); ctx.lineTo(d.x+dir[0]*L,d.y+dir[1]*L); ctx.stroke();
    ctx.beginPath(); ctx.arc(d.x,d.y,4,0,Math.PI*2); ctx.fill();
  });
}

// ---- Ausgabe ----
function recompute(){ calcScale(); draw(); updateSide(); }
function updateSide(){
  document.getElementById("o_scale").textContent = S.calib.scale? S.calib.scale.toFixed(3)+" mm/px" : "— (kalibrieren)";
  document.getElementById("o_np").textContent=S.kontur.length;
  document.getElementById("o_nh").textContent=S.loecher.length;
  document.getElementById("o_nd").textContent=S.dorne.length;
  // bbox
  if(S.calib.scale && S.kontur.length>1){
    const mm=S.kontur.map(toMM);
    const xs=mm.map(p=>p[0]), ys=mm.map(p=>p[1]);
    document.getElementById("o_bbox").textContent=
      (Math.max(...xs)-Math.min(...xs)).toFixed(0)+" × "+(Math.max(...ys)-Math.min(...ys)).toFixed(0)+" mm";
  } else document.getElementById("o_bbox").textContent="—";
  document.getElementById("code").textContent = genScad();
  updateHint();
}
function updateHint(){
  const h=document.getElementById("hint");
  if(!ready){ h.innerHTML="<b>Start:</b> oben in der Leiste <b>Bild laden</b> — Foto/Screenshot des Teils w&auml;hlen."; return;}
  if(!S.calib.scale){ h.innerHTML="<b>Schritt 1:</b> Zwei Punkte einer bekannten Kante klicken (z.B. längste Seite = 140 mm)."; return;}
  if(S.kontur.length<3){ h.innerHTML="<span class='ok'>Kalibriert ✓</span> — <b>Schritt 2:</b> Modus <b>Kontur</b>, die Ecken der Platte abklicken."; return;}
  h.innerHTML="<span class='ok'>Läuft ✓</span> Löcher & Dorne setzen, dann <b>.scad herunterladen</b>. Reihenfolge/Feinmaß später im SCAD änderbar.";
}

function genScad(){
  if(!S.calib.scale || S.kontur.length<3) return "// erst kalibrieren + Kontur (min. 3 Punkte)";
  const dicke=+document.getElementById("p_dicke").value||3;
  const stabd=+document.getElementById("p_stabd").value||2.8;
  const stabl=+document.getElementById("p_stabl").value||20;
  const eck=+document.getElementById("p_eck").value||0;
  const out=S.kontur.map(toMM);
  const outStr=out.map(p=>`[${p[0]},${p[1]}]`).join(", ");
  const bogen=S.loecher.filter(h=>h.typ==="bogen").map(toMM);
  const cc=S.loecher.filter(h=>h.typ==="c").map(toMM);
  const rund=S.loecher.filter(h=>h.typ==="rund").map(toMM);
  const arr=a=>a.map(p=>`[${p[0]},${p[1]}]`).join(", ");
  const dorne=S.dorne.map(d=>{const m=toMM(d);return `[${m[0]},${m[1]},"${d.richt}"]`;}).join(", ");
  return `// ===== Blech-Winkel — aus Tracer generiert =====
dicke      = ${dicke};
eck_radius = ${eck};
stab_d     = ${stabd};
stab_laenge= ${stabl};
$fn = 64;

outline   = [ ${outStr} ];
bogen_pos = [ ${arr(bogen)} ];
c_pos     = [ ${arr(cc)} ];
rund_pos  = [ ${arr(rund)} ];
dorne     = [ ${dorne} ];   // [x,y,"links|rechts|oben|unten"]

bogen_ro=5.5; bogen_ri=3; bogen_oeffnung=4;   // Federauge oben — anpassen
c_ro=5.5;     c_ri=3;     c_oeffnung=4;        // C-Haken rechts — anpassen
rund_d=5;                                       // Rundloch-Ø

module plate2d(){ if(eck_radius>0) offset(r=eck_radius) offset(delta=-eck_radius) polygon(outline); else polygon(outline); }
module feder_bogen(ro,ri,op){ difference(){ circle(ro); circle(ri); translate([-op/2,-ro-1]) square([op,ro+1]); } }
module feder_c(ro,ri,op){ difference(){ circle(ro); circle(ri); translate([-ro-1,-op/2]) square([ro+1,op]); } }
module stab(p){ r = p[2]=="links"?[0,-90,0]:p[2]=="rechts"?[0,90,0]:p[2]=="oben"?[-90,0,0]:[90,0,0];
    translate([p[0],p[1],dicke/2]) rotate(r) cylinder(h=stab_laenge,d=stab_d); }

difference(){
  union(){
    linear_extrude(dicke) plate2d();
    for(d=dorne) stab(d);
  }
  for(p=bogen_pos) translate([p[0],p[1],-1]) linear_extrude(dicke+2) feder_bogen(bogen_ro,bogen_ri,bogen_oeffnung);
  for(p=c_pos)     translate([p[0],p[1],-1]) linear_extrude(dicke+2) feder_c(c_ro,c_ri,c_oeffnung);
  for(p=rund_pos)  translate([p[0],p[1],-1]) cylinder(h=dicke+2,d=rund_d);
}
`;
}

document.getElementById("dl").onclick=()=>{
  const blob=new Blob([genScad()],{type:"text/plain"});
  const url=URL.createObjectURL(blob);
  const a=document.createElement("a"); a.href=url;
  a.download="teil_winkel_traced.scad"; a.click();
  setTimeout(()=>URL.revokeObjectURL(url),1000);
};
let cpTimer=null;
document.getElementById("cp").onclick=async()=>{
  const el=document.getElementById("copied");
  clearTimeout(cpTimer);
  try{
    await navigator.clipboard.writeText(genScad());
    el.className="ok"; el.textContent=" kopiert ✓";
  }catch(e){
    el.className="warn"; el.textContent=" Kopieren nicht möglich — Code unten manuell markieren";
  }
  cpTimer=setTimeout(()=>el.textContent="",2500);
};
["p_dicke","p_stabd","p_stabl","p_eck"].forEach(id=>document.getElementById(id).oninput=updateSide);

img.onload=()=>{ cv.width=img.naturalWidth; cv.height=img.naturalHeight; ready=true; buildSub(); recompute(); };
img.onerror=()=>{ ready=false;
  document.getElementById("hint").innerHTML="<span class='warn'><b>Fehler:</b></span> Bild konnte nicht geladen werden — anderes Format/Datei versuchen."; };
let imgURL=null;
document.getElementById("imgfile").onchange=(e)=>{
  const f=e.target.files[0]; if(!f)return;
  if(imgURL) URL.revokeObjectURL(imgURL);
  imgURL=URL.createObjectURL(f);
  img.src=imgURL;
  e.target.value="";   // gleiche Datei erneut wählbar
};
if(IMG_SRC) img.src=IMG_SRC;
else { buildSub(); updateHint(); }
</script>
</body>
</html>