Rushtp #6 - Nextion Intelligent - Photo Frame Record & Playback Transition Effects

Table of Contents

Background

In this project I will show how to create a DataRecord with a file stored on the Nextion Intelligent built in SD card reader. Then I'll show how to record the movement of a ExPicture frame loaded with a photo. Finally, I’ll demonstrate how to play the recording back to recreate the ExPicture frame movement.

In my earlier Nextion Editor projects Rushtp#4 and Rushtp#5 we explored the built-in and some bespoke algebraic transition effects.

Now we will create a freehand transition effect by recording the movement of the photo as it is manually dragged around the screen. The recording will then be played back to simulate the dragging effect.

DataRecord supports up to 12 (columns) per record. DataRecord incorporates 4 methods:

.insert(string newtxt)
.delete(int strid, int qty)
.up(string newtxt, int index)
.clear()

For the purposes of this tutorial only one DataRecord with two columns will be used but you can follow the same process to add more DataRecords for multiple freehand effects.

So let’s get started.

We will be starting from where I left off in my earlier project Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card.

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 before.

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. Cheap Controls Tutorials - #115 Nextion Display DataRecord elements
2. Symbols ▼ and ▲ - W3Schools Tutorial (UTF-8 Geometric Shapes)
3. The Nextion Editor Guide - Nextion

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. 20mm clear heat Shrink tube (Optional)
5. Nextion Editor (Download)
6. Nextion Editor Guide
7. Nextion Instruction set
8. 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 #6 - Nextion Intelligent - Photo Frame Record & Playback 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

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

Let’s tidy the screen up by moving the existing browser object out of the way. Just set fbrowser0(FileBrowser) attribute x to -300. This will hide it out-of-sight to the left of the screen!

	objname		fbrowser0

	vscope 		local

	...

	x      		-300

	y      		68

	w      		240

	h      		240

Run the file in Debug to check the Photos, Serial OFF/ON and the Random OFF/ON buttons work.

The file count should reflect the number of .xi files you loaded in Step 1. (Virtual SD Card Folder… sdcard0/xi Photos)

 Good!

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.

Looking 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.

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

In practice to move a photo in the ExPicture frame we only have to consider coordinates the top-left 2/3^rds of this area. This is because the frame has it’s origin 0,0 at the top-left corner of the visible area.

x = -800 to +800px

y = -480 to +480px

Dragging…

The Nextion Editor allows any object to be dragged using the mouse in the Debug window provided the drag attribute is set to yes.

So select exp0(ExPicture) in the Attributes box and set drag to yes and while you are at it change effect to load.

	objname		exp0

	vscope 		local

	drag   		yes

	aph    		127

	effect 		load

	x      		0

	y      		5

	w      		800

	h      		480

Run the file in Debug again. This time press the Photos button and then left-click and hold the mouse pointer anywhere on the photo and drag it around.

You will see the picture can be moved into the hidden area around the screen.

Close the Debug window.

Tracking…

Next we will add four text objects from the Toobox to track the dragged picture x & y coordinates. Oh! and a Reset button too.

First create t1(Text). Then Copy and Paste it to create t2(Text). Then edit the attributes sta, txt, x, y, etc…

	objname		t1

	vscope 		local

	sta    		transparency

	font   		2

	pco    		65535  (white)

	txt    		"x"

	txt_maxl 	1

	x      		168

	y      		27

	w      		50

	h      		30

	objname		t2

	vscope 		local

	sta    		transparency

	font   		2

	pco    		65535  (white)

	txt    		"y"

	txt_maxl 	1

	x      		218

	y      		27

	w      		50

	h      		30

Then Copy and Paste again to create t3(Text) and t4(Text). Then edit the attributes sta, txt, x, y, etc…

	objname		t3

	vscope 		local

	sta    		solid color

	style  		border

	borderw 	1

	font   		2

	txt    		"0"

	txt_maxl 	5

	x      		168

	y      		55

	w      		50

	h      		30

	objname		t4

	vscope 		local

	sta    		solid color

	style  		border

	borderw 	1

	font   		2

	txt    		"0"

	txt_maxl 	5

	x      		218

	y      		55

	w      		50

	h      		30

OK! Yes, I have set t3 and t4 as text objects not number objects to display the exp0(ExPicture) x & y coordinate values.

