Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects

Background

In my previous project, Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card, we created a working photo frame with Serial and Random displays.

Please note: This project can only be created on the Nextion Intelligent Series displays.

Now let’s look at creating some more dynamic transition effects as the photos are loaded.
The Nextion Editor has a number of object, attribute, effects to “load” or any one of eight “fly into” actions when a page is loaded or refreshed.
However loading or refreshing a page resets objects and variable to their default setting, so to retain any changed value the object attribute vscope needs to be changed from local to global. I’ll explain more about global settings as we get into this project.

Effects using the object width and height attributes, w and h, are not possible at runtime. They can only be done with stop frame animation which I will not be demonstrating in this project.

One further built in transition is the fading/materialising effects using the “aph” attribute to change the transparency of an object. I will have a look at that in a future project.

To demonstrate these effects I will use the Nextion Editor file created in the previous project. More about that later.

Table of Contents:

1. Nextion Intelligent 7" Touch Screen (e.g. NX8048P070-011C)
2. USB to TTL CP2102 UART Module 5Pin Serial Converter
3. USB extender cable (3m)
4. Nextion 7” Display DIY Enclosure (Optional)
5. 20mm clear heat Shrink tube (Optional)
6. Nextion Editor (Download)
7. Nextion Editor Guide
8. Nextion Instruction set
9. Adobe Photoshop Elements (NOT Adobe Premiere Elements!)
10. 32GB Micro SD Card (FAT32 format) Search

The Nextion display is connected using a USB to TTL CP2102 UART Module 5Pin Serial Converter.

The TFT File Output option works fine but the Upload option is easier to use (No fiddling around with the SD card).

If the Upload option does not work have a look at Rushtp #2 - Nextion Editor Serial Upload Not Working - Fixes to get it working.

Table of Contents

The Nextion Editor has a number of display areas that contain objects, actions, files or code.

1. File
2. Tools
3. Toolbox
4. Display
5. Program.s
6. Page
7. Attribute
8. Event
9. Pictures
10. Fonts

So, when referring to placing an object (e.g. Button, b0) I’ll use the following convention
(…this button is just an example and not one used in this project)

	objname		b0

	vscope 		local

	font   		1

	txt    		"Set value"

	txt_maxl    	9

	x      		250

	y      		125

	w      		80

	h      		30

I am not going to explain ever piece of code we are using.
I leave it up you you to work it out. It is not that difficult, but I will explain what we are trying to achieve as we go along.

Table of Contents

Before we get into the Photo Frame Transitions project it is important to understand how Local and Global settings effect the values of object variables when pages are loaded or refreshed.

1. The local values will return to its default state (the one set by Attribute val = 0).
2. The global values will not change and will continue from their last setting.

I have created a quick project to demonstrate the differences.

Table of Contents

I am starting where I left off in my Rushtp #3 - Nextion Intelligent - Photo frame ExPicture files from the SD Card project.

	folder		sdcard0

	new		Folder

	folder name	"xi Photos"

	add files	“Photo-1.xi”

			“Photo-2.xi”

			“Photo-3.xi”

			etc...

Table of Contents

Stay in Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects.HMI in the Nextion Editor.

Before we start adding buttons and other objects I want you to create a new font Arial16B. This should be font ID:2.

 	Height         	16

 	Encoding       	utf-8

 	Font           	Atial

 	Bold           	“ticked”

 	Font Name      	Arial16B

 	File Name      	Arial16B.zi

   When Progress: 100%    	OK

   Add the generated font    	Yes

Table of Contents

So we can modify a copy of the HMI page without effecting the original page (just in case we need to compare the two!) …and to demonstrate how to manage additional pages.

   Right-click on page0

   Copy

Go back to page 0 and add button b3 and change its Attributes and add the Event.

	objname		b3

	vscope 		global

	font   		2

	txt    		"Page 1"

	txt_maxl    	6

	x      		735

	y      		410

	w      		60

	h      		30

	objname		t1

	vscope 		global

	font   		1

	txt    		"Effect"

	txt_maxl    	6

	x      		640

	y      		200

	w      		90

	h      		30

Click on the button b3 and copy. Select page 1 and paste.

	objname		b3

	vscope 		global

	font   		2

	txt    		"Page 0"

	txt_maxl    	6

	x      		735

	y      		410

	w      		60

	h      		30

Go to Debug and check the page buttons switch between the two pages.

Table of Contents

The Nextion Editor has a number of built-in effects

