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.
Watch the video demonstration
If you want to see different Nextion displays and find the best price, go to Maker Advisor to read our guide.
Introducing the Nextion Display
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.
There are several Nextion display modules, with sizes ranging from 2.4” to 7”.
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.
So, it works with any board that has serial capabilities like Arduino, Raspberry Pi, ESP8266, ESP32, and so on.
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.
Getting a Nextion Display
You can grab a Nextion basic model, or a Nextion enhanced model. The Nextion enhanced has new features when compared with the basic model:
- has a built-in RTC
- supports saving data to flash
- supports GPIOs
- has larger flash capacity and larger CPU clock
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.
You can check Maker Advisor website to get your Nextion display at the best price – just click the links below:
Installing Nextion Editor
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.
Downloading Nextion Libraries
Before getting started, you also need to install the Nextion libraries for Arduino IDE. Follow the next steps to install the library:
- Click here to download the Nextion library for Arduino – ITEADLIB_Arduino_Nextion. You should have a .zip folder in your Downloads folder.
- Unzip the .zip folder and you should get ITEADLIB-Arduino-Nextion-master folder.
- Rename your folder from
ITEADLIB_Arduino_Nextion-masterto ITEADLIB_Arduino_Nextion. - Move the ITEADLIB_Arduino_Nextion folder to your Arduino IDE installation libraries folder.
- Finally, re-open your Arduino IDE.
Configure Library for Arduino UNO
This library is configured for Arduino MEGA2560 by default. To make it work for Arduino Uno, you need to do the following:
1. Open the ITEADLIB_Arduino_Nextion folder
2. There should be a NexConfig.h file – open that file.
3. Comment line 27, so that it stays as follows:
//#define DEBUG_SERIAL_ENABLE
4. Comment line 32:
//#define dbSerial Serial
5. Change line 37, so that you have the following:
#define nexSerial Serial
6. Save the NexConfig.h file.
7. Here’s the final result:
Now, you are ready to start experimenting with the Nextion display with Arduino UNO.
Wiring Nextion Display to the Arduino
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.
Nextion display pinout
Here’s how you should wire the Nextion display:
Nextion | Wiring to |
GND | GND |
RX | Arduino pin 1 (TX) |
TX | Arduino pin 0 (RX) |
VCC | 5V |
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.
Here’s the schematic you need to follow to wire the display to the Arduino.
Project Overview
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.
Here’s the features of the application we’re going to build:
- 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;
- The first page has one button to turn an LED on, another button to turn an LED off, a label showing the LED current state;
- This first page also has a slider to control the brightness of another LED;
- The second page shows the current temperature in a text label, and the current humidity in a progress bar;
- This page has an update button to update to the readings.
Parts Required
Here’s the required parts for this project:
- 2.8” Nextion display (or 3.2” Nextion display)
- MicroSD card
- Arduino UNO â read Best Arduino Starter Kits
- 2x LEDs
- DHT11 temperature and humidity sensor
- 2x 220 Ohm resistors
- 4.7k Ohm resistor
- Breadboard
- Jumper wires
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Project Schematic
Here’s the schematic you need to follow to complete this project.
Project Resources
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):
- .HMI file (this file can be imported into the Nextion Editor to edit the GUI);
- background image used in the user interface should also be in the project folder;
- .TFT file (this file should be uploaded to the Nextion display, this is the file that the display runs);
- .ino file (this is the file you should upload to your Arduino board).
Click here to download all the files.Â
Nextion Editor General Overview
Here’s a quick overview of the different sections of the Nextion Editor.
- Main Menu
- Canvas – this is where you add your components to build the User Interface.
- Toolbox – this is where you have a wide variety of components you can add to the user interface, like pictures, progress bar, buttons, sliders, and much more.
- Picture/Fonts list – this shows the fonts and pictures imported to your projects. Here you can also add new fonts and pictures.
- Page area – you can manage your pages here, like add more pages, copy and delete pages.
- Attributes area – this part shows your component’s attributes. You can edit the component’s attributes here.
- Compiler output window – this will show any errors occurred during compiling.
- Event window – here you can add code to be run when an event is met.
Creating a New Project in Nextion Editor
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.
Or you can import the .HMI file for this project.
If you select the Display tab, you can also set the display orientation.
For this example, we’ve selected Horizontal.
After selecting your display and the orientation, just click the Ok button. A new project on the Nextion Editor should open.
Adding a Background Image
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:
After having your background image with the right dimensions, follow the next instructions:
1. In the bottom left corner of the Nextion display, there’s a window for fonts and pictures. Select the Picture tab.
2. Click the (+) button and select your background image. The image will be added to the pictures list and it will be given an id. In this case it is 0.
3. Go to the toolbox, and click on the Picture component. It will be automatically added to your display area.
4. Having that component selected, you should see its attribute in the attribute area. You can double click on the attributes to edit them. Double-click on the pic attribute to select the picture you want. You must write “0” which is the index of the picture you want, or select the image on the new window that pops up. After writing “0”, you actually need to hit ENTER to save the changes.
Adding Fonts
To write text on the display, you need to generate a font in the Nextion Editor. Go to Tools > Font Generator. A new window should open.
Here you can select the font height, type, spacing and if you want it to be bold or not. Give it a name and click the Generate font button. After that, save the .zi file and add the generator font by clicking yes.
The font will be added to the Fonts library at the left bottom corner and it will be given an index. As this is your first font, it will have the index 0.
Note: At the time of writing this instructions there is an issue with font types. Whatever font type you chose, it will always look the same. Still, you can edit the font size and if it is bold or not.
Adding text labels, sliders and buttons
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 can edit the components the way you want, but make sure to edit the slider maxval to 255, so that it works with the Arduino code we’ll be using.
Touchable components
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.
Here we’re going to trigger an event when the touch is released. That event will be simply sending the ID of the component that was touched.
To do that, select one of the buttons, and in the event window, select the Touch Release Event tab, and put a tick on the Send Component ID option. Repeat this process for the other button, and the slider.
Creating and Navigating to a New Page
Adding more pages to your GUI is really simple. On the top right corner, in the Page area, select the Add button to add a new page. A new page will be created. In this case, page1.
To navigate to one page to another, we’ve added a button in each page, at the bottom right corner – in this case it is called bNext.
To make this button redirect to page1, you need to add the following to the Event window, in the user code section (as highlighted in red below).
If you want to redirect to another page, you just have to modify the User Code with the number of the page.
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.
Testing the Interface in the Simulator
You can test your interface in the simulator. For that, you need to click on the debug button at the main menu.
A new window should open.
In that window you can click on the buttons and see what happens. You should be able to swap between pages by clicking the corresponding buttons. You should also see the data returned when you click each button as highlighted in red in the figure above.
Compiling and Uploading code to the Nextion Display
To upload your project to the Next display, follow the next steps:
1. Click the Compile button in the main menu;
2. Insert the microSD card on your computer;
3. Go to File > Open Build Folder;
4. Copy the .TFT file corresponding to the file you’re currently working;
5. Paste that file in the microSD card (note: the microSD card should have been previously formatted as FAT32);
6. Insert the microSD card on the Nextion display and plug power.
7. You should see a message on the display saying the code is being uploaded.
8. When it is ready, it should display the following message:
9. Remove the power from the Nextion display, and unplug the microSD card.
10. Apply power again, and you should see the interface you’ve built in the Nextion Editor on your Nextion display.
Writing the Arduino Code
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).
Objname | Type | Page ID | ID |
tState | text | 0 | 4 |
bOn | button | 0 | 2 |
bOff | button | 0 | 3 |
h0 | slider | 0 | 5 |
tSlider | text | 0 | 6 |
tTempC | text | 1 | 5 |
tTempF | text | 1 | 4 |
jHumidity | Progress bar | 1 | 8 |
tHumidity | text | 1 | 9 |
bUpdate | button | 1 | 10 |
Below you can find the code you should upload to your Arduino board. Make sure you have the right board and COM port select.
You also need to have the Adafruit_DHT library installed.Â
Note: make sure you remove the TX and RX connections when uploading code.
/*
* Rui Santos
* Complete Project Details https://randomnerdtutorials.com
*/
#include "Nextion.h"
#include "DHT.h"
#define DHTPIN 4 // what digital pin we're connected to
// Uncomment whatever type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
// Initialize DHT sensor.
DHT dht(DHTPIN, DHTTYPE);
// LED pins
const int led1 = 8;
const int led2 = 9;
// Declare your Nextion objects - Example (page id = 0, component id = 1, component name = "b0")
NexText tState = NexText(0, 4, "tState");
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexText tHumidity = NexText(1, 9, "tHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
// Register a button object to the touch event list.
NexTouch *nex_listen_list[] = {
&bOn,
&bOff,
&h0,
&bUpdate,
NULL
};
/*
* Button bOn component pop callback function.
* When the ON button is released, the LED turns on and the state text changes.
*/
void bOnPopCallback(void *ptr) {
tState.setText("State: on");
digitalWrite(led1, HIGH);
}
/*
* Button bOff component pop callback function.
* When the OFF button is released, the LED turns off and the state text changes.
*/
void bOffPopCallback(void *ptr) {
tState.setText("State: off");
digitalWrite(led1, LOW);
}
/*
* Slider h0 component pop callback function.
* When the slider is released, the LED brightness changes and the slider text changes.
*/
void h0PopCallback(void *ptr) {
uint32_t number = 0;
char temp[10] = {0};
// change text with the current slider value
h0.getValue(&number);
utoa(number, temp, 10);
tSlider.setText(temp);
// change LED brightness
analogWrite(led2, number);
}
/*
* Button bUpdate component pop callback function.
* When the UPDATE button is released, the temperature and humidity readings are updated.
*/
void bUpdatePopCallback(void *ptr) {
// Reading temperature or humidity takes about 250 milliseconds!
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t) || isnan(f)) {
return;
}
// Update temperature in Celsius
static char temperatureCTemp[6];
dtostrf(t, 6, 2, temperatureCTemp);
tTempC.setText(temperatureCTemp);
// Update humidity percentage text and progress bar
char hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidity.setText(hTemp);
jHumidity.setValue(int(h));
// Update temperature in Fahrenheit
static char temperatureFTemp[6];
dtostrf(f, 6, 2, temperatureFTemp);
tTempF.setText(temperatureFTemp);
}
void setup(void) {
dht.begin();
Serial.begin(9600);
// You might need to change NexConfig.h file in your ITEADLIB_Arduino_Nextion folder
// Set the baudrate which is for debug and communicate with Nextion screen
nexInit();
// Register the pop event callback function of the components
bOn.attachPop(bOnPopCallback, &bOn);
bOff.attachPop(bOffPopCallback, &bOff);
h0.attachPop(h0PopCallback);
bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
// Set LEDs as outputs
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
}
void loop(void) {
/*
* When a pop or push event occured every time,
* the corresponding component[right page id and component id] in touch event list will be asked.
*/
nexLoop(nex_listen_list);
}
Continue reading the post to learn how the code works.
Including needed libraries
First, you include the Nextion and the DHT libraries.
#include "Nextion.h" #include "DHT.h"
The DHT sensor will be connected to the Arduino digital pin 4.
#define DHTPIN 4
Then, you should select the DHT type you’re using:
// Uncomment whatever type you're using! #define DHTTYPE DHT11 // DHT 11 //#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321 //#define DHTTYPE DHT21 // DHT 21 (AM2301)
And initialize the DHT sensor
DHT dht(DHTPIN, DHTTYPE);
After that, you define led1 and led2. These variables refer to the digital pins 8 and 9 respectively. (led 1 will be controlled with the ON and OFF buttons of the user interface, and led2 brightness will be controlled using the slider).
const int led1 = 8; const int led2 = 9;
Declaring Nextion Objects
You need to declare all your Nextion objects as follows:
NexText tState = NexText(0, 4, "tState"); NexButton bOn = NexButton(0, 2, "bOn"); NexButton bOff = NexButton(0, 3, "bOff"); NexSlider h0 = NexSlider(0, 5, "h0"); NexText tSlider = NexText(0, 6, "tSlider"); NexText tTempC = NexText(1, 5, "tTempC"); NexText tTempF = NexText(1, 4, "tTempF"); NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity"); NexButton bUpdate = NexButton(1,10, "bUpdate"); NexText tHumidity = NexText(1, 9, "tHumidity");
Here you use the page ID, the component ID and their name – just check the table above with all the components. To define a text you use NexText, to define a button you use NexButton, for a slider you use NexSlider and for the progress bar you use NexProgressBar.
Next, you should add in the following snippet all the touchable components that should trigger events on the Arduino.
NexTouch *nex_listen_list[] = { Â Â &bOn, Â Â &bOff, Â Â &h0, Â Â &bUpdate, Â Â NULL };
Creating Callback Functions
After that, you should create callback functions that will be triggered when you touch the corresponding components.
The following function will be triggered when you release the touch from the bOn button:
void bOnPopCallback(void *ptr) { Â Â tState.setText("State: on"); Â Â digitalWrite(led1, HIGH); }
This function will set the led1 to HIGH, as well as update the tState label with the text “State: on”. Updating text labels is as simple as using setText().
The bOff button works in a similar way:
void bOffPopCallback(void *ptr) { Â Â tState.setText("State: off"); Â Â digitalWrite(led1, LOW); }
For the slider (h0), you have the following function that writes the current slider position on the tSlider label and sets led2 brightness accordingly:
void h0PopCallback(void *ptr) { Â Â uint32_t number = 0; Â Â char temp[10] = {0}; Â Â h0.getValue(&number); Â Â utoa(number, temp, 10); Â Â tSlider.setText(temp); Â Â analogWrite(led2, number); }
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.
Inside that function, the following snipet reads temperature and humidity:
float h = dht.readHumidity(); // Read temperature as Celsius (the default) float t = dht.readTemperature(); // Read temperature as Fahrenheit (isFahrenheit = true) float f = dht.readTemperature(true); // Check if any reads failed and exit early (to try again). if (isnan(h) || isnan(t) || isnan(f)) { //Serial.println("Failed to read from DHT sensor!"); return; }
The next piece writes the temperature in celcius on the tTempC label
static char temperatureCTemp[6]; dtostrf(t, 6, 2, temperatureCTemp); tTempC.setText(temperatureCTemp);
In a similar way, to update the temperature in Fahrenheit:
static char temperatureFTemp[6]; dtostrf(f, 6, 2, temperatureFTemp); tTempF.setText(temperatureFTemp);
To update the humidity label as well as the progress bar:
char hTemp[10] = {0}; utoa(int(h), hTemp, 10); tHumidity.setText(hTemp); jHumidity.setValue(int(h));
To set the value of the progress bar you simply use setValue().
setup()
In the setup(), you need to attach the functions created to the corresponding events. For example, when you click on the bOn button, the bOnPopCallback function will be triggered.
  bOn.attachPop(bOnPopCallback, &bOn);   bOff.attachPop(bOffPopCallback, &bOff);   h0.attachPop(h0PopCallback);   bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
