arduino tft display game free sample

In this Arduino Project we will make a cool Arduino Game, actually a replica of the popular Flappy Bird game for smartphones, using an Arduino and a TFT Touch Screen. You can learn how it works by watching the following video or read the written text below.

The game is quite simple but interesting and addictive. Using the touch screen we control the bird and try to avoid the moving pillars which speed increase as we progress. Also the game can store your highest score even if you unplug the power.[/column]

In the previous tutorial (Arduino TFT Tutorial) we learned in details how to use TFT Touch Screens with an Arduino and we left the game example to be explained in this tutorial. So now, just like in the previous tutorial, we will step by step explain the code behind this Arduino Game.

We will use the UTFT and URTouch libraries made by Henning Karlsen. You can download these libraries from his website, www.RinkyDinkElectronics.com. Also we will use the EEPROM library for storing the highest score in the EEPROM. The EEPROM is a memory which can store data even when the board is turned off.

After we have included the libraries we need to create the UTFT and URTouch objects as well as define the variables needed for the game. In the setup section we need to initiate the display and the touch, read the highest score from the EEPROM and initiate the game using the initiateGame() custom function.

So with the initiateGame() custom function we will draw the initial state of the game and here’s how we will do that. First we need to clear the screen, then draw the blue background, draw the bottom section, add the text and call the drawBird() custom function to draw the bird.  After this we need a while loop which will prevent the game to start until we tap the screen. So while we are at this state, if we press the upper right corner we can reset the highest score to zero and if we press anywhere else on the screen we will get out of the while loop and get into the main loop of the code which will start the game.

In the main loop section we have the xP variable which is used for drawing the pillars, as well as the yP variable. At the beginning, the xP variable has the value of 319 as the size of the screen and the yP variable has the value of 100 which is the height of the first pillar. Each iteration the value of the xP variable is decreased by the value of the movingRate variable which at the beginning has the value of 3 and as we progress the game it increases.

Here’s the working principle of game: we have 50 pixels wide pillars which move from right to left and every next pillar has a different random height. In order to make them moving, logically, after each iteration we need to clear the screen and redraw the graphic with the pillars at their new position. However, we cannot do that because of the low refresh rate of the screen, which would cause flickering of the graphics. In order to activate all of its pixels the screen needs a bit more time so therefore we will have to improvise and redraw just those things that are moving.

Back in the loop section we have the yB variable which is the y position of the bird and it depends on the falling rate which after each iteration is increased and in that way we get the effect of acceleration or gravity. Also, here we check for collisions and use the if statements to confine the bird so that if it hit the top, the ground or the pillars the game will over.

Back in the loop we can see that after the pillar has passed through the screen the xP variable will be reset to 319, yP will get new random value from 20 to 100 for the height of the pillars and the score will increase by one. With the next if statement we control the bird. If we tap the screen we will set the falling rate to negative what will make the bird jump and the else if statement will not allow to happen that if we just hold the screen. The last if statement is for the difficulty of the game and it increase the moving rate of the pillars after each fine points.

Ok what’s left now is to see how the gameOver() custom function works. After a delay of one second it will clear the screen, print the score and some text, if score is higher than the highest score it will write it down into the EEPROM, it will reset all variables to their starting position values and at the end it will call the initiateGame() custom function to restart the game.

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 third example is a game. Actually it’s a replica of the popular Flappy Bird game for smartphones. We can play the game using the push button or even using the touch screen itself.

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

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

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

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

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.

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:

In this tutorial we are going to see how to make your own Arduino Dice Roller with TFT 2.4 Inch Display (MCUFriend), which will show random numbers from 1 to 6 every time you press play button. So let’s get started.

You may get errors while uploading the code, the main cause of getting error is, your LCD is connected to Arduino. So make sure you remove LCD from arduino and after uploading the code you can place LCD on Arduino. If you are still getting the errors, unplug the USB and then again plug the cable.

