Skip to content

web: /guide — the first hour on a Patternflow you can turn (01–04) - #461

Merged
engmung merged 11 commits into
devfrom
guide
Sep 30, 2026
Merged

engmung merged 11 commits into
devfrom
guide

Conversation

@engmung

@engmung engmung commented Sep 30, 2026

Copy link
Copy Markdown
Owner

What this is

/guide and /guide/ko: an interactive usage guide for people who have a board. The device on the page is the real v3.9 hardware (the case from patternflow_case.blend, the PCB from KiCad, the DevKit), and it runs a port of the firmware's input logic and screens, so turning, pressing and holding a knob does what it does on the panel. This PR is the first hour, as its own page:

  • 01 Flash: the left port, BOOT/RST, the real ESP Web Tools dialogs (captured from 10.4.0), Wi-Fi.
  • 02 Knobs: turn, press, hold. Each knob has a dial and a live readout (K1 hue 0.17).
  • 03 Patterns: put the Basics deck on (or a single pattern), 1/1 → 1/34, the select screen.
  • 04 Console: a live copy of the device console in a window over the page, desktop and phone.

Every step has a "Stuck here?" link. It opens the new guide_stuck.yml issue form with the chapter, step, a link back to it and the browser already filled in. The end of the page lists what the next guides cover: community, then Pattern Lab with layers, Graphic Export and Director inside it.

Also in here:

  • firmware: text on the panel's own screens no longer runs off the edge. KNOB MAP "TURN=SHOW", PAUSED "console", and the hotspot/update hostnames break at a -/. and fit in 10 columns (drawCenteredFit). CHANGELOG has it under Unreleased.
  • docs: the Flash Patternflow block, BUILD_GUIDE §8.1 and the README's "Playing it" link to the guide.

Checked

  • ./firmware/bundles/build.sh all: default, audio, performance, clock and midi all build; the marker scan and check_boundaries.py pass.
  • npm run build: passes; /guide and /guide/ko are static.
  • tsc and eslint are clean; vitest (panel screens) passes.
  • console_demo.py --check is current.
  • Captured in GPU Chrome at desktop and phone sizes.

Not checked

  • The firmware text fix has not been flashed to a board and looked at.
  • 1/1 → 1/34 after the Basics install has not been re-watched on hardware for this page.
  • Nobody outside has followed the guide yet. That is what the "Stuck here?" links are for.

🤖 Generated with Claude Code

engmung and others added 6 commits September 30, 2026 09:15
A scroll-driven page over a fixed 3D Patternflow: the landing page's model
re-wired to a firmware simulator (lib/guide/deviceSim.ts, the device's own
screens ported from patternflow.ino in panelScreens.ts), the v3.9 board
exported from KiCad, the ESP32 DevKit, chapters one to four in English and
Korean, and a Guide link in the site nav. Checkpoint before the case model,
the flasher screens and the console window land.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…nsole

- The case is the v3.9 enclosure from hardware/case/source (collection
  0904_v3.9): body, back slider, back plate, front lid and the four knobs,
  in the landing model's frame. The ESP32 comes out the way the case allows:
  the back slider runs off along its dovetails, then the DevKit lifts off
  its pins. Board and DevKit sit at the assembly's depths, clear of the case.
- Chapter one: the cable unplugs and drops before the DevKit moves and is
  never carried round with it; BOOT/RST runs on a slower shared clock with
  the chips in the card; the RST fallback sits in the Wi-Fi card; framing
  and phone camera reworked.
- The flasher is shown as it is: ESP Web Tools 10's own dialog, rendered
  state by state with this site's manifest and the firmware's Improv
  answers (web/public/guide/flasher).
- Chapter four embeds the device console itself: firmware/toolchain/
  console_demo.py builds the core pages with a mock device into
  web/public/guide/console-demo, and ConsoleWindow bridges it to the 3D
  board (pick a pattern there, the panel follows). --check says when the
  demo is stale.
- Critics' pass: pattern stream behind the device, tag leaders, DevKit
  materials, card heights on phones, stutter on first cable/console load,
  pad keyboard support, Korean copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A portrait line holds ten characters of the 5x7 font, and Adafruit GFX
