Start a new topic

Nextion Arduino Tutorial without Nextion library

There is nothing worse that trying to do something with a Nextion without the needed information. With more tabs open in your internet browser than the money spent on your house looking for information, you loose track of time and before you know its way past your bedtime. By then you realize that you have achieved nothing more than when you started with your bright idea for the next million dollar gadget. 


I have been there, done that, got the T-shirt and every trophy. I have spent so many hours in my office trying to figure out how to get the Nextion display to do what I want it to do that my own dog started barking at me.


That said, I am willing to share what I managed to figure out. When I started out, I did not use the Nextion.h Library for arduino. When I eventually downloaded the library, I was not in the mood to spend another week to learn how to use it.


So here we go.

----------------------------------------------------------------------------------------------------------------------

How to write information to you newly purchased Nextion.


Use the Nextion IDE to design your Nextion layout.

Add a text box on your display. 

imageLook at the ID in on the right hand side. In this case it is called t0. Upload to your Nextion display.


 Now  connect the RX wire on the Nextion to the TX on the Arduino. If you use an external power supply for the Nextion, remeber to connect ground from the Arduino to ground of the external power supply.


Lets have a look at the Arduino code.


void setup()

{

  Serial.begin(9600);

}


void loop()

{

    Serial.print("t0.txt=");

    Serial.write(0x22);

    Serial.print("Hello Nextion");

    Serial.write(0x22);

    Serial.write(0xff);

    Serial.write(0xff);

    Serial.write(0xff);  

}


----------------------------------------------------------------------------------------------------------------------


How to use the Crop feature

image


After designing your layout, use the + button, like above to add your picture.

For this example, the picture will change when a Input is triggered on the Arduino.

Add the next two pictures.


image

and

image


Click the Sti tab on the right like below and select "Image".Double click PIC tab and select the first picture without the yellow gear like below.

image


Next up, click the crop button on the left like below.

image


Stretch and place the block over the circle like below.

image


Double click the picc tab on the right and once again select the picture without the gear. Upload to your display.


Next up is to code your Arduino.


int button1 = 8

int buttonstate = 0;


void setup()

{

pinMode(button1,INPUT);

Serial.begin(9600);

}


void loop()

{

buttonstate = digitalRead(button1);


 if (buttonstate == HIGH)

{

      Serial.print("picq 134,28,217,219,1");

      Serial.write(0xff);

      Serial.write(0xff);

      Serial.write(0xff);

}


else

{

      Serial.print("picq 134,28,217,219,0"); 

      Serial.write(0xff);

      Serial.write(0xff);

      Serial.write(0xff);

}

}


Upload to your arduino and if everything is set up correctly, the picture should change once the input is set to HIGH and default when the input is LOW


The line Serial.print("picq 134,28,217,219,0"); works like this.

image

picq is the name or ID of the picture. The numbers (134,28,217,219,0) represent the coordinates, width and height. The last digit is the image number (picc #) 

----------------------------------------------------------------------------------------------------------------------


How to change a picture with a Digital Input.


This example works more or less the same as the previous.


Load two pictures in the Nextion IDE.like below

image


Click the Picture button like below

image

Double click the PIC tab on the right

image


Select the first Picture. Upload to you Nextion.


Arduino code:


int button1 = 8

int buttonstate = 0;


void setup()

{

pinMode(button1,INPUT);

Serial.begin(9600);

}


void loop()

{

buttonstate = digitalRead(button1);


 if (buttonstate == HIGH)

{

   Serial.print("p0.pic=1");

   Serial.write(0xff);

   Serial.write(0xff);

   Serial.write(0xff); 

}


else

{

   Serial.print("p0.pic=0");

   Serial.write(0xff);

   Serial.write(0xff);

   Serial.write(0xff); 

}

}


Serial.print("p0.pic=1");  p0 is the picture number. 1 is pictures name or ID.

imageYou can see the picture numbers on the left like in the example above.


I hope this is helpful to anyone that feels the struggle. I will try to update this tutorial every once in a while. 

In church the other day, the guy sitting next to me lit up a cigarette. I got such a fright I nearly dropped my beer.


1 person likes this idea

Thank you for this Johan.


This to me - seems much simpler than the Nextion libraries / serial communication protocols.


Do you have any other simple commands available?


1 person likes this

@jared

Do you have any other simple commands available?


You can change programmatically all attributes written with green color, see post #2 in this thread:

http://support.iteadstudio.com/support/discussions/topics/1000064053


See also the Quick Start Guide:

https://www.itead.cc/wiki/Nextion_Editor_Quick_Start_Guide#Components

but be aware that the command "ref xx" mentioned in this guide is not relevant any more (let's pray ITEAD will update the Nextion Wiki before Christmas...).

.

 and why shell "ref ID/Object" not work and be irrelevant?

HMI
(26.4 KB)

@Gerry

and why shell "ref ID/Object" not work and be irrelevant?


The Wiki says:

But if we want to change the text color with command"t0.pco=65535", we can't see the change immediately, so we have to add a command "ref t0", then it will work.


This was true before version 0.39, but is not needed any more.


Version history http://support.iteadstudio.com/support/discussions/topics/1000063201:

Point 7 in version 0.39 (6 months ago):

7. Since this release, any properties that modify a control in runtime are automatically refreshed, eliminating the need for a manual refresh instruction. (The original version in the modified non-bold attributes need to manually refresh)


Since ITEAD don't update the Wiki, I think it would be nice if ITEAD could give you and Patrick access to the Wiki as administrators. All errors and typos mentioned in http://support.iteadstudio.com/support/discussions/topics/11000007818 could finally be corrected. I see in the forum that you and Patrick use time to write several times the same answers to questions, but you would spare time if you could refer to relevant parts of the Wiki.

you are technically right, but it's nothing which will influence your code. The additional ref command neither will produce an error, nor will it scramble your logic code workflow ...


    - With ref, it works for all HMI's, so it is a save way ...

    - Without ref, it works only with HMI's 0.39 and up, it works but limited to new versions


you would be surprised, how many customers are out who still work with even 0.32 designs ... update is no option for them ...


I also don't think, that such a corrected article would save a lot. So or so we need time to tell them the references.

The core problem is more, that users just don't read, independent where the information stays ...

If they would carefully read the wiki, such descriptive errors like the "ref" would have been complained since 0.39 by many ... but nobody read, so nobody complain ...

Login or Signup to post a comment