Making Flip Book style Animation
on a Nextion LCD
All my content is free.
If you feel that my videos are helping and you would like to contribute, you can toss some coins in the Tip Jar via PayPal.
Select amount then click the “Donate” button.
After publishing my last tutorial on the YouTube Subscriber counter, I got a couple of questions on how I created those animation that show up on the Nextion LCD Screen.
So here’s a ‘quick’ tutorial on how I did that.
IMPORTING THE PICTURES
When importing pictures in the Nextion software, each one is assigned an ID. Which will be used later to create the animation.
To keep the pictures in the right order when you import them, make sure to give them a name that is sorted in the right order.
For example: picture01, picture02, picture03, etc…
Once imported, you need to take note of the first picture ID of the animation and the last one to use in the code below.
USING TIMERS AND VARIABLES TO CREATE THE ANIMATION
Since the type of animation were creating, is like a flip book, we need to have a timer and a variable.
The timer will be used to decide how long to show a frame/picture ID before moving to the other.
The variable is used to store the picture ID.
On each Nextion ‘page’ we add a Timer and a Variable.
We make sure the variable value is set to the first frame of the animation picture ID.
Then we enter this code under the Timer:
Basically line by line:
- We start the timer
- set the timer to 150ms
- set the picture to be displayed to the variable value
- increase the variable by one
- If the variable is bigger than the last picture reset the variable to the first picture
- everything repeats
To get more information, don’t forget to check out the tutorial video below.
MAKING SIMPLE ANIMATION ON NEXTION LCD TIPS
The 2.8 inch Nextion I was using for the YouTube Subscriber counter project only had 4 megabytes of memory available, so I couldn’t make those animation very long without maxing out the memory available.
The Nextion Editor converts the images you upload to 16 bits, with no way to change it, so those small 6Kb pictures become 150Kb each!!!!!
Also make sure that you resize your picture to the resolution of the Nextion LCD you’re using. The one I used was 320×240 pixels.
Has you saw in the tutorial video, we can test the animation by using the ‘Debug’ function inside the Nextion Editor.
To have the Arduino change the page is pretty easy by using the Nextion Library.
All you have to do is send the command:
You can find the complete Arduino code in the prior tutorial page of this project here:
As always check out the tutorial video for more information.
So there you go, creating simple animations using a Nextion LCD is pretty easy and might make a boring project more exciting!
Thanks for dropping by, and hope to see you in the next one.
Link to the libraries used in this tutorial:
Nextion Enhanced Library: https://github.com/jyberg/Enhanced-Nextion-Library
If you’re not sure how to install libraries this way, check out this tutorial video: