How to Display animation on NEXTION

[Music] hello everyone welcome to controllers tech this is another video in the next ian series and today we will see how to display animations on this display this is going to be a very short video and i am not going to use any microcontroller here here is a gif that i will be using in this video you can also use this same logic for displaying gauges or videos let's open this gif with you can see here that we have 21 frames for this particular gif first of all i will reduce the image size so that it fits the display i am going to display it in the vertical orientation so 240 will be the width and 320 is the height so now all the frames have been scaled to this size let's hide all the frames except the very first one now export this image i am exporting it to the jpeg format you can use any other two check the manual for the supported formats now hide the first frame unhide the second frame and export it to you have to do the same for all the frames i have already done it and here are all the 21 frames let's go back to the next ian editor create a new project choose your display here like i said i am using vertical orientation [Music] here is our display first of all i will add the picture element to it [Music] also we need to add all those pictures here select all of them and hit enter [Music] you can see the first one have the id 0 and the last one have the id 20. [Music] let's add the first picture to this [Music] element [Music] now in order to change the pictures we will add a timer and a variable [Music] let's write some code for the timer here we will load the respective number of image to the p0 element as you can see the default value of the variable is 0 so the image with id 0 will be loaded first now increment the variable's value this will also increment the image id when the first statement gets executed next time and a new image will be displayed [Music] as we only have 21 images so we should also limit the variable value to 20 and if the value goes higher than 20 it will be back to zero again [Music] this here is the time delay between each image and let's keep it a little less let's build it now looks like we got some error here i shouldn't have put the space in between another error no termination also great it compiles successfully now let's debug it this looks pretty good let's try to increase the time delay this does not look satisfying at all i am going to reduce it to the minimum value and that is 50 in my case now let's upload it to the board here is the connection between the display and the ftd hi the blue wire is connected between the display tx and the device rx and yellow wire is other way around red is with 5 volts and back to ground click go to start the upload it have started so the upload is done and here we have our gif being played on the display i will increase the time delay a little more let's upload again [Music] it looks pretty sweet now this particular display have the minimum time delay of 50 milliseconds so it can support up to 20 frames per second this is it for this video you can use the same logic to make some analog gauge or some video also leave comments in case of any doubt you can download the file from the link in the description keep watching and have a nice day ahead you

Channel: ControllersTech

Views: 30,436

Keywords: stm32, stm32f4, f103, discovery, nucleo, nextion, animation, video, example, ftdi, serial, tutorial

Id: gsF8nstpJQ8

Length: 8min 31sec (511 seconds)

Published: Sun Nov 01 2020