touch screen tft display with micro controller mcu free sample

The display is a critical component in every project, impacting the case, firmware, electrical design, user interface, and even battery life. For these reasons, and because it is the most visible component of your product, it must be approved by the mechanical design team, management and marketing.Before these teams can approve, they need to see it in action. But it can take days or weeks to connect a display to your platform, initialize it and build a code library able to create believable demonstrations. Meanwhile, the whole project is on hold.Our 8051 development kit / demonstration board can solve this problem. Use it to get the display seen, demonstrated and approved for your project.

ER-DBT028-4 is a microcontroller 8051(80C51) demonstration and development kit for 2.8 inch tft lcd display with ILI9341 controller.The kit includes MCU board controlled by STC12LE5A60S2,ISP(In System Programming) with USB port and cable to customize the demonstration that includes your own bitmap images,personalized fonts,symbols,icons and burn sketches,microSD card that is written graphic and text into it,the power adaptor,the adaptor board with various pitch dimension used to connect MCU board and display.Optional for 8080 8-bit,8080 16-bit parallel interface and 3-wire,4-wire serial interface.

Arduino has always helped to build projects easily and make them look more attractive.  Programming an LCD screen with touch screen option might sound as a complicated task, but the Arduino libraries and shields had made it really easy. In this project we will use a 2.4” Arduino TFT LCD screen to build our own Arduino Touch Screen calculator that could perform all basic calculations like Addition, Subtraction, Division and Multiplication.

Before we actually dive into the project it is important to know, how this 2.4” TFT LCD Module works and what are the types present in it. Let us take a look at the pinouts of this 2.4” TFT LCD screen module.

You can also find an SD card slot at the bottom of the module shown above, which can be used to load an SD card with bmp image files, and these images can be displayed in our TFT LCD screen using the Arduino Program.

Another important thing to note is your Interface IC. There are many types of TFT modules available in the market starting from the original Adafruit TFT LCD module to cheap Chinese clones. A program which works perfectly for your Adafruit shield might not work the same for Chinese breakout boards. So, it is very important to know which types of LCD display your are holding in hand. This detail has to be obtained from the vendor. If you are having a cheap clone like mine then it is most probably using the ili9341 driver IC.You can follow this TFT LCD interfacing with Arduino tutorial to try out some basic example programs and get comfortable with the LCD screen. Also check out our other TFT LCD projects with Arduino here:

If you planning to use the touch screen function of your TFT LCD module, then you have to calibrate it to make it work properly.  A LCD screen without calibration might work unlikely, for instance you might touch at one place and the TFT might respond for a touch at some other place. These calibrations results will not be similar for all boards and hence you are left on your own to do this.

The best way to calibrate is to use the calibration example program (comes with library) or use the serial monitor to detect your error.  However for this project since the size of buttons is large calibration should not be a big problem and I will also explain how you can calibrate your screen under the programming section below.

The 2.4” TFT LCD screen is a perfect Arduino Shield. You can directly push the LCD screen on top of the Arduino Uno and it will perfectly match with the pins and slid in through. However, as matters of safety cover the Programming terminal of your Arduino UNO with a small insulation tape, just in case if the terminal comes in contact with your TFT LCD screen. The LCD assembled on UNO will look something like this below.

We are using the SPFD5408 Library to get this arduino calculator code working. This is a modified library of Adafruit and can work seamlessly with our LCD TFT Module. You can check the complete program at the end of this Article.

Now, you can use the code below in your Arduino IDE and upload it to your Arduino UNO for the Touch Screen Calculator to work. Further down, I have explained the code into small segments.

As said earlier we need to calibrate the LCD screen to make it work as expected, but don’t worry the values given here are almost universal. The variables TS_MINX, TS_MINY, TS_MAXX, and TS_MAXY decide the calibration of the Screen. You can toy around them if you feel the calibration is not satisfactory.

As we know the TFT LCD screen can display a lot of colours, all these colours have to be entered in hex value. To make it more human readable we assign these values to a variable as shown below.

Okay now, we can get into the programming part. There are three sections involved in this program. One is creating a UI of a calculator with buttons and display. Then, detecting the buttons based on the users touch and finally calculating the results and display them. Let us get through them one by one.

This is where you can use a lot of your creativity to design the User Interface of calculator. I have simply made a basic layout of a calculator with 16 Buttons and one display unit. You have to construct the design just like you will draw something on MS paint. The libraries added will allow you to draw Lines, Rectangle, Circles, Chars, Strings and lot more of any preferred colour. You can understand the available functions from this article.

Another challenging task is detecting the user touch. Every time the user touches somewhere we will able to how where the X and Y position of the pixel he touched. This value can be displayed on the serial monitor using the println as shown below.

Since we have designed the box with width and height of 60 pixel each and have four Rows and for columns starting from (0,0). The position of each box can be predicted as shown in below picture.

Now, since we know the position of all the boxes. When a user touches anywhere we can predict where he has touched by comparing his (X,Y) values with the value for each box as shown below.

