nextion lcd display free sample
A few weeks ago, I wrote this article about using a text variable as an array, either an array of strings or an array of numbers, using the covx conversion function in addition for the latter, to extract single elements with the help of the spstr function. It"s a convenient and almost a "one fits all" solution for most use cases and many of the demo projects or the sample code attached to the Nextion Sunday Blog articles made use of it, sometimes even without mentioning it explicitly since it"s almost self-explaining. Then, I got a message from a reader, writing: "... Why then didn"t you use it for the combined sine / cosine lookup table in the flicker free turbo gauge project?"105 editions of the Nextion Sunday blog in a little over two years - time to look back and forth at the same time. Was all the stuff I wrote about interesting for my readers? Is it possible at all to satisfy everybody - hobbyists, makers, and professionals - at the same time? Are people (re-)using the many many HMI demo projects and code snippets? Is anybody interested in the explanation of all the underlying basics like the algorithms for calculating square roots and trigonometric functions with Nextion"s purely integer based language? Are optimized code snippets which allow to save a few milliseconds here and there helpful to other developers?Looking through the different Nextion user groups on social networks, the Nextion user forum and a few not so official but Nextion related forums can be surprising. Sometimes, Nextion newbies ask questions or have issues although the required function is well (in a condensed manner for the experienced developer, I admit) documented on the Nextion Instruction Set page, accessible through the menu of this website. On top of that, there is for sure one of my more than 100 Sunday blog articles which deals not only with that function, but goes often even beyond the usual usage of it. Apparently, I should sometimes move away from always trying to push the limits and listen to the "back to the roots!" calls by my potential readers...Do you remember the (almost) full screen sized flicker free and ultra rapid gauge we designed in June? And this without using the built-in Gauge component? If not, it"s time to read this article first, to understand today"s improvements. The June 2022 version does its job perfectly, the needle movement is quick and smooth, and other components can be added close to the outer circle without flickering since there is no background which needs constantly to be redrawn. But there was a minor and only esthetic weak point: The needle was a 1px thin line, sometimes difficult to see. Thus, already a short time after publishing, some readers contacted me and asked if there were a way to make the needle thicker, at least 2 pixels.Recently, when playing with a ESP32 based NodeMCU 32S and especially with its WiFi configuration, I did as (I guess) everybody does: I loaded an example sketch to learn more about the Wifi library. When you set up the ESP32 as an access point, creating its own wireless network, everything is pretty straightforward. You can easily hard code the Wifi name (SSID) and the password. But what about the client mode ? Perhaps one needs to use it in different environments. And then, a hard coded network name and password are definitively not the best solution. Thus, I thought, why not use a Nextion HMI for a dynamic WiFi setup functionality?Although the Nextion MIDI I/O interface has been primarily designed as an add-on for Nextion HMI screens to transform these in fully autonomous MIDI devices as shown in previous blog posts here, it is also of great use for any Arduino based electronic music project! Many MIDI projects for Arduino suffer from a lack good hardware support. There are sophisticated code, excellent libraries and an infinity of use cases, but afterwards, things tend not to work in a rather rough environment in the studio or on stage. That"s because two resistors and a few Dupont wires on a breadboard besides the Arduino are not really an interface which could drive your Synth, Sequencer, or Drum machine over a 5m long MIDI cable.
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.
The best model for you, will depend on your needs. If you’re just getting started with Nextion, we recommend getting the 3.2” size which is the one used in the Nextion Editor examples (the examples also work with other sizes, but you need to make some changes). Additionally, this is the most used size, which means more open-source examples and resources for this size.
To get started with Nextion, first you need to install Nextion Editor. Go to https://nextion.itead.cc/, select the Resources tab, Download > Nextion Editor and install Nextion Editor. You can either download the .zip file or the .exe file.
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.
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):
Open Nextion Editor and go to File > New to create a new file. Give it a name and save it. Then, a window pops up to chose your Nextion model, as show in the figure below.
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.
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.
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.
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.
Nextion 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 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.
Nextion is a Seamless Human Machine Interface (HMI) solution that provides a control and visualisation interface between a human and a process, machine, application or appliance. Nextion is mainly applied to IoT or consumer electronics field. It is the best solution to replace the traditional LCD and LED Nixie tube. Available from 2.4″ to 7″ models, Nextion provides an analog touch screen operator interface with programmable function buttons, gauges, progress bars…etc., Nextion is an interface solution designed to complement your application needs.
Nextion Display has so many goods, you may not have a thorough understanding for it. In following blog series, I will give a comprehensive introduction for Nextion. If you are a green hand, these blogs are just the things to help you get started.
There are 6 sizes of Nextion available for your selection: 2.4″, 2.8″, 3.2″, 4.3″, 5.0″ and 7.0″. Users can see the overall detailed parameters from the below table:
Nextion TFT display uses only one serial port to do communication which helps users get rid of the wiring trouble. We notice that most engineers spend a lot of time in application development but get unsatisfactory results. In this case, Nextion editor has provided mass components, such as button, text, progress bar, slider, instrument panel etc. to enrich your interface design. And the drag-and-drop function ensures that users will spend less time in programming, which will reduce your 99% development workloads. With the help of this WYSIWYG editor, GUI designing is a piece of cake.
Nextion display is just the choice to solve your programming problems with the minimum of time and effort. Nextion is a better solution than ever, as users can see its competitive edges as below, not to mention its good price:
3. Objective-oriented controlling method. Nextion supports the commands not only to draw points or lines, but also to control most attributes of the components and materials.
4. Users can control the objects in a demo through serial port commands by external MCU even the demo has already been downloaded and demonstrated on Nextion screen.
Users might get a headache on which size to choose. But we have prepared you very detailed products specification that covering every model of Nextion Display. Have a look, you will know which one to choose according to your project requirements.
Nextion is a Chinese company which build, in my opinion, the best HMI (Human-Machine-Interface) displays for DIY microcontroller projects. All of their displays have a touch panel and an onboard processor (MCU) combined with onboard memory. That is why the functions of the Nextion display far exceed that of a normal display. Also the displays has an UART connection, that enables the displays to communicate with all microcontrollers (e.g. Arduino, ESP8266) or single-board computers (e.g. Raspberry Pi).
The display needs all this memory because you can store data directly on the display itself like a background image and you are able to program the display directly without any microcontroller. For example if I push a button, the text and the color of the button should change. Flash memory is used to store different fonts, videos and pictures.
The following table shows the different technical specifications of the Nextion display compared to the ESP8266 NodeMCU V2 and the Arduino Uno regarding computation power and memory size.
Nextion builds 3 different display series: Basic, Enhanced and Intelligent. All three series have the touch function as well as integrated flash, RAM and a MCU. If you order a display, no matter what series, a power supply board (Micro-USB to 5V GPIO) and cables to connect the display are included.
The basic series has everything you need for most projects. The smallest display in the basic series has a 2.4” display and costs $16.4 and the biggest display has a size of 7.0” and costs $74.9.
If you buy a display from the enhanced series you get a more powerful hardware compared to the basic series in terms of MCU, flash storage and SRAM. Moreover the enhances series has an integrated real-time-clock (RTC) module onboard to keep accurate time and EEPROM to store values or strings to the memory of the display during the run-time.
The enhanced models not only have the connection to your microcontroller, but also 8 additional digital pins, of which 4 are PWM capable. These additional pins are used with an Nextion expansion board that includes 6 buttons, 1 LED and 1 piezo buzzer. With the combination of enhanced display and expansion board, you can make basic projects without a microcontroller. In this case you have to program the logic in the display MCU which I also show you in this tutorial. The following picture shows you the difference if you use the expansion board or a microcontroller. The picture is only a schematic sketch and the wiring is not correct.
The intelligent series supports all functions of the enhanced series like the RTC module but also has a much faster MCU build in and also 128MB flash. This allows the intelligent displays to support functions like playing videos and animations, audio support as well as PNG support for pictures. Also the intelligent displays have an anti-aliasing gauge to smooth otherwise jagged lines or textures by blending the color of an edge with the color of pixels around it.
In each series there are different display sizes available. The following table shows the three different series of displays and the technical specifications. In this tutorial I use the NX4832T035 from the basic series, that have a 3.5” display.
Now we want to know how to build a HMI with the Nextion display. This is done by the Nextion Editor, a free GUI (graphical user interface) development software. You can download the latest version of the software on the Nextion website.
A new window opens and you have to select your display. First you select the series: Basic, Enhanced or Intelligent and then the size of the display. Hint: On the site of the package where the display was in, you find the corresponding number like: NX4832T035 in my case.
After we create the project you have to know the basic functions of the Nextion Editor. From the picture above you see that there are 8 planes that are described in the following section:
Toolbar: In the Toolbar you can also open, save or create a new project. In the second line there are multiple functions to align the components of the toolbox. Also you find other functions that we will use:Compile: Before you transfer the project to the display you have to compile the current code.
Debug: The debug window is a good option to check how to display will look like. Also you can check implementations that are programmed directly on the display.
Toolbox: In the toolbox are all components that you can add to your project. By clicking on a component it is added to the design plane. There are some advanced components that are only available for the intelligent series. The following picture shows what components are available for the different series of displays.
Page Plane: With the Nextion displays you can create virtual pages where you can show different information. You HMI needs at least one page that is added when you create a new project. Also you can export and import pages so save time and reuse different kind of pages.
The short answer would be via a micro SD card, but in reality it was a little bit trickier. The basic requirement for the Nextion display is that the SD card has to be in FAT32 format. First I tried to use a 64 GB micro SD card but unfortunately when I tried to format the card in Windows 10 there was no option to format the 64 GB micro SD card to FAT32.
After the SD card is ready we have to compile our code to make sure that the compiler does not find any errors. You find the compile button ins the Toolbox and the output of the compiler in the output box at the bottom left in the Nextion Editor.
The next step in the Nextion Editor is to export the TFT file to the micro SD card. Click on File in the main menu and select TFT file output. Now you choose your FAT32 formatted micro SD card and export the file to the card. If you wish, you could check if the TFT file is on the SD card.
The last step is to place the SD cart into the SD card slot of your Nextion display. After powering the display up, you see that the display recognizes the SD card and loads the file in the internal memory of the display.
Good news: the Nextion developers created a library for Arduino and Raspberry Pi that makes the coding much easier. The bad thing is, that this library is not included in the Arduino IDE library search. Therefore we install the library manually in 4 steps:Download the Arduino library for Nextion Display as ZIP file from the official github repository to a local folder of your choice.
Move the ITEADLIB_Arduino_Nextion folder to your Arduino IDE installation libraries folder. If you do not know how your library folder is located you can search for Arduino/libraries and will find the folder, see the following picture.
The Nextion library is configured for the Arduino Mega. If you use the Arduino Mega for this project, you can skip the next step. But if you use for example an Arduino Uno, like me, we have to change the configurations of the library because the Arduino Mega has two hardware serials and the Arduino Uno for example only one.
Now everything is setup and we can create our first basic example. After the basic example I show you a more advanced example where we also use the program function of the Nextion display itself.
The first example is an easy basic example where you learn how to add buttons and use a number field to make a counter with a reset button. This example has only one page to keep it simple. If you are new to the Nextion display, this tutorial is right for you, but if you are already advanced, you can jump to the next example where I show you a more complex example.
You can download every file I use in this example with the following download button. You download a zip file that includes the Nextion Editor TFT file, the used fonts, a picture and the Arduino script.
If you have not already started your Nextion Editor, you can open it now. Like in the video I showed you at the beginning of this tutorial, the first step in a new project is to select your Nextion display and select the horizontal or vertical display direction. In the second step you can create one or more fonts for this project. I created two fonts, one with a height of 16 and the second with a height of 32 to display text a little bit bigger.
I also want to display a picture in the display. Therefore I select picture in the resource plan and with the red plus sign I added the logo of the DIYI0T bog as picture. To display the picture on the display, I choose picture in the toolbox to add a picture frame to the interface. Now you have assign the right picture ID to the frame. Therefore set the pic setting in the toolbox plane to 0.
Now comes the most important part of this example. We have to make sure that the Arduino is informed via UART when the two buttons are pressed. Generally there are two options when the display sends the signal to the Arduino:The button is pressed: Touch Press Event → PushCallback
The following picture shows the UART connection between the Nextion display and the Arduino Uno which I use for this example. In this project the power supply is provided via micro USB and the Power Supply Test Board which is part of the Nextion package.
Like in every other script, the first thing we have to do is to include all the libraries we need. For this example we only need the Nextion library. Then we define the Nextion objects based on the added components in the editor. The logic to add an object is the same every time, which shows the following table.
Object: The object is the library name of the Nextion component that you added to your editor. For example the button component of the editor is the NexButton object. You simply add “Nex” in front of the component.
Now for each element of the nex_listen_list, we have to create a function, that is called when the event for this object is triggered. The first function we create is the function for b0 that increase the number of the display. I like to give my functions a predefined structured name. That is why I call the function b0PushCallback.
The function is called for the b0 object and in the Nextion Editor we defined that the component should have a touch press event and not a touch release event. The touch press event is the push callback and the touch release event would be a pop callback.
Inside the function, the logic of the script is pretty easy. First we create a variable number. Inside this variable we store the current value of the numberbox object which is the displayed number in the number component. The function to read the number is getValue. After we increased the variable, the value of the number component is set to the increased variable with the setValue function.
After the two functions are defined, we create the setup function in the Arduino IDE. Because we use the UART communication between the Nextion display and the microcontroller, the baud rate is set to 9600 which is recommended by Nextion. Also the Nextion library is initialized in the setup function. The last part of the setup function is to register the push or pop event callback functions. The callback function asks: When do I have to executed the predefined functions? Therefore we attach the push event to both objects and define that if the event occurs, the predefined functions should be called.
This advanced example shows how to use the internal programming capabilities of the Nextion displays and also how to control lights and visualize the temperature and humidity of a DHT11 sensor module.
First we create the interface in the Nextion Editor. Therefore create a new project and select your display model. For this advanced example I use the landscape orientation of the display. You can use the already created font from the basic example or create a new one. The following two pictures show the interface we want to build with two pages.
Under the light text we create a dual-state button and change the text to “OFF”. With this button we want to turn a light on and off. Depending on the status of the light, I want to change the text of the button. This could be done via the microcontroller with the functions getText and setText but we want to change the text direct with the programmable capabilities of the display. Therefore in the event code panel of the editor we create a simple if equation that takes advantage of the changing value of the dual-state button. If the dual-state button is not pressed, the value is 0 and the text of the button is set to “OFF”. But in all other cases, when the button is pressed and the value is 1, the text changes to “ON”.
The change in the value of the dual-state button should also be visualized in a number component. We create a new number component under the other text field. To display the value of the dual-state button, we simply set the value of the number component to the value of the dual-state button when the touch press event occurs.
On the second page we create two text fields and two number components. Each text field displays the sensor value that is shown in the number components. For fun I also changed the background color of the number components.
Now every site and component is set up and you can test if everything is working with the debug function of the Nextion Editor. After everything is working you can compile the project and export the TFT file to the micro SD card.
The next task is to connect the display with your microcontroller and all other components. I use my Arduino Uno as microcontroller, the DHT11 sensor module to measure the temperature and humidity as well as the 7 color flash LED (KY-034) as light. The following fritzing picture shows how to connect all the devices.
At the beginning of the Arduino script we include the Nextion and DHT libraries and define the pins where the DHT11 module and the LED is connected. With the DHT11 model type and the pin, we create a dht11module object.
In the setup function the baud rate is set to 9600 and the pin of the LED is defined as output. Then the DHT11 object and the display is initialized. Like in the basic example the callbacks of the objects from the touch event list are registered as push callback.
I hope you learned a lot about the Nextion display in this tutorial. If you have any question regarding the Nextion displays in general or the examples in this article, use the following comment section to ask your question. I will answer the question as soon as possible.
Have used Nextion displays for a number of projects and love them. All you need is RX and TX links and they can be driven by any processor with RX, TX communications. They have sufficient memory to accept jpg files for graphics making coding really easy.
It appears that Itead has worldwide distribution rights (except China). I imagine that TJC aren’t happy that their 0.55 editor version improvements that would gain them extra sales are being ignored. Instead, Nextion want paying extra for what we would call ‘product support’
Whilst I can use Nextion editor and Arduino IDE, I’m not in the same league as say Iuma and hag and similar experts who know what’s going on deep down.
But I do know that the Arduino, Esp and Esp8266 have usb, serial and SPI comms so why not attach one of these processors to a standard SPI touch screen, then develop a library and GUI similar to Nextion but with added features, which could also include remote firmware updates. If the Esp was used, then that includes GPIO pins.
Costly? – I don’t think so - have priced a 3.5 inch touch screen and Esp for less than £8.00 retail. I pay about £20 for same size Nextion. Surely that would allow a manufacturer to get reasonable profit margin for a superior product.
Now we are ready to use a library to make our life easier. The official Nextion library has not been updated for over 3 years. This is quite strange as Nextion seems to be releasing new products, and new versions of its GUI Editor. If you insist on using this library, it seems to work with a few modifications: in NexConfig.h change dbSerial to SerialUSB and nexSerial to Serial1, and in NexUpload.cpp comment out the line //#include
It may well be that most people are writing their own low level interfaces to the Nextion displays, using the instruction set documentation. Also there seems to be an active user community around this unofficial forum.
You can now try our below test sketch, it is based on our Nextion RS485 example, and uses the identical Nextion code .tft and .hmi that you can find in this zip. See the other blog post for details on how this sketch works. Only the .ino is slightly different, as below.