Introduction: Drawing a Car With Arduino TFT Color Touch Display With Complete Basic Tutorials

About: An electronics hobbyist

It's very nice when we come across a color touch display . It's so mesmerizing to create such wonderful graphics with imagination. Now the arduino boards came and made this thing quite easy. People round the world have created beautiful color touch screen displays compatible for arduino. You can create graphics,load bitmap images from SD card and can also enable the touch feature like your smartphone. But I saw many DIY makers have some difficulty while using this board. So I will teach you the basics of using this arduino UNO TFT color LCD display and will draw a Car with this and mine one is from mcufriend(you can search it on google) so that you can be able to use it in future days.

Step 1: Parts Needed

1 Arduino UNO

2 UNO supported TFT LCD Display from mcufriend

Step 2: Downloading Libraries

You need to download 3 libraries, MCUFRIEND_kbv, touchscreen.h,adafruit_GFX.h. I have provided the links here. You can simply download ,extract and paste in arduino libraries folder.

https://github.com/prenticedavid/MCUFRIEND_kbv

https://github.com/adafruit/Touch-Screen-Library

https://github.com/adafruit/Adafruit-GFX-Library

Step 3: Attaching the Board to Arduino

Connect the board to the arduino as in figure. It is a plug and Use device. Try to refer the shown picture.

Step 4: Understanding Some of the Most Used Functions

In the picture above I have demonstrated the use of few functions to draw and color.Read them carefully and try to understand. I have written the functions of drawing and coloring line, circle ,rectangle,printing text. Some functions like to rotate the screen and setting cursor are also required.

Now for landscape(rotating the screen by 1) mode the point (0,0) is located at the top left corner of screen if your arduino USB port is at the left side.maximum x coordinate is 320 and maximum y coordinate is 240( since resolution is 320*240). x value increases as we go right and y value increases as we go down. Now I have uploaded the code folder here. You see it and practice drawing lines in a new sketch and you will gradually know the orientations and you will feel easy. Then apply colors. Hex code of colors are declared at top.See them and use it. Refer to the given sketch at first.Practice is required. Refer to my code when required.

Always copy paste the yellow portion as given in the picture before starting a new sketch. That portion is also included the code attached here.After wards rotate(if required) , fillscreen(if required), and draw your own shapes.

You can also upload the graphicstest_kbv, in the examples of MCUFRIEND_kbv and test it.

Step 5: Drawing a Car

Now download the .ino file. It's a sketch of a car. It's a very basic practice of the above said functions. Some lines are commented since those are used for finding the positions. Those was actually the car body using lines not rectangle.

Circles were used for wheels,sun and tree tops.

Rectangle was used for setting the car body ,windows, tree bark,sky,grass.

Line was used for the outlines of circles and some rectangles.

Upload it and see the car on the display.

Note that I used some fixed colors.Different colors can be used but I have not declared all their Hex codes for the time being.

Try this on your own using different orientations as practice. Since practice is essential for using the display.


I have some commonly used Hex codes of colors in the picture above,Include them at the beginning where default colors are mentioned

Step 6: Finally Practice the Coding....

Now practice drawing lines then circle and then rectangle.for rectangle if you want to draw it below reference point,give your width and height negative values. You will gradually know the stuff as you use it. So practice it, that is most vital,refer to examples or my sketch but practice it then you can draw beautiful stuffs. I will come with more projects with touch functionality some days later.....Until then practice...