How to – Flip Book style Animation on a Nextion LCD

//How to – Flip Book style Animation on a Nextion LCD
TUTORIAL


Making Flip Book style Animation

on a Nextion LCD

HELP OUT

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.

Brainy-Bits Tip Jar Amount
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.

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();

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

If you’re not sure how to install libraries this way, check out this tutorial video:
https://www.brainy-bits.com/arduino-libraries-tutorial/

By | 2019-10-26T18:58:53-05:00 October 26th, 2019|Tutorials|

Leave A Comment