The Universal Nextion Xmas Screen Saver

What about a nice Screen saver for your Nextion HMI project? When I tell you now that it adapts automatically to your screen resolution and orientation, and work with all Nextion series, so that it will really fit into every project? Wouldn’t that be a nice gift for these holidays?

But before we start with this, a little reminder about the ongoing Nextion Christmas sales which give you a 10% discount when ordering 2 items and $20 off for orders above $199. And both discounts can be combined for still more savings! Just click here or on the picture just below:

Now, to our screen saver:

All it needs is adding a page to your project and to give it a dark blue background by setting the .pco attribute to 264.

In order to be universal, the page preinitialize event takes the screen height and width from the page’s .w and .h attributes and divides it into a grid of 16 x 16 px squares. Thus, a 480 px wide and 320 ph high screen sees the global variables raster_x set to 30 and raster_y to 20. A timer will every 50ms generate a random number between 0 and raster_x -1, and calculate from this the x-center of the corresponding square by multiplying this number by 16 and adding 8, which gives the result draw_x. The same is done with a second random number between 0 and raster_y -1 to obtain draw_y. A third random number is taken with a logical AND 0x00000001 which leaves 0 when it’s even and 1 when it’s uneven. By multiplying this 1 or 0 by 65163 and adding the page’s background color, the variable draw_c takes either the background color (off) or a warm white (on).

Thus, fully randomized, at each timer run, a solid circle with radius 4 is drawn somewhere in our grid with the cirs command, using draw_xdraw_y,4,draw_c as parameters. This gives the optical impression of lights switched randomly on and off. And that’s all. Easy, isn’t it?

In program.s, we add this to declare the variables:

// configure screen saver:
int raster_x,raster_y,draw_x,draw_y,draw_c
// end screen saver

Then in the page called screensaver‘s Preinitialize Event, the geometrical basics are calculated:


In the page’s Touch Press Event, we allow to exit the screen saver and to go back to the start page:

page 0

All the magic happens inside timer tm0’s Timer Event code:

randset 0,raster_x-1
randset 0,raster_y-1
cirs draw_x,draw_y,4,draw_c

And that’s it. 10 lines of code without the comments. Feel free to download the demo .hmi file to simulate, to play, or to integrate it into your own projects: xmas screen.HMI

For today, thanks for reading and happy Nextioning!

Questions, comments, critics, suggestions? Just send me an email to thierry (at) itead (dot) cc! 🙂

And, by the way, if you like what I write, and you are about to order Nextion stuff with Itead, please use my referral link! To you, it won’t make a change for your order. But it will pay me the one or the other beer or coffee. And that will motivate me to write still more interesting blogs 😉