wraps an eleventh onto the next line by itself. KNOB MAP's "TURN = SHOW"
put a lone "W" in front of "K3 = EXIT", the install screen's "web console"
did the same, and the default host name "patternflow" lost its "w" on the
hotspot and UPDATE screens. The labels are shorter ("TURN=SHOW",
"console"), and names that can outgrow a line go through drawCenteredFit,
which breaks them into lines of ten — before a '-' or '.', else before
"flow" — so "pattern" / "flow-a1b2" and "pattern" / "flow.local" land on
the lines they had. build.sh all: default, audio, performance, clock and
midi all build; check_boundaries holds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ramed as a deck to put on

- Each knob gets a dial: a dark track on the case with an orange dot riding
  it at the knob's angle, faint wherever knobs are the subject and bright
  while a hand is on it. The track takes a drag as well as the knob does.
- Beside the knob's K tag, while it moves or is hovered: what the running
  pattern calls it and its value, with a bar for where that sits in its
  range (DeviceSim.knobReadout; Origin's hue/speed/tiling/freq, else the
  pattern's @knobs names). Origin's click moves the readout back with it.
- The two "your turn" steps and the control pad are gone; how to play the
  one on the page moved into the "Turn" step.
- Chapter three's deck step now invites putting the Basics deck on, and
  says a single pattern goes on the same way from its own page.
- panelScreens follows the firmware's text fix (TURN=SHOW, drawCenteredFit).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…says where

Each step now has an address (#flash-3) and a quiet link at the foot of its
card that opens the new guide_stuck issue form with the chapter, the step,
a link back to it and the browser filled in; the reader only says what
happened. The end of the page has one for anywhere else.

The closing card now reads as what comes next: the next guide (community,
then Pattern Lab with layers, Graphic Export and Director inside it) and the
rest after that, instead of ten numbered chapters.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… README

The Flash Patternflow block's help link goes to the guide's first chapter,
with the written §8 beside it; §8.1 and "Playing it" say where to see it
done on a board you can turn.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
pattern-flow_origin Building Building Preview Sep 30, 2026 12:52pm UTC
pattern-flow-open Ready Ready Preview Sep 30, 2026 12:52pm UTC

public/guide/console-demo is written by console_demo.py (the core's console
pages and a simulated board, fflate vendored beside them); CI's lint failed
on fflate's minified source. console_demo.py --check is what keeps it right.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The guide is two pages now: /guide keeps the first hour (01-04) and its
closing card links on; /guide/make (and /ko) is "Make your own", starting
on a board that is already powered with Basics on it.

05 Community walks the real site: the wall, which patterns can go on a
board (.h / Flashable now), sending one pattern, your own deck in the dock,
other people's decks, and "Open in Pattern Lab". Every screen is a crop of
the live site, taken logged out, with a ring on the control the step is
about and its caption quoting the UI's own words.

06 Pattern Lab: from here the board plays the reader's own Lab draft. It
reads patternflow_lab_project_v2 read-only and follows every save the Lab
makes, in this window or another tab. The real /pattern-lab opens in a
window beside it. The steps go in the order the work happens: name it, ask
an AI, the Color Ramp, the knobs, the second prompt that makes the .h,
Apply to my Patternflow, layers, Graphic Export, Director, and giving it
back. The screens are real Lab crops.

Walking both pages leaves every patternflow_lab_* key byte-identical. A
draft that doesn't run doesn't leave the board dark. Bloom is held down
while a draft plays, so black stays black.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
engmung and others added 3 commits September 30, 2026 21:45
The console's one-click install from a link (/patterns?src=) took only
.pfm and .json from a build's file list, so the catalog.txt every deck
build carries was left behind: a deck sent from the dock landed in
alphabetical order, while the Decks page and the dock both promise the
order it was built in. A dropped zip already kept it. Both ways in now go
through one rule, installable(): catalog.txt and .pfs ride along,
performance.json stays behind.

The guide's console demo is regenerated from the page. The guide's deck
step says the order is dropped up to v3.10.4 and kept after.

build.sh all: default, audio, performance, clock, midi ok;
check_boundaries holds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A WIP chip sits beside the brand on both guide pages: it ships while it is
still being written. The pattern page's Performances note, the performance
modal and the route's error named the Director's old "Save-JSON"; the
Director saves .pfs. CHANGELOG records the guide, the wording and the
deck-order fix.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
web: /guide/make — 05 Community and 06 Pattern Lab
@engmung
engmung merged commit a036859 into dev Sep 30, 2026
11 checks passed

This branch was successfully deployed

1 active deployment
Preview – pattern-flow-open — be51f958 Deployed Sep 30, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant