gui for tft display arduino quotation

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:

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

Displays are one of the best ways to provide feedback to users of a particular device or project and often the bigger the display, the better. For today’s tutorial, we will look on how to use the relatively big, low cost, ILI9481 based, 3.5″ Color TFT display with Arduino.

This 3.5″ color TFT display as mentioned above, is based on the ILI9481 TFT display driver. The module offers a resolution of 480×320 pixels and comes with an SD card slot through which an SD card loaded with graphics and UI can be attached to the display. The module is also pre-soldered with pins for easy mount (like a shield) on either of the Arduino Mega and Uno, which is nice since there are not many big TFT displays that work with the Arduino Uno.

The module is compatible with either of the Arduino Uno or the Arduino Mega, so feel free to choose between them or test with both. As usual, these components can be bought via the links attached to them.

One of the good things about this module is the ease with which it can be connected to either of the Arduino Mega or Uno. For this tutorial, we will use the Arduino Uno, since the module comes as a shield with pins soldered to match the Uno’s pinout. All we need to do is snap it onto the top of the Arduino Uno as shown in the image below, thus no wiring required.

This ease of using the module mentioned above is, however, one of the few downsides of the display. If we do not use the attached SD card slot, we will be left with 6 digital and one analog pin as the module use the majority of the Arduino pins. When we use the SD card part of the display, we will be left with just 2 digital and one analog pin which at times limits the kind of project in which we can use this display. This is one of the reasons while the compatibility of this display with the Arduino Mega is such a good news, as the “Mega” offers more digital and analog pins to work with, so when you need extra pins, and size is not an issue, use the Mega.

To easily write code to use this display, we will use the GFX and TFT LCD libraries from “Adafruit” which can be downloaded here. With the library installed we can easily navigate through the examples that come with it and upload them to our setup to see the display in action. By studying these examples, one could easily learn how to use this display. However, I have compiled some of the most important functions for the display of text and graphics into an Arduino sketch for the sake of this tutorial. The complete sketch is attached in a zip file under the download section of this tutorial.

As usual, we will do a quick run through of the code and we start by including the libraries which we will use for the project, in this case, the Adafruit GFX and TFT LCD libraries.

With this done, the Void Setup() function is next. We start the function by issuing atft.reset() command to reset the LCD to default configurations. Next, we specify the type of the LCD we are using via the LCD.begin function and set the rotation of the TFT as desired. We proceed to fill the screen with different colors and display different kind of text using diverse color (via the tft.SetTextColor() function) and font size (via the tft.setTextSize() function).

Next is the void loop() function. Here we basically create a UI to display the youtube subscribe button, using some of the same functions we used under the void setup() function.

The Adafruit library helps reduce the amount of work one needs to do while developing the code for this display, leaving the quality of the user interface to the limitations of the creativity and imagination of the person writing the code.

That’s it for this tutorial guys, thanks for reading. If you made some cool projects based on this or you just want to ask questions about this tutorial, feel free to reach out via the comment section below.

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.

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.

Paste the bit array in the graphics.c file and save. Since we have two graphics (the car and the text), You can paste their data array in the same file. check the graphics.c file attached to the zip file, under the download section to understand how to do this. Don’t forget to declare the data type as “const unsigned char“, add PROGEM in front of it and include the avr/pgmspace.h header file as shown in the image below.  This instructs the code to store the graphics data in the program memory of the Arduino.

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.

Crystalfontz has a wide variety of LCD display products. Including ePaper, OLED, TFT and accessories. Watch our LCD videos below to see our display solutions in action.

If there is a Crystalfontz module that you would like to see a video demonstration of, please send a request to our support team, and we will do our best to create one for you.

Not sure how the difference between transflective and transmissive affects sunlight readability? Here is a video that takes you from pitch black to full sunlight, showing how the transflective CFAF480640A-035T compares to a transmissive TFT display module.

In this video, we"re demonstrating driving a 800x480 5" TFT with an Seeeduino (Arduino UNO Clone with 3.3v / 5v switch) and the help of our CFA10100 EVE accelerated board.

Awesome little transparent OLED display. Its a 128x56 pixels and 1.51 inch diagonal. Super-bright, monochrome (light blue). We powered it up with a Seeeduino for this demonstration.

This is a quick video showing our new 1.3 inch TFT LCD. This is a small, full-color TFT. It"s controlled via 4-wire SPI. It has a ST7789H2 controller. This display runs off a single 3.3v supply which controls the logic and backlight.

Ever wonder what will happen if you submerge an OLED display in water? Well we tried it, we also tried coating the components with various sealants to see if we can help protect them in high humidity, or high-water level scenarios.

This is a 2.4" IPS TFT designed for embedded systems. This wide viewing angle IPS display can be used in any orientation--landscape or portrait. The backlight is 850 nits (cd/m2) so it can be used in most lighting conditions.

This is a Capacitive Touch 2.4" IPS TFT designed for embedded systems. This wide viewing angle IPS display can be used in any orientation--landscape or portrait. The backlight is 730 nits (cd/m2) so it can be used in most lighting conditions.

Check out this small, low power transflective LCD display. Available in many options including with and without a backlight, breakout board, or a complete development kit.

