<div dir="ltr">Anyways ... those are all great ideas for sure but they require work. If you want to try your hand at that, I'll be very very happy to get some help on those projects (pd-fileutils, WebPd) :) <div><br>
</div><div style>For those bugs with the SVG rendering, I should be able to get to this next week, and I'll keep you updated once this is fixed, so you can play with it.</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">
2013/5/14 András Murányi <span dir="ltr"><<a href="mailto:muranyia@gmail.com" target="_blank">muranyia@gmail.com</a>></span><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div dir="ltr"><div class="gmail_extra"><br><div class="gmail_quote">On Tue, May 14, 2013 at 12:43 AM, Jonathan Wilkes <span dir="ltr"><<a href="mailto:jancsika@yahoo.com" target="_blank">jancsika@yahoo.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000"><div class="im"><div>
<div>On 05/13/2013 02:56 PM, András Murányi
wrote:<br>
</div>
<blockquote type="cite">
<div dir="ltr">
<div class="gmail_extra">
<div class="gmail_quote">On Sun, May 12, 2013 at 1:02 AM,
Jonathan Wilkes <span dir="ltr"><<a href="mailto:jancsika@yahoo.com" target="_blank">jancsika@yahoo.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">>From: s p <<a href="mailto:sebpiq@gmail.com" target="_blank">sebpiq@gmail.com</a>><br>
>To: Jonathan Wilkes <<a href="mailto:jancsika@yahoo.com" target="_blank">jancsika@yahoo.com</a>><br>
>Cc: PD List <<a href="mailto:pd-list@iem.at" target="_blank">pd-list@iem.at</a>><br>
>Sent: Saturday, May 11, 2013 4:37 PM<br>
>Subject: Re: [PD] pd -> svg<br>
><br>
>Thanks Jonathan,<br>
><br>
>I don't really have the time to take care about this
those days, but I'll fix it as soon as possible, and post
here when that'll be done.<br>
><br>
>Cheers,<br>
><br>
>Sébastien<br>
Here's an idea...<br>
<br>
Suppose I build a Pd gui-plugin that exports a Pd file to
svg. It takes the toplevel patch and makes the drawing
instructions like my example in the OP. But it also draws
a little navigation bar at the bottom with 1) a little
image with id="source patchname", 2) a play button with id
= "webpd-play patchname", 3) a stop button with id =
"webpd-stop patchname"<br>
<br>
The image with id="source patchname" is the base64-encoded
source of the patch. This would be neat because:<br>
<br>
a) Anyone could export to svg and get a file that can be
displayed in any modern browser (with
searchable/selectable text in most of them).<br>
b) Since the drawing instructions Pd uses are so simple
the svg will probably display on mobile devices (even
older ones).<br>
c) Since the source is embedded in the file, webpd js
could just listen for clicks to any webpd-play buttons in
the page, and when it catches one it looks for an svg
image with id "source" plus the same patchname as the
webpd-play button. It then decodes the image, loads it
and plays it until it receives a "webpd-stop" button
click.<br>
<br>
This method has the benefit of degrading gracefully; that
is, if someone using NoScript wants to read a forum with
pd patch svg images in it, they will still be able to view
the image. Moreover, a forum admin or blog owner can post
the svgs simply to show pictures of patches; then later
when the audio api becomes more common than just firefox
nightly they can add the webpd code once and all their
images will now feature audio.<br>
<br>
-Jonathan<br>
</blockquote>
<div> <br>
</div>
<div>This sounds extremely appealing to me.<br>
<br>
</div>
<div>About the HTML side, be careful with using the ID field
because it can be used only once and then other uses
become impossible. Also, it has to be unique which would
effectively prevent the same patch from being embedded
more than once.<br>
<br>
You might want to consider the CLASS field instead which
can hold an unlimited number (theoretically; the practical
limit is around 2000) of classes, and classes are already
used deliberately to signify different attributes of HTML
elements. <br>
</div>
<div>I'd also recommend prepending the string with something
constant that will allow the automatic discovery of such
strings among other, non-pd-parseable strings (versus
having plain base64-encoded strings, which are not
detectable by themselves, or, at least, must be decoded
before recognized). For separating the prepended part from
the base64 part, CSS allows for any ISO 10646 character
higher than U+00A1 to be used, or even lower characters
when escaped with backslash. (I don't recommend an
escaped character because the backslash might "disappear"
while the HTML get processed by various scripts here and
there.)<br>
For example: <img src="mypatch.svg" class="thisclass
thatclass pd-source_ABC123BASE64STRING" /> would be a
nice extendable format.<br>
</div>
</div>
</div>
</div>
</blockquote>
<br></div></div>
I just noticed that svg isn't allowed as a "media type" in Wordpress
by default. I'd imagine the same is probably true for forums, too,
making it less flexible than, say, exporting a patch to png or
something. (And png has a "comment" section of essentially
arbitrary length that I could abuse to store the pd-file along with
the png.)<br>
<br>
Still, the fact that you can zoom in losslessly on a svg is very
appealing. If I grouped the drawing instructions for each object
with <g> and put the name + args somewhere in there, it'd be
pretty easy to convert the svg to pd file (at least for simple
patches... subpatches might pose a problem). I like the idea of the
source being available within the diagram itself, it'd make it much
less work to do stuff like a presentation through a browser, and
later adding audio to it. (And even later, taking those groups and
manipulating them with the mouse.)<br>
<br>
Thanks for the info on CSS, I'll look into it further. I just
started researching all this stuff, and everything has many ways to
solve the same problem (i.e., html5 canvas, svg, css, not to mention
all the javascript libraries to manipulate all of those).<span><font color="#888888"><br>
<br>
-Jonathan<br></font></span></div></blockquote><div><br></div><div>The Wordpress problem is easy to come around by a plugin (<a href="http://wordpress.org/extend/plugins/scalable-vector-graphics-svg/" target="_blank">http://wordpress.org/extend/plugins/scalable-vector-graphics-svg/</a>) or an addition to the functions.php file in the template (<a href="http://wordpress.org/support/topic/svg-upload-not-allowed?replies=9" target="_blank">http://wordpress.org/support/topic/svg-upload-not-allowed?replies=9</a>).<br>
</div><div>I imagine the play button and co would be drawn by a wrapper (Javascript) too. That's how I actually imagine backwards compatibility: where not supported, only the image of the patch is displayed.<br></div>
<div>I'd love to discuss this further with you, and willing to put work into it. I'm pretty confident when it comes to browsers and CMSs ;)<span class="HOEnZb"><font color="#888888"><br><br></font></span></div><span class="HOEnZb"><font color="#888888"><div>
András<br></div></font></span><div class="im"><div><br> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000"><span><font color="#888888">
<br>
</font></span><blockquote type="cite"><div>
<div dir="ltr">
<div class="gmail_extra">
<div class="gmail_quote">
<div><br>
</div>
<div>But even better, CSS attributes could be used, which
can hold URL values without base64-encoding, and they are
also more variable (can be defined elsewhere than in the
HTML source, can be overwritten/cascaded without
Javascript).<br>
</div>
<div>This way, the pd-source defined right in the HTML
source would look like: <img src="mypatch.svg"
style="thisproperty: 4px; thatproperty: 30%; -pd-source:
url(<a>file://C:\Users\Joe\Desktop\mypatch.pd</a>)" /><br>
</div>
<div>Note that the etiquette for introducing non-standard
CSS attributes is to start them with the hyphen. (E.g.:
-moz-box-shadow) (Similar to custom mime-types beginning
with "x-something-")<br>
</div>
<div>
This method would open up an unlimited number of
possibilities, just to note a few:<br>
</div>
<div>- the pd source could be at any URI that the client can
parse: a local filesystem, the web, ftp, or even git<br>
</div>
<div>
- it would be easy to parametrize a patch using further
attributes (even addressing recieves!) like
-pd-param-myparameter (and note that CSS has official
support for units like colors, angles, times, and
frequencies)<br>
</div>
<div>- there are robust classes available for the management
of CSS attributes, first of all with Javascript of course<br>
</div>
<div>- seamless integration with a JSON based pd source
format would be trivial (<a href="http://lists.puredata.info/pipermail/pd-dev/2012-06/018436.html" target="_blank">http://lists.puredata.info/pipermail/pd-dev/2012-06/018436.html</a>)<br>
</div>
<div><br>
<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html" target="_blank">http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html</a><br>
</div>
<div><br>
András
</div>
</div>
</div>
</div><br></div></blockquote></div></blockquote></div></div></div></div>
<br>_______________________________________________<br>
<a href="mailto:Pd-list@iem.at">Pd-list@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>