loading

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

<p>this works great! can someone help me rewrite this code for 2 or 3 buttons? thanks</p>
<p>Hello Gideon, </p><p>There is a small error in Step 2.16, it should read:</p><p>16. Power off the screen &gt; Remove SD card &gt; Power on the scree</p>
Thanks. I will make the change.
<p>Ho Gideon, </p><p>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.</p><p>/*</p><p>Changes to use it with the MEGA</p><p> */</p><p>//#include &lt;SoftwareSerial.h&gt; //Include the library</p><p>bool button = false; //will store the button state</p><p>//SoftwareSerial mySerial(10, 11); // RX, TX</p><p>String message;</p><p>void setup() {</p><p> // Open serial communications and wait for port to open:</p><p> Serial.begin(9600); //open the serial port</p><p> //while (!Serial2) {</p><p> ; // wait for serial port to connect. Needed for native USB port only</p><p> Serial.println(&quot;Serial On&quot;);</p><p> pinMode(13, OUTPUT);</p><p> // set the data rate for the SoftwareSerial port</p><p> Serial2.begin(9600);</p><p>}</p><p>void loop() { // run over and over</p><p> while (!Serial2.available()){ //While no data is coming in from the Nextion</p><p> if (message.length() &gt; 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.</p><p> Serial.println(message); //See what the entire message that the Arduino receives from the Nextion</p><p> Serial.print(&quot;button state: &quot;); </p><p> Serial.println(button); //See what state the button is in</p><p> Serial.print(&quot;message[3]: &quot;); //according to the Nextion message structure, item 4 will be the page number.</p><p> Serial.println(message[3]); //See what message[3] (the fourth character in the message) is</p><p> Serial.print(&quot;message[4]: &quot;); //according to the Nextion message structure, item5 will be the component number.</p><p> Serial.println(message[4]); //See what message[4] (the fifth character in the message) is</p><p> if (button == false &amp;&amp; message[3] == '0' &amp;&amp; message[4] == '1' ){ //Test that the button is off and that it was indeed this button that has been pressed</p><p> button = true; //The button is now pressed</p><p> digitalWrite(13, HIGH); //Switch on the led</p><p> Serial.println(&quot;case 1&quot;); //For debugging. Check that the 'if' was entered</p><p> message = &quot;&quot;; //Clear the message, otherwise the next if will also be activated</p><p> }</p><p> else{ //Else the button is on and that it was indeed this button that has been pressed</p><p> button = false; //The button has been deactivated </p><p> digitalWrite(13, LOW); //Switch the led off</p><p> Serial.println(&quot;case 2&quot;); //For debugging. Check that the 'if' was entered</p><p> message = &quot;&quot;; //Clear the message, otherwise we might get mixed messages </p><p> } </p><p> }</p><p> }</p><p> while (Serial2.available()){ //Is data coming through the serial from the Nextion?</p><p> message.concat(Serial2.read()); //If so, construct the message</p><p> } </p><p>}</p>
<p>Hi</p><p>I'am New to this (nextion/arduino). Thanks for sharing codes. I have a controllino mega and a enhanced 7&quot; 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?</p>
Hi, <br>Hm... I suspect somewhere that the problem is in the Nextion LCD or configuration (with nextion editor)... but I ordered my Nextion 7&quot; 1 week ago, and I will receive it within 1-2 weeks. Maybe there is some small difference with the 4,2&quot; I'm using at the moment. I will be happy to try it out then.<br>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).<br>2/ I suppose that the grounds of mega and nextion are connected with each other?<br>Best regards<br>Karl<br>
<p>Thanks for a good reply. The problem was that the grounds was not Connected With each other.</p><p>How could I modify this code to function With multiple buttons?</p>
<p>I used an 'case' statement. Every button sent its code, and here I defined the actions to do per button.</p><p>gr</p><p>karl</p>
<p>Hi,</p><p>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!</p>
<p>Hi Gideon,</p><p> I am influenced your works. But i have a questions.</p><p>In this cods 2XLED how come ?</p><p>i made but 2.led did not work efficiently??</p><p>Whats this hint :)</p>
<p>Hi,</p><p>I am not entirely sure what you mean. Please direct me to where in the code your problem is?</p><p>Regards,</p><p>Gideon</p>
<p>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.</p>
<p>I am glad it was of use to you.</p>
<p>It was really great was the only circuit that was set-up is simple and practical.</p><p>Thank you</p>
<p>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. </p>
Hi,<br><br>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.<br><br>I also did a part 2 and 3 of working with the Nextion. Part 3 is capable of handling more complex interfaces.<br><br>Regards,<br>Gideon
<p>interesting way to interface with Arduinos. I might have to try this out.</p>

About This Instructable

6,509views

16favorites

License:

More by Gideon Rossouwv:Writing From Arduino Uno to Nextion  Getting Started With Arduino and Nextion (pt 3) Peltier Fermentation Chamber for Beer 
Add instructable to: