<html><head></head><body><div style="color:#000; background-color:#fff; font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px">> Cool,<div class="qtdSeparateBR"><br><br></div><div class="yahoo_quoted" id="yui_3_16_0_ym19_1_1485129651838_9311" style="display: block;"><div style="font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; font-size: 16px;" id="yui_3_16_0_ym19_1_1485129651838_9310"><div style="font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; font-size: 16px;" id="yui_3_16_0_ym19_1_1485129651838_9309"><div class="y_msg_container" id="yui_3_16_0_ym19_1_1485129651838_9443"><div id="yiv5864738967"><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9442"><div dir="ltr" id="yiv5864738967divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri, Arial, Helvetica, sans-serif;">
<div id="yui_3_16_0_ym19_1_1485129651838_9441"><br clear="none">
</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9462">> other option also nice.</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9449"><br clear="none">
</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9575">> Put [canvas]</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9673"><br clear="none">
</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9672">> &</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9820"><br clear="none">
</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9821">> Put [htmlcanvas]</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9577"><div id="yui_3_16_0_ym19_1_1485129651838_9671"><br clear="none"></div><div id="yui_3_16_0_ym19_1_1485129651838_9576">I thought about doing an object like that. There are two possible approaches, <br></div><div id="yui_3_16_0_ym19_1_1485129651838_9884">both of which I didn't like:</div><div id="yui_3_16_0_ym19_1_1485129651838_9670" dir="ltr">1) access the htmlcanvas by sending Pd messages to the inlet. This seemed <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9917">really limiting, especially when you consider how deeply web programmers <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9932">leverage javascript and javascript frameworks when doing html5 canvas <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9933">drawing/animation. If you do similar such work in Pd to retain/manage state <br></div><div dir="ltr">and render then you're getting in the way of audio computation. If you leverage <br></div><div dir="ltr">a higher-level framework to do it on the GUI side then you're tied to it as a hard <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_10032">dependency for all time.</div><div dir="ltr">2) Have a simple interface for just defining height/width/vis, and give a hook for <br></div><div dir="ltr">the user to specify and use their own js script to do the drawing. But this adds <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_10057">an entire language to the UX which IMO is too great a burden, esp. for doing <br></div><div dir="ltr">prototyping.</div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9954"><br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9955">Instead I just extended data structure drawings with the [draw] object to leverage <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9979">the SVG spec and do declarative vector drawing. If you look at <br></div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_10072">"Pd-L2Ork Data Structures" in the help browser you can see some examples.</div><div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_10136"><br></div><div dir="ltr">-Jonathan<br></div><div id="yui_3_16_0_ym19_1_1485129651838_9605"><br clear="none">
</div></div>
<div id="yui_3_16_0_ym19_1_1485129651838_9612">> this one could be edited through “devtools”? Perhaps?</div><div>
</div><div></div>
<div id="yui_3_16_0_ym19_1_1485129651838_9617"><br></div><div>Yes, that's certainly possible.</div><div id="yui_3_16_0_ym19_1_1485129651838_10137"><br></div><div id="yui_3_16_0_ym19_1_1485129651838_10138">-Jonathan<br></div><div><br clear="none">
</div>
<div id="yiv5864738967Signature"><font id="yui_3_16_0_ym19_1_1485129651838_9604" size="2" face="Courier New, Courier, Monospace">> Mensaje telepatico asistido por maquinas.</font>
</div>
<br clear="none">
<br clear="none">
<div style="color:rgb(0, 0, 0);" id="yui_3_16_0_ym19_1_1485129651838_9946">
<hr tabindex="-1" style="display:inline-block;width:98%;">
<div class="yiv5864738967yqt1761474531" id="yiv5864738967yqtfd97201"><div dir="ltr" id="yiv5864738967divRplyFwdMsg"><font style="font-size:11pt;" id="yui_3_16_0_ym19_1_1485129651838_10008" color="#000000" face="Calibri, sans-serif"><b>From:</b> Jonathan Wilkes <jancsika@yahoo.com><br clear="none">
<b>Sent:</b> Sunday, January 22, 2017 11:07 PM<br clear="none">
<b>To:</b> Lucas Cordiviola; Alexandre Torres Porres; pd-list@lists.iem.at<br clear="none">
<b>Subject:</b> Re: [PD] Purr Data rc4</font>
<div> </div>
</div>
<div id="yui_3_16_0_ym19_1_1485129651838_9945">
<div style="color:#000;background-color:#fff;font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;" id="yui_3_16_0_ym19_1_1485129651838_9944">
<div class="yiv5864738967qtdSeparateBR"><br clear="none">
<br clear="none">
</div>
<div class="yiv5864738967yahoo_quoted" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4160" style="display:block;">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4159" style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4158" style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div class="yiv5864738967y_msg_container" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4206">
<div id="yiv5864738967">
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4224">
<div dir="ltr" id="yiv5864738967divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri, Arial, Helvetica, sans-serif;">
<blockquote style="margin:0 0 0 40px;border:none;padding:0px;">
<div></div>
<div><i>>>That's a possibility. But currently you can't open an html file from the menu. You'd </i><span style="font-size:12pt;"><i>have to open devtools and do it manually.</i></span></div>
<div></div>
</blockquote>
<div></div>
<div><span style="font-size:12pt;"><i></i></span></div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4262"><br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4268">> Like drag`n`drop an html?</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4275">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4279">> Exactly where in the devtools?</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4274"><br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4276">In the devtools console. For example, you can do `window.open('about:blank');`<br clear="none">
</div>
</div>
<div></div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4400"><br clear="none">
</div>
<div>[...]<br clear="none">
</div>
<div></div>
<div><br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4402">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4546">> I meant we, in the furure, can open a remote html file that has the .pd part inside a </code> tag. And the canvas is rich-html and the objects and cables are above that.</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4447"><br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4401">Oh, I see. There are two potential features you are describing. One is a friendly
<br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4403">interface for opening an html file in Purr Data. The other is a friendly interface
<br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4404">for making a network request for a remote file and then displaying/running it.
</div>
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4405">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4416"><br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4417">For the first we can just play around with devtools and incrementally build the
<br clear="none">
</div>
<div dir="ltr">feature from there. Maybe adding ".html" as a legal file type to open, making
<br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4566">the pdgui.js module more generally usable, etc.<br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4567"><br clear="none">
</div>
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4568">Fetching remote content is a bit more difficult. Currently I don't let the GUI
<br clear="none">
</div>
<div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9949">toolkit make any network connections aside from the local socket connection
<br clear="none">
</div>
<div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9948">to the Pd process.</div>
<div dir="ltr" id="yui_3_16_0_ym19_1_1485129651838_9947"><br clear="none">
</div>
<div dir="ltr">-Jonathan<br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4571"><br clear="none">
</div>
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4572">> I`m just brain-storming about the fact that Purr-data is based on HTML5.</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4573"><br clear="none">
</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4574">Salutti,</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4575">Lucarda.</div>
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4576"><br clear="none">
</div>
<br clear="none">
<div></div>
<div><br clear="none">
</div>
<div id="yiv5864738967Signature"><font size="2" face="Courier New, Courier, Monospace">Mensaje telepatico asistido por maquinas.</font>
</div>
<br clear="none">
<br clear="none">
<div class="yiv5864738967yqt5087876210" id="yiv5864738967yqt53994">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4550" style="color:rgb(0,0,0);">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4549">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485125395801_4548" style="color:#000;background-color:#fff;font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div class="yiv5864738967yahoo_quoted" id="yiv5864738967yui_3_16_0_ym19_1_1485118824875_3536" style="display:block;">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485118824875_3535" style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div id="yiv5864738967yui_3_16_0_ym19_1_1485118824875_3534" style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div class="yiv5864738967y_msg_container" id="yiv5864738967yui_3_16_0_ym19_1_1485118824875_3573">
<div id="yiv5864738967">
<div dir="ltr" id="yiv5864738967yui_3_16_0_ym19_1_1485118824875_3580">
<div dir="ltr" id="yiv5864738967divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri, Arial, Helvetica, sans-serif;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br clear="none">
<br clear="none">
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="yiv5864738967yqt1761474531" id="yiv5864738967yqtfd94922">
</div></div><div class="yiv5864738967yqt1761474531" id="yiv5864738967yqtfd96101">
</div></div></div><br><br></div> </div> </div> </div></div></body></html>