tutorial

2026-09-05 13:39:34 +02:00
parent 82daebcdd0
commit b5692fb607
10 changed files with 757 additions and 340 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 — rectangle</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.15"></script>
+    <script src="sketch.js"></script>
+  </head>
+  <body>
+    <h1>Wall Plotter — rectangle</h1>
+    <main id="sketch-host"></main>
+  </body>
+</html>
@@ -0,0 +1,46 @@
+let wp;
+
+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, 1500);
+  wp.setTimingMultiplier(1);
+  wp.enableKeyInputs();
+  wp.enablePlotButtons();
+}
+
+function draw() {
+  background(28, 28, 32);
+  wp.showInfos();
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+async function plot() {
+  await drawPlot(false);
+}
+
+async function test() {
+  await drawPlot(true);
+}
+
+async function drawPlot(testOnly) {
+  const s = 200; // 400 × 400 mm around home
+  wp.startPath();
+  wp.move(-s, -s); // pen up to bottom-left
+  wp.draw(s, -s); // bottom edge
+  wp.draw(s, s); // right edge
+  wp.draw(-s, s); // top edge
+  wp.draw(-s, -s); // left edge, close the rectangle
+  wp.move(0, 0); // pen up back to home
+  await wp.runPath(testOnly);
+}