Attempt to render StretchPaper App's drawing data on web browser (this is an awesome app if you have invested on Apple pencil 2 and iPad Pro, Good-Bye Dry Erase Board). This web conversion project is Totally Experimental and Unofficial.
Full Credits and respects to the app develoepr + all those library + article authors:
- Stretchpaper — The infinite canvas for iPad.
- javascript - Convert base64 string to ArrayBuffer - Stack Overflow
- msgpack/spec.md at master · msgpack/msgpack
- joeferner/node-bplist-parser: Binary plist parser.
- binary plist parser for Javascript (non-Node) - PIYO - Tech & Life -
- pi-chan/bplist-parser: Convert binary plist to JSON.
- SVG.js v3.0 | Home
- Smooth a Svg path with cubic bezier curves | by François Romain | Medium
(my notes)
- Export StretchPaper raw data (.stretch)
- This is Base64 MessagePack format and it contains another binary plist contents for points
- Load the .stretch file
using MessagePack - Split by the new line char
- Decode Base64 each line
- Parse the line in MessagePack format (manually).
- There are some Uint16 chunk at offset 105. next byte is the length.
- Decode Base64 for the next n bytes.
- Get binary array into binary plist parser
- Get array of array which contains points data
- Each points consists of 5 values, and they repeats. [x, y, (z or inc counter), (pressure or stroke width), (0.25 something not sure)...]
- Translate them into SVG. Using line / polyline function for now. For smoothing effect, Bezier in path should be ideal (?) Smooth a Svg path with cubic bezier curves | by François Romain | Medium
Maybe just use SigPad?
My thought process:
- looks like base64 lines
- decoded
- Got hint "MessagePack"
- library didn't work but got "marker" information for each chunk
- simple format, so parse it out manually from the library soruce code
- look for useful chunk. found a string sequence "points"
- looks like another base64 chunk
- decoded, then found "bplist" sequence
- it make sense to have Uint16 (xcode is all 16bits), iOS info.plist format probably quick and easy way to save from NSData like serialization
- found bplist-parser library, but it's written in Node.js
- Tried browserify but no luck since Buffer object is native to OS
- Found ported browser version
- Tested import and figured it out to pass ArrayBuffer instead of native Node.js Buffer
- Got structured json (array) of floats.
- Saw the patter that every 5 elements seems to be repeating. Assume some structure start with x,y, etc...
- Search for svg rendering library
- Kind ok drawing using svg.line funciton. polyline should be faster but can not figure out dynamic width for each part
- figured out command + - either collapse or keep them so that we can do redo on web
- Offset = 1 is command. + means added points and - means erased object(s)
- If it's added, the GUID is stored in Offset 5 - 41.
- If it's -, then one eraser stroken can erase multiple GUID(s)
- Need collapse those before render, or it might be fun to do undo - redo stack on browser?
- Parse other parts like meta information
- figure out smooth curve with proper thickness
- collapse original lines so that subtract erased lines