How to Make a GUI for Arduino TFT LCD

Posted by:

Preamble

There is no package available which offeres a visual graphic display as well as the coordinate info so that you can reproduce it with TFT graphic library. 4D Systems is the closest you can get, yet it is lousy, proprietary and only available for Windows. After researching long and hard for a GUI Designer for Arduino TFT LCD, finally I think I come up with a reasonable implementation – SVG vector graphics editor, such as Adobe Inllustrator or Inkscape.

The process is as following:

  1. Design the Vector GUI with Inkscape or Illustrator.
  2. Save/Export as SVG file.
  3. Use Emacs to extract the coordinate info for your vectors.
  4. Recode them with your TFT graphic library.
  5. Compile and upload to your Arduino.

Use Your Vector Graphic Editor of Choice either Adobe Illustrator or Inkscape

Choose a customer artboard the same size as the TFT LCD (320x240px in this case) when opening a new file. This is critical so that the coordinates can be accurately transferred to Arduino sketch for TFT LCD.

Adobe Illustrator – Windows only

  1. Design your Vector Interface as shown below.
  2. Export as SVG, you can review SVG code at the export dialog windows-access-to-Owncloud.
  3. Code your Arduino GUI using the color and Coordinate info.
  4. Step 3 can be automated with some simple RegEX script. [UPDATE: see SVG parsing with python and lxml 11/17/2015]

Inkscape -Open Source

  1. Adjust from the menu bar inkscape-1.png

  2. or, use xml editor

    inkscape-xml.png

  3. Save as SVG file when done.

Emacs as a SVG Editor

Emacs is readily capable of SVG display and coding. Please refer to here for more information. Open your SVG file you created with either Illustrator or Inkscape in Emacs via drag and drop or C-x C-f. It is a very pleasant view with rainbow mode on.

illustrator-svg-code.png

use Ctl-c Ctl-c to switch back and forth between code and Design view.

illustrator-svg-img.png

Sketch your Arduino GUI based on the vector info from SVG.

Here you are, a beautiful and accurate Arduino GUI with ease. Please use the section RESOURCES to convert the color to RGB565 format for Arduino TFT.

arduino-gui.jpg

31
OCT
5
  Related Posts

Comments

  1. Carlos LLorens Alvarez  April 13, 2018

    Hi, I’m using you example to build my python based SVG to arduino code generator. As can I see y you post seem that you hava a more complete python code to generate the code. It’s posible to get this code?

    Thanks in advance

    reply
  2. Tejeshw Vardhan  June 7, 2018

    great work. i would like to see dial animations

    reply
  3. Patrik  June 12, 2018

    Hi!

    Interesting!
    But I don’t get the last part? I have the SVG open in Emacs and can see the notations. But how do I transform this to Arduino code?

    reply
Subscribe to Comments

Add a Comment