SVG2

ian-s

I have got to start dinner soon so I thought I would post about my weekends programming efforts.

I was fooling with the idea of doing synth modules in svg so they would allow you to zoom in without loosing quality.

I was poking around inside the G2 demo editor looking for the bmp's of the modules and came across some text resources which seemed to be definition files for all the elements of each module. So I converted them to JSON and fiddled with a bit of code and it turns out that is what they were.

Here is a quick sample page (only tested with FF/Chrome on Windows sorry). There are some missing elements that were handled with little inline bitmaps. These will need to be manually converted to svg paths but they are typically quite simple (like the triangle in a env vca module).

You can zoom in/out using the Ctrl+mouse wheel.

What can I do with these? I'm not sure but was thinking it might be better to show patches posted on the site via this instead of attaching a jpg.

With a node.js app doing the USB donkey work, an in browser patch editor might just be doable.

brunov · Posted: Sun Dec 07, 2014 12:45 am Post subject:

hello ian-s,

that looks very interesting. I also used these module definitions extracted from the recource file for the os-editor. At one stage I tried to base the graphics on svg only it became too complex. This may be different if you use javascript as a programming language.

I also found a nice cable simulation in java script over here : http://lab.andre-michelle.com/cable-interface

My apporach would be, what I also want to do for the os-editor, to split the application in a front end and a back end. The front end with the user interface would produce osc messages for the back end. The back end could sit anywhere on a netwerk and will have a physical usb connection with the g2.

So that way the front end could also be some other osc capable tool or m4l or maybe your implementation in a browser.

Bruno

ian-s · Posted: Sun Dec 07, 2014 3:12 am Post subject:

Hi Brunov.

I was hoping that your existing usb code could act as a host.

That cable simulation looks really nice, love the wobbly effect. It uses flash unfortunately.

The current code allows for re-use so an input or knob is defined visually only once. Each module also has a single dynamically generated template.
The on screen modules are just a group>use nested element pair, with the template name applied to the use, and position/module color applied to the outer g element. If there are any interactive elements like knobs, then an 'area' and movable pointer for each is also added to the <g>

I'll finish off the missing bitmaps then have a crack at the animated envelope graphs next week.

brunov · Posted: Sun Dec 07, 2014 4:11 am Post subject:

ian-s · Posted: Mon Dec 08, 2014 12:08 pm Post subject:

cappy2112 · Posted: Sun Dec 14, 2014 10:53 am Post subject:

ian-s · Posted: Mon Dec 15, 2014 3:23 am Post subject:

Thanks Tony, I'm still in the fooling around phase. Brunov has done all the hard work on the usb protocol etc.

This new app has the beginnings of the wobbly patch cord happening.

Some javascript taken from a cloth simulation, de-mootooled and adapted from canvas to svg.

The app logic just shifts a single cable from point to point. The cable acts strangely at the moment (but kind of like my real ms20/50 patch cables). I need to adjust constraints based on total distance between points and tweak the physics.

I've done a few more bmp to svg conversions and gotten the multi-state switches to work. Started tidying up the code but it is still quite a mess sorry.

ian-s · Posted: Wed Dec 17, 2014 1:34 am Post subject:

update.

Only works on chrome at the moment. FF is quite a bit slower anyway (the price you pay for superior rendering I guess).

Slow progress, I have decoupled the socket locations from the dom so I will have to figure out another way of changing the mouse pointer.

You can make multiple connections now. No need for drag, just click 1st socket then click second socket. Click away from a socket to cancel.
The cable will settle to a suitable length after the second point is connected, new cables default to the same length as the last.

The animation only happens on the last cable, I could have a circular queue of cable physics objects but one seems to work well enough.

This app was supposed to be a simple pch2 viewer, so you can look at patches without the editor or demo being loaded (ie at work). The updatable knob/switch/patching is only being tested for a future svg front end for Brunov's editor.

ian-s · Posted: Mon Jan 05, 2015 2:25 pm Post subject:

Hi everybody

progress update

Well the "text resources as source for auto svg" route came up against a brick wall. The control order doesn't match the parameter order so I was faced with the task of re-ordering all the controls/inputs/outputs to match the parameter order.
The code was getting very messy (even for me) so I chose instead to take the nice g2ools python module.py and parameter.py source, convert it to javascript (using javascript), then add a few lines of code to show the graphic elements alongside the list. Simply clicking on the correct control/input etc. After each module group, the javascript object was converted back to source using JSON.stringify().

Still a lot of tedious work but now I have a nice neat javascript object definition for each module and parameter.

I'm still working on the controls (so many different types) but a lot are done and the app will now read your local pch2 files and display the VA with the knob/switch positions set for variation 1.
Patch cables are also shown but the random bend looks a little too stiff and I don't re-factor the socket colours yet.

The control parameter value windows should be easier now but the Graph displays are going to be an interesting challenge :¬)

This version is for display only, no code for patching or adjusting controls.

