Rushtp #5 - Nextion Intelligent - Photo Frame Algebraic Transition Effects

Table of Contents

Background

In this project I will show how to create eleven transition effects. Eight will mimic the built-in effects I demonstrated in my last project. I have added three additional effects: Fade-in, Bouncing Out and Bunny Hops.

So let’s get started.
In my previous project, Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects, we enhanced the basic photo frame created in Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card with the Nextion Editor built-in transition effects to make the photo changes glide-in from different directions.

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

This had one disadvantage in that to activate the effects the Nextion screen page had to be refreshed at every photo change. I found this a little cumbersome scripting to trigger the effects.

I decided to take a look at how the fly into effects are created. So let’s explore the ExPicture exp0 object x and y co-ordinates

The x and y are attributes that define the top-left corner or origin of an object placed on the screen page.

I will demonstrate how these effects are achieved and give additional examples of some bespoke effects using the object attributes x and y. These co-ordinates can be changed with code during runtime.

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

I am using the same Nextion Intelligent 7" Touch Screen (NX8048P070-011C) as I have in all my previous projects and will start from where we left off in in my Rushtp #3 - Nextion Intelligent - Photo frame ExPicture files from the SD Card project.

If you have not completed that project you can download the Nextion HMI file and Photo files for this project by following the instructions in Step 1 below.

Acknowledgments & References:

1. Rod Pierce: Maths is Fun - Linear Equations
2. A.Forrest: Maths Mutt - Maths Mutt Home - Quadratics
3. Martijn: The Art of Code - How to Create Cool Bounce Effects Using a Loop
4. Cheap Controls Tutorials - Nextion Component Names versus IDs

Table of Contents:

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

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

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

Stay in Rushtp #5 - Nextion Intelligent - Photo Frame Algebraic 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

The Nextion Intelligent 7" (NX8048P070-011C) page size is w800 x h480 pixels with the origin x=0 and y=0 in the top-left corner.

I have set the exPicture exp0 frame to the same size 800x480 to fill the page with the x and y coordinates set to 0, 0.

Let’s look at a bigger picture on an Excel scatter chart.

The chart axes are set to x = -800 to +1600 and y = -480 to +960. I have added a background image to demonstrate the location of the Nextion page.

Now consider what happens when the ExPicture frame has it’s x and y coordinates set outside the page range. As the origin coordinates are moved outside the visible area into the hidden zone the photo gets cropped.

To completely hide the photo we need explore the hidden zone outside the visible area and use the coordinate ranges:

x = -800 to +1600px

y = +480 to -960px

the visible area being:

x = 0 to 800px

y = 0 to 480px

Table of Contents

Assuming you have created Rushtp #5 - Nextion Intelligent - Photo Frame Algebraic Transition Effects.HMI from me previous projects (or downloaded Rushtp3.HMI in Step 1)…

Let’s move The existing browser object out of the way and add two sliders, a button and two numbers

Now resize the fbrowser0 box to w60 x h60 and drag it into the bottom of the display to get it out of the way.

The following additions to the Nextion file will allow us to move the origin of the ExPicture frame along with any of the photos we have selected.

Add these buttons from the Toolbox

	objname		n3

	vscope 		local

	font   		0

	val    		0

	len    		3

	format 		Decimal

	x      		115

	y      		48

	w      		40

	h      		30

	objname		n4

	vscope 		local

	font   		0

	val    		0

	len    		3

	format 		Decimal

	x      		666

	y      		123

	w      		40

	h      		30

The sliders are programmed to change the x and y coordinates around the extended range:

x = -800 to +1600px(2x the width of the Photo Frame exp0)

y = -480 to +960px  (2x the height of the Photo Frame exp0)

Because the ExPicture frame origin is in it’s top-left corner we only need to move exp0.x from -800 to +800 so I have set the h0 slider max and minimum values to 1600 and 0 respectively. Then I set the slide value h0.val give a mid-point at 800. In the Touch Move Event script I have subtracted 800 from the mid-point value (800) to set exp0.x to 0 and n3.val to 000 (the number box has it’s display to length 3 for this).

Similarly the h1 slider max and Minimum values have been set to 960 and 0 respectively and the h1.val to 480, etc. so that we can move exp0.y from -480 to +480.

Add these sliders from the Toolbox and add the Touch Release Event scripts

	objname		h0

	vscope 		local

	val    		800

	maxval 		1600

	minval 		0

	x      		182

	y      		54

	w      		500

	h      		25

	n3.val=h0.val-800

	exp0.x=n3.val

	objname		h1

	vscope 		local

	val    		480

	maxval 		960

	minval 		0

	x      		67

	y      		163

	w      		25

	h      		259

	n4.val=480-h1.val

	exp0.y=n4.val

Add this reset button from the Toolbox and add the Touch Release Event script to reposition the sliders back to x=000 and y=000.

	objname		b4

	vscope 		local

	font   		2

	txt    		Reset

	txt_maxl	10

	x      		22

	y      		80

	w      		80

	h      		30

	h0.val=800

	n3.val=h0.val

	n3.val-=800

	exp0.x=n3.val

	//

	h1.val=480

	n4.val=h1.val

	n4.val-=480

	exp0.y=n4.val

Run the file in Debug to check everything works.

 So far , So good!

(If things go wrong please recheck the object names and the Event coding).

Table of Contents

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

To create the diagonal effects x needs to step +10*800/480 = +16.666 ̇  because of the Nextion screen aspect ratio (480x800). However, x has to be an integer so the script offsets with 16 and continues with step 17 in the loop exp0.x=0 after the coding script has run.

Acknowledgments & References:

1. Martijn: The Art of Code - How to Create Cool Bounce Effects Using a Loop
2. Cheap Controls Tutorials - Nextion Component Names versus IDs for a full explanation of IDs

First add a Text box t1 and a Number box n1 from the Toolbox.
The n1(Number) will used to display the effect number corresponding to the list above.

	objname		t1

	vscope 		local

	font   		2

	txt    		"Effect"

	txt_maxl	10

	x      		652

	y      		212

	w      		40

	h      		30

	objname		n1

	vscope 		local

	font   		0

	val    		0

	len    		0

	format 		Decimal

	x      		686

	y      		357

	w      		40

	h      		30

Add this button too and name it bID. It displays the Effect button ID so we can check they are sequenced correctly.

	objname		bID

	vscope 		local

	font   		2

	bco    		2047

	Pco    		63488

	val    		0

	len    		0

	format 		Decimal

	x      		682

	y      		396

	w      		50

	h      		30

For reasons that I will explain later add the following buttons in sequence, One after the other. This will ensure that the button ID’s are sequential.

We will now create a grid of buttons to trigger each of these effects.

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

(Just like buttons for the built-in effects I demonstrated in: Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects.HMI)

Add three more buttons for additional effects (We will program them in the later steps).

1. 9. Fade-in
2. 10. Bounce out right
3. 11. Bunny hops

Note: the sequence numbers you create may differ from the ones I obtained. It does not matter as long as the all eleven button ID’s are in sequence.

I’ve also renamed the buttons e0, e1, e2, e3, etc. up to e11.

    Load without any effects Button

	objname		e0

	vscope 		local

	font   		2

	txt    		"0"

	txt_maxl	1

	x      		687

	y      		247

	w      		36

	h      		30

    Vertical or Horizontal Effect Buttons

	objname		e1

	vscope 		local

	font   		2

	txt    		"1"

	txt_maxl	1

	x      		687

	y      		210

	w      		36

	h      		30

	objname		e2

	vscope 		local

	font   		2

	txt    		"2"

	txt_maxl	1

	x      		687

	y      		283

	w      		36

	h      		30

	objname		e3

	vscope 		local

	font   		2

	txt    		"3"

	txt_maxl	1

	x      		645

	y      		247

	w      		36

	h      		30

	objname		e4

	vscope 		local

	font   		2

	txt    		"4"

	txt_maxl	1

	x      		728

	y      		247

	w      		36

	h      		30

    Diagonal Effect Buttons

	objname		e5

	vscope 		local

	font   		2

	txt    		"5"

	txt_maxl	1

	x      		645

	y      		210

	w      		36

	h      		30

	objname		e6

	vscope 		local

	font   		2

	txt    		"6"

	txt_maxl	1

	x      		728

	y      		210

	w      		36

	h      		30

	objname		e7

	vscope 		local

	font   		2

	txt    		"7"

	txt_maxl	1

	x      		645

	y      		283

	w      		36

	h      		30

	objname		e8

	vscope 		local

	font   		2

	txt    		"8"

	txt_maxl	1

	x      		728

	y      		283

	w      		36

	h      		30

Now add The three more buttons for additional effects (We will program them in the later steps).

	objname		e9

	vscope 		local

	font   		2

	txt    		"9"

	ixt_maxl	1

	x      		581

	y      		227

	w      		36

	h      		30

	objname		e10

	vscope 		local

	font   		2

	txt    		"10"

	ixt_maxl	2

	x      		581

	y      		247

	w      		36

	h      		30

	objname		e11

	vscope 		local

	font   		2

	txt    		"11"

	ixt_maxl	1

	x      		581

	y      		283

	w      		36

	h      		30

Right, now run Debug and press the Photos button to load a photo. Then press each of the Effect buttons 1 to 8 to test the transition effects.

 Cool! The Photos run in straight lines.

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

Table of Contents

Nextion editor objects have an Opaqueness attribute aph (0-127) that can be used to change the transparency of an object. In our case we can use it to fade in (or out) any photo displayed in the ExPicture frame exp0 we are using for the photo frame transition.

Add the following code to the Effect e9 button.

    Transparency Effect Button

	objname		e9

	vscope 		local

	font   		2

	txt    		"9"

	ixt_maxl	1

	x      		581

	y      		227

	w      		36

	h      		30

Then run Debug and press the Photos button to load a photo. Then press each of the Effect button 9 to test the Fade-in effect.

Table of Contents

The Excel graph displays a number of y=a+(x-b)² parabolas (upside down U-shaped curves). The chart starts with a drop from the Nextion page x=0, y=0 coordinates to the screen baseline y=480. Then followed by a number of diminishing bounces out of the bottom-right of the screen.

1. A.Forrest: Maths Mutt - Maths Mutt Home - Quadratics
2. Martijn: The Art of Code - How to Create Cool Bounce Effects Using a Loop

In Martijn’s YouTube video he demonstrates how create multiple parabolas to make bounces.

In his chart he took note of the x value of the end of the first bounce where y = 0. Then set the start of the next bounce to that value. Doing the same setting each subsequent bounce start at the end of the previous bounce.

In my case I used an Excel scatter chart and adjusted the data values of a to set the height of the bounce. Then I adjusted the value of b until could I visually see in the chart I had moved the start of the next bounce to the end of the previous bounce along the y=480 base line. (I’m an engineer and like to find easy ways to achieve my goals).

If you look at the screen shot of the chart data you can see how the data aligns.

Note: the actual formular I used was y=a+(x-b)²/30. The division by 30 sets the bounce width to a visually pleasing shape for the graph. The bounce was too quick and pointy with lower values.

I used the constraints in a do while loop and an if condition statement to cut off the “Tails” of the bounces so the photos appear to bounce on the bottom of the screen.

Start coding…

Let’s start with a drop from the top-right of the picture frame followed by just one bounce. Copy and paste the following code into the button e10 Touch Release Event.

	objname		e10

	vscope 		local

	font   		2

	txt    		"10"

	ixt_maxl	2

	x      		581

	y      		247

	w      		36

	h      		30

Run Debug and check the first bounce works.

Carry on coding the rest of the bounces…

To add the rest of the bounces. Just copy and paste this code below the existing Touch Release Event code.

Right, now run Debug and press the Photos button to load a photo. Then press Effect button 10 to test the full Bounce out transition effect.

 Great! That got them bouncing.

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

Table of Contents

Here my aim was to create another bounce effect with an offset to make the photo frame bounce into the screen. In practice I found the coding more difficult than I intended.

However the resulting Bunny Hop effect works for me. So I kept it.

I used the constraints in a do while loop and an if condition statement to cut off the “Tails” of the bounces so the photos appear to bounce on the bottom of the screen. In actual fact the bounces start below the bottom of the screen.

