How to Interface NX3224T028 Nextion Display with Arduino UNO

Contents hide

1 Introduction

2 Specifications about Nextion display

3 Hardware Required

4 Circuit Diagram

5 Arduino Code

6 Working Explanation

7 Code Explanation

8 Application and Uses

Introduction

Nextion display is basically the human-machine interface. Essentially used to make an interaction between a human and a machine. Generally, it has a wide range of applications in the IoT field. The favorable part of the device is that it is replacing the LCDs. So, In this tutorial, we are going to interface ” Nextion with Arduino UNO”.

For making projects with the Nextion display, one can download the Nextion editor to create their own GUI interface. Also, this display is relatively cost-effective. Moreover, Nextion also has a built-in controller that helps to create the buttons, and text, store images, and can also change the background.

Specifications about Nextion display

Nextion has an operating voltage range from 4.75V to 7 Volts.
it typically draws a current of 250mA.
The working temperature range is from -20 degrees to 70 degrees.
Working humidity is from 10% to 90%.
It contains the maximum flesh memory of 16MB.
RAM memory is about 3584 bytes.
Its resolution is about 480*272 pixels.
The display has the resistive touch type.

Buy Now

Hardware Required

S.no	Component	Value	Qty
1.	Arduino UNO	–	1
2.	USB Cable Type A to B	–	1
3.	Jumper Wires	–	1
4.	Nextion	NX3224T028_11	1

Circuit Diagram

Connection Table

Arduino	Nextion
GND	GND
Arduino pin 1 (TX)	RX
Arduino pin 1 (TX)	TX
5V	VCC

Arduino Code

// Circuits DIY
// For Complete Details Visit -> https://circuits-diy.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);
}

Working Explanation

To make this project, Nextion with Arduino UNO, first, you need to create the user interface on Nextion Editor. Download the required files and create the GUI for the required code. We have created two pages, first to control the LEDs and to show the data coming from DHT. The second is to show the current temperature and humidity. If you are a beginner then search for various methods to build the GUI and compile it on the next display. After that, write the code on Arduino. Upload it on the Arduino. Now, with this GUI and code, you can control the Arduino pins.

Code Explanation

First, you need to install nextion editor. You can install and download it from:

Now, you need to download nextion and DHT libraries. You can download that from:

To configure the nextion library with Arduino, open the ITEDLIB_arduino_Nextion. Next, open NexConfig.h file. Change line no 37 and write #define nexserial Serial. And, save that file
In the code, we have first included the nextion and DHT libraries. And, have defined that DHT is connected with pin 4 of an Arduino. After that, we defined the DHT type. Then we initialized the sensor by using dht(DHTPIN, DHTTYPE). Further, we have defined the LEDs that are connected to the Arduino. Moreover, we have declared the nextion objects like tstate, thumidity, etc. Then we used NexTouch for all the touchable components. Now we have created the call-back function using the bOn button. This will set the LED1 high. Also, it updates the tstate with the state on. In the same vein, we have created the bOff function. Then we have written the function for slider h0. After that, we have written the function for bUpdtae, which is the update button. Then we created the code to read the temperature and humidity.
In the void setup, we have attached the functions with events by using attachPop. For instance, click on the bOff button and bOffpopcallBack would be triggered.
In the void loop, the next loop has been created so that when any event occurs, the related function would be triggered.