Transcompile Arduio TFT GUI Sketch from SVG File

Posted by:

Preamble

Let machine do the dirty work. To continue what I started in last post, I tried to see if it is possible to parse the SVG file and generate arduino sketch code out of it. The answer is yes. There is a wonderful post and a SVG Optimiser which helps me greatly for this project.

Parse the SVG file with the powerful lxml to generate an element tree

Parsing out the Vector parameters needed for your GUI.

The rest is to loop through element tree to search tags (line, text, rect or polygon etc ) and their attributes and properties needed for GUI construction. Following is an example for rectangle. Elements.get is your friend. RegEX will be needed also to extract some of the them.

Arduion sketch code can be generated as following.

I writes the setup and loop code in two different files, and combined them later. Of course you needed to modify them based on your Arduion Graphic library. Following is to draw the rectangle.

and, fill the rectangle if needed. You can also adding padding between the border and inner filling border. There is no discrimination between stroke and fill in most Arduion graphic library.

A few tricks needed for the rough corners.

  1. Color code convertion Arduino only takes 16 bits RGB565, not 24bit RGB888 provided by SVG. Following function takes care of it.

  2. There is no round Rectangle in Adobe Illustrator, what I did to to add a roundRect id tag, and add a rounded corner by adding a rx.
  3. Polygon is tough to handle. You only need to deal with triangle anyway, which is not bad. Remember us polygon tool, NOT star tool though.
  4. Text properties is wrapped in matrix, use RegEx.

Let machine do the dirty work.

The SVG file:

Sorry, your browser does not support SVG.

pumpkin.png

and, Arduino code:

Another Example with Menus

Postamble

In the last a few posts, I have covered what I call “The 3 Musketeers” for Arduino TFT GUI designed: the Adafruit Graphic Libarary, SVG Vector Design with Adobe Illustrator or Inkscape and Bitmap images from either C-array or from SD Cards. It is possible to design any GUI with these 3 friends in your hands. There is another GUI library which I like a lot, but I am having trouble fixing it.

1
  Related Posts

Comments

Add a Comment