Web (Javascript)

At a certain point I decided to learn web development  so I taught myself HTML, CSS and Javascript.

As a Pure Data user, I was looking for a way to embed PD patches on a website. After a short search on the web, I found the webPD library made by Sebastien Piquemal. this allows embedding PD into Javascript. To control the parameters, I found the jquery-knob made by Anthony Terrien, which allows the possibility to create a custom knob interface.

Since the combination is a bit tricky and required Javascript understanding, I decided to build the PD online GUI so every PD user can build their own online knob interface, easily!

PD online GUI

Click here to launch PD online GUI.

* Currently, PD online GUI is available for Chrome  and Safari users only. sorry for the inconvenience.

PD Online GUI tutorial

PD online GUI uses the webPD library which allows using the following object list.

You can use your own PD patch or download the tutorial patch.

Download the tutorial PD patch. (115 downloads)
tutorial Patch fo pd online gui
Inside the patch.

In this tutorial, we’ll create knobs that send data to the receiving objects, freq and vol (see the picture above). If you use your own patch, make sure you have the receiving objects names.

    1. Launch PD online GUI.
    2. Upload your file – after choosing your PD patch, you should get the message:  “FILE SETUP OK!”.

      upload patch
    3. Press Start button to start the processing. Press Stop button to stop it. In case you uploaded the tutorial patch, you should hear a 1Khz sin wave.

      start stop
    4. Next, in the Create knob section, fill in the knob properties. Under the Send Name, type the name of the receiving object you want to send data to. Under the Minimum Value type the minimum value the knob should have. Under the Maximum Value type the maximum value the knob should have. When you’re done, click the Create Knob button. You can create as many knobs as you need, as long you use different names for each one.
      Using the tutorial patch, fill in the same information as in the picture.

      create knob 1

      create knob 2
    5. If you did everything right, you should see two knobs. One knob control the sin wave frequency and the other control the sound volume.
    6. You can also delete a knob. Simply choose the knob name from the drop-down list in the Remove Knob section and click the Remove Knob button.

    I hope You find it useful, Good Luck!


Leave a Reply

Your email address will not be published. Required fields are marked *