Using Nextion displays with Arduino

Other Hardware Displays
4

Updated 3/7/2021

How to use multi-line text boxes added to Nextion additional features

Using Nextion displays with Arduino part 4
Some things that might help you

ESP8266
The ESP8266 has one serial port with both Tx and Rx available, and one with only Tx available. The one with both Tx and Rx is already in use for the serial monitor, making connecting a Nextion a bit of a problem. To get around this first write you code to send information to the Nextion but let it go to the serial monitor. When you are satisfied it is correct then use Serial.swap(), which will swap the serial port to GPIO15 (Tx yellow) and GPIO13 (Rx blue). Note that GPIO15 (Tx) is also used on boot of the ESP8266 and if high makes it boot from an SD card, which creates a problem if you have a serial device connected and press reset, as the serial device will hold GPIO15 high. To get round this put a 10k (or possibly lower) resistor between GPIO15 and ground, this will hold GPIO15 low during boot.

Numbers
You might have noticed that in this demonstration I have used a single text box, t1, to display the time, I have not used one of the pre-defined number objects available in the Nextion editor. I found the numbers to be pretty useless, they can only be integers and they can't have any symbols attached to them, so you can't easily do £123.65 or 23.85% for example. Using a text box and print is much simpler.

Sliders
Page 1 of the demonstration has a slider with 3 text boxes, the first shows 2 bytes in hex as received from the Nextion, the 3rd shows the decimal value of the slider. I've made the range 0 to 1023, which is 0x00 to 0x3ff.

Baud rate
You can change the baud rate from 9600. In the Nextion editor select page 0 and find post initialisation event under event. Put baud= as the first entry, for example baud=19200. This will make the display initialise with a baud rate of 19200. In your sketch initialise the serial port with:

Code: [Select]
[/color]

void setup() {
   //This is for serial port 1, which is the one used in this demonstration. 
   //You might need to change this depending on which serial port you are using for your display.
  Serial1.begin(19200);
}

If you want to change the baud rate during program execution you have to be careful not to end up with the Arduino at one baud rate and the display at another. For this reason you need to send the change of baud rate instruction to the display, wait for the instruction to be sent then change the rate on the Arduino, then send data and instructions at the new rate. This will tell the display to change its baud rate:

Code: [Select]

void HMI_baud_change(uint32_t baud) {
  Serial.print(F("baud="));
  Serial.print(baud);
  Serial.write(0xff);
  Serial.write(0xff);
  Serial.write(0xff);
}

However, you have to remember that serial transmission is slow, so after the last Serial.write(0xff); has completed the 'b' of baud will probably not have been sent to the display. Also, once the display has received the complete instruction it takes time to make the change. For this reason you need to wait before changing the Arduino baud rate with:

Code: [Select]

Serial.begin(new baud rate);

Changing pages
If you look at my demonstration configuration there are 2 buttons P0 and P1 on each page. P1 on page 0 and P0 on page 1 change the page displayed but don't tell the Arduino that the page has changed. On each page under post initialisation event is the code that tells the Arduino that the page has changed. This is to ensure that the page has properly initialised before the Arduino sends any data to it.

Using background images
The demonstration Nextion configuration I supplied in 'Arduino Nextion demo 43V1 HMI.zip' is about as simple as I could make it. It is possible to use 2 (or more) background images to provide buttons or whatever you like in any design you want. To do this means using the Nextion cropped image feature. Attached to this post is 'Arduino Nextion demo cropped images 43V1.zip', which is exactly the same Nextion configuration file but using cropped images for the buttons to demonstrate how to do this.

Nextion additional features includes:
A scrollable list
Having the Arduino trigger code to run on the Nextion
Using a slider
Displaying numbers without using number boxes
Using flags
A simple state machine
Measuring the duration of a button press
A simple calculator (added 3 November 2019)
A means to send the Nextion return codes to the serial monitor
How to use multi-line text boxes (added 30/7/2020)

Using a Nextion QUERTY keyboad
I was asked for a way to use the QUERTY keyboard built into a Nextion display. The methods set out above do not accommodate this very well, have a look at Receiving information from Nextion - #8 by PerryBebbington for a solution.

Credits
Thank you Robin 2 and
BallscrewBob for your help with this tutorial

2019-06-08 Arduino Nextion demo cropped images 43V1.zip (78.6 KB)

2022-08-01 Nextion_additional_features.zip (28.9 KB)

2 Likes