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:
Drag and drop the SVG file from your desktop into the dropzone on this page and then the Canvg library converts the SVG code to Javascript code. That first part happens in your web browser. The Javascript is sent for further processing by PHP code on the D-Space webserver. There it is translated to a Lemur canvas/scripting object, and sent back to you for inspection/saving.

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:
- SVG text (this causes a problem at the canvg level too).
- Certain types of fills.
- Some of the functions not supported by Lemur 5.22 implementation of Canvas (which is missing important commands: transform, createpattern, clip, image manipulation and others).
    Canvas commands that I attempted to implement:
   The quadraticCurveTo is converted to bezierCurveTo.
   Global alpha channel is accounted for during conversion and canvas/save restores.
   I tried to deconstruct the transform command into component functions of scale,rotate, and translate. When the rotate comes into play, things break. This is still being solved...
   A matrix transform within a gradient to a temp canvas presents another problem.


Other Notes:
There are still bugs in the Lemur canvas implementation as of 5.22, which cause the editor to quit.
For instance, complex multi-point line or curves followed by fills. You can diasable fills in the controls until Liine sorts that out.
You may edit the .JZML and/or stop the onDraw from executing to load the template and tinker/make workarounds from there.

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!
Enjoy it and Cheers!
Jay DSpace. written April-May 2015

This utility is made possible by ideas from (Credits/shout out to):
Gabe Lerner, creator of the Canvg library
Professor Cloud
Bgrin's Spectrum Color picker
Eli Grey's FileSaver.js
jQuery


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


 
 


   
  Fill background Lemur canvas to:
   


   
  Override initial canvas FillStyle to:
   

   
  Override all canvas FillStyles with above. 
   


   
  Override initial canvas StrokeStyle to:
   

   
  Override all canvas Stroke Styles with above. 
   


   
  Override initial line width:

This is useful for effects and if the image is scaled up, to correct problems
by setting values less than 1.		
   


   
 
          Line Width: .25
   


   
  Rescale output image to:
   

   
 
          Width: 500
   

          Height: 700

   
 

   
  Ajdust X,Y offset:
   

   
 
          X Pos: 0
   

          Y Pos: 0

   
 

  




  
Do not permit canvas fills.

3 June 2017: Lemur editor 5.3.2 and lower versions will crash with a canvas_fill to a long path made with 
canvas_bezierCurveTo

If the editor crashes upon load then try this.
Also nice if you want only shape outlines.		



  
Add resize/scale controls to JZML.

Test ideas with sliders for line size, x/y offset, color styles and scale.
In some instances, the canvas script may need editing for these controls to function..
Also adds cursor hit region debug info.		




 


      Remove initial scale and translate commands.(Not recommended)

This can help to solve offset and blank canvas in Lemur Editor when apps
save a width/height of 100%.		
  

  
Do not render on template load.
Some complex outputs may cause the Lemur editor to crash.

If that happens, select this and turn them on one by one
beginning with the first render script..

  

  
Do not output JZML (Lemur script code only)
  

  
Cascade onDraw scripts:

Calls next draw script from previous.
(Not recommended)		
  

  
Create on-cursor hit regions from paths:

It can save time verses adding hit regions all by hand, but scripts will require work
to make fully functional. This is only useful on very simple drawings,
consisting for example of some rectangles and circles.
Not recommended if there are any color gradients.

  

  
Create a Lemur Library (JZLIB) file instead of a full template.

This format can be more easily imported to your existing template.		






 




SVG Image as rendered in the webbrowser:

Converting..

Code and Display Area
  Select and copy/paste or use the save button:

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.