NEXTION HMI DISPLAY WITH ARDUINO -Getting Started with LED ON/OFF

hello all this video is on next-gen human machine interface display with Audino this is a programmable display basic and enhanced models are available of different sizes 2.8 3.2 and 3.5 inch sizes in this video we'll be using basic models and 3.2 inch display four zero to four means four hundred by 240 resolution and 3.2 in size 3 2 to 4 mins 320 by 240 resolution of 2.8 in size there is also 4 8 3 to 480 by 320 of 3.5 in sites in this video we will be using 3.2 in size this display has an interface board on the backside with the SD card slot this SD card slot can be used to upload DFT file there is 32-bit processor stm32f4 interface the connector is provided to there it is serial connected to connect with already know this simple connection 5 volt ground TX and rx just through serial put you can upload code from Adi node to this display for uploading code you can use USB to TTL CP 2 and 0 to device or SD Corder in the SD card slot either method you can upload a TFT code developed using next-gen editor we will see both these methods in this video there is also clone available in the market which is printed TJ see this TG C models are not original and it requests use us sort HMI ide to develop code code developed using next-gen editor cannot be uploaded on to TJ c so always use original next-gen displays are not DJC this is TJC is a chinese clone now visit the next one website and download the next one editor download the latest editor and then download the library zip folder as if file always download the itíd library and do not install using a boat's manager of Audino ID that library is different so these are the essential files before getting started next one editor next on library itíd library and then some background images to convert the background images to the to fix the resolution to match the resolution we use Inkscape image editor and then notepad plus plus editor to edit the configuration file to start with unzip the downloaded library folder and then copy it browse to the location program files are Dino and then paste it under libraries now rename this file to next-gen delete the wording cited and rename it just to next-gen now open this folder connection library folder and look out for config file actually this library is designed for Arduino mega to use with the Audino you know you have to edit this next config file open with notepad plus plus editor so that you see the line numbers you come out comment out the lines 27 and 32 and then edit the line 37 that is you change the serial to two serial serial to is for ordinal mega so just change it to serial and then save the file you need to open the notepad plus plus editor as administrator and then save this file now let us change the downloaded image to the resolution that matches the next-gen display we are using 3.2 inch display so resolution is 400 by 240 height you can download the images from pixabay website visit the website and browse the huge collection of copyright free images that is also paid versions also you can select copyright free and then download the wanted images there is also horizontal as well as vertical type of images we are downloading one image here and using Inkscape image editor will change the resolution to match the next-gen display open the Inkscape editor and then file document properties change units to pixel px and then modify the width to 400 and height to 240 400 by 240 your canvas is created now now file import and select the downloaded image this of high resolution you just click down okay to download the image into the Inkscape image editor now you will see some handles around the image pull the handle to match the canvas of 400 to 240 you can just pull all the sides so that it matches 400 by 240 canvas now drag the image inside the canvas you can further drag also so that it matches the edges now select view zoom selection so that you can see zoomed picture now we can do the final dragging and so that it matches the edges drag the handle so that it matches the exactly the canvas 400 by 240 canvas now save the file select the file name provide a file name and the select it as PNG file so it is of type Cairo PNG select it and then save the file now exit the Inkscape editor and then proceed with the next Jean editor installation once the next gen ed etre is installed open the next gen ed etre this is the next gen editor HMI editor the main menu is on the top on the left hand side you can see the toolbox with variety of components you can drag and drop any of the components onto the canvas there is also the picture picture font area page area attribute area and then compiler output and event window now click on file new and then create a folder new folder for the project and inside the folder provide a file name for the HMI file to be created let us give the name as LED on/off and then click on save the file will be saved as HMI file dot HMI file now a new window will open where you have to select the display type our displays of type 3.2 inch resolution is 400 by 240 you have to select the correct model now you can select the horizontal direction display direction also you have to select if we select the horizontal direction a new canvas is created with 400 width and 240 pixel height this is the page area where you see only page 0 this is the attribute area to the bottom of the page where you see the attributes of the components you drag-and-drop on the canvas now you have to create the font under tools click on font generator you can select the size of the font to be used on the type of font provide a file name for this font file like my font and then save the file the file will be saved as Zi file you save all the files in the same project folder so that it'll be easy to access for future now click on add this font file to the project at the left-hand side the bottom you can see the font file is added to the project now click the picture tab and then click on the plus symbol browse to the location where we generated the new resolution file using Inkscape this is a 400 by 240 resolution file we created using Inkscape select that image and then click on OK the image file will be imported into the image picture folder picture area now click on picture on the tools section the picture attribute will be shown on the right hand side the ID ID is one object name is p0 so you have to note down all this ID and object name which will be used inside the Audino code now double click on picture PA kpac area and then select the picture now the picture with size resolution 400 by 240 is seen inside the canvas you can click on debug to see any errors are created if resolution is not correct you will see some errors now drag on to buttons inside the canvas over the picture and then a text component 3 components we are using 2 buttons and 1 text now click on first button under the attribute area you see the IDS to object name as B 0 and you can change the text to LED on just double click on txt and then change the name to LED on same way click on the button to go to the attribute area see the node on the ID ID is 3 it is in the same page page 0 object name is b1 and text you just change it to LED of same way click on the text component and change the name to status node on their ID and object name of this status which will be used in ordinal code you can drag the size of the text bar by pulling the handle at the bottom you see two events that is touch press event and touch release event that should be programmed for the buttons now click on LED on button and then you select that touch release event so that we program for when the when the button is released you have to put a tick mark against a send components ID you do this for both the button LED on button as well as LED off but now click on debug button to see the result three elements are displayed LED on LED often status when you press and release LED on a hex code is sent to the serial output when you press and release the LED off another hex code is sent which is used in the ordinal code this hex code starts with 6 v and ends with the 3f of which represents end of message 6 v means touch detection 0 0 s page ID which is phase 0 here 0 2 is component ID LED on means 0 2 LED off button is 0 3 and final 0 0 is button 0 button release event now click on compile to generate the dot TFT file the dot TFT file is generated to see the file you open file open build folder and say the biani folder you see the dot DFT file your dough manually copy this file and paste it inside your project fold up that dot DFT file is the file you are due up load onto the next-gen display there are two methods to upload this DFT file on to the next-gen display before clicking upload we will see the first method first method is by using a USB to TTL device Here I am using USB to TTL built on CP - 1 0 - the connection made today between next-gen display and USB to TTL is simple 5 volt to 5 volt ground-to-ground DX to TX and rx 2 or X or X to TX reverse no separate power source is required you connect the USB to TTL to PC now you can see the welcome to use next-gen editor on display and now click on upload port will be Auto detected baud rate you have to select the maximum 11 5 200 yeah as the as this method USB to TTL method is bit slower you have to select the maximum speed and then click on upload you can see the LED it is blinking on the USB to TTL according to the upload and the data is TFT file is being uploaded at the bar rate of 11 5 200 it will take some time and the final display you can see on the next-gen display now let us see the second method by using the SD card you need a memory card reader you place the SD card on to memory card reader plug-in on to your PC and then right-click on the USB SD card and then format it ensure that you are formatting the SD card only select the fat32 file system and then format it once the format is finished you copy the dot DFT file that is generated using compile and then paste it inside this SD card folder there should be no other files inside this SD card only the dot TFT file should be there now remove the SD card and then plug it onto the next-gen display only the power wires are required the tx/rx wires are not required now only the 5 volt and ground now plug in the USB to TTL to PC you can see the file uploaded very fastly compared to the USB to TTL method the SD card method is faster now you can remove the power and then the SD card you can remove the SD card also now provide the power back you can see the display you create it now now let us see the code for the ordinal port 4 in this used in this project to start with we have to include the next gen dot H header file and then each component is declared using Next button function we have 4 components in this project out of which 3 are used in the ordinal code that is B 0 B 1 and T 0 each of these components is declared using Next button function for example B 0 for B 0 declaring B 0 we use Next button B 0 equal to next button 0 comma 2 comma B 0 that is 0 is the page ID 2 is the component ID and B 0 is the name of the name of the component and then we create the array list array using next touch only for the vegetable components we have to vegetable components b0 and b1 so we create an array B 0 B 1 and then we add null at the end and then we write the code for the pop callback function for both the buttons for button 0 unbuttoned one for button B 0 component pop callback function inside this callback function so when the LED button is released the LED is turned on and the state is displayed as on so the code is written accordingly we make the pin 13 digital pin 13 as hi and then we change the status same way for button b1 also when LED off button is released we make the LED off on the chain the status and then we attach the function created two corresponding events this is done inside the void setup when you click B 0 LED on button B 0 pop callback function is called which is called by the function attached pop and they are finally inside the loop we just keep a watch on the list so that each event is followed repeatedly now to let us see the connection between Audino on the next-gen display it is very simple 5 volt is connected to 5 volt of Arduino and the ground is connected to ground as soon as we give the power you can see the display you are created now before connecting the Rx and TX pins you have to upload the code click on upload now the code is being uploaded you can see the LED blink upload LED blinking once the code is uploaded now you connect the TX of next-gen display to rx of ordinal and Rx of display to T of ordinal since we are not using any software serial you have to do this oil after uploading only you are to connect this now you click your touch on LED on you can see the LED 13 on and touch on LED off you can see the LED off for better visibility let us connect an LED with the resistor to pin digital pin 13 now when you touch and release LED on the LED connected that 13 goes on when you touch and release LED off the LED goes off so we have programmed only for the release event so when you release the hand release the finger then the event is triggered thank you for watching

Channel: Saravanan AL

Views: 135,984

Keywords: NEXTION, HMI, NEXTION DISPLAYS, TOUCH DISPLAY

Id: RbPfo8wW74I

Length: 22min 12sec (1332 seconds)

Published: Sat Jan 26 2019