Below you have the full tutorial where I go through each step. But in this post we will see just how add buttons in Nextion and add an event to taht button when is pressed or released. Make sure you go to NEXTION.com and download their editor because we will work with that software. In this psot you will also have the TFT files I've created and the pictures, videos or anything else that you need, ready for download.

Let’s start with something easy. First go to this link and download NEXTION editor software. Once downloaded and installed, run this software. Go to file and select new and give this new project a name. Next it will ask you what model of display you have. In this case, mine is this one (NX1060P101-011C-I) of 10 inches. Then select the orientation. In my case I leave it at 0 in horizontal mode. Click OK and start the project.

Next example, let’s create some buttons and give them a customized look. First option is to use the button option from NEXTION tools. Click it and add a button. Choose the position of this button. As you can see the button has no text even if you change the text label here in the attribute tab. That’s because we have no created text font. For that go to tools and font generator. Select the font and size, let’s say arial and size 20. Give it a name and generate the font. Then click OK in order to import that font. As you can see, now in the fonts tab, we have that new font. Click again the button and in attributes, change the font to 0. Change the txt to “next” for example. Change the button color if you want.

And again, in press and release events, we could add the code as before;: I type page page 1, so when I press the button, I will change the page. On page 1 I copy and paste the button and change the text to “Back” and in the events I type page page 0. Debug, and as you can see, we can go from one page to the next using the buttons.

If you don’t like these buttons by default, you can change the attribute of the button from solid color to image. Then I import two more PNG pictures that I’ve made in Photoshop. In attributes, for pic select picture 3 and for the other button select picture 4. Remember to delete the text of the button. And there you go, you could now create customized buttons with any design that you want.

So how to copy the file to the display? Well, go to file and click TFT output. Select where you want to save the TFT file and click output. Then copy that TFT file to a micro SD card. Then insert the SD card into the display without powering it on. Then power it on and the new TFT file will be copied to the screen memory. When you get to 100%, power off the screen and remove the SD card. Then power it back on and you can now use the TFT file you have just created. Pretty easy.

I hope you like this tutorial and maybe you have learned something new. If my videos help you, consider supporting my work on my PATREON or a donation on my PayPal. Thanks again and see you later guys.