stop and go

examples/zickzack/index.html

@@ -9,52 +9,44 @@
         box-sizing: border-box;
         margin: 0;
       }
+      html,
       body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
         background: #1c1c20;
         color: #ddd;
         font-family: system-ui, sans-serif;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 1rem;
       }
       h1 {
-        font-size: 1.1rem;
+        position: absolute;
+        top: 0.6rem;
+        right: 0.75rem;
+        z-index: 20;
+        font-size: 0.95rem;
         font-weight: 500;
-        margin-bottom: 0.75rem;
+        letter-spacing: 0.02em;
         opacity: 0.85;
+        pointer-events: none;
+        text-align: right;
       }
-      main {
+      #sketch-host {
-        border-radius: 8px;
+        position: absolute;
-        overflow: hidden;
+        inset: 0;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+        z-index: 0;
       }
-      p.note {
+      #sketch-host canvas {
-        max-width: 800px;
+        display: block;
-        margin-top: 1rem;
+        width: 100% !important;
-        font-size: 0.85rem;
+        height: 100% !important;
-        line-height: 1.5;
-        opacity: 0.7;
-      }
-      code {
-        background: #2a2a30;
-        padding: 0.1em 0.35em;
-        border-radius: 4px;
       }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
-    <script src="../../lib/WallPlotter.js?v=bounds-px"></script>
+    <script src="../../lib/WallPlotter.js?v=2.0.2"></script>
     <script src="sketch.js"></script>
   </head>
   <body>
-    <h1>Wall Plotter — zigzag example</h1>
+    <h1>Wall Plotter — zigzag</h1>
     <main id="sketch-host"></main>
-    <p class="note">
-      Serve from the <code>p5-wallplotter</code> folder:
-      <code>python -m http.server 8080</code>
-      then open <code>http://localhost:8080/examples/zickzack/</code>.
-      Chrome or Edge. Press <code>C</code> to connect, <code>H</code> to set home.
-    </p>
   </body>
 </html>

examples/zickzack/sketch.js

@@ -42,14 +42,15 @@ async function drawArt(testOnly) {
   wp.move(-area, -area);
   //wp.wait(1000 * 10);
 
-  let step = area / 2;
+  let step = area / 6;
 
   for (let y = -area; y <= area; y+=step){
     for (let x = -area; x <= area; x+=step){
-        wp.move(x+step, y);
+      //if(random(1) < 0.8){
-        wp.draw(x, y+step);
+        wp.draw(x, y);
-      }
+        wp.draw(x+(random(1)<0.9), y+random(step*1.5));
+      //}
+    }
   }
-
   await wp.runPath(testOnly);
 }

lib/README.md

@@ -53,16 +53,20 @@ Keyboard controls. Call from `setup()`. No arguments.
 | `← → ↑ ↓` | Jog one step, pen up |
 | `Shift + arrows` | Jog one step, pen down |
 | `+` / `-` | Jog step size 1–100 mm |
-| `L` `R` `T` `B` | Mark left / right / top / bottom bound at current position |
 
 ### `enablePlotButtons(options?)`
 
-Adds Plot and Test buttons. Expects global `plot()` and `test()` in the sketch.
+Adds Connect, Plot, and Test buttons. Expects global `plot()` and `test()` in the sketch.
+
+**Connect** is shown only while disconnected (same as key **C**). While a path is running, Plot becomes **Pause**; while paused it becomes **Resume**. Test becomes **Stop** during a test.
 
 | Option | Default | What it is |
 |--------|---------|------------|
 | `parentId` | `'wallplotter-controls'` | DOM id for the button row |
-| `plotLabel` | `'Plot'` | Plot button text |
+| `connectLabel` | `'Connect'` | Connect button text |
+| `plotLabel` | `'Plot'` | Plot button text when idle |
+| `pauseLabel` | `'Pause'` | Plot button while a path is running |
+| `resumeLabel` | `'Resume'` | Plot button while paused |
 | `testLabel` | `'Test'` | Test button text |
 | `stopLabel` | `'Stop'` | Test button while a test is running |
 
@@ -146,7 +150,13 @@ Returns estimated duration in **milliseconds** for the current path buffer, or f
 
 ### `stopPath()` / `stopPlot()`
 
-`stopPath()` aborts the current `runPath`. `stopPlot()` also sends Marlin `M410` (quick stop) during a live plot. Key **S** calls `stopPlot()` while plotting.
+`stopPath()` aborts the current `runPath` and unblocks any wait for Marlin `ok`.
+
+`stopPlot()` **halts and pauses** so **Resume** can continue from the current position (live plot: `M410` quick-stop, then `M114`). Key **S** and a Marlin `ok` timeout do the same. **S** / Stop again while paused aborts the run.
+
+### `pausePlot()` / `resumePlot()`
+
+**Pause** waits for the current segment to finish, then lifts the pen. **Stop** / timeout interrupt the current move immediately. Both leave the Plot button as **Resume**. Elapsed / remaining HUD time freezes while paused.
 
 ---
 
@@ -169,7 +179,7 @@ Write one G-code line and wait for Marlin `ok`.
 - `line` (string): command without newline, e.g. `'M114'`.
 - `options.allowWithoutHome` (boolean): allow `G0`/`G1` before home. Default `false`.
 - `options.waitOk` (boolean): wait for `ok`. Default `true`.
-- `options.timeoutMs` (number): `ok` timeout, default `300000`.
+- `options.timeoutMs` (number): `ok` timeout. Default **15000**. `M400` / `G4` use a longer timeout based on the move or dwell. After 1s with no `ok`, the log shows `waiting for Marlin ok` and the HUD says **Waiting for plotter…**. During a plot, a timeout **pauses** so **Resume** can continue; **S** / Stop does the same.
 
 ### `penUp(force?)` / `penDown(force?)`
 
@@ -209,7 +219,7 @@ Relative move in mm.
 | `x`, `y` | Current position, mm |
 | `isPenDown` | Pen state |
 | `isPlotting` | `runPath` in progress |
+| `isPaused` | `runPath` is paused |
 | `feedRateTravel` / `feedRateDraw` | Current speeds, mm/min |
 | `timingMultiplier` | Preview wait scale |
 | `stepSize` | Jog step, mm |
-| `drawBounds` | `{ left, right, top, bottom }` or `null` |