Getting Started With Nextion and Arduino Uno

Published

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

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

    • Oil Contest

      Oil Contest
    • Water Contest

      Water Contest
    • Clocks Contest

      Clocks Contest

    18 Discussions

    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!

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

    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

    1 reply

    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

    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?

    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

    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?

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

    gr

    karl

    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!

    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

    Hi,

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

    Regards,

    Gideon

    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

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

    Thank you

    0
    user
    sdtag

    1 year ago

    thank you so much for this. I am not a programmer and I have been struggling with this Nextion 2.4 for about a week now. I do a lot of copying and pasting. I could never get their sketchs to compile either. But now with your help I can press a button on the screen and watch my Arduino change state. FINALLY! It shouldn't be this hard. Thank you - I feel like I am finally making some progress now.

    1 reply

    Hi,

    I am very happy to hear that you benefited from this. Getting started with the Nextion was a major problem for me as well. As soon as I added the library the sketch wouldn't compile.

    I also did a part 2 and 3 of working with the Nextion. Part 3 is capable of handling more complex interfaces.

    Regards,
    Gideon

    interesting way to interface with Arduinos. I might have to try this out.