Nextion touch TFT display examples | Digital power supply - part 1

this is a touch TFT display and it is very easy to program and to use I want to make my own digital power supply one like this one that could control voltage current and display the power on the screen a digital power supply has four main parts a transformer that will lower the voltage from let's say 220 volts to around 30 volts then we have the rectifier that will give us DC values and then we have a boost or a buck converter in order to be able to regulate the output value but to control all this we need the final part which is the front panel and for that I will use a TFT display this video will be the first part of a long project where I will show you how to use this kind of Nixon display and create your own front panel design I recently found this on the internet so I bought one and I've learned how to use it you can add buttons labels with scopes control pictures and much more and the best thing is that is control with the word communication and the graphic platform is running inside of the TFT display chip not on the Arduino this is called an XT on display and you could get one with a 2.4 inches size 2.8 3.5 and much more in my case this one is a 2.4 one and has a resolution of 320 by 240 pixels to create the TFT file we will use the provided software called Nexian editor and then relate the graphic part with the arduino code but before we start please make sure you hit the subscribe button and a notification bell for future videos also thanks to all my patterns for the support so let's get started this video is sponsored by gel CPCB that offers the most economic prices for PCB services right now with only two dollars for ten PCBs of ten by ten centimeters the finish of their PCB is very professional and high-quality so just upload the Gerber files to GL CPC b.com select the thickness the size the quantity and so on and place your order for amazing prices what's up my friends welcome back this is my next-gen display this is an amazing product it could have buttons print graphs pictures have sliders and much more so imagine the possibilities but anyway in this video I'll make the front panel of a power supply we will start with creating a new screen add some buttons and send data to the Arduino then we will add a label to the screen and see how to receive data from the arduino once that is done and we know more or less how to use the Nexen editor we can start making our TFT file for the front panel of the power supply so let's begin first we need the next-gen display a micro SD card of 8 gigabytes or less for jump wires one Arduino board and the Nexen editor software go below of this video and download this software and install it open the application and let's start with a new project ok so click file new and select the folder where you want to save your project give a name to the project I will name this example to push buttons and click Save now on this menu select the type of display that you are using in my case is this one the NX 3 to 240 0 24 underline 0 1 1 select that and then go to the display tab I want my menu to be horizontal so select that option now click OK and let's start the project this here in the middle is how the display will look here is the output of our compiler here we have the selected page and in this case we have just one later we will add more next we have the toolbox and the pictures so let's give a background to our screen for that before in Photoshop I've created a new file with a resolution of 320 by 240 pixels and I made this design I saved the picture in a JPEG format with the name background 1 now in the next scene editor click this plus button and add that picture to the project now go to the tool box and select picture a new picture box was added to the screen on this box on this corner we can change the attributes of the selected element in this case the picture box is selected double-click on the peak value here we can select the imported background and click OK now our screen has a background it's time to add a simple button select button from the toolbox I place this button on the left side of the screen in the attributes panel I change the color to green and the text to on with white color but the button is still not showing any text for that we need to create a new font click tools and select font generator I give the name to this font as font 1 and select the height of 24 and an Arial type now click generate fund give a name to this font and save your file now on this box we have the fonts and as you can see we have one found on the zero position so go back to the button attribute and select found zero now the button works now let's make this button to do something we have a press and release event do something when we touch the button or when we release it I go to the press event and type print one so when I will touch this button I will send a 1 through the serial port ok so now in the same way I make another button but with red color off label and that will send a 0 now click compile and see if you have any error if not go to file and open the build folder now copy this TFT file go to the SD card and paste this file to the SD card be careful the SD card must be empty and formatted to a fat32 format ok guys so now make sure that the display is not powered insert the SD card in the display card slot now connect the screen to five volts and ground from the Arduino and plug the USB to the Arduino and power it up you will get this message that the new TFT program is being copied to the display memory once finished unplug the USB from the Arduino now remove the SD card from the display and power back the Arduino and there you have it this is our graphic panel for two buttons now open arduino and let's see the code part ok so we start with the serial communication if we receive a 1 then we turn on the LED connected on digital pin 5 if we receive a 0 we turn off the LED ok so upload this simple code to the Arduino and let's test it I connect the LED with a resistor to digital pin 5 as in the code and there you go I can control the LED with the touchscreen turn the LED on and turn it off just by pressing the screen ok guys now let's see more examples you could also use the debugger to test if your program works in the software click debug now I can simulate what the screen would do I click the on button and as you can see I send a 1 if I click off as you can see I send a 0 each command is followed by three full bytes every time ok now let's see how to receive and display data from the Arduino I create a new project and a new screen and I add a background as before but now instead of a button I select number that will add a new number block on the screen I select the background color of this block to be gray the text white and the same found zero that I've used before I set the width and height of the block to 200 by 30 pixels just to show you an example now this is the important part go to the object name and give it a name I will name this object voltage 1 the well or the value of this object is now zero all we have to do now is to send this line from the Arduino voltage one that Val equal to and put the number that we want to display if I open the debugger and type voltage 1 dot Val equal to 32 and press Enter the label change to 32 so compile put the TFT file to the sdcard and copy the new file to the screen when you remove the SD card and power it on you will get the new screen like this now make these connections to the screen and a potentiometer to analog input a zero now open Arduino and let's see the code once again we start the zero communication in the void loop we read the value of the potentiometer now I print to the zero communication this drink voltage one dot Val equal then I print the value of the potentiometer then I write three full bytes and that's it compile and upload the code and there you go I change the value of the potentiometer and the new value is printed on the screen in this case the analog grid is from zero to 1024 so that's pretty easy right ok now we know the basics on how to write and read data from the display on the next-gen editor we have much more tools let's add a new waveform to a new screen with no background since we don't need that anymore I will set the size of the waveform to 320 by 240 so it will fill the entire screen now keep in mind the ID of the waveform in this case ID is equal to 1 so save the TFT file and upload it to the display now when you power it on you will get the waveform but with no data so for that let's open the arduino code we start as your communication to give data to the wave we have to use this line ad space the ID of the waveform the channel of the waveform and then the value that we want to send so I read the potentiometer once again and map its value from 0 to 255 since that is the maximum value for the waveform I print ad then a space then a1 which is the ID of my waveform then a comma and a zero which is the first channel of the waveform another comma and the value of the potentiometer read now write three full bytes and upload this code and there you have it I have the analog input value printed on the waveform now I can detect the noise created by the surrounding and my body and also if I connect the potentiometer as in the other case I can get the value on the waveform that's pretty cool right okay guys now for the final example I will show you how to change from page to page so create a new project as before I import the pictures for the background in this case two pictures one for each page I add a background to the first page now go here to the page box and click the plus icon now I also have page 1 now add a picture to the second page and select the second picture that we've imported I select page 0 and I add a button like this with a label of next in the press event you have to type page 1 in this way when this button is pressed we will go to page 1 now select page 1 add another button to this page that will say back in the press event type page 0 and that's it run the debug and as you can see I can go from one page to the other imagine the possibilities of this you could create multiple pages and make very complicated designs now that you know how to use it feel free to use all the other options from the tool box below I'll leave a link with all the functions for this display such as how to change the bout rate how to print and much more read that for more details ok so this is my final design I have to push buttons to go back and forth one button to activate the power supply output I have buttons to increase or decrease the set value for the voltage and current also I have these two arrows to set the decimal point of the value that I want to change so pay attention this display doesn't work with thought values all with string and integers that's why here for example I've divided the voltage value in three numbers voltage voltage stands and voltage hundreds then I've created a timer that each 100 milliseconds will run this code for example if the value is three point twenty five volts I will send from the arduino 325 which is integer and in this code i divide that number into three numbers and by that I can display 3.25 instead of 225 remember to define all variables Global's otherwise you'll lose the values each time you will change the screen and that's it save the TFT file to the SD card and upload it to display as before you have all the TFT projects that we've made today below of this video ready for download you also have all the test codes for the Arduino okay so once you upload a new TFT file and plug the Arduino and remove the SD card now connect the screen like this to the Arduino and add two potentiometers download and open the final code please read all the comments in the code for more details but here's what I've done I entered the set menu and put the voltage and current values and only when I press back I sent those values to the Arduino I first sent the big character than the values that's why in the code when I received the big character I save each of the fourth values since after each number we sent we received three full bytes as you remember that's how I get the set voltage and the set current values next I read the potentiometers and set that values to the real voltage and current variables in the final project this voltage read will be the real output from a power supply and that's it I pull the code now I have the voltage read on the first table and on the waveform I also have the current value and the power I can activate or deactivate the output or enter the set menu here I can select the values and then when I click back those values will get stored on to the Arduino stay tuned for the next part of this project where I'll add the other parts of the digital power supply if this video helps you make sure you subscribe and activate the notification Bell for future videos also click the like button crazy and share this video with your friends remember that your help on pager means a lot for me we'll keep these kind of videos going so thanks again and see you later guys [Music]

Channel: Electronoobs

Views: 122,388

Keywords: nextion, touch, tft, display, Arduino, example, tutorial, push, button, wave, scope, potentiometer, LED, control, analog, read, connection

Id: akpF9TbvNss

Length: 15min 20sec (920 seconds)

Published: Sun Dec 09 2018