loop()
The loop is as simple as the following:
void loop(void) { Â Â nexLoop(nex_listen_list); }
When an event occurs, the corresponding function will be triggered.
Demonstration
With the User Interface built and the code on the Arduino, you should be able to control the Arduino pins from the Nextion display.
Tap the On and Off buttons to turn on and off led1 and move the slider to control led2 brightness.
On the second screen, tap the update button to update with the latest sensor readings.
Wrapping up
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.
What projects would you like to see using the Nextion display? Write a comment down below.
Thanks for reading.
Good article on touch screen display…
Hi Arun patole.
Thank you for your support đ
Hello … Will you make a project using HX711 Loadcell + arduino + Nextion?
Hi.
At the moment, that’s not in our plans.
Regards,
Sara
yes
if you have work on it can send me a code of it.
It will be nice to have a tutorial for Home automation with Time and calender, Heat in°C, humidity, Timing setting for heating ON and OFF on a NEXTION Display 3.2 ENHANCED with one of the ESP8266 Wi-Fi module family sending data from the sensors to the display.
Hi.
Thank you for your suggestion.
We’ve already ordered our 3.2” Nextion Enhanced model – it should arrive in a couple of days.
And we intend to make a project like the one you’ve suggested! đ So, stay tuned.
Regards,
Sara
Not working!!
Here is Arduino error message, plus had to #include
Arduino: 1.6.13 (Windows 10), Board: “Arduino/Genuino Uno”
C:\Program Files (x86)\Arduino\arduino-builder -dump-prefs -logger=machine -hardware C:\Program Files (x86)\Arduino\hardware -hardware C:\Users\Ralph\AppData\Local\Arduino15\packages -hardware
Using library SoftwareSerial at version 1.0 in folder: C:\Users\Ralph\AppData\Local\Arduino15\packages\arduino\hardware\avr\1.6.15\libraries\SoftwareSerial
exit status 1
‘DHT’ does not name a type
Hi Ralph,
You need to install these two libraries:
DHT: github.com/adafruit/DHT-sensor-library/
Adafruit sensor: github.com/adafruit/Adafruit_Sensor
Then, restart your Arduino IDE and try to upload the code again.
Regards,
Rui
Hi Rui, thanks for the reply.
I had the Adafruit sensor library but not the Sensor library.
Still getting ERRORS:
‘DHT11’ was not declared in this scope!!
Rui, I got it working, the last error was because of I chnge I had made.
I was missing the Sensor library.
Thanks for the help!!
Ralph
Works for me!! Read the instructions!!
Hello RUI
Very nice tutorial. I got it working. The content of TEXT Lable (ON/ OFF) changes only when ON or OFF button is touched. I want to ask whether Text Lable can be changed in Nextion display as per the state of Arduino digital pin state i.e. if pin 2 is high then Lable will be ON and vise versa.
If it is possible then how to do that.
The reason of asking this question is that I have connected a blue tooth also on pin 10 and 11 and relays are getting ON and OFF through mobile app connected with blue tooth as well as nextion touch screen. But ON/OFF text is not getting changed when I make relay ON/OFF by mobile app through blue tooth.
Thanks
Hi,
Thank you very much for this helpful tutorial ! But I have a problem with the Arduino Mega, : it seems don’t communicate with the Nextion….. while my Uno works perfectly (I changed the 3 lines in config.h)
I try my Mega with the original config.h and the Uno’s config.h too… I tried several tx/rx on the card, the Mega don’t works with Nextion….
Have you some ideas to help me ? (I wait to receive a new Mega to see if my actual Mega have a problem with tx/rx pins…)
Thank you again for your work đ
Hi Laurent.
We haven’t tested with the Mega. However, the official documentation says that it works with the MEGA. And as you said, if you want to use it with the MEGA, you don’t need to change anything in the config.h file.
If you correctly assigned the TX and RX pins in the MEGA, I don’t have any idea why it doesn’t work.
Take a look at this FAQ with common problems and see if you can find a solution.
support.iteadstudio.com/support/discussions/topics/11000002523P
Then, when your new MEGA arrives, tell us if you were able to fix the problem.
Regards,
Sara
Thank for the answer. I find the solution : the RX/TX must be connected to RX2/TX2 on the Mega. Now all works perfectly
You can continue to write Nextion/Arduino tutorials !!! Very cool đ
Thanks đ
I’m glad it works!
Laurent
Thanks for the solution. Just finished my first setup and it didn’t work. I found your solution here and now it works. One wonders why it doesn’t work with RX0/TX0.
I have a mega2560 and I had to change the nexConf.h file as per instruction above. He states that if its an uno then you have to edit the file. Must be the other way around. And Im using pins 1 and 2.
What would be the code without the update button ?
Looking for the same but the Nextion displaying temp and humidity each x seconds
Looking also the code for +/- buttons to set a desired temp or humidity and to keep this variable in Arduino memory.
Can you help me ?
Hi Bea.
1) To update the reading each x seconds, you need to do the following, in the loop():
– read the temperature, and humidity
– set the text in the nextion display after the readings: tTempC.setText(temperatureCTemp);
I haven’t tried this, but I think it would work if ou use the code that is inside the bUpdatePopCallback() in the loop instead. This way, that piece of code that reads and writes the readings on the Nextion display, would run every x seconds in the loop, instead of just running when you press the update button.
2) To send a variable from the Nextion display to the Arduino, take a look a this link and see if it helps: support.iteadstudio.com/support/discussions/topics/11000009082
Regards,
Sara
Dear,
I have a TJC3224T028_011RN screen. It’s a nextion chinese clone? Can I use this in some way? Or I must put directly in the rubbish?
Thank’s,
Giovanni
Hi.
I’m not familiar with that reference.
You should always check if you’re purchasing from an official ITEAD distribution.
Thanks đ
I had the same version and it worked successfully.
Let me know if I can help you
Hey i am facing the problem . i am unable to communicate my arduino with Nextion 4.3 .
Even i have followed many tutorials but still no use. Can you please help?
Hi Adee.
If you’ve followed our tutorial, everything should be working fine.
So, please check the following:
– check if you correctly assigned the TX and RX pins on the Arduino
– check that you’ve properly configured the library for the Arduino board you’re using. The library default settings are for Arduino MEGA. To make it work with the UNO, you need to change the NexConfig.h file as explained in the “Configure Library for Arudino UNO” section in this post.
– if you’re using a 4.3 inches display, you need to change the display size in the file from the Nextion Editor.
If none of this works your display might be damaged.
I hope this helps.
Regards,
Sara đ
I bought a nextion advanced 3.5″ How can I adapt the pixels of the picture?
Thanks for all your effort to keep us inspired building projects.
Don;t bother to answer. I figured it out myself.
Ben I had tried to reply through email, guess that didn’t work.
Recently I bought Nextion display model NX4024K031 011 which is not listed in the selection list and I am unable to unlock it with the provided pass word. What should I do now ?
I also don’t know the password, because I’ve never used that display myself…
The Nextion help desk actually works also there is a forum!!
Ralph
Would u please tell how to plot graph for the values obtained versus day(or)time ?
Hi Kumar.
We don’t have any tutorial on that subject at the moment đ
okk. will u upload this tutorial in future??
Do u have the tutorial on the time and date display in nextion dispaly??
Hi.
At the moment we don’t have any tutorial about that subject.
We have a tutorial on how to get time using an RTC module but doesn’t use the Nextion display:
https://randomnerdtutorials.com/guide-for-real-time-clock-rtc-module-with-arduino-ds1307-and-ds3231/
Regards,
Sara
I’ve been struggling a lot (I mean A LOT) and this tutorial made my arduino and nextion communication work a 100% for the first time. So for that A BIG THANK YOU!
Hi Simon.
I’m really glad it worked and removed your frustrations!
Regards,
Sara đ
Hello,
Thanks for this tutorial. I replace the dht sensor for a ds18b20 temperature sensor and that works as well! NIce.
But when i tried to bypass the Update-button, the programm crashed. I want to show the temperature real-time, with an small time interval.
But when i removed the update function, the display only shows page 1 (slider/on/off buttons) and when i go to page 2, it jumps directly back to page 1. Also no button/slider is working.
What ‘s the problem?
Gr.
Johan
Hi Rui,
I am not a prof but I want to let work the Nextion 2.4 on my 2560
The display is working but the connection with the 2560 not. In compilation this message:
In file included from C:\Users\Donja\Documents\Arduino\libraries\ITEADLIB_Arduino_Nextion\NexUpload.cpp:16:0:
C:\Users\Donja\Documents\Arduino\libraries\ITEADLIB_Arduino_Nextion\NexUpload.h:19:17: fatal error: SPI.h: No such file or directory
#include
^
compilation terminated.
Do You known what my problem is?
Hi Ruud.
It seems that Arduino IDE is not able to find the SPI.h library. This is weird because the SPI.h library is included on the Arduino IDE by default.
You can also check if the file SPI.h exists in the Arduino Library Path. Go to the skech menu -> Include Library -> SPI
If SPI does not show up the lib is not there and you need to reinstall it.
Also try to include the SPI.h in your main sketch.
If none of these works, try a new Arduino IDE installation.
I hope this helps,
Regards,
Sara đ
Sorry, my problem is solved… Just bypass de listen-function.
Your how to guide for Nextion HMI is likely very better than Itead official manual.
Thanks and stay tuned please for more info’s to these displays.
Regards,Mc El.
Thanks đ
hi, can u upload the nextion work in the website please?
You can download all the Nextion files in this blog post… Thanks for asking!
On page 0, tapping the On and Off buttons to turn the led1 on and off and move the slider to control led2 brightness is working fine. The page 1 does not indicate temperature or humidity. When I press update button, I get switched back to page 0. The back button when pressed also brings me back to page 0. I am using a Arduino uno and a DHT2302 sensor, the sensor works fine in other arduino projects. Any help will be greatly appreciated.
Hi.
Are you using our examples without modifications? Our examples worked just fine for us.
If you’re not getting any errors on the serial monitor and you’re using the exact same examples, it is difficult for me to understand what may be wrong đ
Regards,
Sara
I have not made any modifications using your example. I am using the latest Nextion Editor ver 0.53. I am using the NX4024T032_011 display. I did not create a new project, I just imported the downloaded Nextion_28_project.HML file. Since I am using a 3.2 inch display the system
converted the file to the proper format, I am assuming the original HML was generating for a 2.8 inch display, and the conversion was required in order for me to use a 3.2 display, but I am not sure. After the HML conversion was done, I had the proper page 0, page 1 displayed. I compiled and copied the tft file to a 8 gb sd card. The file was read by the display, powered down
removed the sd card, applied power and I got the proper display. I am wondering if page 1 has all the labels installed after the conversion was done.
I don’t know how to determine if the temperature and humidity label exist on page 1. Thanks for your quick response. August Beza
Hi August.
That’s weird.
I recommend that you open the file using the Nextion Editor software.
Then, the components on the page should show the labels as shown in the images:
https://i1.wp.com/randomnerdtutorials.com/wp-content/uploads/2017/11/page0_swap.png
https://i1.wp.com/randomnerdtutorials.com/wp-content/uploads/2017/11/second-page.png
I also suggest that you test the interface on the Simulator as shown in the “Testing the Interface in the Simulator” section of this post and try to understand if all components are working and if they have the corresponding labels.
I hope this helps.
Regards,
Sara
I have a hit a problem when I load the .tft file from the micro sd card that it says model does not match. Device Model: TJC3224T028_011R.
When I purchased this off ebay, it says it was a 2.8in Nextion display.
When I go to your recommended link it also points to a similar device.
Hi David.
I’m not sure, but it seems that you have a “chinese” version of the Nextion display – a TJC type. All TJC type displays are for the Chinese market and the Nextion editor does not allow you upload .TFT files from the Nextion Editor. There is a way to upload files as described here bullet 3: https://translate.google.com.au/translate?hl=en&sl=ru&u=http://robotclass.ru/tutorials/arduino-nextion-tjc/&prev=search (I haven’t tried it).
Again, I’m not sure if this is your problem, and if this might be a solution.
If you provide more details maybe someone can help.
Regards,
Sara
Website is great! I find myself here trying some of your projects a lot! This is a great example with the Nextion!
I am having an issues with the display not reading the sd card and I have seen on forums other people having this issue. What do you recommend? My display is NX4832K035_011
Thanks,
Kevin
Got it to work! Just had to change the screen setup.
That’s great!
I’m glad you got it working! đ
Hello All, it’s incredible that nobody noticed an important thing ! How to change page ? Look into the firsts screen there are two button bNext and bBack to change page but there is NOTHING into the code !!! ??? So how it’s works ? (to change page) nothing visible inside arduino code…
Thanks for return.
Hi Christ.
Changing the page is handle on the .HMI file you create on the Nextion Editor. See the “Creating and Navigating to a New Page” section.
Regards,
Sara
Hi Chris.
Changing the page is handle on the .HMI file you create on the Nextion Editor. See the “Creating and Navigating to a New Page” section.
Regards,
Sara
Hi, some thoughts and comments on the Nextion displays…
One useful feature would be to have a screen saver, I know you can put the display to sleep and wake up again but I haven’t got around to making it work reliably yet.
The Nextion displays are a (relatively) easy way of adding a touchscreen to any project that has a spare serial port (I have used with SoftSerial on a Uno as well with no problems [except reliable sleep/wakeup]). The Nextion HMI editor is simple to use and custom graphics are easily added – any graphics editor will do (GIMP, Paint, etc).
It is *very* important to have an adequate 5 volt supply to the displays so not recommended for battery powered projects unless the voltage rail is monitored and the display is shut down well before a brownout condition occurs – it can prove fatal to the display!
Hi Kent.
Thank you so much for sharing your opinion about Nextion Displays.
In my opinion they provide an easy way to add a touchscreen interface to a project. Although a bit difficult to set up for the first time, after that, they are relatively intuitive to use.
Regards,
Sara đ
Hi,
How to use Arduino Due with Nextion display? with Mega no problems!!!
tks
Hi Claudio.
Unfortunately, I haven’t tested this tutorial with that board.
Regards,
Sara
So what is the problem? What doesn’t it do?
Ralph
Hi @all, is there a Possibility to include a live stream in an additional page? I couldnÂŽt find any descriptions or icons in the left column (where the buttons, waves and so on are).
Means, attach a page, replace arduino with an ESP32 CAM Module (I didnÂŽt do this before, itÂŽs an idea) and do all the funny things like Input/Output Control and have the option, to see what happens in the garden for example or who rings the door …
hi, can you please upload the tft file for the nextion display?
Hi.
The TFT file is provided in the post.
But in case you couldn’t find it, here is the link to download: https://github.com/RuiSantosdotme/Nextion-Project-Example-Arduino/raw/master/Nextion_28_Project.tft
Regards,
Sara
Thanks so much for this tutorial. Particularly in light of the fact that Nextion support is lacking (work-friendly version of my opinion).
You might consider a couple of modifications to extend what you’ve done:
1) have a button fire on the Touch Press event;
2) add more components (i.e. radio, checkbox, dual-state).
Specifically, I had trouble adding a radio to the project because the library I downloaded didn’t include NexRadio.h, which, also, left me without a radio command reference.
Hi Rick.
Thank you for your comment.
I agree with you that it lacks user friendly instructions.
However, at the moment we don’t have more Nextion tutorials with the Arduino.
Regards,
Sara
Well you should do more! Your first was easy to follow and informative, and like Rick said more components please.
Also help on integrating the Nextion 8″ LCD would be nice.
Especially with the Raspberry Pi, the advantage of using the Nextion display is you do not have to code everything on the processor but it looks like you do have to code the processor on the Pi, there apparently isn’t the front end available on the Arduino.
Thanks for all of your postings.
Ralph
Hi Rui, Hi Sara,
how are you? I tried to upload the .HMI (Nextion_28_Project) file into my Nextion NX4024T032_011, but seems that “target device doesn’t match selected device NX3224T028_011” set model. Any idea to fix this issue? thanks a lot. Domenico from Italy.
Hi, I bought your book on ESP32 Micropython but now I have a question for you: the code for Nextion and Arduino is ok but the same code does not work on ESP32 and Nextion.
The file NexConfig.h for ESP32 should not be modified as for Arduino but it does not work. Is it possible that it doesn’t work on ESP32?
Thank you
Riccardo Ballerini
Hi Riccardo.
I haven’t experimented with the ESP32 and Nextion display yet.
But did you modified the NexConfig.h properly for the EPS32?
You can see the instructions here: https://nextion.ca/portfolio-items/nextion-iteadlib-and-esp32-step-by-step/
Regards,
Sara
Hi!
As per your tutorial I’ve tried Nextion Display 4.3′ with Arduino Mega 2560 and it works fine. i am wondering how to use similar Nextion display with Teensy 3.2 .
Can you help me out?
Thanks a lot in advance
Hi.
We don’t have any tutorials about Nextion and Teensy.
Regards,
Sara
Hello. Im trying to connect an ESP32-cam with a nextion display, but it doesn’t work. I’ve tried with an arduino nano and I works great. I’ve tried the changes suggested in this site (https://nextion.ca/portfolio-items/nextion-iteadlib-and-esp32-step-by-step/) but the esp32-cam doesn’t allow me to use the Serial2, only the Serial(0) (ut0, ur0). Any ideas how to make it work?
Amazing tutorial!!! Thanks!
In what editor do you open NexConfig.h in order to modify it? I am unable to save the modified file when edited in notepad or wordpad in Windows 10. I get a message: Access to C:\Program Files(x86)\Arduino\libraries\ITEADLIB_Arduino_Nextion-master\NexConfig.h was denied.
Hi Greg.
I wrote that tutorial a long time ago.
But I think, I was using atom.io to open the file.
Regards,
Sara
You need to change the permissions for the File/Folder!
Ralph
Hi Sara
I get “Declare your Nextion opjects……”
NexText tHumidity = NexText (1, 9, “tHumidity”); (9th line)
the message: ‘NextText’ does not name a type
What is the cause of this?
Hi.
You probably haven’t installed the right library.
Download the library here: https://github.com/itead/ITEADLIB_Arduino_Nextion/archive/master.zip
Then go to Sketch > Include Library > Add .ZIP library and select the library you’ve just downloaded.
Regards,
Sara
Did you manage to fix the black bar on the right of the screen?
Hello, everything works perfectly. Thanks but i want a similar project with Micropython on ESP32 and a nextion display.
Hi.
Unfortunately, we don’t have any tutorial with Nextion and MicroPython.
Regards,
Sara
Thanks Sara…
I have been successful in replicating that with Micropython. Will be glad to share the code one of these days.
Kobena
Please do post the code!
Ralph
I have may be the the moderator has to give the nod first.
Cheers,
Kobena
Yes, you can share your code.
But please, don’t paste it here.
Share a link to pastebin or github.
Regards,
Sara
That would be helpful.
Thanks đ
Thanks Sara.
Please see the link below:
https://github.com/kobena/ESP32_Micropython_Nextion.git
Cheers,
Kobena
Thank you so much đ
I’ll point your resources when someone asks me for an example using MicroPython.
Regards.
Sara
Hello Sara and Rui.
Can the data from page2 of this example also be updated without using the update button?
For example after an X number of seconds.
I am not getting it working properly.
Please give me a hint
Greetings Bert
Thank you very much for the tutorial ,,, how would you use the BME280 with the LCD nextion, at the same time sent to thingspeak?
Hi i got it working thanks for doing this project will help with a clock project idea
If Nextion wants 5v apart, can I turn it on and off directly with arduino?
Because the black color … is not black when I want it off.
@}-,-‘——–
Gianfranco
(Happy new year!)
I copied the sketch source and tried to compile and I get a lot of error of the type:
“sketch_jan27a:25:1: error: ‘NexText’ does not name a type
NexText tState = NexText(0, 4, “tState”);”
There is some error with the library I guess so what Nextion.h library should I choose?
I did some testing. When I put in <NexText.h> just before <Nextion.h> then the sketch compiles OK. How the compiler can find NexButton, NexSlider etc I don’t understand. Perhaps someone in this forum can explain how this works.
Hello
Did you download the .zip library from github and inserted it into you Arduino folder?
Best regards
C:\Users\\AppData\Local\Arduino15\staging\libraries contains files
ITEADLIB_Arduino_Nextion.zip
Nextion.zip
Documents\Arduino\libraries contains libraries
ITEADLIB_Arduino_Nextion
Nextion
The question is: If I don’t #include ITEADLIB_Arduino_Nextion how can it still find commands in that library?
When I look in Tools>Manage Libraries and search for ITEADLIB it’s not in there.
Frankly, I don’t understand the Arduino library system.
There’s an issue with the HMI file in the Zip attached to this tutorial.
There are two extra components, a text field on Page 0, and a second back button on Page 1. The text field is in the upper left corner and is default values The back button is labeled bBackt and is overlaid on top of the bBack button object.
Deleting these extra objects changes the IDs of the existing objects, making jHumidity ID 7, tHumidity ID 8, and bUpdate ID 9. Needless to say with the values in the code being 8, 9, and 10 respectively, this causes a problem.
When I try to compile the Arduino file as posted in the tutorial – with #include “Nextion.h” only, I get the error messages ‘Nex…’ does not name a type for each Nex… line in the Nextion objects declaration.
What am i doing wrong?
copy the directory “ITEADLIB_Arduino_Nextion-master” to Arduino / libraries
I am unable to get the background image in the editor.
In my opinion I follow the instructions as described.
What is the cause?
It took a while but now I understand the Nextion editor a bit.
I can help myself with it. Thanks to internet.
I also bought a Nextion display and I have to say, it is a nice device that does what it should do. And it can do a lot.
You must of course connect a Nextion display to another device.
That could be an Arduino or an ESP8266 or something else. This is done via an RS232 connection.
At that moment you have to deal with voltage levels, wiring, connection points and different supply voltages.
For me, the following solution was the simplest in terms of operation and effectiveness. Connect the Nextion display to a â433Mhz HC-12 SI4463â module
and on the other side the ESP also to a â433Mhz HC-12 SI4463â module.
The advantages are that you need very few extra wires.
No problems with the voltage levels. (3.3 Volt and 5 Volt)
The display and other device can be remote from each other.
Enclosures are much smaller etc. Hopefully someone can take advantage of this.
A â433Mhz HC-12 SI4463â module can operate on 3.3 Volt as well as 5 Volt and can be set to more than 200 channels.
Good afternoon,
I have a problem because I use the same project as yours, and I can from arduino send text and is displayed on the screen, but I can not detect any button, I have simplidicado the code so that only update the text state: ON/Off but I can not do that from arduino detect the event.
Could you help me please? What can I be doing wrong?
Thanks
Good,
I have a weird situation, I have the software running for Arduino with my nextion, but if I connect a Wemos / Lolin, the wemos is not able to write or read anything from the Nextion. could you help me, why can it be?
Dear,
i have a problem in ESP32 WROOM32 with RFID MFRC522 and NEXTION display connected on serial port 2.
the programs work separately, if I create a program with both of them (I show on the nextion what I read from rfid it doesn’t work)
Do you have a suggestion
Best Regard
Lino
Hi.
Without further information, it is very difficult to find out what might be wrong.
When you say it doesn’t work, what happens exactly?
Regards,
Sara
HI
I am using A mega board. I have uploaded Textion TTF file and all is good. When comes to code Arduino all hell let loose. It seems to revolve around eeprom_update_block
c:\users\paul\appdata\local\arduino15\packages\arduino\tools\avr-gcc\7.3.0-atmel3.6.1-arduino7\avr\include\avr\eeprom.h:214:59: error: ‘size_t’ has not been declared
void eeprom_update_block (const void *__src, void *__dst, size_t __n);
Any ideas would be appreciated. There is a bucket load more and maybe is a conflict between 2 locations
Not working. The Nextion is not communicating with Uno (nothing in serial monitor and no indicator lights TX RX). I checked the connections (reversed them too đ ).
Is there a way to test the Nextion output? Not sure if I have a bad unit.
thanks
Hi
Thankyou so much for the tutorial. That was really helpful and helped me out a great deal.
Thanks again
Please confirm me one thing: what is the logic level of NX3224T028’s display? I thought it was 5V but found conflicting information. I wanted to connect it to a ESP32 that will require an external power source as the ESP32 can’t supply the 500mA required current. Just want to confirm if I need 3.3-5 V level shifting. Thanks!
Thanks for this Tutorial.
One problem I am facing. I have made the same type of project with the help of your tutorial
in that I placed a slider on page 4 to control the temperature.
but the problem is when it is the same it holds its value but when i change the next page and come back again to the slider page.
The whole value is RESET to initial