lcd touch screen design free sample

When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.

In this Arduino touch screen tutorial we will learn how to use TFT LCD Touch Screen with Arduino. You can watch the following video or read the written tutorial below.

For this tutorial I composed three examples. The first example is distance measurement using ultrasonic sensor. The output from the sensor, or the distance is printed on the screen and using the touch screen we can select the units, either centimeters or inches.

The third example is a game. Actually it’s a replica of the popular Flappy Bird game for smartphones. We can play the game using the push button or even using the touch screen itself.

As an example I am using a 3.2” TFT Touch Screen in a combination with a TFT LCD Arduino Mega Shield. We need a shield because the TFT Touch screen works at 3.3V and the Arduino Mega outputs are 5 V. For the first example I have the HC-SR04 ultrasonic sensor, then for the second example an RGB LED with three resistors and a push button for the game example. Also I had to make a custom made pin header like this, by soldering pin headers and bend on of them so I could insert them in between the Arduino Board and the TFT Shield.

Here’s the circuit schematic. We will use the GND pin, the digital pins from 8 to 13, as well as the pin number 14. As the 5V pins are already used by the TFT Screen I will use the pin number 13 as VCC, by setting it right away high in the setup section of code.

I will use the UTFT and URTouch libraries made by Henning Karlsen. Here I would like to say thanks to him for the incredible work he has done. The libraries enable really easy use of the TFT Screens, and they work with many different TFT screens sizes, shields and controllers. You can download these libraries from his website, RinkyDinkElectronics.com and also find a lot of demo examples and detailed documentation of how to use them.

After we include the libraries we need to create UTFT and URTouch objects. The parameters of these objects depends on the model of the TFT Screen and Shield and these details can be also found in the documentation of the libraries.

Next we need to define the fonts that are coming with the libraries and also define some variables needed for the program. In the setup section we need to initiate the screen and the touch, define the pin modes for the connected sensor, the led and the button, and initially call the drawHomeSreen() custom function, which will draw the home screen of the program.

So now I will explain how we can make the home screen of the program. With the setBackColor() function we need to set the background color of the text, black one in our case. Then we need to set the color to white, set the big font and using the print() function, we will print the string “Arduino TFT Tutorial” at the center of the screen and 10 pixels  down the Y – Axis of the screen. Next we will set the color to red and draw the red line below the text. After that we need to set the color back to white, and print the two other strings, “by HowToMechatronics.com” using the small font and “Select Example” using the big font.

Now we need to make the buttons functional so that when we press them they would send us to the appropriate example. In the setup section we set the character ‘0’ to the currentPage variable, which will indicate that we are at the home screen. So if that’s true, and if we press on the screen this if statement would become true and using these lines here we will get the X and Y coordinates where the screen has been pressed. If that’s the area that covers the first button we will call the drawDistanceSensor() custom function which will activate the distance sensor example. Also we will set the character ‘1’ to the variable currentPage which will indicate that we are at the first example. The drawFrame() custom function is used for highlighting the button when it’s pressed. The same procedure goes for the two other buttons.

So the drawDistanceSensor() custom function needs to be called only once when the button is pressed in order to draw all the graphics of this example in similar way as we described for the home screen. However, the getDistance() custom function needs to be called repeatedly in order to print the latest results of the distance measured by the sensor.

Ok next is the RGB LED Control example. If we press the second button, the drawLedControl() custom function will be called only once for drawing the graphic of that example and the setLedColor() custom function will be repeatedly called. In this function we use the touch screen to set the values of the 3 sliders from 0 to 255. With the if statements we confine the area of each slider and get the X value of the slider. So the values of the X coordinate of each slider are from 38 to 310 pixels and we need to map these values into values from 0 to 255 which will be used as a PWM signal for lighting up the LED. If you need more details how the RGB LED works you can check my particular tutorialfor that. The rest of the code in this custom function is for drawing the sliders. Back in the loop section we only have the back button which also turns off the LED when pressed.

With a resistive touch screen, full color, and a 6 o"clock viewing angle the display is a great way to offer a full user experience. For more information about the display, including its detailed datasheet, check out the 320x240 3.5" Touch Screen Color TFT page.

