Nextion+Arduino Tutorial #6 A Project From Scratch

even though I've made a few tutorials about using an action display with Arduino a few of my subscribers asked me to show the entire process to make a project from scratch this video is going to be longer than usual so if you want a quick and simple tutorial I suggest you to watch my other videos about this subject if you want to see how I create a project from scratch I hope this helps I start by creating a new project you select your display and orientation you the most basic thing will be adding a number box you is not showing anything because we have to add font if you already have a font file you can add it here but most likely you're going to have to generate one there are phones available but I strongly suggest you to use a monospace font to make sure all characters are shown correctly here I listed my recommended fonts you for this project I will use console us you can write any in here also write a file name but it's not important actually you can later delete the file if you want click chance to import the font into the project here's the font you can change any of the attributes of this object the most important is the VA L for the value you can also change the colors the way to send values through the serial port will be like this first you send the name of the object which is n 0 dot P al because we want to change the value equal our number let's test it using Arduino I compile the project and copy the TF T file into a microSD card you you you you I have a sketch ready for this it reads the value of a potentiometer and send it through the serial port you you you as before we send the name of the object the attribute and the new value the only difference is that we need to send these three lines after each command you you you you now we'll add a text box you instead of the viel attribute we have txt for the text you we the limits let's say three you you I think I better add a background image just make sure the dimensions of the image are the same as your display select the background instead of solid color I'll select an image of the text to look transparent so I choose crop image and select the image you now to send tax we write the name of the object txt and the actual text in quotes you I also want gage you actually I have an image for the gauge I think the best way to add it is to include it on the background I'm very good with Photoshop but this is not that complicated you you you you at the new background select a new image you you you now the text is still using the which you a value for the gauges from ceará 59 you you you a progress bar value is from zero to 100 a bottom you you you I add another page I read here that I want to go page one when we press the bottom number of the pages over here you you you we need a back button but instead of going to page one we go to page zero you I better test everything we need to upload any Shh now it will send a text depending of the diameter remember to send it the whole quotes before and after the text you here I remap the value of the position to a new range and if it's about 359 subtract 360 so the value starts from zero and we send that to the gage I but in general to arrange from zero to 100 for the progress bar you you now I add a timer so I can change the color of the number depending of the value if n zero value is above 500 you you the attribute is PCL for the color I will set to this crawler if the value is above 500 you you I'll set the color to green you you you I don't like the flickering of the cage so I usually refresh the gauge only if the new value is different than the current one to do this I add a verbal and instead of sending the value directly to the gauge we send it to the variable and we check if the value of the gauge is different than the variable if they are different we send a new value to the cage you you you obviously we have to change the sketch to send the gauge value to the verbal you I'm gonna mistake here the timer is running every 400 milliseconds it should be 50 to have the best result you you the next step will be sending data to Arduino I will make a button to turn iled you since I wanted to turn on turn off when I release it I have to check this tool to send press and release events you I have these images for the bottom you you you a similar theme for the dual state button but we send only a press event you you here we see the code that the display is sending you you you you this time we need to use the election library and for that I will use my previous sketch as a guide to add those buttons in my new sketch you you you I need to write the ID of the button that in this case is too you you you you you you you here's the instruction to turn on led if we press the bottom and turn off if we release it you you you same thing for the dual state button but this time when we receive a press event we read this state of the bottom you you you you you you you you you you now we have to connect the blue cable to being zero you you you you I remember that we have to make sure send data to objects that are not present on the current page so what I do is to let Irina know in what page to display seeing and only send this data if is on page zero you I need to add the pages in the touch events you you you we need to send a touch event when we load the pages I think I better use my old Pikul you you you you you you now this is a number of the page I forgot to add this parable for the pages you you you you we need to disconnect the pool cable to be upload the sketch you you now reconnect the blue cable you and at last is working you well I wish this was useful and good luck with your projects see ya

Channel: InterlinkKnight

Views: 89,852

Keywords: nextion, arduino, tutorial, beginner, how to, editor, send data, receive, data, button, page, guide, display, lcd, learn, hmi, troubleshooting, problem, debug, issue, fix, error, project, scratch, complete, steps, InterlinkKnight

Id: OhYyBpjyR14

Length: 29min 7sec (1747 seconds)

Published: Wed May 02 2018