1. Load
2. top fly into
3. bottom fly into
4. left fly into
5. right fly into
6. top left fly into
7. top right fly into
8. bottom left fly into
9. bottom right fly into

Going back to page 0 we will add nine more buttons in a square grid and a number box to reflect these built-in effects. All the new objects must have their vscope attributes set to global.

Starting with the number box from the Toolbox.
This will display the effect value selected by the buttons in the grid.
Note: it’s vscope is set to global so that it will retain its last value when the page is refreshed.
It will be displayed just below the text Effect on the screen.

	objname		n1

	vscope 		global

	font   		2

	value    	0

	length    	1

	x      		665

	y      		229

	w      		40

	h      		30

Then add the following Buttons from the Toolbox and set their Attributes and Events.
Once you have set up the first (b4) button you can copy and paste it. Then just edit the attributes that need changing.

Do not change the effect value of these buttons because it is the ExPicture (exp0) effect that we will be changing based in the n1 number valve (more later…).

	objname		b4

	vscope 		global

	font   		2

	txt    		"0"

	txt_maxl    	1

	x      		666

	y      		119

	w      		36

	h      		30

	objname		b5

	vscope 		global

	font   		2

	txt    		"1"

	txt_maxl    	1

	x      		666

	y      		82

	w      		36

	h      		30

	objname		b6

	vscope 		global

	font   		2

	txt    		"2"

	txt_maxl    	1

	x      		666

	y      		155

	w      		36

	h      		30

	objname		b7

	vscope 		global

	font   		2

	txt    		"3"

	txt_maxl    	1

	x      		624

	y      		119

	w      		36

	h      		30

	objname		b8

	vscope 		global

	font   		2

	txt    		"4"

	txt_maxl    	1

	x      		707

	y      		119

	w      		36

	h      		30

	objname		b9

	vscope 		global

	font   		2

	txt    		"5"

	txt_maxl    	1

	x      		624

	y      		82

	w      		36

	h      		30

	objname		b10

	vscope 		global

	font   		2

	txt    		"6"

	txt_maxl    	1

	x      		707

	y      		82

	w      		36

	h      		30

	objname		b11

	vscope 		global

	font   		2

	txt    		"7"

	txt_maxl    	1

	x      		624

	y      		155

	w      		36

	h      		30

	objname		b12

	vscope 		global

	font   		2

	txt    		"8"

	txt_maxl    	1

	x      		707

	y      		155

	w      		36

	h      		30

We need to make changes to the existing ExPicture (exp0) attributes.

	objname		exp0

	vscope		global

	effect		top fly into

	x      		0

	y      		0

	w      		800

	h      		480

Now we need to set the effect for ExPicture (exp0) before the page is refreshed. To do this we will add code to set the effect number in the Page0, Preinitialize Event.

	vscope		global

	effect		load

	x      		0

	y      		0

	w      		800

	h      		480

To make everything work we need to set the following object's vscope to global. This will ensure they retain their values when page0 is refreshed. (I am not going to use my shorthand tables to show you the attribute and Event settings. You should now be able to set them up yourself from the brief instructions below):

Not quite there yet… two further changes are required. To activate a page refresh we need to add page page0 to two of the object events.

	objname		b0

	vscope		global

	font		0

	txt		"Photos"

	x      		293

	y      		341

	w      		90

	h      		30

	objname		tm0

	vscope		global

	tim		3000

	en		1

Right, now run Debug and press the Serial Off button to switch serial loading ON. Then press each of the Effect buttons buttons in turn after each photo is loaded. The next photo should load with that effect. The same goes for the Random ON selection.

Cool!

(If things go wrong please recheck the coding from Step 6).

Table of Contents

Let’s add a couple more buttons to switch the automated transition effects ON/OFF and set the Touch Release Events to toggle the text ON/OFF.

     objname	b13

     vscope	global

     font	2

     txt	"eSerial OFF"

     txt_maxl	12

     x		635

     y		264

     w		100

     h		30

     objname	b14

     vscope	global

     font	2

     txt	"eRandom OFF"

     txt_maxl	12

     x		735

     y		300

     w		100

     h		30

To trigger these changes to the transition effects we need to add more coding to the b0 (Photos) button and the tm0 (Timer). At present the timer is set to trigger every 3000 milliseconds (i.e. 3 seconds) to display the next photo.

	objname		b0

	vscope		global

	font		0

	txt		"Photos"

	x      		293

	y      		341

	w      		90

	h      		30

	objname		tm0

	vscope		global

	tim		3000

	en		1

Now run Debug to ensure it all works.

Great!

(If things go wrong please recheck the coding from Step 6).

Table of Contents

Now the controls are all working it would be nice to hide them after the digital photo frame is running.

First add a new Text object t2, or copy and paste the t0 (“of”) object. Then edit the attributes to display the screen instructions. (For txt select multiline… to add the control text.)

   objname	T2

   vscope	global

   font		1

   txt		“Tap on the screen to Toggle controls ON/OFF”

   txt_maxl	100

   x		83

   y		35

   w		700

   h		30

Now add the following code to exp0(ExPicture).

	objname		exp0

	vscope		global

	effect		top fly into

	x      		0

	y      		0

	w      		800

	h      		480

Run Debug to ensure tapping the screen toggles the controls ON/OFF and it all works.

In the Program.s tab above the display screen set baud=921600 //Configure baudrate.

Then I did an Upload with the Baud Rate set to 921600 onto the Nextion Intelligent 7" Touch Screen (e.g. NX8048P070-011C) using my USB to TTL CP2102 UART Module 5Pin Serial Converter.

     …it took about 5 minutes! …so time to pour a cold beer.

PS: If you have not disconnected the touch screen and closed the Nextion Editor the next upload only takes a few seconds to complete.

Table of Contents

Before congratulating ourselves I have discovered an unexpected problem!
   (Well, I should have expected it -!#?!).

With a photo loaded and the four auto controls set to OFF the timer tm0 continues to trigger the code containing the page refresh, page page0 , every 3 seconds.

So to fix that we need to add another number variable va0 and call it tmState. We will set it to 1 if any of the auto controls are set ON and to 0 if all the auto controls are set OFF.
Then we need to check the tmState value with an "if statement" in the timer code to and only activate the page refresh if any of the auto controls are all ON.

	objname		tmState

	vscope		global

	sta		Number

	val		0

For button b0 add tmState.val=0 at the beginning of the Touch Release Event code..

	objname		b0

	vscope		global

	font		0

	txt		"Photos"

	x      		293

	y      		341

	w      		90

	h      		30

For buttons b1 and b2 add tmState.val=0 and tmState.val=1 at the beginning of the Touch Release Event code..

     objname	b1

     vscope	global

     font	2

     txt	"Serial OFF"

     txt_maxl	12

     x		635

     y		264

     w		100

     h		30

     objname	b2

     vscope	global

     font	2

     txt	"Random OFF"

     txt_maxl	12

     x		735

     y		300

     w		100

     h		30

Then we need to add an "if condition" to the tm0 coding to stop it triggering the page page0 refresh.
Note: the curly bracket } at the end of the code!

	objname		tm0

	vscope		global

	tim		3000

	en		1

Run Debug to ensure it all works. Then upload to the Nextion display again.

That’s better!

…but there is one more feature we need to add Frame Delay Control to change the speed of the photo frame changes.

Table of Contents

Remember I set the timer tm0 (Timer) to trigger every 3000 milliseconds (i.e. 3 seconds).
Well, we can change that value during run time in Debug by adding a Slider control to change the trigger time in the range 1 to 9 seconds.

Leave the timer tm0 (Timer) set to trigger every 3000 milliseconds. this will be the default setting. Just ensure the vscope to global so it does not reset after each page refresh.

	objname 	tm0

	vscope 	 	global

	tim 	 	3000

	en 	 	1

Now carry out the following:
(I am not going to use my shorthand tables to show you the attribute and Event settings. You should now be able to set them up yourself from the brief instructions below):

Right, now run Debug ato check everything works..

Finally, Upload again to update the Nextion Intelligent 7" Touch Screen (e.g. NX8048P070-011C) using a USB to TTL CP2102 UART Module 5Pin Serial Converter.

Table of Contents

The Photo Frame Transition Effects Work

This project used built-in effects and page refresh to trigger the transition effects.

In the next project I will show how to add more advanced transition effects based on algebraic mathematical formulas “x,y functions” controlling the ExPicture frame’s x and y values without having to use page refreshing. This will involve coding timers to create the effect we are after.

Note: the Nextion display will not need to be re-programmed to add or change the photros. Just resize (800x480 pixels) and convert to “.xi” file format and put them on the SD Card.

Table of Contents

You can download the Nextion HMI file and Photo files for this project using the links below.

	folder		sdcard0

	new		Folder

	folder name	"xi Photos"

	add files	“Photo-1.xi”

			“Photo-2.xi”

			“Photo-3.xi”

			etc...

Table of Contents