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.

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.

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.

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

   1 2 3 4 5 6 7 8 9 10 11

   def RBG24to16(value):    """ convert from RBG888 24 bit to RGB565 16 bit    take in the red, green and blue values (0-255) as 8 bit values and then combine    and shift them to make them a 16 bit hex value in 565 format. """    value = value.lstrip('#')    lv = len(value)    rgb = tuple(int(value[i:i + lv // 3], 16) for i in range(0, lv, lv // 3))    hex = "0x%0.4X" % ((int(rgb[0] / 255 * 31) << 11) | (int(rgb[1] / 255 * 63) << 5) | (int(rgb[2] / 255 * 31)))    return hex

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.

   1 2 3 4 5 6 7 8 9

   matrix=element.get("transform") list = ((re.search("\(([^)]+)\)" ,element.get("transform"))).group(1)).split() #split the numbers between () based on space x=list[4] x=str(round(float(x),0)) y=list[5] y=str(round((float(y)-10),0))  #move 10 pixel up in arduino fontsize = str(float(element.get("font-size"))/6)

The SVG file:

and, Arduino code:

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.