I want to add another text object t5 to display the text values of the x and y coordinate separated by a caret or circumflex character “^”. This is the format used to insert data into the DataRecord (e.g. “100^75”).

	objname		t5

	vscope 		local

	sta    		solid color

	style  		border

	borderc 	63488  (Red)

	borderw 	3

	font   		0

	txt    		"0^0"

	txt_maxl 	10

	x      		168

	y      		92

	w      		100

	h      		30

Now, to get the x and y coordinates as we drag the photo around we need another timer.

Create tm1(Timer) and set it to trigger every 200 milliseconds (0.2 seconds). As it triggers we will read the exp0(ExPicture) coordinates and display their values in t3 and t4. t5 has their text values concatenated while separated by a caret or circumflex character “^”. Note that attribute tm1.em can be used to switch the timer ON and OFF.

	objname		tm1

	vscope 		local

	tim   		200	(0.2 seconds)

	en   		1	( 0=OFF, 1=ON)

Create a Reset button. This is to reposition exp0 back to it’s original start position x=0 and y=0 after we have dragged the photo around.
Add button b3 from the Toolbox…

	objname		b3

	vscope 		local

	font   		2

	txt    		"Reset"

	txt_maxl 	10

	x      		273

	y      		56

	w      		90

	h      		30

Run the file in Debug again. Press the Photos button and then left-click and hold the mouse pointer anywhere on the photo and drag it around.

The photo x and y coordinates are displayed every 0.2 seconds. Press the Reset button to move the photo back to the start position.

 So far, So Good!

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

Before getting started on data recording on the Nextion display lets consider what we want to do...

At present, when the a photo in the exp0(ExPicture) frame is being dragged around, the x and y coordinates are displayed in text objects t3 and t4 on the screen.

The third text object t5 displays their text values concatenated while separated by a caret or circumflex character ^.

Remember the timer variable tm1 is used to trigger the readings every 0.2 seconds as the photo is being dragged. When we created it the timer was enabled (attribute en set to 1). Now, however, we only need the dragging ability to function during recording so let’s set en set to 0.

To record the x and y coordinates values as the timer triggers we can employed the DataRecord object that is available for the Nextion Intelligent displays.

Now, however, we only need the dragging ability to function during recording so let’s set en to 0.

	objname		tm1

	vscope 		local

	tim   		200	(0.2 seconds)

	en   		0	( 0=OFF, 1=ON)

Also, I want to set the drag attribute in the photo frame exp0(ExPicture) to no to prevent dragging until a recording is activated. More of that later.

	objname		exp0

	vscope 		local

	drag   		yes

	aph    		127

	effect 		load

	x      		0

	y      		5

	w      		800

	h      		480

Setting up the DataRecord…

To record the x and y coordinates values as the timer triggers we can employed the DataRecord object that is available for the Nextion Intelligent displays.

Many thanks for his tutorial go to:

1. Cheap Controls Tutorials - #115 Nextion Display DataRecord elements

We are going to create a two column DataRecord with headers called x and y. An associated data file to hold the records will be created (/Recordings/1.data) in the Nextion Editor Virtual SD Card Folder. Later, when the project is Uploaded to the Nextion touch Screen the data file will be held on the built-in SD reader card.

Please watch the Cheap Controls Tutorial. Then follow my instructions below carefully.

	objname 	data0

	vscope  	global

	sta     	solid color

	style   	border

	borderc 	63488 (Red)

	borderw 	3

	font    	2

	xcen    	Center

	path    	sd0/Recordings/1.data 

	lent 		10

	maxval 		999

	dez 		2

	dir 		x^y

	x      		168

	y      		124

	w      		100

	h      		310

A RECORD button will be used to switch on a recording of the photo coordinates during dragging but first I have created a 3 second count-down timer to give us time to ready ourselves.

Add a new text object t6(Text) and set the attributes as follows…

	objname 	t6

	vscope  	local

	sta     	solid color

	style   	border

	borderw 	2

	font    	1

	borderc 	65528 (Pale yellow)

	pco     	31 (Blue)

	xcen    	Center

	txt     	"3"

	txt_maxl 	4

	x      		-200 (Hide it)

	y      		150

	w      		100

	h      		100

I have set t6.x=-200 to hide it away to the left of the visible screen.

Add button b4(Button) and copy and paste the code into the Touch Press Event.