This new library is a standalone library that contains the TFT driver as well as the graphics functions and fonts that were in the GFX library. This library has significant performance improvements when used with an UNO (or ATmega328 based Arduino) and MEGA.

Examples are included with the library, including graphics test programs. The example sketch TFT_Rainbow_one shows different ways of using the font support functions. This library now supports the "print" library so the formatting features of the "print" library can be used, for example to print to the TFT in Hexadecimal, for example:

To use the F_AS_T performance option the ILI9341 based display must be connected to an MEGA as follows:MEGA +5V to display pin 1 (VCC) and pin 8 (LED) UNO 0V (GND) to display pin 2 (GND)

TFT_ILI9341 library updated on 1st July 2015 to version 12, this latest version is attached here to step 8:Minor bug when rendering letter "T" in font 4 without background fixed

By these two functions, You can find out the resolution of the display. Just add them to the code and put the outputs in a uint16_t variable. Then read it from the Serial port by Serial.println();. First add Serial.begin(9600); in setup().

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.

I wanted to see how far I could push the Cortex M0+ of the Arduino Zero. I think it is a balanced microcontroller: not too limited like an AVR, not too fancy, like a Cortex M4 (which has enough computing power even to run Doom).

Even if 2D platform games might seem outdated, they still require a good amount of memory, and if no hardware 2D acceleration is present, all the data must be processed by the CPU or, if present, by the DMA.

However I have recently realized that both the display and the ATSAMD21 can work at 24 MHz! That"s a good overclock amount!  (still the CPU is not overclocked!)

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

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.

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.

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.

For the hard mode of Tic-Tac-Toe, we have implemented a computer opponent which will always choose the correct move. This results in the game ending in a tie or a computer victory. The logic is implemented in two different state tables: one for when the CPU player makes the first move and a second for when the human player makes the first move. For the first table we used the following image from Brent Yorgey:

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.

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

This sequence of code says that if the human player is at their second move, and they occupied the upper left corner of the game grid on their first move, then the CPU should occupy the middle of the grid. Statements such as these are iterated until every possible game scenario is covered. The full code can be viewed in the Appendix.

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

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

Thank you to Joao Diogo Falcao (jl2782) for ideas on how to improve the Yellow game. Finally, we would like to thank Dr. David R. Schneider (drs44) and the Cornell Cup team for allowing us to use their lab space and borrow parts for the project.

Adding a display to your Arduino can serve many purposes. Since a common use for microcontrollers is reading data from sensors, a display allows you to see this data in real-time without needing to use the serial monitor within the Arduino IDE. It also allows you to give your projects a personal touch with text, images, or even interactivity through a touch screen.

Transparent Organic Light Emitting Diode (TOLED) is a type of LED that, as you can guess, has a transparent screen. It builds on the now common OLED screens found in smartphones and TVs, but with a transparent display, offers up some new possibilities for Arduino screens.

Take for example this brilliant project that makes use of TOLED displays. By stacking 10 transparent OLED screens in parallel, creator Sean Hodgins has converted a handful of 2D screens into a solid-state volumetric display. This kind of display creates an image that has 3-dimensional depth, taking us one step closer to the neon, holographic screens we imagine in the future.

Crystalfontz has a tiny monochrome (light blue) 1.51" TOLED that has 128x56 pixels. As the technology is more recent than the following displays in this list, the cost is higher too. One of these screens can be purchased for around $26, but for certain applications, it might just be worth it.

The liquid crystal display (LCD) is the most common display to find in DIY projects and home appliances alike. This is no surprise as they are simple to operate, low-powered, and incredibly cheap.

This type of display can vary in design. Some are larger, with more character spaces and rows; some come with a backlight. Most attach directly to the board through 8 or 12 connections to the Arduino pins, making them incompatible with boards with fewer pins available. In this instance, buy a screen with an I2C adapter, allowing control using only four pins.

Available for only a few dollars (or as little as a couple of dollars on AliExpress with included I2C adapter), these simple displays can be used to give real-time feedback to any project.

