New GUI tests
Vilson Vieira
this weekend I did some tests for GUI ideas I have for web-pd. I've
created a repos here:
https://github.com/automata/web-pd-gui
There is a simple demo:
http://automata.github.com/web-pd-gui/test_jsplumb.html
It's just a proof of concept (we can create just osc~ and dac~) and
buggy! For example: moving boxes breaks the PD running. Any
suggestion?
I think using DOM elements as GUI to web-pd have some advantages: it's
DOM elements :-) so we can use existing UI JavaScript APIs like jQuery
UI, we don't need to write everything from scratch. It is not "draw
frame" based, so the CPU load is decreased. We can mix web-pd with
other HTML5 elements like video, canvas and SVG. We can use CSS to
create themes to the GUI.
I've tested other "dataflow diagrams" JS APIs. jsPlumb is my choice
because it's simple, beautiful, DOM based and uses jQuery.
RaphaelJS is interesting and fast to draw diagrams:
http://automata.github.com/web-pd-gui/test_raphaeljs.html
but it generates SVG, not DOM elements. Maybe we can use that or
ProcessingJS to draw canvas-related things like waveforms.
I didn't touch pd.js. I'm using just pd.parse() and pd._graph to get
crucial information about the objects (number of inlets, type, number
of arguments, ...).
Well, I'm so excited about web-pd and all HTML5 audio thing! Please,
I'd like to know what do you guys think.
All the best.
--
Vilson Vieira
((( http://automata.cc )))
((( http://musa.cc )))
Spencer Kelly
I like jquery too, im very excited to see your demos.
please check out
http://www.spencerwaterbed.com/soft/webpd/
there are a billion bugs but I work on it when I can.
I'll admit it, I've exposed myself to quite a big project doing it in
the canvas from primitives.
its a steep hill to climb, and it does redraw it all 24 times a second etc.
but there are advantages to this aswell.
I think you'll find theres alot going on, you know, with interaction
and stuff. Speed has never actually been an issue either, 20fps is
fine for this, and canvas is about to fly, big time, in ff4. The audio
stuff I think will be many times more taxing on the cpu than the
graphical stuff.
smarter programmers than I have made the canvas sing, and I hope we
can converge on a platform that isn't a compromise.
right now you can build a pd patch graphically, load it from pd
source, manipulate it, save it as valid pdsource. its got most of the
unique gui objects, like sliders, toggles- its working 'right in'
pd.js. moving, deleting, copy/paste, edit mode logic, kboard
shortcuts, no lag problems, a clumsy object zoom, clumsy object
browser/help integration - plans for abstraction support, automatic
connects, a nl command interface. ..even tentative max-msp conversion.
if you wanna take a peek at the code, it lives right off of the pd.js
objects. when you click play it converts the live manipulated objects
back into a pd string, then loads it again in pd.js.
glad the 4 of us have come together on this. I've wanted to build this
for a long time. My roomate from france was like 'oh ya, puredata',
and he's a carpenter. its so popular, but so brutaly old-fashioned. I
have to squint to see those damn little inlets.
chris, could you parse comments (text objects) in pd.js? I don't want
to have to re-parse the pd file to find them. I've added a 'text'
object that does nothing. That would be really helpful.
can someone take a crack at metro? that's a missing puzzle piece. also
connection fanning. That would be really awesome.
can pd.js do abstractions?
trying to polish things this week. way too far into this to give up
Vilson Vieira
> hi Vilson, you are totally right about the dom-based advantages.
> I like jquery too, im very excited to see your demos.
Hey Spencer, sorry about the long delay. Thanks about your words.
> please check out
> http://www.spencerwaterbed.com/soft/webpd/
> there are a billion bugs but I work on it when I can.
I know your project and it's so good! I think we can work together: a
DOM-based implementation could be useful on some ways and canvas too.
> I'll admit it, I've exposed myself to quite a big project doing it in
> the canvas from primitives.
> its a steep hill to climb, and it does redraw it all 24 times a second etc.
> but there are advantages to this aswell.
> I think you'll find theres alot going on, you know, with interaction
> and stuff. Speed has never actually been an issue either, 20fps is
> fine for this, and canvas is about to fly, big time, in ff4. The audio
> stuff I think will be many times more taxing on the cpu than the
> graphical stuff.
>
> smarter programmers than I have made the canvas sing, and I hope we
> can converge on a platform that isn't a compromise.
You're right. Canvas acceleration is comming.
> right now you can build a pd patch graphically, load it from pd
> source, manipulate it, save it as valid pdsource. its got most of the
> unique gui objects, like sliders, toggles- its working 'right in'
> pd.js. moving, deleting, copy/paste, edit mode logic, kboard
> shortcuts, no lag problems, a clumsy object zoom, clumsy object
> browser/help integration - plans for abstraction support, automatic
> connects, a nl command interface. ..even tentative max-msp conversion.
>
> if you wanna take a peek at the code, it lives right off of the pd.js
> objects. when you click play it converts the live manipulated objects
> back into a pd string, then loads it again in pd.js.
Can I manipulate them while playing? I can't do that on my
implementation because it crashes the sound output (I think because
it's not multithread).
> glad the 4 of us have come together on this. I've wanted to build this
> for a long time. My roomate from france was like 'oh ya, puredata',
> and he's a carpenter. its so popular, but so brutaly old-fashioned. I
> have to squint to see those damn little inlets.
It's awesome. I certanly wish to help on your code too. Loved the idea
about something similar to hascanvas.com too. I always wanted
something like paste.pd.org that I could copy and paste my PD patches
and they would be shown as graphical nodes them just raw data. Maybe
we can have that so easy.