Button b4 “RECORD”, below, will be programmed to display this text box and count down from 3 to DRAG in 3 seconds. It will also set exo0.drag and the tm1.en timer ON/OFF (tm1.en=1enabled and tm1.en=0 disabled). Pressing the b4 STOP button will hide it again.

	objname		b4

	vscope 		local

	sta    		solid color

	style  		3D_Auto

	font   		2

	txt    		"START"

	txt_maxl 	10

	x      		73

	y      		203

	w      		90

	h      		30

 OK!

To make a recording and add entries to the DataRecord we have to use the .insert(string newtxt) method. Entries are added sequentially from the start of the data file index 0.

Back in Step 6: Nextion Editor – Creating a DataRecord we created tm1(Timer) and coded the event to capture the x and y coordinates of the photo being dragged in the frame exp0(ExPicture). The results are displayed in t3, t4 and t5 displays the data in the correct format to insert into data0(DataRecord). All we have to do is add code to the tm1(Timer) event.

As data is entered data0.qty keeps a count of the total number of entries. We will use a number box to display it. This is achieved by adding the n1.val=data0.qty to the Timer Event code in tm1.

So first add n1(Number) from the Toolbox.

	objname 	n1

	vscope  	local

	sta     	solid color

	style   	border

	borderc 	63488  (Red)

	borderw 	3

	font    	2

	val     	0

	format  	Decimal

	x      		114

	y      		92

	w      		50

	h      		30

Add additional code to the recording timer to insert records…

Inserting data into data0(DataRecord) is achieved by including data0.insert(t5.txt) in the tm1(Timer) Timer Event code. Where t5.txt holds the concatenated x^y coordinate readings each time the timer triggers during dragging.

As data is added the record count is incremented by 1 and we keep track using the code n1.val=data0.qty.

	objname		tm1

	vscope 		local

	tim    		200    (0.2 seconds)

	em     		1  ( 0=OFF, 1=ON)

Retrieving individual data entries…

As data has been recorded the DataRecord displays it in rows in a table.

Now I want to be able to get the record values to be displayed in the n1(Number) and t5(Text). This is the first step for creating the Play Back routine in Step 9.

To do this we need to add code to the data0(DataRecord) Touch Release Event. So just clicking on a data row will display the values in the two text boxes.

	objname 	data0

	vscope  	global

	sta     	solid color

	style   	border

	borderc 	63488 (Red)

	borderw 	3

	font    	2

	xcen    	Center

	path    	sd0/Recordings/1.data 

	lent 		10

	maxval 		999

	dez 		2

	dir 		x^y

	x      		168

	y      		124

	w      		100

	h      		310

Clearing the data record…

I mentioned earlier in the project that new data is added or appended to the end of the existing records on the data file. We need a way to empty the data file before we start a new recording. This can be achieved using data0.clear().

Add b5(Button) - Clear All and include the Touch Release Event code below. This button will erase the existing data do this before starting a new recording.

	objname		b5

	vscope 		local

	sta    		solid color

	style  		3D_Auto

	font   		2

	txt    		"Clear All"

	txt_maxl	10

	x      		73

	y      		167

	w      		90

	h      		30

Run the file in Debug.

Press the Clear All thenPhotos buttons and then press the RECORD button (the ROCORD button text will change to STOP). After the count-down gets to DRAG start dragging the photo around. The data0(DataRecord) table will start being loaded and the row-counter n1 will display the total number of entries in the record.

Press the STOP button to finish the recording.

If you re-start the recording the additional records will be added at the end of the existing data - try it.

Press Clear All to empty the data file before starting a new recording.

The photo x and y coordinates are displayed during the recorded every 0.2 seconds.

After the recording has been completed clicking on a data row the row number data0.val and the data row text data0.txt will be displayed in n1(Number) and t5(Text0) boxes. Note: The x and y coordinates will not update on the selection yet. We will sort that out in the next steps.

Clicking and dragging a data table cells vertically will allow the table to be scrolled UP/DOWN.

 That’s got the records.

Table of Contents

Play button…

Create a new button b6.
The aim here is to play the data0(DataRecord) back in reverse order so the photo in exp0 x and y coordinates are stepped back to the 0,0 origin.

n1.val=data0.qty-1
When the PLAY button is pressed we need to get the ID of the last record in the table and store it in n1. The -1 is because the record ID starts at 0 so for a record count data0.qty of say 10 the last record ID would be 9 not 10.

for(data0.val=data0.qty;data0.val>=0;data0.val--)
This routine steps through the table ID in the reverse order and sets the x and y coordinates iv the photo displayed in exp0(ExPicture). The selected data row ID is data0.val.

