Trying to find "best practices" to control a Pd application via HTML5 or javascript or the like. There is probably solution with Pd as server and (simple to handle) middleware as web-server in between and Pd and browser.
As Example usage to clarify the need:
Providing a Web user interface (GUI) for a synthesizer with a lot of parameter running on a headless embedded Linux computer only connected with MIDI keyboard over an Ethernet interface for network connection. The logic of UI should be done within the Webpage volume, program change, ... and also key-press should be monitored.
Description of any use case and suggestion is appreciated.
The goal is to compile different recipes, solutions for comparison and helping to make development decisions. Examples and solution with open Source and free software are appreciated.
mfg winfried
You can try baton: a Python OSC <-> websocket server. The examples are Pd + basic HTML+JS.
https://github.com/zkmkarlsruhe/baton
On Jan 10, 2025, at 4:30 PM, Winfried Ritsch ritsch@iem.at wrote:
Trying to find "best practices" to control a Pd application via HTML5 or javascript or the like. There is probably solution with Pd as server and (simple to handle) middleware as web-server in between and Pd and browser.
As Example usage to clarify the need:
Providing a Web user interface (GUI) for a synthesizer with a lot of parameter running on a headless embedded Linux computer only connected with MIDI keyboard over an Ethernet interface for network connection. The logic of UI should be done within the Webpage volume, program change, ... and also key-press should be monitored.
Description of any use case and suggestion is appreciated.
The goal is to compile different recipes, solutions for comparison and helping to make development decisions. Examples and solution with open Source and free software are appreciated.
mfg winfried
--
- ao.Univ.Prof. DI Winfried Ritsch
- ritsch@iem.at - http://iem.at/ritsch
- Institut fuer Elektronische Musik und Akustik
- University of Music and Dramatic Art Graz
- Tel. ++43-316-389-3510 (3170) Fax ++43-316-389-3171
- mobile: 0043 664 2439369
pd-dev@lists.iem.at - the Pd developers' mailinglist https://lists.iem.at/hyperkitty/list/pd-dev@lists.iem.at/message/Y5MMV2WO4MO...
-------- Dan Wilcox danomatika.com http://danomatika.com/ robotcowboy.com http://robotcowboy.com/
Here we rebuilt Pd's GUI in HTML 5 https://github.com/BelaPlatform/pure-data-web-GUI with which we did a couple of successful workshops where Pd was running on a headless embedded linux computer only connected with an ethernet-over_USB interface (Bela). it requires a branch of Pd that tried to disentangle some of the tcl/tk-specific stuff: https://github.com/pure-data/pure-data/pull/1765
Development is currently stalled, happy to discuss though.
Winfried Ritsch wrote on 10/01/2025 16:30:
Trying to find "best practices" to control a Pd application via HTML5 or javascript or the like. There is probably solution with Pd as server and (simple to handle) middleware as web-server in between and Pd and browser.
As Example usage to clarify the need:
Providing a Web user interface (GUI) for a synthesizer with a lot of parameter running on a headless embedded Linux computer only connected with MIDI keyboard over an Ethernet interface for network connection. The logic of UI should be done within the Webpage volume, program change, ... and also key-press should be monitored.
Description of any use case and suggestion is appreciated.
The goal is to compile different recipes, solutions for comparison and helping to make development decisions. Examples and solution with open Source and free software are appreciated.
mfg winfried
hi,
you can try
https://deken.puredata.info/results.html?name=websocketserver
https://github.com/Lucarda/pd-websocketserver
the help file has an example for interaction with html5 and js
there is also a webserver object
https://deken.puredata.info/results.html?name=webserver
https://github.com/Lucarda/pd-webserver
Thanks for the first hints, all of them are interresting.
Not being a specialist in Web Interfaces, websockets or js, just know they exists, so I cannot really judge what is the best solution.
It seems the most common way is using websockets.
Also I found very elegant using Pd as websocke t server natively wihout an external, I like.
- puredata-websocket: https://github.com/chr15m/pd-ws - originally: https://sourceforge.net/projects/websocketserverinapatch/
But maybe the solution with the external is more performant and compatible.
To exchange the Pd GUI is not the primarily goal of this exploration, but will be listed here.
So any more ideas are welcome.
One specific quesion is if anybody knows an example using OSC directly with Purdedata like using the library osc.js or Open Sound Control Web Bridge ?
- osc.js: https://github.com/colinbdclark/osc.js - osc-web: https://github.com/automata/osc-web
Or even using FUDI within a javascript or the like application. ?
mfg winfried
Am Freitag, 10. Jänner 2025, 16:30:22 CET schrieb Winfried Ritsch:
Trying to find "best practices" to control a Pd application via HTML5 or javascript or the like. There is probably solution with Pd as server and (simple to handle) middleware as web-server in between and Pd and browser.
As Example usage to clarify the need:
Providing a Web user interface (GUI) for a synthesizer with a lot of parameter running on a headless embedded Linux computer only connected with MIDI keyboard over an Ethernet interface for network connection. The logic of UI should be done within the Webpage volume, program change, ... and also key-press should be monitored.
Description of any use case and suggestion is appreciated.
The goal is to compile different recipes, solutions for comparison and helping to make development decisions. Examples and solution with open Source and free software are appreciated.
mfg winfried