Getting Started With Nextion and Arduino Uno

Hi all,

I am in the process of writing 3 instructables on how to use the Nextion displays with your Arduino Uno. In this first part I will show you how to connect your Nextion display to your Arduino Uno. We will also cover how to detect a button tap without the library and with debugging enabled. I am not using the library, because I've found the code to lack explanation and my Arduino sketches don't want to compile when adding the libraries.

This project will be a simple button on the Nextion, switching a LED on and off.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: What You'll Need

1x Arduino Uno

1x Nextion display (I had a 2.8" model)

1x LED

1x 330 Ohm resistor

6x male-male jumpers

1x bread board

1x USB cable to connect the Arduino to the PC

1x Micro SD card

1x Micro SD card reader that can connect to the PC

A PC with the Nextion editor installed on

Step 2: Creating Our Interface

  1. Open the nextion editor.
  2. Create a new HMI file (File > New > Rename > Save).
  3. Choose your display size (don't press OK yet!).
  4. Orient the display (Click the "Display" tab on the current window > Choose orientation > Click OK).
  5. Generate a font - this is quite silly, but absolutely necessary (Tools > Font Generator > Choose a size > Choose a style > Enter a font name > Click "Generate Font" > Save the font in the same directory as your HMI file.
  6. Add generated font (Just click "OK" on the pop up window).
  7. From the toolbox on the left, add a button.
  8. Resize it (if you want to).
  9. Add a touch event (In the "Event box", bottom-middle-ish, choose the "Touch Release Event" tab > Check the "Send Component ID" checkbox).
  10. Compile the file (under the menu bar there is a bar with compile button).
  11. Put the file on your SD card (Go to File > Open build folder > Copy the .tft file > Paste it to your SD card).
  12. Note: Make sure the .tft is the only file on the SD card and that the card is formatted to FAT32.
  13. Insert the SD card into the Nextion.
  14. Power on the Nextion (use the adapter inside the box OR connect the red wire to 5V of an on Arduino and the black wire to ground on the Arduino).
  15. Wait for the program to upload.
  16. Power off the screen > Wait > Power on the screen.
  17. You should see your new display.

Here is a link to the Nextion instruction set. You can use these instructions to determine what else must be sent to the Arduino.

Step 3: Program the Arduino

Upload the sketch to the Arduino. I tried adding enough comments to the sketch to make it clear.

The message structure that comes from the Nextion is as follows:

  1. 3 characters that indicate the start and type of message.
  2. The page number.
  3. The component number.
  4. The value of that component.
  5. 3 repeats of '255' indicating the end of the message.

I am still working on how variables and such are transferred to the Arduino.

Step 4: Connect the Nextion and Arduino

Connect the red and black wires to 5V and ground on the Arduino respectively. Connect the blue (TX) wire of the Nextion pin 10 and the yellow (RX) wire to pin 11.

The wire on pin 13 is to power the LED. More on this in following steps.

Step 5: Build the Circuit

  1. Connect the short leg of the LED to ground on the Arduino.
  2. Connect the resistor and long leg of the LED in series.
  3. Connect pin 13 to the resistor.

Step 6: Finished

You should see your LED turn on and off when tapping the button. If you open the serial monitor and set it to 57600 baud you should also see some info being spit out (as defined in the sketch).

Share

Recommendations

  • Indoor Lighting Contest

    Indoor Lighting Contest
  • Make It Fly Challenge

    Make It Fly Challenge
  • Growing Beyond Earth Maker Contest

    Growing Beyond Earth Maker Contest

23 Discussions

0
None
KarthikK118

5 months ago

I need to control led on nodemcu with nextion display.Please help me out.

0
None
JohnT482

2 years ago

Hello Gideon,

There is a small error in Step 2.16, it should read:

16. Power off the screen > Remove SD card > Power on the scree

2 replies
0
None
MartinDMGideon Rossouwv

Reply 8 months ago

That caught me too. I left the SD card in and it continually updates on power up. :)

0
None
abeza

8 months ago

Your instructions I followed were very clear, it worked perfectly.
It was the first time I used the nextion display touch screen function.
Thank you

0
None
tommynar

10 months ago on Step 6

This is one of the best tutorials I have found in the Adruino field. Simple steps, outlined EXACTLY,. No long explanations about what new project the writer was doing. The extra link allowed me to figure out how to hide or display a picture. The entire project took me less than 1 hour. A+++ (eBay rating...).

Tom

0
None
Pep943

12 months ago

Excellent great work & very helpful to me !!

0
None
joostvanpoppel

1 year ago

Hi, very nice tutorial. I'm doing a proof of concept of 4 Nextion displays connected to one Arduino Uno. Was looking for a way to send/receive from them all and found out, looking at your code, that this is possible with the SoftwareSerial library. Thanks for sharing!

1
None
convertiblehaus

2 years ago

this works great! can someone help me rewrite this code for 2 or 3 buttons? thanks

0
None
KarlL35

2 years ago

Ho Gideon,

Works great! I made some changes to use it with the Mega. I bumped into some limitations of the Itead library ( global variables and lots and lots of lines). This is right to the point and lots easier. Finally I like the Nextion display.

/*

Changes to use it with the MEGA

*/

//#include <SoftwareSerial.h> //Include the library

bool button = false; //will store the button state

//SoftwareSerial mySerial(10, 11); // RX, TX

String message;

void setup() {

// Open serial communications and wait for port to open:

Serial.begin(9600); //open the serial port

//while (!Serial2) {

; // wait for serial port to connect. Needed for native USB port only

Serial.println("Serial On");

pinMode(13, OUTPUT);

// set the data rate for the SoftwareSerial port

Serial2.begin(9600);

}

void loop() { // run over and over

while (!Serial2.available()){ //While no data is coming in from the Nextion

if (message.length() > 14){ //This was the easiest way for me to check that the whole message has been received. Some messages might be longer, but the shortest ones are 15 characters.

Serial.println(message); //See what the entire message that the Arduino receives from the Nextion

Serial.print("button state: ");

Serial.println(button); //See what state the button is in

Serial.print("message[3]: "); //according to the Nextion message structure, item 4 will be the page number.

Serial.println(message[3]); //See what message[3] (the fourth character in the message) is

Serial.print("message[4]: "); //according to the Nextion message structure, item5 will be the component number.

Serial.println(message[4]); //See what message[4] (the fifth character in the message) is

if (button == false && message[3] == '0' && message[4] == '1' ){ //Test that the button is off and that it was indeed this button that has been pressed

button = true; //The button is now pressed

digitalWrite(13, HIGH); //Switch on the led

Serial.println("case 1"); //For debugging. Check that the 'if' was entered

message = ""; //Clear the message, otherwise the next if will also be activated

}

else{ //Else the button is on and that it was indeed this button that has been pressed

button = false; //The button has been deactivated

digitalWrite(13, LOW); //Switch the led off

Serial.println("case 2"); //For debugging. Check that the 'if' was entered

message = ""; //Clear the message, otherwise we might get mixed messages

}

}

}

while (Serial2.available()){ //Is data coming through the serial from the Nextion?

message.concat(Serial2.read()); //If so, construct the message

}

}

5 replies
0
None
Skarstein ServiceKarlL35

Reply 2 years ago

Hi

I'am New to this (nextion/arduino). Thanks for sharing codes. I have a controllino mega and a enhanced 7" from nextion. I tried to use Your code, and get it partly to work. My problem is that the output does not always get triggered by the nextion button. Logged the Serial communication, and found out that each time i push the nextion button the adress gets changed. Any suggesten for what the reason for this is?

0
None
KarlL35Skarstein Service

Reply 2 years ago

Hi,
Hm... I suspect somewhere that the problem is in the Nextion LCD or configuration (with nextion editor)... but I ordered my Nextion 7" 1 week ago, and I will receive it within 1-2 weeks. Maybe there is some small difference with the 4,2" I'm using at the moment. I will be happy to try it out then.
1/Did you measure the 5V on the display. is it really 5Vdc?: I noticed ( and is commonly known) that they are sensible to low voltage. I got problems because my voltage was 4,8V ( slow or no reaction).
2/ I suppose that the grounds of mega and nextion are connected with each other?
Best regards
Karl

0
None
Skarstein ServiceKarlL35

Reply 2 years ago

Thanks for a good reply. The problem was that the grounds was not Connected With each other.

How could I modify this code to function With multiple buttons?

0
None
KarlL35Skarstein Service

Reply 2 years ago

I used an 'case' statement. Every button sent its code, and here I defined the actions to do per button.

gr

karl

0
None
Gideon RossouwvKarlL35

Reply 2 years ago

Hi,

Thanks for sharing your code here. I have a mega too, so perhaps I'll use your code sometime. Hopefully it will be of use to others too!

0
None
uludirik

2 years ago

Hi Gideon,

I am influenced your works. But i have a questions.

In this cods 2XLED how come ?

i made but 2.led did not work efficiently??

Whats this hint :)

1 reply
0
None
Gideon Rossouwvuludirik

Reply 2 years ago

Hi,

I am not entirely sure what you mean. Please direct me to where in the code your problem is?

Regards,

Gideon

0
None
MichaelM1009

2 years ago

Thanks a lot, code worked great... Like the others I was having the same problem and your post was the first that worked for me.

1 reply
1
None
tsgcoltd

2 years ago

It was really great was the only circuit that was set-up is simple and practical.

Thank you