t5.txt=data0.txt
Each record in a text format x^y is displayed in t5.

spstr t5.txt,t3.txt,"^",0   //return string before first delimiter ^ occurs.
This is used to get the text value of the x coordinate.

conv t3.txt,exp0.x,0,0
Converts the text values of x held in t5 to the number value of the exp0.x coordinates

Similarly…

spstr t5.txt,t4.txt,"^",1   //return string after first delimiter ^ occurs.

covx t4.txt,exp0.y,0,0
Converts the text values of y held in t5 to the number value of the exp0.y coordinates

	objname		b6

	vscope 		local

	sta    		solid color

	style  		3D_Auto

	font   		2

	txt    		"PLAY"

	txt_maxl	10

	x      		73

	y      		238

	w      		90

	h      		30

At this point I want to get a photo in exp0(ExPicture) to move to any records I select in the table so we will go back to data0(DataRecord) and add some of the PLAY button code to the Touch Release Event.

	objname 	data0

	vscope  	global

	sta     	solid color

	style   	border

	borderc 	63488 (Red)

	borderw 	3

	font    	2

	xcen    	Center

	path    	sd0/Recordings/1.data 

	lent 		10

	maxval 		999

	dez 		2

	dir 		x^y

	x      		168

	y      		124

	w      		100

	h      		310

Give it a try in Debug.

Table of Contents

Before we finish with this project let’s enable some editing features to navigate and clean up or amend the records.

Navigation buttons…

Go to the Top.

Add b7(Button) - Top and include the Touch Release Event code below. This button selects the first (Top) data entry. It will be highlighted in blue.

The click data0,0 code causes Touch Release Event in data0(DataRecord) to trigger and update the n1(Number ) and t5(text) boxes.

	objname		b7

	vscope 		local

	font   		2

	Txt    		"Top"

	txt_maxl 	10

	x      		73

	y      		281

	w      		90

	h      		30

Increment down ▼.

Add b8(Button) - ▼ and include the Touch Release Event code below. This button will move down the data table one record at a time. It will be highlighted in blue each step down.

To get the ▼ character symbol copy and paste it from W3Schools Tutorial (UTF-8 Geometric Shapes)

	objname		b8

	vscope 		local

	font   		2

	Txt    		"▼"

	txt_maxl 	10

	x      		73

	y      		317

	w      		45

	h      		30

Increment up ▲.

Add b9(Button) - ▲ and include the Touch Release Event code below. This button will move up the data table one record at a time. It will be highlighted in blue each step down.

To get the ▲ character symbol copy and paste it from W3Schools Tutorial (UTF-8 Geometric Shapes)

	objname		b9

	vscope 		local

	font   		2

	Txt    		"▲"

	txt_maxl 	10

	x      		118

	y      		317

	w      		45

	h      		30

Go to the Bottom.

Add b10(Button) - Bottom and include the Touch Release Event code below. This button selects the last (Bottom) data entry. It will be highlighted in blue.

	objname		b10

	vscope 		local

	font   		2

	Txt    		"Bottom"

	txt_maxl 	10

	x      		73

	y      		353

	w      		90

	h      		30

Delete button.

data0.delete(data0.val,1)

Add b11(Button) - Delete and include the Touch Release Event code below. This button deletes the selected data row.

	objname		b11

	vscope 		local

	font   		2

	Txt    		"Delete"

	txt_maxl 	10

	x      		73

	y      		396

	w      		90

	h      		30

Table of Contents

Having got a set of data records and shown how to play them back there just the Update function to address .up(string newtxt, int index).

Again many thanks for his tutorial:

1. Cheap Controls Tutorials - #115 Nextion Display DataRecord element. Insert, Delete, Update and Clear

This step is going to look a little messy on the screen but is should prove the update method with the minimum of work,

Hold the Ctry key down and left-click the mouse to select these four objects:
         text boxes t1, t2, t3, t4, t5 and the Reset button b3.

Then paste and move them to the clear area on right side of the screen. Their objname’s will change after pasting and should correspond to descriptions below:
         text boxes t9, t10, t7, t8, t11 and the Update button b12.

