How do people make nice interfaces for Touch TFTS?

Stuck with a problem in your code? Seek help here.

How do people make nice interfaces for Touch TFTS?

Postby singhm29 » March 14th, 2015, 10:38 pm

Hey guys was wondering if someone could describe the workflow of how I would make an interface like this on my touchscreen
https://lh5.googleusercontent.com/-fzir ... o/home.png

The resolution of the touchscreen is 320x240.

So would I basically design the image in sometihng like paint or photoshop for a 320x240 layout
Upload it onto the sdcard for the touchscreen
Figure out what coordinates different parts of the image are on the touchscreen which I want to perform certain actions (whats the best way todo this?)
Right my event code for what happens if this area is pressed.

Thanks for any tips and clarification!
singhm29
 
Posts: 17
Joined: April 26th, 2012, 11:50 am

Re: How do people make nice interfaces for Touch TFTS?

Postby st2000 » March 15th, 2015, 6:32 pm

Did you mean to make this interactive?

There are boat loads of SDKs (or IDEs or what ever you want to call collections of software tools used to develop applications) that support graphical "widgets" that are "canned solutions" to programming tasks like "I want a blue button here" and "I want a green slider there" and "I want numbers from 0 to 100 to show up in this red box".

If you are programming for an Apple you would dive into their Objective C or what ever their new SDK is (think it's called Slick or something like that). If you are into Linux you might try Qt and C programming. If you are into Android you would try Eclipse and the Google Android SDK. However, Google, like Apple, is moving toward a new SDK. Sorry, can't remember the new name. These SDKs contain both text and graphical editors so you can type your program as well as lay your "widgets" out. Attaching your program to the "widgets" is the key step so that you can control the display and take input from a user interacting with the display.
st2000
 
Posts: 1454
Joined: February 3rd, 2011, 6:10 pm

Re: How do people make nice interfaces for Touch TFTS?

Postby singhm29 » March 15th, 2015, 10:26 pm

Rereading my post I can see that what im asking wasnt very specific.
So I am using
http://www.ebay.com/itm/3-2-inch-TFT-LC ... 2ec7195ccd

with an arduino. Im wondering what the workflow to get a result screen like this would be
https://lh5.googleusercontent.com/-fzir ... o/home.png

For which each one of those icons when pressed perform some action. Is there a graphical SDK of some sort for arduino?

Thanks and sorry for the original open ended question hopefully this specifies it a bit more clearly
Last edited by singhm29 on March 16th, 2015, 3:45 pm, edited 1 time in total.
singhm29
 
Posts: 17
Joined: April 26th, 2012, 11:50 am

Re: How do people make nice interfaces for Touch TFTS?

Postby st2000 » March 16th, 2015, 6:09 am

Your link to the image is broken.

I don't know if you are new to the Arduino paradigm. Assuming you are, the reason the Arduino is easy to use is partly because someone (some kind person) has abstracted the hardware you are interested in using by writing a driver. While most Arduino programs are written in C, the drivers are usually written in C++. The most common drivers are bundled with the Arduino SDK (which I assume you already have). Things like reading a POT or moving a Servo Motor are a few examples of the drivers that come with the SDK. Things like controlling 2 meters of addressable RGB LEDs for a light show are example where the library needs to be downloaded from the RGB LED supplier. In my case I bought 2 meters of LEDs from Adafruit.com and they supplied the driver to control the LEDs.

With out a driver you will have to understand how to interface with the LCD screen. I think I see 16 bits of parallel data and I think I also see either a SPI bus (CS, MISO, MOSI, CLOCK) or a mangled SPI interface. I don't see a link from your ebay link to a data sheet. So I would be lost as to how to get your LCD screen working.

Adafruit.com does sell a similar item:
https://www.adafruit.com/products/358?gclid=CI-k5KDmrMQCFZQvgQodpqMA-w
I would start there and see if they supply a driver for their product (probably). Then you need to dig into the details to see how compatible the driver is. This may be difficult. The screen sizes do not match and there may be other differences such as the pin layout.

A lot of people make the mistake of assuming software is unimportant. Even big companies do this (Dream Box, Zune, Lisa, BlackBerry, ect). If you don't find a driver already created for your LCD screen and if you do write one, I am sure others would be very appreciative if you shared it.
st2000
 
Posts: 1454
Joined: February 3rd, 2011, 6:10 pm

Re: How do people make nice interfaces for Touch TFTS?

Postby singhm29 » March 16th, 2015, 4:10 pm

Hmm sorry about that I believe it should be fixed now.

I understand this and thanks for explaining it further st2000. I have the screen running already and it works with a simple touch calculator demo so driving the screen has been solved! Your right about the mangled SPI bus many of these screens are capable of SPI control but they dont break out the pins in order todo so from what ive read. I am running it in 16 bit mode.

So my screen is running as well as my touch interface. Its the rich Iphone like GUI that I want to acheive.I have been trying to contact the creator of the project to get some tips on how he/she acheived the looks of the interface and have not heard back in quite some time. Here are some things posted on his/her project.

Once I started digging into the UTFT touchscreen libraries, found that UTFT has a library add-on called UTFT_tinyFat that allows you to read graphics from an SD card and display them on the screen. That's when I realized I could make a rich iPhone inspired GUI (hence the name iAqua), and that's when the snowball started rolling down hill.


I built the GUI in Photoshop (the layered files and templates are in the download).


So I understand that I would draw the images of what I want my interface to look like in something like photoshop. (with a 320x240 template I assume?)
Then I would utilize something like UTFT_tinyFat to read the images I created off my sdcard onto the screen
Now how would I map out the touch coordinates for different buttons in an easy way? Like would I design a grid thats 320x240 to understand the edge of one of the buttons ive made and overlay that onto what ive just created in photoshop? Wondering how other people approach this sort of thing.
singhm29
 
Posts: 17
Joined: April 26th, 2012, 11:50 am

Re: How do people make nice interfaces for Touch TFTS?

Postby st2000 » March 16th, 2015, 7:15 pm

Going full circle...

This is exactly what SDKs like Qt or Eclipse&Android-SDK do for you. They take care of the touch-coordinates, shape, size, text and color of buttons. Not to mention things you have yet to talk about. Like what happens if a user presses on a button and then moves out of range of the button then lifts their finger. Or if they press outside of a button then moves into the button then lifts their finger. Also, what feed back are you giving the user. Many SDKs which integrate graphic widgets like buttons change the buttons colors when pressed. Or even go as far as far as changing the graphics completely to make it look like the button is depressed into the screen. Keep in mind the button graphics change is one event that normally happens when ever the button is touched. But the actual action associated with pressing a button normally does not happen until the finger is lifted while the button is in focus (i.e. finger was last on the button). And we haven't even gotten into other widgets like sliders, bar-graphs, text, numbers, dials, ect.

Enough of that.

In your case I would simplify your problem by restricting your self to keeping buttons all the same size and on grid. Say a 4 by 8 grid. Then write one routine that interprets 10s of 1000s of touch points you read from the screen to 1 of 32 possible buttons. You can still get creative by using 4 buttons across the bottom on one page and 8 along the side on the next page you display. All the while you keep using this one function and ignore the output if someone presses on a non-existing-button for a given page. Hopefully this will keep you from going crazy. And provide a good balance between a fixed button layout and a sky's-the-limit user interface.
st2000
 
Posts: 1454
Joined: February 3rd, 2011, 6:10 pm


Return to Help Me! Software

Who is online

Users browsing this forum: No registered users and 1 guest