The EVE chip really makes this TFT module really shine. EVE (embedded video engine) is a cool new technology from FTDI/Bridgetek that simplifies the process of displaying videos and text in an embedded project. All display, touch sensing, backlight, and audio features are controlled by the FTDI FT810 EVE which appears to host the MCU as a memory-mapped SPI device. The host MCU sends commands and data over the SPI protocol. The module can support both SPI and Quad-SPI.

With the increasing popularity of smartphones and tablet computers, touch has become one of the most common user interfaces encountered today. For our final project design we have converted a number of open-source C++ libraries to C in order to interface with an LCD and touch screen via the Atmel ATmega644 microcontroller. In addition to these new libraries we included three pieces of software: a free drawing mode, a game called Yellow which pays homage to the arcade game Pac-Man© developed by Namco in 1980, and the classic pencil and paper game Tic-Tac-Toe. Each piece of software serves to demonstrate some of the many capabilities of the LCD and touch screen combination.

Our goal for the final project was to provide the ECE 4760 course with an easy to setup and cheap touch screen interface to be used with the Atmel ATmega644 microcontroller. While researching ways to implement this, we found the tutorial for an Arduino-based touch screen provided by LadyAda. The resulting C libraries that we created for our device are based upon the open-source C++ libraries provided in the tutorial.

We opted to display images with an LCD screen rather than using a CRT monitor due to the onboard memory of LCD screens. This means that the entire screen does not need to be refreshed when displaying a new image. This severely reduces the amount of overhead required by the CPU to update the screen.

The touch screen used in our project uses resistance rather than capacitance to sense touch. Resistive touch screens consist of two plastic sheets covered with a resistive coating separated by a very thin gap of air. Each sheet contains vertical and horizontal lines that allow for precise location measurement when they come in contact with the lines of the opposite sheet. Resistive touch screens have a number of advantages and disadvantages when compared to capacitive screens. The major benefit for us, due to the limited budget of the project, is the reduced cost. Resistive screens are also highly resilient to liquid damage, and so are widely used in restaurants and hospitals where liquid hazards are more common. The major disadvantage is the need for pressure in order to sense touch. This means that the screen can be easily scratched if the user is using a sharp object as a stylus. For this reason, we recommend using a plastic protective cover to mitigate damage to the screen.

Many of the touch screen design patents that were filed during the 1970s and 1980s have since expired. Therefore, use of touch screens and different designs are no longer hindered by potential patent infringements. Software patents for touch screens such as multiple input sensing and page scrolling do exist, but our project does not implement any of these methods and so is not in violation of the owners" intellectual property.

The only hardware used for this project is the protoboard with an ATmega644 and a TFT LCD with resistive touch screen purchased from Adafruit. The LCD is a 2.8" 320x240 pixel resolution screen with an attached resistive touch screen. A built in linear regulator allows the screen to be used with either 5V or 3.3V logic. The wiring was done using a tutorial from LadyAda. The LCD screen has four control lines, eight data lines, a reset pin, a backlight pin, four pins for the touch screen, VCC and ground. VCC is connected to 5V from the MCU and ground is connected to MCU ground. The backlight should always be on, so it is simply connected to VCC. It is possible to use a PWM signal to dim the backlight, but that was not necessary for this project.

The four control signals are chip select, command/data, write, and read. They are connected to pin C0, pin C1, pin C2, and pin C3, respectively. The chip select pin is held low for the duration of register reads and writes and when a command or data is being written. Immediately following the read or write the pin is set back to high. The command/data pin is set low while writing a command or writing a register. It is kept high while writing data or reading data from the LCD. Once the command or register is finished being written, the command/data pin is set high again. When writing a register or data to the LCD, the data is written eight bits at a time. First, the eight data lines are set to their appropriate values using the write8 function. The write pin is set low and then immediately set high. If 16 bits of data need to be written, the write8 function is called again for the second 8 bits. The write pin is then toggled again to write the data. When reading data from the LCD, the read pin is toggled low and the data is read using the function read8. Once the bits are read, the read pin is set high again. If more bits need to be read, the read pin is set low and the next eight bits are read. Once finished, the read pin is set high again.

The reset pin is active high. It is connected to pin C4. It is left high for the duration of the operation of the LCD screen and is only set low when the program first starts in order to reset the LCD controller chip.