Set the attributes and events as follows… (Note: t7 and t7 have their vscope set to global)

	objname		t9

	vscope   	local

	sta    		transparency

	key    		none

	font   		2

	pco    		65535  (white)

	txt    		"x"

	txt_maxl 	1

	 x      	433

	 y      	27

	w      		50

	h      		30

	objname		t10

	vscope   	local

	sta    		transparency

	key    		none

	font   		2

	pco    		65535  (white)

	txt    		"y"

	txt_maxl 	1

	 x      	484

	 y      	27

	w      		50

	h      		30

	objname		t7

	vscope		global

	sta    		solid color

	style    	border

	borderw    	1

	key		numeric keyboard

	font   		2

	pco      	31  (blue)

	txt    		"0"

	txt_maxl 	5

	 x      	433

	 y      	56

	w      		50

	h      		30

	objname		t8

	vscope		global

	sta    		solid color

	style    	border

	borderw    	1

	key		numeric keyboard

	font   		2

	pco      	31  (blue)

	txt    		"0"

	txt_maxl 	5

	 x      	483

	 y      	56

	w      		50

	h      		30

	objname		t11

	vscope    	local

	sta    		solid color

	style    	border

	borderw    	31  (blue)

	borderw   	3

	font   		0

	pco      	31  (blue)

	txt    		"0^0"

	txt_maxl 	10

	 x      	434

	 y      	92

	w      		50

	h      		30

But before we continue... I want draw your attention to the attribute key. We will be using it to set up a built-in, on-screen, Numeric Keyboard so we can edit the text (in this case numbers) in our update text objects t3 and t4.

To enable the built in numeric keyboard keybdB(Page) set the Text or Number object attributes as follows:
         vscope to global
         Key to numeric keyboard

A new locked page with the keyboard will be loaded and two new fonts installed.

In our case we need to change vscope in the following objects to global - do this now:

         t3(Text) to global
         t4(Text) to numeric keyboard
         t5(Text) to global
         n1(Number) to numeric keyboard

Update button.

Add this button. it is used to change the selected data entry in the DataRecords.

	objname		b12

	vscope 		local

	font   		2

	Txt    		"Update"

	txt_maxl 	10

	x      		538

	y      		57

	w      		90

	h      		30

Event code:

         - t11.txt=t7.txt+"^"+t8.txt sets t11 to the data in the correct format.
         - data0.up(t11.txt,n1.val) loads new values from t11 and updates the
             all the header boxes above it (t3, t4, etc…)
         - click data0,0 runs the Touch Release Events in data0(DataRecord) to reset
             all the header boxes above it (t3, t4, etc…)

Test it in Debug.

“Update” completes our tour of the 4 DataRecord methods.

The next step will show how to set the playback as a transitions effect when photos are displayed in the photo frame.

First let’s check we can get the Photo button to click the PLAY button to run the play routine.

Note: I have set the photo frame x coordinate to -480 to hide it to the left before the photo is loaded and the play routine is run.

	objname		b0

	vscope 		local

	font   		2

	Txt    		"Photos"

	txt_maxl 	10

	x      		293

	y      		341

	w      		90

	h      		30

Test it in Debug.

We can add a new button to toggle the transition effect ON/OFF…

Copy button b1(Serial OFF) and paste it somewhere in a clear area of the screen.

Now edit the attributes as follows:

	objname		b13

	vscope 		local

	font   		2

	Txt    		"Trans OFF"

	txt_maxl 	10

	x      		413

	y      		339

	w      		90

	h      		30

Test the button text toggles Trans OFF/Trans ON in Debug.

Finally, both the Serial OFF and Random OFF buttons switch tm0(Timer) ON/OFF to automate the photo frame, so we can add the if(b13… code to the tm0(Timer) event…

	objname		tm0

	vscope 		local

	tim    		3000

	en     		1

Check the Serial and Random buttons with the Trans OFF/Trans ON in Debug.

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

First create a new object t12(Text) by copying and pasting the t10(Text) the “of” object.
Then edit the attributes to display the screen instructions.

Before you set the txt attribute set txt_maxl to 100 (Select multiline… to add long 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

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

Photo Frame Record & Playback Transition Effects.

I am happy with the results.

   Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card
   Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects
   Rushtp #5 - Nextion Intelligent - Photo Frame Algebraic Transition Effects
   Rushtp #6 - Nextion Intelligent - Photo Frame Record & Playback Transition Effects

Here is a summary of the functions, objects and the more Intriguing attributes used during these projects:

Look out for my other projects at Rushtp # - Instructables.com

Table of Contents

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

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

	folder		sdcard0

	new		Folder

	folder name	"xi Photos"

	add files	“Photo-1.xi”

			“Photo-2.xi”

			“Photo-3.xi”

			etc...

Table of Contents