Inkbridge
Inkbridge is a sketchpad that runs in the browser on an iPad and on a computer at the same time. Both devices show the same page, and ink appears on the other device while you draw it. Copy on any device puts the page on the computer's clipboard as a PNG image, ready to paste into a prompt. A long press on Copy offers the page as SVG code instead. Paste brings an image or text onto the page, where every device sees it and you can draw on it.
The project exists to make one path fast: sketch on the iPad with the Pencil, then paste that sketch on the computer.
The project page, with screenshots and a short guide, is at https://motionharvest.github.io/inkbridge/.
What it does
A space holds your notebooks. Each space has a six-digit code, and every device that enters the code sees the same notebooks.
Pressing and holding a notebook cover in the notebook list starts editing. Each cover then shows a minus button. A tap on a minus button asks for confirmation, then removes the notebook and every page in it. Done, Esc, or a tap on a cover ends editing. The pencil next to a notebook's name renames it.
A notebook holds pages. Swipe a finger from right to left to go to the next page. Swipe from left to right to go back.
A tap on the page number in the bottom left corner opens the page grid, a preview of every page in the notebook. A tap on a preview opens that page. Pressing and holding a preview starts editing: each page shows a minus button in its top left corner, and the pages after a removed page move over to close the gap. Done, Esc, or a tap on a preview ends editing. A notebook always keeps at least one page. The other devices open and close the page grid along with you.
On the last page, a swipe to the left pulls against resistance, and a New page indicator slides in from the right edge. Its ring fills as the finger travels. When the ring closes, the indicator fills with color. Lifting the finger then adds a new page with the same paper as the page before it. Lifting the finger before the ring closes springs the page back and adds nothing.
Each page has paper and ink, and no edges. A new page opens on a frame of 1600 by 1120 units, and the drawing can reach any distance past it. Two fingers, or the scroll wheel on a computer, move the view to make more room. Zoom reaches from ten thousand times smaller to a thousand times larger than the opening frame; past a thousand times, the browser's canvas loses the precision to draw lines smoothly. A line, the eraser circle, and pasted text and images keep the size they have on screen at any zoom, so a line drawn far zoomed in is thin on the page. The dot grid keeps its spacing on screen: zooming out fades every other dot away, and zooming in fades new dots in between. New notebooks use Graphite paper: a near-black gray (#1d1e21) with a mid-gray dot grid (#7d7f85). A new page takes the paper of the page before it, so pages made before Graphite became the only paper keep their older paper.
The toolbar fits on one line on a small iPad in landscape. Its left side holds icon buttons: back to the notebook list, the notebook name, Undo, Copy, and Paste, then a dot that is green while the device is online. The toolbar keeps the drawing controls at its right edge, where a right hand reaches them. From left to right they are the color slots, a plus button, three size slots, the Pen, the Eraser, and the Lasso. The page number and the previous and next page arrows sit in the bottom left corner of the page area.
A slot holds one value and keeps it, so the toolbar becomes your own palette. A tap on a slot selects it.
The size slots belong to the selected tool. The Pen has three line widths and the Eraser has three circle sizes, and each tool remembers its own. Each size slot previews its size: a short horizontal line at the line width, in the toolbar's light text color, for the Pen, and the eraser circle, a dark fill with a light gray outline, for the Eraser. A tap on the selected size slot opens a slider with five tick marks that changes that slot's size.
The color slots show while the Pen is selected. The selected color slot shows a chevron. A tap on it opens the color picker under the slot. Its grid holds a palette of nineteen colors in rows of five, grays first. A tap on a palette color selects it, and the toolbar slot takes that color. A second tap on the selected color opens a full color picker below the grid: a square for saturation and brightness, a preview circle, a hue slider, and red, green, and blue fields that a button switches to one hex field. A change in the full picker recolors both that palette color and the toolbar slot, so the whole palette can be customized. The rainbow dot at the end of the grid opens or closes the full picker for the selected color. The palette is saved on each device. The full picker is built into Inkbridge, so it opens at once on the iPad; while a value changes, the swatch repaints once per frame, and the color is saved when a drag ends or a field is committed. The number fields ignore the Apple Pencil and become editable only when a finger or a mouse taps them, so iPadOS Scribble, the Pencil's handwriting input, never appears in the picker. A tap outside the picker or Esc closes it. The plus button adds a color slot, up to twelve.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
