This document describes the work that was done under [Google Summer of Code 2020](https://summerofcode.withgoogle.com/) a.k.a. GSoC for organization Purr Data. The project idea was to make the native Purr Data run in a web browser by adding a WebAssembly target and HTML5 GUI framework.
**Purr Data** a.k.a. **Pd-l2ork 2** is an improved version of Miller Puckette’s Pd.
[Pd](https://puredata.info/)(Pure Data) is a graphical data-flow programming environment which is geared towards real-time interactive computer music and multimedia applications. It is a full-featured open-source alternative to its commercial sibling, Cycling74’s [Max](https://cycling74.com/products/max-features).
[Purr Data](https://agraef.github.io/purr-data/) serves the same purpose, but offers a new and much improved graphical user interface and includes many 3rd party plug-ins. Like Pd, it runs on Linux, macOS and Windows, and is open-source throughout.
The goal of this project is to make the Purr Data run in a web browser so it can be more accessible to users and make their work more easily shared with other people.
You can try the current version from https://cuinjune-purr-data.glitch.me/
## Developers
- The backend part of the software has been mainly done by Zack Lee (cuinjune@gmail.com)
- The frontend part of the software has been mainly done by Hugo Carvalho (hugonvsc@gmail.com)
## Accomplished Milestones
- Modified native Purr Data and libpd codebase to make them compatible with [Emscripten](https://emscripten.org/). (Zack)
- Modified and created Makefile to build for Emscripten and to generate WebAssembly(`.wasm`) binaries for external libraries. (Zack)
- Cleaned the backend codebase and organized the file system so the project can be easily maintained. (Zack)
- Modified the existing NW.js based source code to make them compatible with web browsers. (Hugo)
- Reimplemented some elements(menu, canvas, style) specifically for the web browser. (Hugo)
- Integrated the backend with the frontend. (Hugo, Zack)
- Fixed some major bugs and errors in the frontend. (Hugo, Zack)
## Setup
In this project you will need Node.JS. You can follow [this guide](https://github.com/itp-dwd/2020-spring/blob/master/guides/installing-nodejs.md) to install it.
1. Clone this repository
2. Build
```
$ make emscripten
```
3. The project directory to host the web app is `purr-data/emscripten/project/purr-data`
4. You can run `npm start` under the project directory to run the app
- If you try to close __Quick Reference__ the application stops responding (seems to be frozen)
### Running Purr Data in a web browser
- After the building is successfully completed, visit http://localhost:5000 in your browser.
- You can run `npm start` under `purr-data/emscripten/project/purr-data` to run the app again.
- If you create an object (e.g. [spigot]) and open a help file, scroll to the right end of the help file, then close the help file, the mouse coordinate doesn't work correctly in the first patch
## Directory Structure
- components: Elements that are dynamically added to the page. (canvas, dialogs, menu)
- components/dialogs: Copied dialogs files from `purr-data/pd/nw` folder.
- css: Copied css files from `purr-data/pd/nw/css` folder.
- Split patch canvas in half just works if you don't grow your patch more than half of the canvas container
## Future Work
- Fix shortcuts so they can work identically in browsers as the native Purr Data.
- Fix getting stuck in the loading screen until a mouse/key event is triggered in Firefox/Safari.
- Fix the patch not responding to mouse event after the help file is opened and not being clicked.
- Fix wrong mouse coordinate issue that happens in some circumstances.
- Fix or disable some of the global menu items not working.
- Fix graphical arrays being opened if the patch font size changes.
- Ask for saving the patch when the user closes an edited patch.
- Make the GUI(e.g. bang, toggle) property dialog window work.
- Make the dialog windows(e.g. property, text) appear in the right side of the patch instead of the left side bar.
- Merge patch menu into the global menu and make it work depending on the focus of patches.
- Style the patch window menu bar so it can show the focus state and add some buttons (e.g. close) for convenience.
- Make the patch window resizable by dragging its border.
- Make the patch window rearrangeable by dragging its menu bar.
- Improve the file manager so the files/folders can be added/renamed/deleted.
- Clean the frontend codebase and organize the file system.
- Make the work storable and sharable between users.
If you found any bugs, please let us know. You can contact using [mailing list](http://disis.music.vt.edu/listinfo/l2ork-dev) or create an issue;
## Reporting Bugs
If you find any bugs, please let us know. You can contact using the [mailing list](http://disis.music.vt.edu/listinfo/l2ork-dev) or create an [issue](https://git.purrdata.net/jwilkes/purr-data/-/issues).
