refactor(examples): convert 13 camera examples to ESM helpers (refs #79)#100
Merged
Conversation
Phase 2 of #79: applies the helper API validated in phase 1 (#98) to the simple and medium tiers — 13 of the remaining 15 camera examples. Converted (ESM + de-jQuery in one pass, behaviour unchanged): - simple: boxblur, canny_edge, equalize_hist, gaussblur, scharr, sobel, warp_affine, warp_perspective - medium: oflow_lk, pyrdown, sobel_edge, yape, yape06 Each now uses `<script type="module">` with `import jsfeatNext from '../dist/jsfeatNext.mjs'`, `loadCamera()`/`stopCamera()`/`showCameraError()` from `demo-utils.mjs`, and the profiler via `profiler.mjs`. jQuery and `js/compatibility.js` are gone from all of them; the inline grayscale->RGBA expansion loops and the duplicated `render_corners`/`render_mono_image` functions are replaced by the shared `renderMonoImage()`/`renderCorners()`. Net -684 lines (364 insertions, 1048 deletions) — all boilerplate. Note on a bug caught during conversion: the mechanical pass initially left `var ctx, canvasWidth, canvasHeight;` in 10 files. That would have shadowed the module-level `ctx` with `undefined` and left `canvasWidth`/`canvasHeight` undefined — `sample_yape.html` passes those straight into `jsfeatNext.yape.init(...)`. The stale declarations are removed and the two variables mapped to the `WIDTH`/`HEIGHT` constants (the canvas is 640x480, so they are identical). `sample_orb.html` and `sample_orb_pinball.html` are deliberately NOT in this batch: at ~556/586 lines with four render helpers each plus pattern-training logic, they are a different risk profile and get their own focused PR. Verified with an iframe harness loading all 15 ESM examples (these 13 plus the two phase-1 pilots): every one has a module script, zero jQuery, zero compatibility shim, and zero non-camera errors. The harness was removed afterwards. Prettier clean. All 13 additionally confirmed working with a real webcam by the maintainer.
kalwalt
added
enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 2 of #79 — applies the helper API validated in phase 1 (#98) to the simple and medium tiers: 13 of the remaining 15 camera examples.
Converted
boxblur,canny_edge,equalize_hist,gaussblur,scharr,sobel,warp_affine,warp_perspectiveoflow_lk,pyrdown,sobel_edge,yape,yape06Each now uses
<script type="module">+import jsfeatNext from '../dist/jsfeatNext.mjs', withloadCamera()/stopCamera()/showCameraError()fromdemo-utils.mjsand the profiler viaprofiler.mjs. jQuery andjs/compatibility.jsare gone from all of them, and the inline grayscale→RGBA loops plus the duplicatedrender_corners/render_mono_imagefunctions are replaced by the sharedrenderMonoImage()/renderCorners().−684 net lines (364 insertions, 1048 deletions) — all boilerplate.
The mechanical pass initially left
var ctx, canvasWidth, canvasHeight;in 10 files. That would have shadowed the module-levelctxwithundefinedand leftcanvasWidth/canvasHeightundefined — andsample_yape.htmlpasses those straight intojsfeatNext.yape.init(...), whilesample_oflow_lk.htmluses them for its click bounds-check (clicking would have silently added no tracking points). Fixed by removing the stale declarations and mapping the two variables to theWIDTH/HEIGHTconstants (the canvas is 640×480, so they're identical).Not in this batch — deliberately
sample_orb.html(556 lines) andsample_orb_pinball.html(586) have four render helpers each plus pattern-training logic — a different risk profile. They get their own focused PR to finish #79.Verification
oflow_lk's click-to-add-points and its custom log line.🤖 Generated with Claude Code