live plot example and screenToPlot helper

2026-09-09 12:06:56 +02:00
parent c129222b78
commit ce288bd35d
6 changed files with 198 additions and 2 deletions
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wall Plotter — mouse</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #1c1c20;
+        color: #ddd;
+        font-family: system-ui, sans-serif;
+      }
+      h1 {
+        position: absolute;
+        top: 0.6rem;
+        right: 0.75rem;
+        z-index: 20;
+        font-size: 0.95rem;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+        opacity: 0.85;
+        pointer-events: none;
+        text-align: right;
+      }
+      #sketch-host {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+      }
+      #sketch-host canvas {
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
+    <script src="../../lib/WallPlotter.js?v=2.3.24"></script>
+    <script src="sketch.js"></script>
+  </head>
+  <body>
+    <h1>Wall Plotter — mouse</h1>
+    <main id="sketch-host"></main>
+  </body>
+</html>
@@ -0,0 +1,79 @@
+// Live-Maus: Jeder Klick schickt eine Zielposition. Der Plotter
+// fährt erst dorthin (moveTo wartet auf Bewegungsende). Der nächste Klick wird
+// erst danach ausgeführt.
+// waitUntilArrived: true = Klicks während der Fahrt ignorieren.
+//                   false = Klicks dürfen sich stapeln (send-Kette in der Library).
+
+let wp;
+let live = false;
+let busy = false;
+const waitUntilArrived = true;
+
+function setup() {
+  const canvas = createCanvas(windowWidth, windowHeight);
+  canvas.parent('sketch-host');
+
+  wp = new WallPlotter({
+    penUpGcode: 'M280 P0 S120',
+    penDownGcode: 'M280 P0 S30',
+    penUpDelayMs: 250,
+    penDownDelayMs: 150,
+  });
+  wp.setSpeed(3000, 3000);
+  wp.enableKeyInputs();
+  wp.enablePlotButtons();
+}
+
+// Jeden Frame: Overlay zeichnen und die Maus umranden.
+function draw() {
+  background(28, 28, 32);
+  wp.showInfos();
+
+  noFill();
+  stroke(live ? color(230, 50, 50) : color(220));
+  strokeWeight(2);
+  circle(mouseX, mouseY, 16);
+
+  if (live) {
+    noStroke();
+    fill(230, 50, 50);
+    textSize(12);
+    textAlign(LEFT, CENTER);
+    text(busy ? 'LIVE BUSY' : 'LIVE', mouseX + 14, mouseY);
+  }
+}
+
+// Fenstergrösse geändert: Canvas anpassen.
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+// Taste L: Live-Modus ein- oder ausschalten.
+function keyPressed() {
+  if (key !== 'l' && key !== 'L') return;
+  live = !live;
+}
+
+// Klick (nur im Live-Modus): Gondel fährt zu dieser Millimeter-Position, Stift oben.n
+async function mousePressed() {
+  if (!live || !wp.connected || !wp.homeSet) return;
+  if (waitUntilArrived && busy) return;
+
+  busy = true;
+  try {
+    // Maus-Pixel auf dem Overlay -> Plotter-Koordinaten
+    // Die Library nutzt den aktuellen Overlay-Layout-Massstab und begrenzt
+    // standardmässig auf die Maschinen-Grenzen (inkl. korrekter Y-Ausrichtung).
+    const p = wp.screenToPlot(mouseX, mouseY);
+    await wp.moveTo(p.x, p.y);
+
+    console.log('moveTo', p.x, p.y);
+  } finally {
+    busy = false;
+  }
+}
+
+// Von den Plot-Buttons erwartet; hier ungenutzt (kein gepufferter Pfad).
+async function plot() {}
+
+async function test() {}