@ChatIbex Sorry, but my guidance above still holds. You need to follow it step by step 1 through 4. Your Display is 8-bit parallel interface which is only supported by

Either load this library from inside Arduino IDE or download by clicking link above (the blue letters MCUFRIEND_kbv). Get the MCUFREIND_kbv samples to work and only then worry about GUIslice. Trouble? Ask for help on the MCUFRIEND_kbv issues part of David Prentice"s GITHUB repository.

OverviewNextion is a Human Machine Interface （HMI） solution combining an onboard processor and memory touch display with Nextion Editor software for HMI GUI project development. Using the NEXTION Editor software, you can quickly develop the HMI GUI by drag-and-drop components (graphics, text, button, slider, etc.) and ASCII text-based instructions for coding how components interact at the display side. Nextion HMI display connects to peripheral MCU via TTL Serial (5V, TX, RX ,GND) to provide event notifications that peripheral MCU can act on, the peripheral MCU can easily update progress, and status back to Nextion display utilizing simple ASCII text-based instructions. Comparing with Basic Series, the Discovery Series has a better MCU performance, the same functionalities as Basic, and Lower Price. That’s Nextion Discovery Series Products.

The 18bit TFT color screen Arduino shield has 128x160 color pixels. It is not a CSTN screen as in the LCD color screen shield, but a TFT, that has better refreshment rate and more beautiful colors (18bits = 262 144 colors!).

The 18bits TFT color screen Arduino shield contains a 3V/5V voltage regulator so you can use it with 5V Arduino board even if the TFT driver (ST7735R) asks for 3.3V. It uses only four pins to communicate with the Arduino board (pins 13, 11, 10, 8).

There is also a 5 positions joystick: up, down, left, right, select. It will be very useful if you wish to display a menu on the TFT screen. The joystick of the 18bits TFT color screen Arduino shield uses the analog pin 3. A bnch of resistors allows to determine the position of the joystick from the analog voltage.

And, as there was some room left, Adafruit aded a microSD slot on the 18bits TFT color screen Arduino shield to allow you to save images on it. It uses the 12 and 4 digital pins.

A very complete user"s manual will show you how to solder the connectors, where to download the graphical libraries for Arduino and how to use the 18bits TFT color screen shield for Arduino.

The editor claims to make the design of the GUI on a Nextion display very easy and fast because it uses a What You See Is What You Get editor. Well my initial opinion about the editor was not the best. The Nextion editor seems to be in an early stage of development and the documentation is almost inexistent. At first I was very disappointed, the software looks so primitive. After spending some time trying some things I managed to build something useful, a simple Weather Station. It consists of only one page, in which we display the temperature and the humidity we get from a DHT22 sensor using Arduino. Let’s see how to build it from the beginning. The procedure will be easier to follow if you watch the attached video as well.

At first, let’s create the Graphical User Interface for the display. We create a new project and we save it to the disk. Next, we select the display we are using, and the orientation of the display. It took me about 10 minutes to find out how to change the orientation of the display. The user experience of this software needs so many improvements. Now, we add the background image as a recourse to the project. Next from the Tools Menu we open the Font Generator. We generate a font we save it to the disk and we add it in the project. From the toolbox we enter a picture to the project page and we select the background picture from the recourses. That’s it, our background is ready. Now we are going to add a text box for the temperature. We name the new text object as temperature, we set a sample text, we set the color of the text, the text alignment and the background color. We follow the same procedure one more time in order to make the humidity textbox.

We also create two more textboxes, one the degrees Celsius symbol and one with the percent symbol. These two textboxes won’t be updated. If we now press the Debug Button we can see how the interface will look in reality. But how can we change the values of the textboxes with the readings from the sensor? We need to send some commands to the display from the Arduino. We can emulate that from the debug window here. So, if we send the command temperature.txt=”30.5” to the Nextion display the textbox with the name temperature will be updated with the new value. We can do the same with the other textbox which is named humidity. Cool. It is so easy after all.

The Nextion code is ready, let’s load it on the display. We go to File -> Open Build Folder and we copy the WeatherStation.tft file. We paste this file in an empty micro sd card. We then place this SD card in the sd card slot at the back of the Nextion Display.If we now power up the display, it will update the code that the display is executing. If we now remove the SD card and power up the display one more time, the new graphical user interface will appear. Of course the values won’t change since we haven’t connected the Arduino yet. Now we are ready to build the Arduino part of the project.

I refer to the TFT, there are some that have a chip dedicated to pixel management, it is generally incorporated into the PCB in addition to the screen"s controller chip itself. The advantage is that you can implement complex graphical environments, which take the burden off the MCU.

These screens are called HMI, there are several that could potentially be used in the teensy 4 or teensy 4.1, however you have to work in the libraries, since almost all of them are focused on AVR or ARM-STM32 or have their own environment programming, which has nothing to do with the arduino IDE.

Other examples are: TFT SmartGPU 2, which implement the graphics controller with a STM32F103 chip, or the 4DSystems Diablo or Picasso graphics chip, Nextion TFT, Stone TFT, etc. They are not cheap TFTs, and I have not seen at the moment any with the resolution you are looking for.