The final step is to calculate the result and display them on TFT LCD Screen. This arduino calculator can perform operation with 2 numbers only. These two numbers are named as variables “Num1” and “Num2”. The variable “Number” gives and takes value from Num1 and Num2 and also bears the result.

When a use presses a button, one digit is added to number. When another button is pressed, the previous one digit is multiplied with 10 and the new number is added with it. For example, if we press 8 and then press 5 and then press 7. Then first the variable will hold 8 then (8*10)+5=85 then (85*10)+7 = 857. So finally the variable will have the value 857 with it.

The working of this Arduino Touch Screen Calculator is simple. You have to upload the below given code on your Arduino and fire it up. You get the calculator displayed on your LCD screen.

You have to press the “C” to clear the value on screen each time after performing a calculation. Hope you understood the project and enjoyed building something similar. If you have any doubts feel free to post them on forums or on the comment section below. See you next time with another interesting project until then happy computing!!

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

The left two buttons will increase and decrease the size of the drawing pen. This is indicated by putting a small circle in the left square and a large circle in the right square. The circles were drawn using the fillCircle function. The middle two buttons are used as erasers. The left button will clear the entire drawing; it is indicated with an "X". This works by filling the drawing area with black using the fillRect function. The right button changes the pen to an eraser. This is indicated by an "E." The eraser simply turns the user"s pen black. The size of the eraser can be increased and decreased in the same way the pen size is changed.

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.

The reason the easy mode logic is parsed in this way is because we ran out of space to include the smarter moveset for both cases of either the user starting the game or the CPU starting the game. Including this more sophisticated logic for both cases, along with the rest of the software for our project, overran the limits of the instruction memory in the ATmega644. Because we wanted to keep the "perfect" AI used in hard mode intact, we decided to make easy mode significantly easier for the case when the CPU starts to decrease the total number of instructions.

The image shows the optimal move (represented by a red X) to counter each of the opposing player’s moves. To read the image, start with the outermost 3x3 grid. Based on the largest red X, the best first move to make is in the bottom right corner (or any of the corners, really, and then translating the elements of the grid as necessary). Then, go to the square that the opposing player chose to use. This square now represents the current 3x3 grid, and the red X shows where to place the optimal move. This process is repeated until the game ends in a tie or the CPU wins.

An integer variable, user_move, keeps track of which turn the human player is on. This variable, along with the elements of the user array, are used in the conditional expressions of the if-else statements. For example:

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.

The software for this project stressed the space available on the microcontroller for the program. The program takes up 98.6% of the instruction memory space. Most of this is the AI for Tic-Tac-Toe which is over 3000 lines of code in total.

void fillLeftHalfCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);Draws the left half of a circle with center x0,y0 with radius r in the specified color.

void fillTopHalfCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);Draws the top half of a circle with center x0,y0 with radius r in the specified color.

Draws the perimeter of a rectangle with rounded corners at x0,y0 in the specified color. The width is w, the height is h and the radius of the corners is r.

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.

Given more time, we would have liked to refine the included software demonstrations as our code consumes approximately 98% of the instruction memory in the microcontroller. We could have gone through the code to make it more efficient, reducing the instruction count and allowing us to implement some other ideas.

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.

Applicable StandardsSince we did not use a CRT monitor, we were not restricted to conforming with the NTSC or PAL standards for video output. No other standards were applicable to this project.

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.

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 next example is controlling an RGB LED using these three RGB sliders. For example if we start to slide the blue slider, the LED will light up in blue and increase the light as we would go to the maximum value. So the sliders can move from 0 to 255 and with their combination we can set any color to the RGB LED,  but just keep in mind that the LED cannot represent the colors that much accurate.

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.

As the code is a bit longer and for better understanding I will post the source code of the program in sections with description for each section. And at the end of this article I will post the complete source 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.

Next is the distance sensor button. First we need to set the color and then using the fillRoundRect() function we will draw the rounded rectangle. Then we will set the color back to white and using the drawRoundRect() function we will draw another rounded rectangle on top of the previous one, but this one will be without a fill so the overall appearance of the button looks like it has a frame. On top of the button we will print the text using the big font and the same background color as the fill of the button. The same procedure goes for the two other buttons.

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.

Here’s that function which uses the ultrasonic sensor to calculate the distance and print the values with SevenSegNum font in green color, either in centimeters or inches. If you need more details how the ultrasonic sensor works you can check my particular tutorialfor that. Back in the loop section we can see what happens when we press the select unit buttons as well as the back button.

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.

In order the code to work and compile you will have to include an addition “.c” file in the same directory with the Arduino sketch. This file is for the third game example and it’s a bitmap of the bird. For more details how this part of the code work  you can check my particular tutorial. Here you can download that file:

The display used in this project is a 1.8” TFT with 128x160 pixels of resolution. The microcontroller used is the SimpleLink MSP-432P401R from Texas Instruments. The TFT display will be interfaced with the microcontroller via a 4-wire serial connection and programmed using the Energia IDE platform.