The screens are capable of a large variety of preset characters which cover most use cases in a variety of languages. You can control your LCD using the Liquid Crystal Library provided by Arduino. The display() and noDisplay() methods write to the LCD, as shown in the official tutorial on the Arduino website.

Are you looking for something simple to display numbers and a few basic characters? Maybe you are looking for something with that old-school arcade feel? A seven-segment display might suit your needs.

These simple boards are made up of 7 LEDs (8 if you include the dot), and work much like normal LEDs with a common Anode or Cathode connection. This allows them to take one connection to V+ (or GND for common cathode) and be controlled from the pins of your Arduino. By combining these pins in code, you can create numbers and several letters, along with more abstract designs—anything you can dream up using the segments available!

Next on our list is the 5110 display, also affectionately known as the Nokia display due to its wide use in the beloved and nigh indestructible Nokia 3310.

These tiny LCD screens are monochrome and have a screen size of 84 x 48 pixels, but don"t let that fool you. Coming in at around $2 on AliExpress, these displays are incredibly cheap and usually come with a backlight as standard.

Depending on which library you use, the screen can display multiple lines of text in various fonts. It"s also capable of displaying images, and there is free software designed to help get your creations on screen. While the refresh rate is too slow for detailed animations, these screens are hardy enough to be included in long-term, always-on projects.

For a step up in resolution and functionality, an OLED display might be what you are looking for. At first glance, these screens look similar to the 5110 screens, but they are a significant upgrade. The standard 0.96" screens are 128 x 64 monochrome, and come with a backlight as standard.

They connect to your Arduino using I2C, meaning that alongside the V+ and GND pins, only two further pins are required to communicate with the screen. With various sizes and full color options available, these displays are incredibly versatile.

For a project to get you started with OLED displays, our Electronic D20 build will teach you everything you need to know -- and you"ll end up with the ultimate geeky digital dice for your gaming sessions!

These displays can be used in the same way as the others we have mentioned so far, but their refresh rate allows for much more ambitious projects. The basic monochrome screen is available on Amazon.

Thin-film-transistor liquid-crystal displays (TFT LCDs) are in many ways another step up in quality when it comes to options for adding a screen to your Arduino. Available with or without touchscreen functionality, they also add the ability to load bitmap files from an on-board microSD card slot.

Arduino have an official guide for setting up their non-touchscreen TFT LCD screen. For a video tutorial teaching you the basics of setting up the touchscreen version, YouTuber educ8s.tv has you covered:

With the touchscreen editions of these screens costing less than $10 on AliExpress, these displays are another great choice for when you need a nice-looking display for your project.

Looking for something a little different? An E-paper (or E-ink depending on who you ask) display might be right for you. These screens differ from the others giving a much more natural reading experience, it is no surprise that this technology is the cornerstone of almost every e-reader available.

The reason these displays look so good is down to the way they function. Each "pixel" contains charged particles between two electrodes. By switching the charge of each electrode, you can influence the negatively charged black particles to swap places with the positively charged white particles.

This is what gives e-paper such a natural feel. As a bonus, once the ink is moved to its location, it uses no power to keep it there. This makes these displays naturally low-power to operate.

This article has covered most options available for Arduino displays, though there are definitely more weird and wonderful ways to add feedback to your DIY devices.

Now that you have an idea of what is out there, why not incorporate a screen into your DIY smart home setup? If retro gaming is more your thing, why not create some retro games on Arduino?

This is a graphics library for the family of small colour TFT displays based on the ST7735 and ST7789 driver chips. These are really nice displays; bright, colourful, available in a variety of useful sizes, and available at low cost from suppliers like Adafruit, AliExpress, or Banggood:

This library allows you to plot points, draw lines, draw filled rectangles, and plot text with an optional scale factor. I"ve included a demo histogram-plotting program that adjusts itself to fit each of the displays I"ve supported.

