Pages: [1] 2   Go Down
Author Topic: helper program for designing graphical interface  (Read 2904 times)
0 Members and 1 Guest are viewing this topic.
Belgium
Offline Offline
Jr. Member
**
Karma: 11
Posts: 94
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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,

Billie
Logged

nr Bundaberg, Australia
Offline Offline
Tesla Member
***
Karma: 129
Posts: 8601
Scattered showers my arse -- Noah, 2348BC.
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged

Rob Gray aka the GRAYnomad www.robgray.com

Dallas, TX USA
Offline Offline
Faraday Member
**
Karma: 70
Posts: 2740
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Logged

Central MN, USA
Offline Offline
Tesla Member
***
Karma: 75
Posts: 7260
Phi_prompt, phi_interfaces, phi-2 shields, phi-panels
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged


Global Moderator
Netherlands
Online Online
Shannon Member
*****
Karma: 223
Posts: 13910
In theory there is no difference between theory and practice, however in practice there are many...
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
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)
Logged

Rob Tillaart

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

0
Offline Offline
Shannon Member
****
Karma: 215
Posts: 12516
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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/
Logged

[ I won't respond to messages, use the forum please ]

Norfolk UK
Offline Offline
Faraday Member
**
Karma: 70
Posts: 2587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged


Belgium
Offline Offline
Jr. Member
**
Karma: 11
Posts: 94
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Thanks to all for thinking along smiley-wink
Logged

Norfolk UK
Offline Offline
Faraday Member
**
Karma: 70
Posts: 2587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

@Riva: I'm using Gimp at the moment, Photoshop is a bit overkill and way to pricey just to get some x y coordinates smiley-wink
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.  smiley-sad
Logged


Dallas, TX USA
Offline Offline
Faraday Member
**
Karma: 70
Posts: 2740
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Still cannot find the link to the site that converted images to C structures suitable for Arduino.  smiley-sad
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
Logged

Manchester (England England)
Offline Offline
Brattain Member
*****
Karma: 635
Posts: 34572
Solder is electric glue
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

0
Offline Offline
Shannon Member
****
Karma: 215
Posts: 12516
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

[ I won't respond to messages, use the forum please ]

0
Offline Offline
God Member
*****
Karma: 39
Posts: 988
Get Bitlash: http://bitlash.net
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

-br
Logged

Belgium
Offline Offline
Jr. Member
**
Karma: 11
Posts: 94
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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! smiley-grin

With kind regards,

Billie
Logged

Offline Offline
Newbie
*
Karma: 1
Posts: 46
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
void grid (int gridspacing) { // routine to generate a square grid on screen x pixels per side
  tft.setCursor(0,0);
  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
Logged

Pages: [1] 2   Go Up
Jump to: