<div dir="ltr"><div><div><div><div>Hi Jonathan,<br><br></div>Yes, yes! I'd love a good web-based editor! And I have looked into this for a while, but being not a priority, I had put it aside for now... How are your experiments doing? You should definitely keep me updated on this.<br><br>> Is there some way for webpd to look inside one of the page's DOM
elements for patch file data (perhaps a <pre> with a
particular id)?<br>
<br></div>Indeed, to load a patch you just pass as string to "Pd.loadPatch" function. That string is the whole contents of a Pd patch. So in the examples, I load the patch with AJAX : <a href="https://github.com/sebpiq/WebPd/blob/master/examples/phasor/index.html#L10">https://github.com/sebpiq/WebPd/blob/master/examples/phasor/index.html#L10</a> but you could definitely do something like this : <br><br></div><span style="font-family:monospace,monospace"><script id="patch" type="text/x-puredata"><br>#N canvas 51 96 762 387 10;<br>#X obj 127 161 dac~;<br></script><br></span></div><div><span style="font-family:monospace,monospace"><script><br> var patch = Pd.loadPatch(document.getElementById('patch').innerHTML)<br> Pd.start()<br></span></div><div><span style="font-family:monospace,monospace"></script><br><br></span></div><div><span style="font-family:monospace,monospace"><font face="arial,helvetica,sans-serif">Or even something like this :<br></font></span><br><div><span style="font-family:monospace,monospace"><script><br> var patch = Pd.loadPatch('</span><span style="font-family:monospace,monospace"><span style="font-family:monospace,monospace">#N canvas 51 96 762 387 10;\n</span></span><span style="font-family:monospace,monospace"><span style="font-family:monospace,monospace"><span style="font-family:monospace,monospace">#X obj 127 161 dac~;</span>'</span>)<br> Pd.start()<br></span></div><span style="font-family:monospace,monospace"></script><br><br></span></div><div><span style="font-family:arial,helvetica,sans-serif">So basically WebPd just takes a Pd file. How you obtain that file is then up to you : AJAX, embedded in the HTML page, etc ...</span><span style="font-family:monospace,monospace"><br></span></div><div><span style="font-family:monospace,monospace"><br></span><span style="font-family:arial,helvetica,sans-serif">> Could the data received from the AJAX call be inserted into the
same DOM element? That way you could save the html file and the
patch data would get saved with it.</span><span style="font-family:monospace,monospace"><br></span><span style="font-family:arial,helvetica,sans-serif"><br></span></div><div><span style="font-family:arial,helvetica,sans-serif">Yes you could do that. It is trivial with JavaScript. Even easier if you use a DOM manipulation library such as jQuery!</span><span style="font-family:monospace,monospace"><br><br>> </span>
Can I add nodes after the patch has loaded?<br><br></div><div>Sure! There is a complete API for patches and objects. You can do with programming absolutely everything you can do with the Pd GUI and much more. For the moment this API is not documented, but I think it is rather easy to use, and if you dig into the tests, you can find out how to use it. For example : <a href="https://github.com/sebpiq/WebPd/blob/master/test/src/objects/glue-tests.js#L45">https://github.com/sebpiq/WebPd/blob/master/test/src/objects/glue-tests.js#L45</a> <br></div><div>I like the idea to add a scripting layer to Pd. That way you could do something that no other sound programming language has achieved yet, and put together graphical programming and scripting using each method when most appropriate (Graphical programming is great for a DSP graph, but a pain in the ass for control flow and states, scripting is much more powerful for that). So yeah you can already do that with WebPd, though it is not fully tested yet so use with caution.<br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Fri, May 1, 2015 at 4:50 AM, Jonathan Wilkes via Pd-list <span dir="ltr"><<a href="mailto:pd-list@lists.iem.at" target="_blank">pd-list@lists.iem.at</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000">
<div>This is great!<br>
<br>
So many questions, but I'll just ask three for now:<br>
<br>
Is there some way for webpd to look inside one of the page's DOM
elements for patch file data (perhaps a <pre> with a
particular id)?<br>
<br>
Could the data received from the AJAX call be inserted into the
same DOM element? That way you could save the html file and the
patch data would get saved with it.<br>
<br>
Can I add nodes after the patch has loaded?<br>
<br>
***<br>
<br>
I think the holy grail here would be to take the GUI work I'm
doing with svg and node.js and get it to play nice with webpd.
Then an editable Pd environment would run anywhere a modern
browser could. :)<span class="HOEnZb"><font color="#888888"><br>
<br>
-Jonathan</font></span><div><div class="h5"><br>
<br>
<br>
On 04/30/2015 07:01 AM, s p wrote:<br>
</div></div></div><div><div class="h5">
<blockquote type="cite">
<div dir="ltr">
<div>Thanks Joe!<br>
<br>
</div>
Unfortunately, the current soundfiler uses AJAX, which means
that you cannot load on other domains than where the web page is
hosted. On the other hand, the [readsf~] object (which I haven't
implemented yet) will be able to do that (any url that support
CORS, for example soundcloud does). <br>
</div>
<div class="gmail_extra"><br>
<div class="gmail_quote">On Thu, Apr 30, 2015 at 11:54 AM, Joe
White <span dir="ltr"><<a href="mailto:white.joe4@gmail.com" target="_blank">white.joe4@gmail.com</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div dir="ltr">Nice work Sébastien!
<div><br>
</div>
<div>I saw you have a [soundfiler] implementation, which
is interesting. Is that able to load samples from within
the patch directory structure or can it also load audio
files from any URL (i.e. say a soundcloud link) ?</div>
<div><br>
</div>
<div>Cheers,</div>
<div>Joe</div>
<div class="gmail_extra"><br>
<div class="gmail_quote">
<div>
<div>On 30 April 2015 at 11:17, s p <span dir="ltr"><<a href="mailto:sebpiq@gmail.com" target="_blank">sebpiq@gmail.com</a>></span>
wrote:<br>
</div>
</div>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div>
<div>
<div dir="ltr">WebPd 0.3.0 is finally out!
Refactored from scratch, 100% pure Web Audio
API, which means it should be as fast as it
gets on the browser. check-it out <a href="https://github.com/sebpiq/WebPd" rel="nofollow" target="_blank">https://github.com/sebpiq/WebPd</a>
feedback very welcome.<span><font color="#888888"><br clear="all">
<br>
-- <br>
<div>
<div dir="ltr"><span style="color:rgb(153,153,153)"><b><span style="color:rgb(68,68,68)">S</span><span><span style="color:rgb(68,68,68)">ébastien
Piquemal</span><br>
</span></b></span>
<div><span style="color:rgb(153,153,153)"><b><br>
</b></span><span style="color:rgb(102,102,102)"><b> </b><span style="color:rgb(204,204,204)">-----</span><b>
<font size="1">@sebpiq</font></b></span><br>
</div>
<div><span style="color:rgb(102,102,102)"><span style="color:rgb(204,204,204)"> -----</span><b>
</b><font size="1"><a href="http://github.com/sebpiq" target="_blank">http://github.com/sebpiq</a></font><b><br>
</b></span></div>
<span style="color:rgb(102,102,102)"> <span style="color:rgb(204,204,204)">-----</span>
<font size="1"><a href="http://funktion.fm" target="_blank">http://funktion.fm</a></font></span><br>
</div>
</div>
</font></span></div>
<br>
</div>
</div>
_______________________________________________<br>
Pd-announce mailing list<br>
<a href="mailto:Pd-announce@lists.iem.at" target="_blank">Pd-announce@lists.iem.at</a><br>
<a href="http://lists.puredata.info/listinfo/pd-announce" target="_blank">http://lists.puredata.info/listinfo/pd-announce</a><br>
<br>
_______________________________________________<br>
<a href="mailto:Pd-list@lists.iem.at" target="_blank">Pd-list@lists.iem.at</a>
mailing list<br>
UNSUBSCRIBE and account-management -> <a href="http://lists.puredata.info/listinfo/pd-list" target="_blank">http://lists.puredata.info/listinfo/pd-list</a><br>
<br>
</blockquote>
</div>
<br>
</div>
</div>
<br>
_______________________________________________<br>
<a href="mailto:Pd-list@lists.iem.at" target="_blank">Pd-list@lists.iem.at</a>
mailing list<br>
UNSUBSCRIBE and account-management -> <a href="http://lists.puredata.info/listinfo/pd-list" target="_blank">http://lists.puredata.info/listinfo/pd-list</a><br>
<br>
</blockquote>
</div>
<br>
<br clear="all">
<br>
-- <br>
<div>
<div dir="ltr"><span style="color:rgb(153,153,153)"><b><span style="color:rgb(68,68,68)">S</span><span><span style="color:rgb(68,68,68)">ébastien Piquemal</span><br>
</span></b></span>
<div><span style="color:rgb(153,153,153)"><b><br>
</b></span><span style="color:rgb(102,102,102)"><b> </b><span style="color:rgb(204,204,204)">-----</span><b> <font size="1">@sebpiq</font></b></span><br>
</div>
<div><span style="color:rgb(102,102,102)"><span style="color:rgb(204,204,204)"> -----</span><b> </b><font size="1"><a href="http://github.com/sebpiq" target="_blank">http://github.com/sebpiq</a></font><b><br>
</b></span></div>
<span style="color:rgb(102,102,102)"> <span style="color:rgb(204,204,204)">-----</span> <font size="1"><a href="http://funktion.fm" target="_blank">http://funktion.fm</a></font></span><br>
</div>
</div>
</div>
<br>
<fieldset></fieldset>
<br>
<pre>_______________________________________________
<a href="mailto:Pd-list@lists.iem.at" target="_blank">Pd-list@lists.iem.at</a> mailing list
UNSUBSCRIBE and account-management -> <a href="http://lists.puredata.info/listinfo/pd-list" target="_blank">http://lists.puredata.info/listinfo/pd-list</a>
</pre>
</blockquote>
<br>
</div></div></div>
<br>_______________________________________________<br>
<a href="mailto:Pd-list@lists.iem.at">Pd-list@lists.iem.at</a> mailing list<br>
UNSUBSCRIBE and account-management -> <a href="http://lists.puredata.info/listinfo/pd-list" target="_blank">http://lists.puredata.info/listinfo/pd-list</a><br>
<br></blockquote></div><br><br clear="all"><br>-- <br><div class="gmail_signature"><div dir="ltr"><span style="color:rgb(153,153,153)"><b><span style="color:rgb(68,68,68)">S</span><span><span style="color:rgb(68,68,68)">ébastien Piquemal</span><br></span></b></span><div><span style="color:rgb(153,153,153)"><b><br></b></span><span style="color:rgb(102,102,102)"><b> </b><span style="color:rgb(204,204,204)">-----</span><b> <font size="1">@sebpiq</font></b></span><br></div><div><span style="color:rgb(102,102,102)"><span style="color:rgb(204,204,204)"> -----</span><b> </b><font size="1"><a href="http://github.com/sebpiq" target="_blank">http://github.com/sebpiq</a></font><b><br></b></span></div><span style="color:rgb(102,102,102)"> <span style="color:rgb(204,204,204)">-----</span> <font size="1"><a href="http://funktion.fm" target="_blank">http://funktion.fm</a></font></span><br></div></div>
</div>