I did get FF working but seem to have broken something so that FF has stopped working again, I'll address that later.
Works on android and ipad (chrome) though.

blue hell · Posted: Tue Jan 06, 2015 5:09 pm Post subject:

Ah the wires are visible in FF now, looks great!

(with the NM Classic background Cool

)

For in case you can use it, http://bluehell.electro-music.com/small_stuff/wires.txt is what I did with wires. It looks a bit more like how the Clavia wires are.

If you want so I could isolate the envelope drawing code I did too - it is not as good as Clavia's maybe, Clavia applies some scaling to preserve the overall shape better even at extreme time settings, or so it seems (but my envelopes have far greater time ranges, so that could be the issue too).

Edit : added the basic envelope calculations to that file as well.

ian-s · Posted: Wed Jan 07, 2015 10:58 am Post subject:

blue hell · Posted: Wed Jan 07, 2015 11:45 am Post subject:

Maybe ... the angle ... my code works with degrees converted to radians in the procedure Rotate .. not sure what js does.

Here it looks like :

Posted Image, might have been reduced in size. Click Image to view fullscreen.

Posted Image, might have been reduced in size. Click Image to view fullscreen.

ian-s · Posted: Wed Jan 07, 2015 9:23 pm Post subject:

Yes, sorry Jan.

I forgot to mention that the cables in Wren curve beautifully and like you said, much like the Clavia editor.

Also have been wanting to say that Wren sounds amazing btw.

I'll take another look at the point rotate code tonight.

ian-s · Posted: Thu Jan 08, 2015 12:40 am Post subject:

Got the converted code working by ditching the deg2rad conversion and generating the angles in smaller units, also re-factoring some of the math.

Curve is probably a little too subtle now but it will do.

New code now in the main link.

Thanks again Jan.

I wonder if this could be integrated with the nmg2 patch archive so you didn't need to keep jpg files on the server? I think the prf2 file format is mostly 4 pch2 structures in a wrapper.

blue hell · Posted: Thu Jan 08, 2015 2:50 am Post subject:

Yes, you can tune it with the angle and strength paremeters, these could be under user control too.

I think it would be great for the site to have a patch viewer, and am willing to put some work in to help make that happen. So .. let me know what I can do please :-)

And thank you for the kind words Ian.

ian-s · Posted: Thu Jan 08, 2015 11:33 am Post subject:

Excellent.

I'm back at work after the xmas break so probably a week or two for me to finish the missing controls etc.

The code is 100% client side so nothing required by the server except to host the html(x1)/js(x3) files. The js files would be cached on the client side most of the time.

Probably the least intrusive way to integrate would be a few lines of javascript on the site dom ready event that looked for download links to .pch2/.prf2 files and appended a small viewer icon that linked through to the viewer app when clicked. Alternatively, it could insert an iframe below the download box to show the patch inline.

Will pm you when I have the code ready.

blue hell · Posted: Thu Jan 08, 2015 11:53 am Post subject:

Ok :-)

dorremifasol · Posted: Mon Jan 12, 2015 6:03 am Post subject:

Woah, this is awesome Very Happy

blue hell · Posted: Sun Jan 18, 2015 6:35 am Post subject:

Ian sent me some code that I uploaded, and I made [see] links for the G2 archive, see http://electro-music.com/g2patches.php?owner=ian-s for instance.

It works here with firefox.

I could use some suggestions as to how to integrate this nicely ... got to warn though that the forum code is not easily modifiable everywhere, so probably there will be some compromises.

prf2 files come out a bit messy, not sure if those should be disabled from seeing.

ian-s · Posted: Sun Jan 18, 2015 10:44 am Post subject:

Thanks Jan

I forgot to mention that I hadn't added the code to strip pch2 data out of a prf2 yet. The choose file option checks the file extension but the direct link does not. Will work on that tonight.

Also some things don't work too well on iPad, iOS Safari doesn't support rgba stops for gradients and I must have used innerHTML (not textContent) for the modules names as they are not visible. The auto-sizing of the background is also a little wrong.

I've only scratched the surface of the graphing functions, LFOB and LFOSHP are the only ones that function at the moment.

ian-s · Posted: Tue Jan 27, 2015 9:13 pm Post subject:

Thanks to Jan the app is now hosted and integrated with the electro-music site.

In the patch listing pages, Jan has included a direct link (see) that allows the prf2 or pch2 to be viewed.

Still a lot missing but the LFO and envelope graphs are working.

There is about a 10/1 difference in speed between FF and Chrome. FF undoubtedly does a higher quality render but Chrome is way faster.

You can find a link at the top of the app page that, if you drag it to your bookmarks bar, will allow viewing patches from the general g2 forum pages.

It works by doing a query on the forum page DOM and if it finds a G2 file download link, opens a new window to the viewer. If there is more than one link on a single page, it converts each paperclip icon to a clickable link to the viewer.