This tool converts an SVG image file into a JZML file, a scripted canvas object that can be used with the Liine's Lemur app, a programmable MIDI controller for Android and IOS platforms. It is based on a cool idea from the http://professorcloud.com website that converts an SVG image to HTML5 Canvas in Javascript. Jay has reworked and modified a more recent, 2/2015 version of the Canvg library and also created custom server-side PHP code to translate the Javascript output into a Lemur compatible JZML file.
Here's how it works: You may copy and paste from the browser window to a text editor or press the save button. The JZML file can be run directly in the Lemur editor and further edited to suit your project. Possible gotcha's:
Some SVG paths or methods are too complicated and simply do not convert to usable Javascript at the canvg level. If you're having problems just move on and try another one. Go with small SVG files (less than 50K) that do not include many gradients. Functions that do not work: Other Notes: I have not had much success converting images from the Open Icon Library available on SourceForge.net, nor any with deep layers and many complex gradients. I have had excellent success in making basic shapes using Affinity Designer (on mac) and also coverting icons which do not contain color gradients or HTML5 Canvas transforms. You'll find many controls that change the JZML output for experimentation and fun, try them out, you'll get something useful. The project originally started out in 2014 written in PERL to convert JZML object layouts to Lemur canvas objects. In 2015 I rewrote it as PHP code. The PHP ran on the command line/shell to translate Javascript output gotten by processing an SVG image through Professor Cloud's site. It worked sometimes, but ended up being too many steps. So I made this all-in-one processing solution for the community (and learned how to program a little bit in Javascript!). It took much time to research, develop and debug the code. I hope that it proves to be useful for your template design! This utility is made possible by ideas from (Credits/shout out to): |
Drop in a SVG format file from desktop. Then set options and press convert button.
Mobile device users: If you don't have file drag/drop, press 'Open..' button and copy/paste the SVG there.
Control Options for JZML output | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
SVG Image as rendered in the webbrowser: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Code and Display Area | |
If conversion went well in the Canvg library output (which builds HTML5 Canvas Javascript code), then that code will draw something on the lower right side. It is not necessary for the Javascript to draw an image to get working JZML for Lemur.
The Lemur JZML or JZLIB will be produced most of the time even if Canvg fails to make browser functional Javascript. | |