1. A.Forrest: Maths Mutt - Maths Mutt Home - Quadratics
2. Martijn: The Art of Code - How to Create Cool Bounce Effects Using a Loop

Get coding…

Let’s start with a drop from the top-right of the picture frame followed by just one bounce. Copy and paste the following code into the button e10 Touch Release Event.

	objname		e11

	vscope 		local

	font   		2

	txt    		"11"

	ixt_maxl	2

	x      		581

	y      		283

	w      		36

	h      		30

Run Debug and check the first hop works.

Carry on coding the rest of the hops…

To add the rest of the hops just copy and paste this code below the existing Touch Release Event code.

Now run Debug and press the Photos button to load a photo. Then press Effect button 11 to test all the Hops work and the photo stops at full screen.

 Great! That got them hopping.

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

Table of Contents

To automatically add a transition effect as the photos changes we could adopt ether of the following options:

1. Copy the Touch Release Event scripts from each of the effect buttons and paste them into a series of if and if else commands in the Photos button script.
2. Trigger the effect button scripts from a button Touch Release Event using the click command.

As you might of guessed I will be going with option 2.

Now I can explain why I wanted you to add effect buttons in sequence, one after the other. This ensured that the button id’s are sequential from button e0 to e11.

In my case the ids start at 20 for e0 and rise to 31 for e11. To trigger the effect button scripts we will be using the click command. In The Nextion Instruction Set the click command can be used in two ways:

1. click b0,1 // Trigger Touch Press Event of component with .objname b0
2. click 4,0 // Trigger Touch Release Event of component with .id 4

Another feature we need to use is the Array[index] (p[ ] and b[ ] represent the page and button arrays):

1. p[pageindex].b[component.id].attribute // global scope
2. b[component.id].attribute // local scope on current page

For example to activate button whose id is 25 (i.e. e5 id=25):

1. click 25,0
2. or
3. click b[25],0

Let’s test it out…

Add a new button from the Toolbox, in my case it is b3. Move it to the middle of the screen and change its attribute txt to “Test”. Now write the following code in the Touch Release Event box…

	objname		b3

	vscope 		local

	font   		2

	bco    		2016

	text   		"Test"

	ixt_maxl	10

	x      		368

	y      		254

	w      		50

	h      		30

Run Debug and press the Photos button to load a photo. Then repeatedly press and release the Test button and check everything works.

 OK! Now random things are happening.

Continuing on with coding…

To link it up the automatic photo frame transitions we can add the test code to the Serial OFF/ON and Random OFF/ON button timer tm0 script. Timer tm0 was set up in the Rushtp #3 Photo Frame Project Files we downloaded in Step1. The timer triggers the photo changes so all we have to do is add out test code to the end of the Serial ON and Random ON condition scripts.

	objname		tm0

	vscope 		local

	tim   		3000

	ewn    		1

Run Debug again.

Test the Serial OFF/ON and Randon OFF/ON buttons to check the photo changes and transition effects work.

 Great! More random things are going on now.

*Now you can delete the Test button b3 and save the Nextion file*

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

	sta		transparency

	pco		65522

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

	txt_maxl	100

	x		75

	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.

Table of Contents

The timer tm0 (Timer) was set 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.9 seconds.

Leave the timer tm0 (Timer) set to trigger every 3000 milliseconds. this will be the default setting.

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.
Set the slider to 1.0 seconds and set the Serial button to Serial ON. The picture increase the speed of the photo change.
Move the slider to 9.9 seconds and the picture change should slow down.
Finally click on the screen to toggle the controls ON/OFF.

 Good! Everything should now be working.

(If things are not working out for you, you can download the project files – See Step 15)

Table of Contents

Finally, select Upload to update the Nextion Intelligent 7" Touch Screen

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 4 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

The Photo Frame Algebraic Transition Effects Work.

In this project I demonstrated how to create advanced transition effects based on algebraic formulas “x,y functions” controlling the ExPicture frame’s x and y values without having to use page refreshing.

I also demonstrated the function effects in MS Excel charts.

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