OVERVIEW
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.
PARTS USED
NodeMCU V2
MAX7219 Matrix Module
Nextion LCD Display
These are Amazon affiliate links...
They don't cost you anything and it helps me keep the lights on
if you buy something on Amazon. Thank you!
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.
The Setup:
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:
tm0.en=1 tm0.tim=150 p0.pic=va0.val va0.val=va0.val+1 if(va0.val>4) { va0.val=0 }
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.
THE CODE
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:
page1.show();
page0.show();
You can find the complete Arduino code in the prior tutorial page.
As always check out the tutorial video for more information.
CONCLUSION
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.
Cheers!
TUTORIAL VIDEO
DOWNLOAD
Link to the libraries used in this tutorial:
Nextion Enhanced Library: https://github.com/jyberg/Enhanced-Nextion-Library
Comments