The four pins for the resistive touch screen are Y+, Y-, X+, and X-. Y+ is connected to pin A0, X- is connected to A1, X+ is connected to A2, and Y- is connected to A3. The X position on the touch is determined by setting Y+, Y-, and X- to ground and X+ to high. The voltage on Y+ is then read. To get the most accurate position, the 10-bit ADC result from the microcontroller is used. This requires reading the low bits first and then reading the high bits and concatenating the results. The final raw x position returned is the 10-bit ADC result subtracted from 1023. The Y position is determined in a similar way. This time the X+, X-, and Y- pins are grounded and the Y+ pin is set high. The voltage on the X- pin is then read.

As this is a resistive touch screen, the pressure must be measured to determine if someone is actually pressing on the screen. This is accomplished by setting X+, X-, and Y+ to ground and Y- high. First the voltage across X- is read, then the voltage across Y+. The pressure is determined using the following equation:

The software for this project is based off of the open-source libraries released by Adafruit. There are three libraries: TFTLCD, TouchScreen, and Adafruit_GFX. These libraries are written for Arduino microcontrollers and are in C++. Converting the libraries to C involved removing the classes and converting all of the functions to static functions. The libraries also contained a large number of Arduino specific functions. These functions were manually replaced with code that performs the same functionality, but that works on the ATmega644. The touch screen libraries were initially using PORTC as inputs to the ADC. However, since the input to the ADC on the ATmega644 is PORTA, this had to be changed. To see the mapping of all of the pins, refer to the hardware section. To make it easier for future students to use, the converted libraries are located in separate C files from the programs we wrote. The TFT LCD and Adafruit_GFX libraries have been combined into a single C file. A few additional functions were added to the libraries. These include the map function which is included in the Arduino software package. This function remaps a number from one range to another. Additional drawing functions added include the ability to draw half a circle and the ability to draw strings instead of individual characters. Comments were also added to the header files to allow the user to quickly understand what a function does and what the appropriate inputs are.

To showcase the capabilities of the touch screen and LCD, three simple programs were written. The first is a simple drawing program based off an example provided with the TFT LCD library. The second is a Tic-Tac-Toe game which allows the player to draw X"s on their turn. The final program is Yellow. Yellow is a simple demonstration that draws its inspiration from the popular arcade game Pac-Man©, created by Namco in 1980.

The menu was created by first filling the entire screen black using the fillScreen function. Then three grey boxes are drawn in the middle of the screen to make the "buttons" using the fillRect function. Next, the text is drawn using the drawString function. Once the menu is drawn, the program waits in an infinite while loop for user input. On each iteration of the loop the program gets the x and y position from the touch screen as well as the pressure.

Since we are using a resistive touch screen, a threshold pressure must be used in order to determine if the user is actually touching the screen or if it is just noise. The pressure values we considered were between 250 and 750. When a valid pressure is detected, the program then determines where the user is touching. The x and y values read from the touch screen must first be mapped to the resolution of the LCD to give a useful x-y position. This is done using the map function which is provided by Arduino. The program checks the x and y position against the boundaries of each "button." If the user touches within a "button," then the program calls the function to launch the appropriate program. As indicated by the message at the bottom of the menu, the user can return to the main menu from any program by simply touching the very top of the LCD screen. When the user touches the top of the LCD screen, the running program will detect this touch, return to main and the main menu will be redrawn. The positioning of the text and "buttons" on the menu was determined by estimating the appropriate position given the resolution of the screen and then doing a bit of guess and check positioning.

When the user clicks on the Free Draw button, the free_draw function is called. The program first clears the screen using the fillScreen function. The program then draws 6 colored squares across the top of the screen using the fillRect function. A second row of white squares are drawn under the color buttons also using the fillRect function. The white squares are then filled in with different icons to represent their function.

There are twenty-four different colors the user can choose from. These colors are split into four groups of six colors. When the free draw program starts, the first set of colors is displayed. The currently selected color is indicated by having a white border around it. When the user touches a different color, the pen color changes and the white border is moved to the selected color. The right two buttons on the screen allow the user to scroll between different sets of colors. The buttons are indicated by the "<" and ">" characters. Pressing one of these buttons changes the state which will then redraw the colored squares at the top of the screen to represent the colors available in the selected set. The colors in each set are generically defined at the top of the C file in the format SXCY where X represents the color set (0-3) and Y represents the color number in the set (1-6). Changing a particular color in the set is as simple as changing the defined value.

When any of the buttons are touched, the touched button will be momentarily be surrounded by a blue border to give the user visual feedback. This is achieved by using the drawRect function. This function is similar to the fillRect function except it only draws the border and therefore is much quicker to update.

Tic-Tac-ToeThe Tic-Tac-Toe program starts similarly by first using the fillScreen function to clear the screen. Next the program draws the text for the score keeping using the drawString function. Two grey "buttons" are drawn using the fillRect function so the user can change between easy and hard difficulty. Finally, the grid is drawn using the drawLine function.

Once the screen is initialized, the program waits for user input. To make a move, the user draws an "X" into a chosen square. The function detects an "X" when the user draws twice in the same square. When the program detects a touch in a square, it increments the touched variable. This variable is kept at a constant value until the user stops touching the screen; at which point touched is incremented again. When the user touches that same square again touched is incremented a third time. Finally, when the user stops touching the screen, the "X" is considered done. When a square is occupied, the player is prevented from drawing in that square. The game ends when the player wins, the CPU wins, or there are no more unused spaces left. If a win has occurred, a white line is drawn across the winning moves to indicate the victory. The squares are then cleared and the grid is redrawn. Finally, the appropriate score is updated and redrawn. For each game the player and CPU alternate who starts.

The game can be played with two difficulty modes: easy and hard. Easy mode is segmented into two versions. The first is when the CPU has the first move of the game. In this case, the CPU simply chooses a random unused space in the 3x3 grid. This makes beating the computer quite trivial, but serves as a nice introduction to using the touch screen to place a player"s moves. If the player starts the game, the CPU will make much more strategic moves. The CPU starts by seeking a victory in the next move. If this is not possible, it will determine if it can block the user from a victory. If neither of these is the case, then the CPU will choose a random unused space to occupy.

A similar, yet much larger, series of if-else statements were designed to implement the CPU’s moveset for when the human player starts the game. The image depicting this optimal mapping is shown below:

The final program is Yellow. The motivation behind Yellow was to show the capabilities and limitations of the LCD in terms of animation. Yellow is a limited-feature "game" that draws inspiration from Pac-Man©. Yellow must move around the level and eat all of the yellow circles. The user controls Yellow by swiping their finger or a stylus across the screen in the direction they want Yellow to move.

The level is drawn using the drawLine function. Placement of the lines involved a tedious combination of careful planning and guess and check work. Yellow himself is a two-step animation. The first step involves drawing a yellow circle using the fillCircle function. Then a black line is drawn for his mouth. On the second animation step, a black triangle is drawn so that is looks as if Yellow"s mouth is open. This two steps are repeated to create the animation. There is a 100 millisecond delay between steps, resulting in an effective animation rate of 10 frames per second. There are three Yellows on the screen. All of them are animated in the same way.

The Yellow character motion is done by incrementing the x or y position of the circle being drawn. If the direction is up or down, the y position is incremented by -5 or 5, respectively. If the direction is left or right, the x position is incremented by -5 or 5, respectively. The animation involves an additional step when Yellow is moving. The half circle on the opposite side of direction of motion must be removed from the screen. For example, if Yellow is moving to th right, the left half circle must be cleared. To do this, the fillCircle function is duplicated four times and modified to allow drawing of half circles. These functions are: drawTopHalfCircle, drawBottomHalfCircle, drawLeftHalfCircle and drawRightHalfCircle. Once the appropriate half of the circle is cleared, Yellow"s x or y position is incremented and he is redrawn in the new location.

On each animation step, the position of Yellow is checked against known legal positions. This prevents Yellow from going through walls. The animation of Yellow is also stopped when he can no longer move in his selected direction. In addition, his position is checked so that the user cannot select an invalid direction. In the center of the level, Yellow can warp from one side of the level to the other. This is done simply by checking the x position. If it is greater than 240, he warps to the left side of the screen. If it is less than 0, he warps to the right side of the screen.

