HOME ESP32 ESP8266 ESP32-CAM RASPBERRY PI MICROPYTHON RPi PICO ARDUINO REVIEWS

Nextion Display with Arduino – Getting Started

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:

  1. Click here to download the Nextion library for Arduino – ITEADLIB_Arduino_Nextion. You should have a .zip folder in your Downloads folder.
  2. Unzip the .zip folder and you should get ITEADLIB-Arduino-Nextion-master folder.
  3. Rename your folder from ITEADLIB_Arduino_Nextion-master to ITEADLIB_Arduino_Nextion.
  4. Move the ITEADLIB_Arduino_Nextion folder to your Arduino IDE installation libraries folder.
  5. 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:

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.

  1. Main Menu
  2. Canvas – this is where you add your components to build the User Interface.
  3. 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.
  4. Picture/Fonts list – this shows the fonts and pictures imported to your projects. Here you can also add new fonts and pictures.
  5. Page area – you can manage your pages here, like add more pages, copy and delete pages.
  6. Attributes area – this part shows your component’s attributes. You can edit the component’s attributes here.
  7. Compiler output window – this will show any errors occurred during compiling.
  8. 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);
}

View raw code

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.



SMART HOME with Raspberry Pi ESP32 and ESP8266 Node-RED InfluxDB eBook

SMART HOME with Raspberry Pi, ESP32, ESP8266 [eBook]

Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Recommended Resources

Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.

Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.

Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience!

What to Read Next…


Enjoyed this project? Stay updated by subscribing our newsletter!

115 thoughts on “Nextion Display with Arduino – Getting Started”

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

    Reply

    • 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

      Reply

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

    Reply

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

    Reply

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

    Reply

    • 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

      Reply

      • 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 🙂

        Reply

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

      Reply

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

    Reply

    • 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

      Reply

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

    Reply

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

    Reply

    • 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 🙂

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

    • 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 🙂

      Reply

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

    Reply

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

    Reply

    • 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

      Reply

      • 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

        Reply

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

    Reply

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

    Reply

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

    Reply

    • 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

      Reply

    • 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

      Reply

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

    Reply

    • 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 🙂

      Reply

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

    Reply

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

    Reply

    • 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

      Reply

      • 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

        Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

  41. 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!)

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

    • 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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.