Huge Nextion Touchscreen Display Examples | Video | Gauges | RTC

i've just received this huge display from nextion this is the nx 1060 p101 it has a size of 10 inches and it has a touchscreen with a capacitive sensor remember from other videos that i have different sizes as well for this screen i've used this type of display in previous projects but those were not even close to this size i wanted a huge display because i want to make a new escape from puzzle that will be based on a neutrino rick and morty bump and i need it to be amazing so even this display is more expensive it will totally worth it this new model could also play videos and g-files and the screen pcb also has sound output so we could connect a speaker actually this is how pretty much all these new touchscreen displays for 3d printers are made so in this video i will show you a few examples of what you could do with this screen and in a future video i will use it for my escape room project so guys let's get started [Music] video sponsored by pcbway you should try their services for flexible pcbs you could get the rigid flags or the totally flexible pcbs of 1 up to 8 layers you could apply different settings such as the pcb thickness from 0.08 up to above 0.4 millimeters so go to pcbway.com and try one of their services for pcb prototype the flexible pcbs components assembly or the smd stencil and their new services for injection molding printing and cnc milling of 3d parts and laser cutting depending on your project pcb way adapts to your needs so place your order now for prices starting from only five dollars what's up my friends welcome back this is my new nextion display of 10 inches it has a touchscreen over the entire display so it is very easy to control on the back we have a socket for a small cell battery and we use this with the real-time clock incorporated so we could have the day of the week the time and the date and we'll see an example later now here we have an audio output so we could connect a speaker and later display sounds or video with sounds and that's great for my future project here we have the uart port we can connect here the arduino for example and then we can send data from or to the arduino and control everything for example we can send data from a slider on the screen to the arduino and using this data we could control the position of a servo motor or maybe the brightness of an led or any other idea that you have for your project another example would be to create our own buttons on the screen using unique pictures and then each time we press one of these buttons we could control something connected to the arduino and then another example would be to receive data from the arduino so imagine that you are creating your own electric cart so you read the speed and the rpms from the card with the arduino and you send those values using the uart port to the display and here you can make a simple gauge example and show those speed values on the screen we will see all these and more examples in this video so let's start with something easy first you go to this link from the description and download the nextion editor software once downloaded and installed you can run this platform now 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 my case my model is this one of 10 inches then we select the orientation in my case i will leave it at 0 in horizontal mode you click ok and start a new project this here in the middle is our screen editor now here we have our tools on this other side here we have the files such as pictures videos audio files and text fonts now here we have our screen pages which by default we start with just the first page and here we have the attributes of each selected tool the first example i will show you is to create two pages and be able to switch from one to the next one it's very important to have multiple pages when you want to make a more complex project so go to the pages tab and create a new page by clicking the plus icon now let's upload some pictures go to the picture tab and click the plus icon once again i already have prepared two pictures of 1024 by 600 pixels because that is the resolution of this display now click the page 0. in attributes in sda we change this from solid color to image and then in pick we click browse and select the first picture now click the page 1 and do the same process but in peak we select the second picture so as you can see we now have two pages with different backgrounds now let's see how to change from one page to the next one here we have the event blocks the most common are the press and release events select page 0 and click the press event so all the code that we type here will be executed each time that we press the screen of the page 0. so i place this code page page 1 so this will tell the display to change to page 1. now select at page 1 and do the same but in the code i type page page 0 so that will go back to the first page if you click the debug button as you can see when i click the screen we change from one page to the next at this point you could add a third page and do the same but this time we go from page 0 to page 1 then to page 2 and back to page 0 or use any order that you want that was quite easy ok but how do you copy the file to the display well for that you go to file and click the tft output select where you want to save the tft file and click output then you copy this tft file to a microsd card make sure that the sd card is empty then insert the sd card into the display without power connected then power on the screen and the new tft file will be copied to the screen memory when you get 100 percent power off the screen and remove the sd card and then you power the screen once again and as you can see you now have the dft file that you have just created pretty easy right okay so for the next example let's create some buttons and give them a customized look the first option is to use the button option from next-gen tools now click that and add a button choose the position of this button on the screen as you can see for now this button has no text even if you change the text label here in the attribute tab the text is not visible so that's because we have no created text font for that we go to tools and font generator here select the font that you want and the size let's say arial and size 20. give it a name and generate the font then you click ok in order to import that font as you can see now in the fonts tab we have that new font okay so click again the button and in attributes change the font to 0. now change the txt label to next for example you could also change the button color if you want and again in the press and release events you could add the code as before i type page page 1 so when i press this button i will change to the next page and on page 1 i copy and paste the button and change the text to back and the events i type page page 0. now debug once again and as you can see we can go from one page to the next using the buttons but if you don't like these buttons by default you can change the attributes of the button from solid color to image then i import two more png pictures that i've made in photoshop so now in attributes of the button for pick select the picture tree and for the other button select the picture for since my picture already has a text remember to delete the text from the button and there you go you could now create customized buttons with any design that you want now let's see how to play videos because the screen also accepts that i create a new project we need videos in a dot video format for that we go to the video box tool go to tools and select that video box and here select your video in an mp4 format for example select the output resolution that you want i set mine at 900 by 506 pixels but have in mind that the maximum screen resolution is 1024 by 600. i select the frame rate of 25 and click convert once finished we go to the videos tab now here as before we click the plus icon and select the new converted.video file now on the empty page i add a video tool from the toolbox in attributes for the vid select browse and select the imported video so now we have our video for loop i select no so it will only play once and for en i select 0 so it will start in pause mode if we set the end to 1 the video will be played now i add another picture on top of the video in order to cover the borders so i import that picture that i have prepared i add a picture from the toolbox and in peak i select that imported picture now all we have to do is to add a button that will turn the en variable of the video to 1 or a 0 for play and pause so i add that button and then i import these two pictures as well i change the button attributes from color to picture and add those pictures then i drag the button and select the position on the screen the video object name is v0 so in the touch event of the button i type this code if the v0.en value is 0 i change it to a 1 and if en is already a 1 i change it to a 0. so this code will play and stop the video i create a tft file and copy that to the sd card and then onto the display when i power it on as you can see i have the video and when i push the button i can play or stop the video if i connect the speaker to the audio output on the back side of the display we can also hear the sound of the video thanks for staying with me till the end of this video i hope that you like it and the most important part for me i hope that you learned something new the refresh rate is not that good but anyway for what i need this is pretty nice right now all i have to do for my escape room project is to prepare some nice visual videos and play those on my display by using instructions from the arduino so that's why the next example is to see how to receive data from the arduino i create a new project and for the page 0 i set its background to this picture that i've already prepared in photoshop as you can see we have four gauges but we don't have the needle for that i go in the toolbox and insert the gauge in the attributes i set the size the colors and also the offset in order to start from zero and now as you can see when i change the valve variable from the attributes the angle of the needle will change the object name of this is zero so click debug and here we type z0.val equal to 100 for example and as you can see the needle will rotate 100 degrees so all we have to do is to print this line from the arduino where we type z0.val equal to and then the number in degrees so i connect the tx and the rx wires from the screen to my arduino i also add a potentiometer so we could read some values and in the arduino code i read the potentiometer and map its value from 0 to 260 degrees because that is the maximum of my gauge then i use the serial print to send the z0 val equal to and then i print the value of the potentiometer then we must send three full bytes with the zero right that's how this display works so now as you can see i can control the position of the needle with the potentiometer just by sending the values from the arduino in the same way we could also change the number below the gauge for that we add a new number and select the font and color this number object name is n0 so in debug if i type n0.val equal 2 and then 100 it will change to 100. so from the arduino we could also send that and change the value of this number for this example we have four more gauges on this design so we could control multiple parts at the same time this is a nice example of using the arduino together with the display one interesting idea is to use this screen for a home automatization project where you can control the graphic part on the screen but the rest is controlled with the arduino and maybe a wi-fi or a radio connection i have that project on my to-do list okay so i want to show you two more examples i create a new project and change the background of the first page to something better because i don't like the white background now from the toolbox i add a slider i change the size and the colors then i set the maximum value to 255 and the minimum value to 0 and set the initial value to 127 which will be in the middle the object name of the slider is h0 so now i go in the touch move event which means each time that we change the slider value now i type this code i print h0.val so each time i change the slider value i send that value to the arduino i make the same connections to the arduino and now this is the code i receive the new data and store that into a local variable then i make an analog write on pd5 with that value and like that we can control the brightness of an led for example but you could also use this for any other idea and if you want more than one slider in the next encode before you print the slider value you could print for example the string s for the first slider and the t for the second slider and then in the arduino code if you detect an s that means that you receive the data for the first slider and if you receive the t that is for the other slider and you could basically do that for all the variables such as buttons gauges sliders and so on okay so the final example is to use the real-time clock the display has built in i create a new project i make the page zero background to be as this picture here now i add a new text but first we need a font for that i first go to defund.com and download this one here then i install it i go back to nextion editor and create a new font with a size of 176. now i add that font to my text and center this text in the middle of the screen this will be my hour the minute and the second in nextion we have these variables rtc5 will save the second rtc4 will have the minute and so on as in this table here we need to have a refresh rate so for that i add a new timer and set it to 1000 milliseconds for now in the timer event each time the timer clicks all we have to do is to print for example the rtc5 and that will print the seconds i run debug and as you can see i get the seconds but now i change the timer value to 50 milliseconds because we need more speed and in the timer event i add these lines so basically we get the rtc3 rtc4 and the rtc5 values for the hour the minute and the second and we convert those from the integer to a string between each number i add two dots and equal the entire string to my text before which is called t0 so when i run this file as you can see we get the real time from the device that's pretty nice right just remember that if you don't have the cell battery inserted the real time will reset each time that you pour off the screen as here in my case it will always start from zero so copy the file to the sd card and run it on the screen and there you go another nice example please comment below what other examples you would like to see and maybe i'll make another video for now i'm preparing a huge escape room puzzle with this screen and maybe a home automatization project as well that would be quite interesting so guys if you like this video and you have learned something new please give me a like also comment below or subscribe in order to help my channel thanks again and see you later guys hey guys thanks for staying with me till the end of this video i hope that you like it and the most important part for me i hope that you learned something new also i really like to thank to all those who are supporting this channel on patreon that help is very important for me and at the same time you have more links below if you want to check my facebook page my instagram or my shop where you could buy my pcbs or maybe some t-shirts and more stuff and with that also support my channel so thanks again and i'll see you in the next video

Channel: Electronoobs

Views: 72,964

Keywords: nextion, display, tutorial, Arduino, UART, play video, video, gif, gauge, RTC, editor, how to, music, sound, animation, DIY, homemade

Id: 3DpJQ5R5si8

Length: 19min 40sec (1180 seconds)

Published: Sun Mar 28 2021