The level is filled with yellow circles and the corner circles are slightly larger then the normal circles. These circles are all drawn using the fillCircle function. When Yellow moves over these circles, he draws over them. Once he passes through them, they are not redrawn, giving the impression that he has eaten the circle. As mentioned earlier, the direction of Yellow is changed by swiping the screen in the desired direction. This is done by noting the x-y position of where the user first touches the screen and then comparing it with the x-y position when the user stops touching the screen. The greater pixel change determines the direction Yellow will now move. To determine the final x-y position touched, the loop updates an x and y variable. When the user first touches the screen, a flag is set. When the user releases the screen, the flag sends the program into a conditional statement that will change the direction and the flag is reset.

The ghosts are drawn using a combination of circles and rectangles. First the top half of a circle is drawn. Then a rectangle is drawn for the body. Finally three bottom halves of circles are drawn for the "legs." The eyes are drawn by creating two white circles and then filling a single blue pixel for each pupil. The function drawPixel is used to draw individual pixels. The timeframe for the project, unfortunately, did not allow for the ghosts to be able to chase Yellow around the screen. However, to make the ghosts more interactive, several are drawn and their eyes will follow Yellow as he moves around the screen.

Two final touches added are a cherry and strawberry. The cherry is simply two overlapping circles with a stem drawn pixel by pixel. The strawberry is slightly more complicated. It required three overlapping circles. The green "hat" and the white stem as well as white dimples are drawn pixel by pixel using the drawPixel function.

long map(long x, long in_min, long in_max, long out_min, long out_max);Maps the value x from the range in_min, in_max to the range out_min, out_max. Used to convert the raw x,y postions to usable screen positions.

The screen is capable of displaying great 16-bit colors and offers an excellent resolution of 320x240. The only disappointment with the hardware is the lack of accuracy of the touch screen. If constant pressure is not consistently applied, the touch is not always detected. Playing with the pressure threshold helped, but did not completely fix the issue. Our other complaint is with the speed of the microcontroller. Even with a 20MHz crystal, the ATmega644 was not fast enough to do animation without noticeable flickering. The compiler optimization was required to be OS since we used almost all available space on the microcontroller. Compiling with O0 optimization resulted in over 199% usage of program memory space.

The touch screen is designed to be easily usable by people of all ages. There is a small learning curve to understanding how the screen reacts to the pressure applied, but once overcome, the device becomes trivial to use.

The outcome of our final project met the majority of our expectations. We successfully converted the C++ libraries provided byLadyAda to be used with the ATmega644 and have an easy to setup interface between the microcontroller and LCD/touch screen combination. We were also able to develop three different pieces of software to demonstrate the capabilities of the touch screen.

One expansion that could be explored for our free drawing program is being able to save a user"s drawings to memory. If the microcontroller and touch screen were packaged into a portable, battery-powered device, an easy to carry drawing pad could be created. With the ability to save drawings, the user could then upload them to a computer later where they could be further developed and refined.

As we used free open-source materials in our project, all of the files developed will also be open-source. Therefore, everything designed in this project, ranging from the libraries to the software demonstrations, is not meant for commercial sale and should be made freely and publicly available to anyone seeking to use them.

While working in the lab we made ourselves available to questions from any other students looking for help, and sought help from them and the TAs when necessary. It is our hope that our project may provide a simple and easy to use touch screen interface for the Atmel ATmega644 microcontrollers for use by future versions of ECE 4760 or by any other interested parties.

The C++ libraries provided byLadyAdathat were converted for this project are open-source Arduino libraries, licensed under a Creative Commons Attribution Share-Alike license. This license allows for both personal and commercial use of the works so long as appropriate reference is given and that the designed works are released with the same license. By uploading our source code to the ECE 4760 website we have made our code publicly and freely available to anyone who wishes to use it, so long as they give appropriate acknowledgement to us for our work.

The demonstration Yellow that we created for this project is our small-scale interpretation of the arcade video game Pac-Man© which was created and developed by Namco and published in the United States by Midway in 1980. However, because our design is only used as a demonstration and is not being used for commercial purposes, it is protected under United States copyright law by the fair use doctrine.

Operator can easily direct the device without specialized technical training or computer knowledge by combining touch screen to LCD panel, plasma EL or other display.