Go Down

Topic: helper program for designing graphical interface (Read 3450 times) previous topic - next topic


Hello everybody,

As stated in the subject, I'm looking for an aid in creating a graphical interface. In this topic you'll see that I already created a menu, but it is a tedious job of trial and error until one gets the buttons where they should be.
What I'm looking for is a sort of graphical editor in which i can create buttons and move them around until they are at there right position. And then gives me the right coordinates which i can use in the code...

Some extra information...I'm useing the Sainsmart 3.2" TFT touchscreen together with an Arduino Mega 2560

With kind regards,



I don't know of any programs that will do this although there may well be.

Something I thought of doing years ago was having a simple form in VB6, you layout the objects then grab the VB file (it's just text), and parse it get the objects and their locations and create an array of C structures or whatever you need from that.

Rob Gray aka the GRAYnomad www.robgray.com


I try to stay away from proprietary things like VB or any of that Microsoft stuff as much as possible.

If I were going to do some high level stuff like that, I be moving to something like a Raspberry Pi.
That would open up all kinds of possibilities.
Not only would you have the scripting, graphic tools, and file support, to play around with, but you could also
have access to it via a web interface.
Ethernet support is built in and you can add wireless support for about $5-10 with a USB wifi dongle.
That means you can access your device via computer or smartphone from anywhere
in the world (assuming an Internet connection) with nothing but a simple browser.
Which important as you don't necessarily have to write any client application code for the PC or phone.

Looks like  Firmata could be used to talk to all the sensor devices you have.

To me the Pi is interesting because it has everything you need to do some
pretty amazing things since it is running a real OS.

Using this type of environment, with firmata over USB,
means you can test everything on your desktop machine,
then, when working, simply move it over to the Pi and not have to change anything.

--- bill


Strongly agree with Bill. Even after you finally figured out the layouts, what type of processing can arduino provide you? Not graphics, or anything that exceeds 8kB ram on a mega. Either go with Pi, or try arduino adk to use an android tablet for gui. A lot easier than hammering out your own, which was what pc game developers were doing back in the early 90' before windows got too common place.


As stated in the subject, I'm looking for an aid in creating a graphical interface.

pen an paper?

preferable the paper with squares,  do you have a printer ==>  - http://www.printfreegraphpaper.com/ -  (there are other apps too)
Rob Tillaart

Nederlandse sectie - http://arduino.cc/forum/index.php/board,77.0.html -
(Please do not PM for private consultancy)


A GUI builder is a large complex piece of software, many exist for the web and Java and other mainstream app development tools.  If you look at the description for an Eclipse plugin here you'll get an idea: http://www.eclipse.org/proposals/tools.windowbuilder/  I believe there is talk of Eclipse integration for the Arduino environment?  Or did I dream that?

Someone may have put together some sort of lightweight tool for Arduino for this but not called it a gui-builder (or google would find it).  Perhaps you'll get to write one!

This is the closest I could find, for AVR studio: http://avr-lcd-visualizer.software.informer.com/1.1/
[ I won't respond to messages, use the forum please ]


Could you just use something as simple as Photoshop or it's free clones like Gimp that support layers and then set the page size to 320x240 and start placing icons. Once you have the layout as needed just note the X,Y positions of the icon/boxes/lines and transfer to your code. I have seen somewhere a web based tool (cannot find it now) to convert images to C structures suitable for Sainsmart displays.


@Riva: I'm using Gimp at the moment, Photoshop is a bit overkill and way to pricey just to get some x y coordinates ;)

Thanks to all for thinking along ;)


@Riva: I'm using Gimp at the moment, Photoshop is a bit overkill and way to pricey just to get some x y coordinates ;)

I agree Photoshop is a bit OTT if you don't already have it. Gimp is okay but used to be a bit of a monster on the interface side thought it may have improved now. Another (Windows) option might be Paint.net http://www.getpaint.net/ though I have never used it.
Still cannot find the link to the site that converted images to C structures suitable for Arduino.  :(


Still cannot find the link to the site that converted images to C structures suitable for Arduino.  :(

GIMP can do it.
The trick is that not all libraries support the same format so getting it into
to the right format for the library can be an issue depending on format used
by the library.
--- bill


This sounds like you want Interface Builder, it is free with all Macs, but then that is probbly what you don't want to hear.
It is great though.


I remember using ResEdit, but I wasn't writing Mac code much after the Mac II came out IIRC.  Think that must have been the
time the DEC Alpha, IBM PowerPC and Sun Sparc processors came in and 68030 based machines were outclassed.
[ I won't respond to messages, use the forum please ]


Another free option worth looking at is svg-edit: https://code.google.com/p/svg-edit/



Thanks Billroy,

That was exactly what I need(ed). Sorry for the late reply, but since I've ordered another 3.2" TFT for a new project I was again in need for this application and saw your reply. I'm using the wonderful 'UTFT_Buttons' library Henning Karlsen wrote and this will fit the bill! :D

With kind regards,



I must admit I use a somewhat low tech approach to my ui design.

Step 1. quick dirty coding of my initial button/text placement
Step 2. create a quick grid on the screen
Step 3. try not to move my lips as i count the gridlines
Step 4. adjust initial code.

The code for it is below (based on adafruit libs)

Code: [Select]
void grid (int gridspacing) { // routine to generate a square grid on screen x pixels per side
  int ScreenMax=160; // manually ammended, could be included in function as a parameter
  // vertical lines
  for (int i=0; i < ScreenMax+1; i+=gridspacing) {
    tft.drawLine(i, 0, i, ScreenMax-1, ST7735_WHITE);
  } // End if
  // horizontal lines
  for (int i=0; i < ScreenMax+1; i+=gridspacing) {
    tft.drawLine(0, i, ScreenMax-1, i, ST7735_WHITE);
  } // End if
  delay (10000);
}// End grid

Go Up