Unlike most other TFT display libraries this one doesn"t require a memory buffer, allowing it to be run on any processor down to an ATtiny85. The displays are SPI and require four pins to drive the display, leaving one pin free on an ATtiny85 to interface to another device, such as a temperature sensor. If you need more pins choose a larger chip, such as the ATtiny84; see Using the library with other AVR chips at the end of the article for information about how to convert the code for different chips.

I"ve published a library for a colour OLED display in a previous article: Colour Graphics Library. The main difference between the colour TFT displays and the colour OLED displays is that the TFT displays are not self-illuminating, and so need a backlight; they therefore have a slightly higher power consumption. However, they are exceedingly cheap, and they are available in larger sizes than the colour OLED displays.

This library will work with displays based on the ST7735 which supports a maximum display size of 132 (H) x 162 (V), or the similar ST7789 which supports a maximum display size of 240 (H) x 320 (V).

The display driver interfaces to the displays with the longer side as the vertical dimension, which is why the rectangular displays are usually listed with the longer dimension second. My library allows you to rotate the image for any desired orientation.

All the Adafruit breakout boards for these displays include level-shifting circuitry, so they will work with either 5V or 3.3V microcontroller boards. They also include an SD card socket, if that"s of interest to you. The Adafruit boards have pullups on the backlight and reset pins, so the display will work if you leave these pins unconnected.

The pullup resistor from the display"s CS pin is optional; it holds the chip select high to prevent the display from being affected by the ISP signals while programming the ATtiny85.

The different displays are catered for by six constants which specify the size of the display, the offsets relative to the area supported by the display driver, whether the display is inverted, and the rotation value; for example:

Note that on some displays you may also have to change the xoff or yoff value when rotating the display. For example, to rotate the image on the 240x240 displays by 180° use the settings:

To check or adjust the values for each display I ran this program, which draws a one-pixel border around the display area, and plots an "F" to show the orientation:

The ATtiny85 and other AVR processors supports toggling of one or more bits in a port, so provided you set all the pins to their disabled state at startup, for speed the display access routines can simply toggle the appropriate pins to enable or disable them.

The InitDisplay() routine first defines the four display pins as outputs, and takes the SCK, DC, and CS pins high (inactive). It then sends the essential configuration commands to the display.

The display memory stores 18 bits per pixel: 6 bits per colour. However, you can write to the display in three alternative modes, with 12, 16, or 18 bits per pixel. I chose the 16 bit mode, which assigns 5 bits to red, 6 bits to green, and 5 bits blue. It"s the most convenient one to work with as you simply send two bytes to define the colour of each pixel.

To clear the display the ClearDisplay() routine sends the appropriate number of zero bytes. The routine temporarily switches to 12-bit colour mode, which reduces the time to clear the display by 25%:

The library includes basic graphics routines for plotting points and drawing lines. These work on a conventional coordinate system with the origin at lower left. For example, on the 80x160 display:

My first version of PlotChar() plotted characters by calling PlotPoint() for each pixel. However, I then tried the following alternative approach which defines an area of the display using the CASET (Column Address Set) and RASET (Row Address Set) commands, and then sends a stream of the appropriate bytes to define the character. This turned out to be over three times faster!

14th January 2020: Tested the program with the Adafruit 1.3" 240x240 TFT display, and updated the program to correct a problem when rotating the image on that display.

This post is an introduction to the Nextion display with the Arduino. We’re going to show you how to configure the display for the first time, download the needed resources, and how to integrate it with the Arduino UNO board. We’ll also make a simple graphical user interface to control the Arduino pins.

Nextion is a Human Machine Interface (HMI) solution. Nextion displays are resistive touchscreens that makes it easy to build a Graphical User Interface (GUI). It is a great solution to monitor and control processes, being mainly applied to IoT applications.

The Nextion has a built-in ARM microcontroller that controls the display, for example it takes care of generating the buttons, creating text, store images or change the background. The Nextion communicates with any microcontroller using serial communication at a 9600 baud rate.

