Introduction: Getting Started With Nextion and Arduino Uno

By

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.

Attachments

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