Add separate control panel

[edwardhorsford]

Pull Request Checklist

• I have run yarn build to ensure that the project builds successfully.
• I have updated CHANGELOG.md with the necessary changes made in this pull request.
• I have added documentation for any new functionality from this pull request.

Description

This PR replicates the PR I made on my fork of this repo, though with some changes caused by rebasing against the beta branch and removing the settings menu I had added.

The PR adds a secondary "control panel" window. This allows users to control Pattern Projector from a separate screen (like a laptop) while the main window is projected, avoiding the need to interact directly with the projected display.

Replicates most UI functions from the main window to the control panel with the exception of full screen (which had some security issues and didn't work reliably for me).

Has some two new features including:

• Preview area to let you pan / navigate the pdf
• Controls to pan using buttons.

@courtneypattison Happy to attempt to make any changes you request. Or if you'd like to take this over and make your own changes, that's also cool. I hope it might serve as inspiration for the future even if you decide this PR isn't one you want to merge.

How it works

Inter-window Communication - The control panel and main window communicate via the BroadcastChannel API. A bridge component in the main window listens for actions from the control panel, executes them using the existing transform logic, and broadcasts state updates back. This avoids duplicating any business logic.

Viewport Calculation - The preview needs to know what portion of the PDF is visible. The bridge calculates this by transforming screen corners through the inverse of the combined projection matrices, then extracting the bounding box and rotation.

Thumbnail Generation - The PDF preview is generated by rendering all stitched pages at 3x the target resolution, applying line thickening based on the line thickness setting, then scaling down with a threshold filter. The result is cached so toggling the preview doesn't trigger re-rendering.

File Transfer - Browsers block programmatic file input clicks from other windows, so the control panel reads selected files as ArrayBuffers and transfers them via the broadcast channel. The main window reconstructs the File object and loads it normally.

Other details

• If border or paper sheet options are enabled, these are shown on the preview
• If the magnify option is enabled, clicking in the preview magnifies the area clicked. Clicking again unmagnifies and reverts the prior window location
• Added options to show or hide the preview as it's a bit slow - unsure how useful this would be in practice though
• Added an option for two sizes of the preview.
• Pan tool lets you pan around. Holding shift pans 10x.
• Line weight settings replicate to the preview - but this isn't working great with higher line weights

Testing

I've been developing on MacOS with Safari and Arc (Chromium based browser) - and it seems to work. Panning can be a bit slow - but I think the main app was already somewhat slow to pan.

As mentioned in #416 this is mostly LLM coded. I've tested manually but whilst I can code I am not familiar with typescript.

I've only got a handful of pattern pdfs to try and it could do with being tested in more. The preview needs to render from the pdf so it would be good to try other versions. I've tested single and multi-layered, and made sure to regenerate when layers are disabled.

I've not explored the stitch menu.

Related Issues

#416 and perhaps #393

TODO

• Changelog - will leave in case you want to make changes / suggest things
• Have not included any UI for opening this control panel - for discussion. In my version, I added a settings menu. For testing it can be accessed by manually opening a new tab and visiting localhost:3000/en/control
• The preview is by far the most complex thing - there could be an argument for pulling it out as a later pr - though for me it's the most useful part of the control panel.
• No translations other than English - I imagine you might want to change some labels, and would only want to translate once settled on them.
• I suspect there are edge cases / things I'm not handling.

Ideas for the future

• Some of the warning dialogs could be spawned on this window too
• Potential to let a separate phone/tablet load this control panel
• The preview potentially allows features like marking off pieces that have been cut
• I went for a simple single column layout, but could imagine a larger view where there's a larger preview window with smaller controls alongside it

[vercel]

@edwardhorsford is attempting to deploy a commit to the Courtney Pattison's projects Team on Vercel.

A member of the Team first needs to authorize it.

[edwardhorsford]

Pushed a fix to some performance issues I noticed - things should be much speedier now.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
pattern-projector	Ready	Preview, Comment	Jan 23, 2026 6:51pm

[courtneypattison]

Thank you so much for this, @edwardhorsford! It’s an impressive amount of work.

After thinking about the control panel idea for a few days, I’m actually leaning toward a simpler screen mirroring option. Instead of maintaining a completely different UI for the control panel (which adds a lot of complexity and duplication), I think it’d be much more maintainable to just mirror the existing UI across tabs.

Since we already have the "zoom out" view—which is essentially a minimap—we can focus our energy on making the main UI better for everyone. For example, if we move toward a responsive, reflowing, or draggable menu, that solves the problem for both the "controller" tab and for people just using the app on a single screen or mobile device. (Though I know I still need to fix how zoom out works currently in #379!)

A few thoughts on your ideas:

Separate Devices: It would be awesome to get this working on a phone/tablet! I’m hesitant to host anything that touches user data, as I want to keep PP strictly client-side. But even just an educational resource or a local-network sync guide would be a huge win.

Marking off pieces: A lot of people use the line tool for this. I actually do the opposite: I draw lines on the grainlines of pieces I need to cut, then delete them as I go. It helps me align grainlines with my cutting mat and keeps a "countdown" of what’s left.

Mobile/Layout: I see why you went for the single-column layout—it’s much better for mobile. I’d love to take that inspiration and apply it to a responsive design for the main site, rather than maintaining two separate versions.

What do you think about focusing the "bridge" logic on syncing the state between two identical tabs instead? That way, we get the functionality you're looking for with a fraction of the code to maintain.