In just a few steps the TFT can be wired and programmed to display up to 65K colors and 128x160 pixels of resolution. The display can be powered from the 3.3V output of the TI. Various wiring and interface options are available, from 3-4 wire serial, to 16/18-bit RGB and 8/9/16/18-bit MCU parallel. Additional features of this display are below. As always, check out the data sheet for the specs of this specific display. (datasheet)

First you will need to download the Energia IDE software if you have not already. This IDE was chosen because of the similarities is has to the Arduino IDE. This is beneficial because there is a large variety of open sourced examples that demonstrate the features of this display. An alternative programming IDE is Code Composer Studios, which is also compatible with the TI microcontroller. The IDE is up to preference. We will come back to this after the hardware is setup.

There are only a few connections that need to be made between the display for the 4-wire serial interface. The unused parallel data pins will be pinned to GND. Consult the datasheet for a detailed explanation of each pin assignment and their functions. The 4-wire serial data pins are connected to the TI specific serial inputs for the “Hardware SPI” programming option. While any pins can be used, their location must be defined in the “Software SPI” programming option.

Pin definitions and connection points are described in the table below. We will use the 4-wire serial interface for this example to save data pins on the TI. A more in-depth description of each of the pins can be found on thedatasheet. All unused pins are connected to ground, with the exception of the reset pin. This pin is optional to connect to the TI, if not used it needs to be pulled high.

The TI microcontroller has dedicated serial input pins specific to the board. The pin locations can be seen below and are described in the table for how they are connected to the display. These and other hardware pin definitions can be verified on the TI website.

After the screen is connected, and the TI microcontroller is plugged into the computer you will see the white LED backlight come on. That is a good sign that things are connected correctly.

Now it is time to program the microcontroller. For this example, we will be using the Energia IDE. An alternative platform that can be used is Code Composer Studios. I have found that Energia IDE is more practical for this example because of the compatibility with Arduino specific code with only minor changes.

We will need a program for the specific display chip “ILI9163”. For this example, I have created a modified version of a popular Adafruit example that demonstrates the various capabilities of the display. The example can be downloaded from Github here.

You will also need to include Adafruit’s GFX library which can be downloaded here. This is a popular library that contains examples and features for TFT displays that prove to be useful for this application.

You can now test any of these various programs that might be good reference for your specific project. There a lot of good examples in the Adafruit GFX library as a resource to test the various capabilities of the display.

This 1.8” TFT is a good option for displaying 16-bit 65K color images. This is compatible with most microcontrollers as it saves on-board memory. This is beneficial for storing bitmaps on flash memory since the screen is small and the 65K color bitmap image won’t take up all the on-board storage on the TI. This display also has a version with a resistive touch screen. This would be a good option for a digital push button. This may be further discussed in a future application note.

Buyers and others who are developing systems that incorporate FocusLCDs products (collectively, “Designers”) understand and agree that Designers remain responsible for using their independent analysis, evaluation and judgment in designing their applications and that Designers have full and exclusive responsibility to assure the safety of Designers" applications and compliance of their applications (and of all FocusLCDs products used in or for Designers’ applications) with all applicable regulations, laws and other applicable requirements.

The ST7789 TFT is a color display that uses SPI protocol. This display is an IPS display, it comes in different sizes (1.3″, 1.54″ …) but all of them should have the same resolution of 240×240 pixel.

The ST7789 display module shown in project circuit diagram has 7 pins: (from right to left): GND (ground), VCC, SCL (serial clock), SDA (serial data), RES (reset), DC (or D/C: data/command) and BLK (back light).

The ST7789 TFT display works with 3.3V only (power supply and control lines). The display module is supplied with 3.3V that comes from the AMS1117 3V3 voltage regulator, this regulator steps down the 5V into 3.3V (supplies the display controller with regulated 3V3).

To connect the PIC18F46K22 with the display module, I used voltage divider for each line. This means there are 4 voltage dividers. Each voltage divider consists of 2.2k and 3.3k resistors, this drops the 5V into 3V which is sufficient.

If the display module has a CS pin (Chip Select) then it should be connected to the PIC18F46K22 microcontroller through another voltage divider (for example connecting it to pin RD2).

In this project SPI1 module is used with SCK1 on pin RC3 (#18) and SDO1 (MOSI) on pin RC5 (#24). SCK1 and SDO1 pins of the PIC18F46K22 MCU are respectively connected to SCL and SDA pins of the ST7789 display module.

The default connection setting of the mikroC ST7789 TFT library is hardware SPI1 module (SPI1 module must be initialized before initiating the display). Instead of hardware SPI1 module, software SPI or hardware SPI2 module can be used.

If TFT data pin (TFT_DIN) and clock pin (TFT_SCK) are defined in the main code (before #include “ST7789.c”) then the library will automatically use software SPI.

If the display module has a CS pin uncomment its related lines (#define TFT_CS and #define TFT_CS_DIR) and connect it to RD2 pin of the microcontroller through voltage divider.