2.8 color ili9341 tft display free sample
To download. click the DOWNLOADS button in the top right corner, rename the uncompressed folder Adafruit_ILI9341. Check that the Adafruit_ILI9341 folder contains Adafruit_ILI9341.cpp and Adafruit_ILI9341.
Place the Adafruit_ILI9341 library folder your arduinosketchfolder/libraries/ folder. You may need to create the libraries subfolder if its your first library. Restart the IDE
The ILI9341 TFT module contains a display controller with the same name: ILI9341. It’s a color display that uses SPI interface protocol and requires 4 or 5 control pins, it’s low cost and easy to use.
The resolution of this TFT display is 240 x 320 which means it has 76800 pixels. This module works with 3.3V only and it doesn’t support 5V (not 5V tolerant).
The ILI9341 TFT display board which is shown in project circuit diagram has 14 pins, the first 9 pins are for the display and the other 5 pins are for the touch module.
So, the display part pins are numbered from 1 to 9 (from left to right): VCC (5V), GND (ground), CS (chip select), RST (reset), DC (or D/C: data/command), MOSI (or SDI), SCK (clock), BL (back light LED) and MISO (or SDO).
The first library is a driver for the ILI9341 TFT display which can be installed from Arduino IDE library manager (Sketch —> Include Library —> Manage Libraries …, in the search box write “ili9341” and choose the one from Adafruit).
The ILI9341 TFT display is connected to NodeMCU hardware SPI module pins (clock and data), the other pins which are: CS (chip select), RST (reset) and DC (data/command) are defined as shown below:
Full Arduino code:The following Arduino code is from Adafruit ILI9341 library (graphicstest.ino) with some modifications in order to work with the above circuit diagram.
Spice up your Arduino project with a beautiful large touchscreen display shield with built in microSD card connection. This TFT display is big (2.8" diagonal) bright (4 white-LED backlight) and colorful (18-bit 262,000 different shades)! 240x320 pixels with individual pixel control. As a bonus, this display has a optional resistive touch panel with controller XPT2046 attached by default and a optional capacitive touch panel with controller FT6206 attached by default, so you can detect finger presses anywhere on the screen and doesn"t require pressing down on the screen with a stylus and has nice glossy glass cover.
This display shield has a controller built into it with RAM buffering, so that almost no work is done by the microcontroller. You can connect more sensors, buttons and LEDs.
Spice up your Arduino project with a beautiful large touchscreen display shield with built in microSD card connection. This IPS TFT display is big (2.8" diagonal) bright (4 white-LED backlight) and colorful (18-bit 262,000 different shades)! 240x320 pixels with individual pixel control. As a bonus, this display has a optional resistive touch panel with controller XPT2046 attached by default and a optional capacitive touch panel with controller FT6206 attached by default, so you can detect finger presses anywhere on the screen and doesn"t require pressing down on the screen with a stylus and has nice glossy glass cover.
This display shield has a controller built into it with RAM buffering, so that almost no work is done by the microcontroller. You can connect more sensors, buttons and LEDs.
The LCD I am using is a 2.8″ TFT LCD with SPI communication. I also have another 16-bit Parallel TFT LCD but it will be another story for another time. For this post, let’s focus on how to display what you want on the 2.8″ LCD. You can find all details about this LCD from this page:http://www.lcdwiki.com/2.8inch_SPI_Module_ILI9341_SKU:MSP2807
This LCD uses ILI9341 as a single-chip SOC driver for a display with a resolution of 240×320. More details can be found in the official document of ILI9341. But the most important thing is that we have to establish astart sequencein order for this LCD to work. The “start sequence” includes many other sequences which are also defined in the datasheet. Each sequence starts when you send a command to ILI9341 and then some parameters to follow up. This sequence is applied for all communication between MCU and ILI9341.
For this project, I recommend using theSystem Workbench for STM32for coding and building the code. After installing and open the program, go to the source code you have just downloaded and double click the.cprojectfile. It will automatically be open in your IDE. Then build the program by right click on the folder you just open (TFTLCD) and chooseBuild Project. Wait for it to finish and upload it to the board by right clicking the folder, choose Run As and then clickAc6 STM32C/C++ Application. And that’s it for running the example.
The most important library for this project is obviously the ILI9341_Driver. This driver is built from the provided source code in the lcdwiki.com page. I only choose the part that we need to use the most in many applications like writing string, displaying image and drawing symbols. Another library from the wiki page is the TOUCH library. Most of the libraries I got from the Internet were not working properly due to some adjustments to the original one.
To draw symbols or even display images, we need a “byte array” of that image or symbol. As an illustration, to display an image from a game called Transistor, I have a “byte array” of that image stored in a file named transistor.h. You can find this file in the link below. Then, I draw each pixel from the image to the LCD by adding the code in the Display_Picture() function in the Display folder.void Display_Picture()
The above example is just only for displaying black and white image. In order to show a color image, we need to a little bit different. First, go tothis websiteto generate the array of the colour image. Remember to change your size to 320×240 and choose the 65K color option. Because it now takes up two bytes for one pixel, we need to send two bytes at once. You can check the Display_Color_Picture() function in the Display folder.void Display_Color_Picture()
This article is part of our series on the different types of displaysthat you can use with Arduino, so if you’re weighing up the options, then do check out our guide to the best displays to use with Arduino.
The TFT displays come in two variants: With touch and without touch. The modules with touch come with an additional layer of transparent touch screen.
The pinouts for the display and the SD card remain the same. Only pinouts related to the touch sensor will change depending on whether the module has a resistive or capacitive type touch sensor.
I am confident that the article was easy to follow. I have used TFT display with touch for an HMI project which controls the thermostat in my hobby projects to learn more about the OT system (open Therm)
Add some jazz & pizazz to your project with a color touchscreen LCD. This TFT display is big (2.8" diagonal) bright (4 white-LED backlight) and colorful! 240x320 pixels with individual RGB pixel control, this has way more resolution than a black and white 128x64 display. As a bonus, this display has a resistive touchscreen attached to it already, so you can detect finger presses anywhere on the screen.
This display has a controller built into it with RAM buffering, so that almost no work is done by the microcontroller. The display can be used in two modes: 8-bit and SPI. For 8-bit mode, you"ll need 8 digital data lines and 4 or 5 digital control lines to read and write to the display (12 lines total). SPI mode requires only 5 pins total (SPI data in, data out, clock, select, and d/c) but is slower than 8-bit mode. In addition, 4 pins are required for the touch screen (2 digital, 2 analog)
Adafruit wrapped up this display into an easy-to-use breakout board, with SPI connections on one end and 8-bit on the other. Both are 3-5V compliant with high-speed level shifters so you can use with any microcontroller. If you"re going with SPI mode, you can also take advantage of the onboard MicroSD card socket to display images. (microSD card not included, but any will 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.
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.
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.
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.
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.
Displaying a custom image or graphic on a LCD display is a very useful task as displays are now a premium way of providing feedback to users on any project. With this functionality, we can build projects that display our own logo, or display images that help users better understand a particular task the project is performing, providing an all-round improved User Experience (UX) for your Arduino or ESP8266 based project. Today’s tutorial will focus on how you can display graphics on most Arduino compatible displays.
The procedure described in this tutorial works with all color displays supported by Adafruit’s GFX library and also works for displays supported by the TFTLCD library from Adafruit with little modification. Some of the displays on which this procedure works include:
While these are the displays we have, and on which this tutorial was tested, we are confident it will work perfectly fine with most of the other Arduino compatible displays.
For each of the displays mentioned above, we have covered in past how to program and connect them to Arduino. You should check those tutorials, as they will give you the necessary background knowledge on how each of these displays works.
For this tutorial, we will use the 2.8″ ILI9325 TFT Display which offers a resolution of 320 x 340 pixels and we will display a bitmap image of a car.
As usual, each of the components listed above can be bought from the links attached to them. While having all of the displays listed above may be useful, you can use just one of them for this tutorial.
To demonstrate how things work, we will use the 2.8″ TFT Display. The 2.8″ TFT display comes as a shield which plugs directly into the Arduino UNO as shown in the image below.
Not all Arduino displays are available as shields, so when working with any of them, connect the display as you would when displaying text (we recommend following the detailed tutorial for the display type you use of the above list). This means no special connection is required to display graphics.
Before an image is displayed on any of the Arduino screens, it needs to be converted to a C compatible hex file and that can only happen when the image is in bitmap form. Thus, our first task is to create a bitmap version of the graphics to be displayed or convert the existing image to a bitmap file. There are several tools that can be used for creation/conversion of bitmap images including, Corel Draw and Paint.net, but for this tutorial, we will use the Paint.net.
Our demo graphics today will be a car. We will create the car on a black background and use a white fill so it’s easy for us to change the color later on.
The resolution of the graphics created should be smaller than the resolution of your display to ensure the graphics fit properly on the display. For this example, the resolution of the display is 320 x 340, thus the resolution of the graphics was set to195 x 146 pixels.
Your graphics could also include some text. Just ensure the background is black and the fill color is white if you plan to change the color within your Arduino code.
With the graphics done, save both files as .bmp with 24bits color.It is important to keep in mind that large bitmaps use up a lot of memory and may prevent your code from running properly so always keep the bitmaps as small as possible.
Image2Code is an easy-to-use, small Java utility to convert images into a byte array that can be used as a bitmap on displays that are compatible with the Adafruit-GFX or Adafruit TFTLCD (with little modification) library.
With this done, we are now ready to write the code. Do note that this procedure is the same for all kind of displays and all kind of graphics. Convert the graphics to a bitmap file and use the Img2code utility to convert it into a hex file which can then be used in your Arduino code.
To reduce the amount of code, and stress involved in displaying the graphics, we will use two wonderful libraries; The GFX library and the TFTLCD library from Adafruit.
The GFX library, among several other useful functions, has a function called drawBitmap(), which enables the display of a monochrome bitmap image on the display. This function allows the upload of monochrome only (single color) graphics, but this can be overcome by changing the color of the bitmap using some code.
The Adafruit libraries do not support all of the displays but there are several modifications of the libraries on the internet for more displays. If you are unable to find a modified version of the library suitable for your the display, all you need do is copy the code of the drawBitmap() function from the GFX library and paste it in the Arduino sketch for your project such that it becomes a user-defined function.
The first two are thex and y coordinates of a point on the screen where we want the image to be displayed. The next argument is the array in which the bitmap is loaded in our code, in this case, it will be the name of the car and the text array located in the graphics.c file. The next two arguments are the width and height of the bitmap in pixels, in other words, the resolution of the image. The last argument is the color of the bitmap, we can use any color we like. The bitmap data must be located in program memory since Arduino has a limited amount of RAM memory available.
As usual, we start writing the sketch by including the libraries required. For this procedure, we will use the TFTLCD library alone, since we are assuming you are using a display that is not supported by the GFX library.
Next, we specify the name of the graphics to be displayed; car and title. At this stage, you should have added the bit array for these two bitmaps in the graphics.c file and the file should be placed in the same folder as the Arduino sketch.
With that done, we proceed to the void loop function, under the loop function, we call the drawbitmap() function to display the car and the text bitmap using different colors.
The last section of the code is the drawBitmap function itself, as earlier mentioned, to use the drawbitmap() function with the Adafruit TFTLCD library, we need to copy the function’s code and paste into the Arduino sketch.
Plug in your screen as shown above. If you are using any other display, connect it as shown in the corresponding linked tutorial. With the schematics in place, connect the Arduino board to your PC and upload the code. Don’t forget the graphics file needs to be in the same folder as the Arduino sketch.
That’s it for this tutorial guys. The procedure is the same for all kinds of Arduino compatible displays. If you get stuck while trying to replicate this using any other display, feel free to reach out to me via the comment sections below.
Welcome to another Arduino video tutorial! In this video, we are going to take a first look at this 2.8” Color TFT Touch display! It is a big, low-cost touch display which is very easy to use. Without any further delay, let’s get started.
Today we are going to learn how to drive the 2.8” Touch display with the ILI9341 driver with an Arduino Uno and an ESP32 board. First of all, let’s take a close look at the display itself. The display is big, and it offers a resolution of 320×240 pixels. Compared to one of my favorites displays, the 1.8” Color TFT display you can see it a lot larger. The screen also offers touch functionality which is an added bonus and an SD card slot at the back. It uses the SPI interface, so the connection with the Arduino is very straightforward. The cost of the display is relatively low; it costs around 11$ which in my opinion is a fair price for what this display offers.
Another thing I like about this display is that it does not come as a shield like the touch display we were using so far. This way, we can connect the display to any board, the Arduino Pro mini, the STM32, the ESP8266 and the ESP32. This is very important because we now have a low-cost display that we can use with every board. Until now, the only touch display we could use with these boards were the Nextion displays which are more expensive, and to be honest even though I use them from time to time, I don’t really like them.
Now let’s see how to connect this display to an Arduino Uno. The first 9 pins of the display are the power pins and the SPI pins. So, if we connect only the first 9 pins of the display, we can use it as a regular display without touch functionality. The display uses 3.3-volt logic levels and unfortunately, it is not 5V tolerant. So, we need to use some 10K resistors if we want to drive it with a board that uses 5V logic levels like the Arduino Uno.
As you can see, we have connected Vcc to 5V of the Arduino Uno and the SPI pins of the display to the hardware SPI pins of the Arduino Uno. Let’s load a demo sketch now. As you can the 8bit Arduino Uno with only 2KBs of RAM can drive this big display! But as you can see it is very slow in updating the screen. It takes many seconds to update the whole screen which is a pity. It can display text with more speed though. It is obvious that the Arduino Uno is not enough to drive a display with such a high resolution. It is obvious that we need a more powerful board to drive this display effectively.
But can we build a useful project using this display? I wanted to find out, so I decided to build a simple real-time clock and temperature monitor. I added a DS3231 RTC module, and I modified the code of a previous project to use the new bigger display. You can find the code of the project in a link in the description below. The result is not that bad as the demo sketch. The project works fine, but of course, there is a small delay when the values on the screen are updated. In my opinion, this project demonstrates that we can use this display with an 8bit Arduino only on very simple projects that update the screen rarely.
Before moving to the more capable ESP32 board, let’s try to use the touch functionality of the display. We connect the remaining 5 pins according to this schematic diagram, and we are ready to upload the second sketch to the board.
To my surprise, the touch demo works relatively fast! It is a simple sketch in which we draw on the screen using this stylus. I think this result is impressive if we take into consideration that this display is driven by an 8bit board.
Let’s now connect the display to an ESP32 board. If you are not familiar with it, the ESP32 is a very fast and inexpensive Arduino compatible board. I prepared a detailed review of this board a few months ago; you can watch it by clicking on the card here. Since the ESP32 board uses 3.3V logic levels, we don’t need any resistors to drive the display. So, if we don’t need the touch functionality, we connect the display according to this schematic diagram.
If we upload the same sketch that used before on the Arduino Uno, we can see the ESP32 is extremely fast. It can update the display, draw graphics and complete the demo sketch way faster than the Arduino Uno.
Unfortunately, the touch demo is not compatible with the ESP32 board yet, so I didn’t have the chance to try the touch functionality of the display. I will prepare another video about the ESP32 board and this display soon. First I want to test more libraries and find a touch library that works with the ESP32 chip and build a simple demo sketch. Stay tuned.
Let’s now see the software side of the project. In order to use this display with Arduino, we need to install the Adafruit ILI9341 driver and the familiar Adafruit GFX library if we don’t use the touch functionality. If we want to use the touch functionality, we have also to install the URtouch library. You can find links to all the libraries needed along with the code of the demo programs I showed you in the description below.
As a final thought, I believe this display is a great display to use for our future projects. I think I am going to use this display a lot with the ESP32, and STM32 boards because it is easy to use, offers touch functionality and it is relatively inexpensive. I am going to build a complete project around this display soon, to test it even more, and see what is capable of.
I would love to hear your opinion on this display. Have you ever used it in your projects, or are you going o use it in the future? Do you have any project ideas that we could build using this display? Please post your comments below and don’t forget to like the video if you find it useful. Thanks!