Web-based Pd patch editor

Organelle Hacking
1

Hey, I know that the Organelle has a built-in VNC server, but the new OS 5.1 web editor is so nice I wished there was a way to edit Pure Data patches from the web editor. I took a stab at integrating Xpra (which allows running an X11 server in a web browser) into the web editor. Here’s the result:

Organelle Web Patch Editor
Organelle Web Patch Editor3376×1924 511 KB

There’s a new “Patch Editor” button in the web editor. Press it and open a patch from the Organelle OLED menu and the Pure Data windows should show up in the view.

For the adventurous, here’s some instructions on how to add this feature, starting with a device running Organelle OS 5.1:

  • Back up the sd card, just in case!

  • Let’s pin the Raspberry Pi kernel and firmware, so we don’t accidentally replace the existing kernel with special ALSA driver

    sudo apt-mark hold $(dpkg -l | awk '/^ii/ && /raspberrypi-kernel|raspberrypi-bootloader|linux-image|firmware/ {print $2}')

  • Add the apt repo for the xpra-html5 package:

    sudo wget -O /usr/share/keyrings/xpra.asc https://xpra.org/xpra.asc
sudo wget -O /etc/apt/sources.list.d/xpra.sources https://raw.githubusercontent.com/Xpra-org/xpra/master/packaging/repos/bookworm/xpra.sources
sudo apt-get update

  • We’ll use the Debian bookworm version of xpra, but it’s not compatible with the latest xpra-html5 package. We need to install a specific older version. There are some file conflicts between the Debian xpra package and xpra-html5 package. Tell dpkg to use the files from xpra-html5.

    sudo apt-get install xpra
sudo apt-get install --allow-downgrades xpra-html5=5.3-r0-1
sudo dpkg -i --force-overwrite /var/cache/apt/archives/xpra-html5_5.3-r0-1_all.deb
sudo apt-mark hold xpra-html5

  • Now either git pull or copy this Organelle_OS repo with this commit to /home/music/Organelle_OS and run:

    sudo make clean
sudo make organelle_cm_deploy
sudo systemctl daemon-reload

  • Reboot then start the Web Server and Patch Editor from the OLED screen Settings menu.

  • Open the Organelle web interface in a browser and click the new Patch Editor button.

  • Open a patch from the Organelle OLED screen manu and the Pure Data patch windows should open in the browser view.

  • Edit, open, save, and hack away!

There’s a GitHub PR with the changes here: Add web-based Pd patch editor via Xpra by mogenson · Pull Request #53 · critterandguitari/Organelle_OS · GitHub

7 Likes
2

That is cool, I was able to get it installed and it works! I’ve always wondered about patching right from the web browser. I got some errors running the package commands the first time, I just ran them again and it was fine and it worked after building and rebooting. The connection dropped a few times, but maybe that can be tweaked.