To design the GUI, you use the Nextion Editor, in which you can add buttons, gauges, progress bars, text labels, and more to the user interface in an easy way. We have the 2.8” Nextion display basic model, that is shown in the following figure.

Connecting the Nextion display to the Arduino is very straightforward. You just need to make four connections: GND, RX, TX, and +5V. These pins are labeled at the back of your display, as shown in the figure below.

You can power up the Nextion display directly from the Arduino 5V pin, but it is not recommended. Working with insufficient power supply may damage the display. So, you should use an external power source. You should use a 5V/1A power adaptor with a micro USB cable. Along with your Nextion display, you’ll also receive a USB to 2 pin connector, useful to connect the power adaptor to the display.

The best way to get familiar with a new software and a new device is to make a project example. Here we’re going to create a user interface in the Nextion display to control the Arduino pins, and display data.

The user interface has two pages: one controls two LEDs connected to the Arduino pins, and the other shows data gathered from the DHT11 temperature and humidity sensor;

We won’t cover step-by-step how to build the GUI in the Nextion display. But we’ll show you how to build the most important parts, so that you can learn how to actually build the user interface. After following the instructions, you should be able to complete the user interface yourself.

Additionally, we provide all the resources you need to complete this project. Here’s all the resources you need (be aware that you may need to change some settings on the user interface to match your display size):

We’ll start by adding a background image. To use an image as a background, it should have the exact same dimensions as your Nextion display. We’re using the 2.8” display, so the background image needs to be 240×320 pixels. Check your display dimensions and edit your background image accordingly. As an example, we’re using the following image:

At this moment, you can start adding components to the display area. For our project, drag three buttons, two labels and one slider, as shown in the figure below. Edit their looks as you like.

All components have an attribute called objname. This is the name of the component. Give good names to your components because you’ll need them later for the Arduino code. Also note that each component has one id number that is unique to that component in that page. The figure below shows the objname and id for the slider.

You should trigger an event for the touchable components (the buttons and the slider) so that the Arduino knows that a component was touched. You can trigger events when you press or when you release a component.

Our second page will display data from the DHT11 temperature and humidity sensor. We have several labels to hold the temperature in Celsius, the temperature in Fahrenheit, and the humidity. We also added a progress bar to display the humidity and an UPDATE button to refresh the readings. The bBack button redirects to page0.

Notice that we have labels to hold the units like “ºC”, “ºF” and “%”, and empty labels that will be filled with the readings when we have our Arduino code running.

Once the GUI is ready, you need to write the Arduino code so that the Nextion can interact with the Arduino and vice-versa. Writing code to interact with the Nextion display is not straightforward for beginners, but it also isn’t as complicated as it may seem.

A good way to learn how to write code for the Arduino to interact with the Nextion display is to go to the examples folder in the Nextion library folder and explore. You should be able to copy and paste code to make the Arduino do what you want.

The first thing you should do is to take note of your components in the GUI that will interact with the Arduino and take note of their ID, names and page. Here’s a table of all the components the code will interact to (your components may have a different ID depending on the order you’ve added them to the GUI).

Finally, you need a function for the bUpdate (the update button). When you click this button the DHT temperature and humidity sensor reads temperature and humidity and displays them on the corresponding labels, as well as the humidity on the progress bar. That is the bUpdatePopCallback() function.

In this post we’ve introduced you to the Nextion display. We’ve also created a simple application user interface in the Nextion display to control the Arduino pins. The application built is just an example for you to understand how to interface different components with the Arduino – we hope you’ve found the instructions as well as the example provided useful.

In our opinion, Nextion is a great display that makes the process of creating user interfaces simple and easy. Although the Nextion Editor has some issues and limitations it is a great choice for building interfaces for your electronics projects. We have a project on how to create a Node-RED physical interface with the Nextion display and an ESP8266 to control outputs. Feel free to take a look.