How to Make Custom Boot Screen on Nextion Displays

Hello friends, If someone wants to make an intro screen or boot screen or GIF for their Nextion project this post is for you!

The Nextion displays are the best display choice for beginners to start with. They are cheap and easy to make a GUI with a touchscreen. The main problem where most beginners and intermediate faces are the poor after sales support offered by the company. It lacks in tutorials for designing displays and explore its full functionalities. But the best thing is if you spent some time with the display you can learn the methods and tricks in Nextion editor software easily.

Here I will show you how to make an intro or boot screen for your Nextion project. If you have a little bit of experience in Adobe Photoshop, you can make the best boot screens for your project.

Requirements:

Software's: Adobe Photoshop, Nextion editor

Devices and Tools: Nextion display, SD Card, SD Card Reader

Skills: Photoshop(beginner level is enough)


STEP 1    : Create a sequence of images( for the boot screen, make it logo of your choice)
                   For example the first image as a faded image and to clear image.

NOTE: Make the image resolution according to your nextion display resolution. otherwise it wont fit to your screen.And also name it as numbers 1to N(N=last frame number, the total number of frame is up to you better to reduce the number of image to save space).

STEP 2     : Open Nextion editor, set Page ID as boot (if you want). and add timer and variable in the                      page followed by images that you added.

Note: Make sure that each image should be added according to your animation. 

STEP 3     :  Add this code to your Timer element on the boot screen.

                         p0.pic=va0.val
                         va0.val=va0.val+1
                         if(va0.val>N) // change "N'' to the number of last image
                          {
                             va0.val=va0.val+1
                              page 1// rename if you renamed page name
                           }

NOTE: Make sure that you change the above mentioned in your code. And do not add any spaces and make the letters capital in above code.