Re: examples: RaphaelJS UI combined with MIDI... [via Web Audio Developers Community Group]

I would use a wrapper for HTML5 canvas that provides a decent object
model. These come to mind: paperjs or fabricjs (the former offers good
performance, the latter supports SVG):

http://paperjs.org
http://fabricjs.com

Cheers, dan

On Monday, February 25, 2013, Peter Nyboer wrote:

> Thanks for the feedback. I'm also questioning the use of rafael in this
> context, as they are really slow when all used at once.
> I did a bit of research and found someone who had optimized Rafael by
> getting it to put the SVGs in groups, but I'm not entirely sure if it would
> help in my case:
>
> https://www.circuitlab.com/blog/2012/07/25/tuning-raphaeljs-for-high-performance-svg-interfaces/
> I might experiment with simple knob designs to see if that makes a
> difference. Rafael is attractive from a productivity standpoint, but it
> might need to be canvas in the end!
> Peter.
>
> On Feb 22, 2013, at 5:29 AM, Ladislav Nevery wrote:
>
> > nice demo :) .
> > I have just a little hint.
> > if you plan to have huge no of animated knobs etc i would probably go
> for canvas instead of raphaeljs.
> > This decision especially in this early phase it can save you a lot of
> rewriting later.
> > raphaeljs uses svg which done in sw and is thus order of magnitude
> slower.
> > http://jsperf.com/html-vs-svg-vs-canvas/2
> >  that is big deal on tablets and mobiles where every bit of cpu counts.
> > for example all raphaeljs demo animations transitions were jerky on my
> ipad 2 whereas canvas based ones were fluid since they were hw accelerated
> offloading cpu.
> >
> >
> >
> >
> >
> > Sent from my iPad
> >
> > On Feb 22, 2013, at 11:14 AM, James Ingram <j.ingram@netcologne.de>
> wrote:
> >
> >> Hi Peter,
> >>
> >> I tested your page yesterday evening, and again this morning. It seems
> to be behaving differently every time I look.
> >> It would be helpful if you could let us know a) when you have a stable
> version you'd like us to see, or b) if there's a problem you can't solve on
> your own.
> >>
> >> I'm interested in seeing how you are using Raphael JS to create knobs
> and buttons, but its a bit frustrating testing other people's unfinished
> work. I've got enough unfinished stuff on my own plate as it is... :-)
> >>
> >> all the very best,
> >> James
> >>
> >>
> >> On 21.02.2013 18:15, Peter Nyboer wrote:
> >>> Thanks much...as it is a work in progress, things get broken on
> occasion :) Thanks for the heads up - I think I had a function call to a
> non-existent function. Oddly, the developer tools in Safari weren't giving
> me an error, but it's fixed now.
> >>> Peter
> >>>
> >>>
> >>> On Feb 21, 2013, at 1:03 AM, James Ingram wrote:
> >>>
> >>>> Hi Peter,
> >>>>
> >>>> Something seems to have changed recently. I tried your page [1] when
> it appeared on the Jazz site at [2] on Tuesday, and it seemed to be working
> fine. But now its not.
> >>>>
> >>>> The MIDI Input menu contains
> >>>>
> >>>> -  not connected,
> >>>> -  my sound card (TS22 PCI MIDI), and
> >>>> -  my MIDI keyboard (E-MU XBoard49),
> >>>>
> >>>> but the keyboard can't be selected. All I can select is the sound
> card, but the way I'm set up I can't input to that directly.
> >>>> The dials no longer work as they did (yesterday, or a couple of days
> ago). Clicking and dragging up-down has no effect.
> >>>> The buttons seem to work as LEDs -- at least they turn on and off and
> echo to the monitor panel -- but I'm not sure if they are supposed to do
> anything else. When clicked individually, they display 1 for on and 0 for
> off, but clicking "all LEDs on" sets them to 127.
> >>>>
> >>>> What do you mean by
> >>>>> MIDI out port is the same as the in port
> >>>> ?
> >>>>
> >>>> Best of luck! :-)
> >>>>
> >>>> James
> >>>>
> >>>> 64bit Windows 7, latest Chrome browser.
> >>>>
> >>>> [1] http://lividserver.com/miditest/
> >>>> [2] http://jazz-soft.org/bb/viewtopic.php?f=2&t=109
> >>>>
> >>>>
> >>>>
> >>>> On 21.02.2013 00:03, Peter Nyboer wrote:
> >>>>> I've put up some example of knobs and buttons done in Raphael JS
> (with a smidgen
> >>>>> of jquery), designed around my work with Livid controllers:
> >>>>> http://lividserver.com/miditest/ The UI elements send MIDI and
> respond to MIDI.
> >>>>> There are a few of quirks: - buttons are toggles by default - MIDI
> out port is
> >>>>> the same as the in port - the [...]
> >>>>>
> >>>>>
> >>>>>
> >>>>> ----------
> >>>>>
> >>>>> This post sent on Web Audio Developers Community Group
> >>>>>
> >>>>>
> >>>>>
> >>>>> 'examples: RaphaelJS UI combined