Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects

by Rushtp in Circuits > Electronics

485 Views, 1 Favorites, 0 Comments

Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects

0b. video - Copy.gif
0c. Untitled-1.jpg
0. video2.gif

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:

Step 1: Nextion Editor - Shorthand Conventions I’ll be using...

Step 2: Nextion Editor - Demonstration of Local vs Global Attribute Variables

Step 3: Nextion Editor - Load The Rushtp #3 Photo Frame Project Files

Step 4: Nextion Editor - Creating A New Font

Step 5: Nextion Editor - Playing With Pages

Step 6: Nextion Editor - Exploring ExPicture Attribute “effects”

Step 7: Nextion Editor - Automatically Change The Transition Effects

Step 8: Nextion Editor - Tap On The Screen To Toggle The Controls ON/OFF

Step 9: Nextion Editor - Fix The Timer Triggering Effects When The Controls Are OFF

Step 10: Nextion Editor - Add A Frame Delay Control 1 - 9 Seconds

Step 11: Summing Up…

Step 12: Download Worked Example

Supplies

0a. IMG_0723.JPG
0b. USB Connections.bmp
0c. Wiring.bmp
  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

Nextion Editor - Shorthand Conventions I’ll Be Using

1a. Untitled-1.jpg
1b. Untitled-1.jpg

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)

b0(Button)

 Toolbox, Button, Attribute

	objname		b0
	vscope 		local
	font   		1
	txt    		"Set value"
	txt_maxl    	9
	x      		250
	y      		125
	w      		80
	h      		30

 Event, Touch Release Event

 n0.val=5


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

Nextion Editor - Demonstration of Local Vs Global Attribute Variables

2a. Untitled-1 (2).jpg
2b. Untitled-1.jpg

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.

Give it a go…
Rushtp #101.1 - Nextion Notes - Demonstration of Local Vs Global Attribute Variables .


Table of Contents

Nextion Editor - Load the Rushtp #3 Photo Frame Project Files

3a. Untitled-1.jpg
3b. Untitled-1.jpg
3c. video.gif
3c. Untitled-1 - Copy.jpg

I am starting where I left off 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 using the links below.

Rushtp3.txt

Note: This file has been saved as a .txt file because some web browsers will not allow .HMI files to be downloaded! You will have to rename the downloaded Rushtp3.txt file as Rushtp3.HMI before you can open it with the Nextion Editor.

Photo-1.txt, Photo-2.txt, Photo-3.txt, Photo-4.txt, Photo-5.txt, Photo-6.txt, Photo-7.txt, Photo-8.txt, Photo-9.txt, Photo-10.txt, Photo-11.txt

Note: These files have also been saved as a .txt files. Rename them as Photo-1.xi, Photo-2.xi,,,etc. Then copy them into a new "xi Photos" folder in the Nextion Editor Virtual SD Card folder. You will also have to copy the "xi Photos" folder onto the SD Card on the Nextion Intelligent Display before Uploading the Nextion TFT file.

Top Tool Bar

 File, Virtual SD Card Folder

   

	folder		sdcard0
	new		Folder
	folder name	"xi Photos"
	add files	“Photo-1.xi”
			“Photo-2.xi”
			“Photo-3.xi”
			etc...

Open the Rushtp3.HMI file in the Nextion Editor. and SaveAs Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects.HMI.

This file was developed for the Nextion Intelligent Series 7” display screen. To modify it for other size screen, or to include your own images, you will have to follow the whole Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card project making adjustments for your screen size, and photos.


Table of Contents

Nextion Editor – Creating a New Font

4a. Untitled-2.jpg
4b. Untitled-9.jpg
4c. Untitled-1.jpg

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.

Top Tool Bar

 Tools, Font Generator, Attribute

 	Height         	16
 	Encoding       	utf-8
 	Font           	Atial
 	Bold           	“ticked”
 	Font Name      	Arial16B


Generator font

 	File Name      	Arial16B.zi


Save

   When Progress: 100%    	OK
   Add the generated font    	Yes


Table of Contents

Nextion Editor - Playing With Pages

5a. Untitled-1.jpg
5b. Untitled-1.jpg
5c. Untitled-1.jpg
5d. Untitled-1.jpg

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.

Page
   Right-click on page0
   Copy


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

b3(Button)

 Toolbox, Button, Attribute

	objname		b3
	vscope 		global
	font   		2
	txt    		"Page 1"
	txt_maxl    	6
	x      		735
	y      		410
	w      		60
	h      		30

 Event, Touch Release Event

   page page 1


Now add Text t1.
t1(Text)

 Toolbox, Text, Attribute

	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.

Then change the button Attribute txt to Page 0 and event to page page 0.
b3(Button)

 Toolbox, Button, Attribute

	objname		b3
	vscope 		global
	font   		2
	txt    		"Page 0"
	txt_maxl    	6
	x      		735
	y      		410
	w      		60
	h      		30
 Event, Touch Release Event
         page page 0


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


Table of Contents

Nextion Editor - Exploring ExPicture Attribute “effects”

6a. Clipchamp.gif
6b. Untitled-2.jpg
6c. Untitled-1.jpg

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.

n1(Number)

 Toolbox, Number, Attribute

	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…).

b4(Button) - load

 Toolbox, Number, Attribute

	objname		b4
	vscope 		global
	font   		2
	txt    		"0"
	txt_maxl    	1
	x      		666
	y      		119
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=0

b5(Button) - top fly into

 Toolbox, Number, Attribute

	objname		b5
	vscope 		global
	font   		2
	txt    		"1"
	txt_maxl    	1
	x      		666
	y      		82
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=1

b6(Button) - bottom fly into

 Toolbox, Number, Attribute

	objname		b6
	vscope 		global
	font   		2
	txt    		"2"
	txt_maxl    	1
	x      		666
	y      		155
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=2

b7(Button) - left fly into

 Toolbox, Number, Attribute

	objname		b7
	vscope 		global
	font   		2
	txt    		"3"
	txt_maxl    	1
	x      		624
	y      		119
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=3

b8(Button) - right fly into

 Toolbox, Number, Attribute

	objname		b8
	vscope 		global
	font   		2
	txt    		"4"
	txt_maxl    	1
	x      		707
	y      		119
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=4

b9(Button) - top left fly into

 Toolbox, Number, Attribute

	objname		b9
	vscope 		global
	font   		2
	txt    		"5"
	txt_maxl    	1
	x      		624
	y      		82
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=5

b10 (Button) - top right fly into

 Toolbox, Number, Attribute

	objname		b10
	vscope 		global
	font   		2
	txt    		"6"
	txt_maxl    	1
	x      		707
	y      		82
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=4

b11(Button) - bottom left fly into

 Toolbox, Number, Attribute

	objname		b11
	vscope 		global
	font   		2
	txt    		"7"
	txt_maxl    	1
	x      		624
	y      		155
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=7

b12(Button) - bottom right fly into

 Toolbox, Number, Attribute

	objname		b12
	vscope 		global
	font   		2
	txt    		"8"
	txt_maxl    	1
	x      		707
	y      		155
	w      		36
	h      		30

 Event, Touch Release Event

   n1.val=8


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

Note: leaving the effect set to Load causes problems during debug run time! I don’t know why, but it does.
So I have set it to global and top fly into.
Do not make any changes to the Touch Release Event yet. That comes later
exp0(ExPicture)

 Toolbox, ExPicture, Attribute

	objname		exp0
	vscope		global
	effect		top fly into
	x      		0
	y      		0
	w      		800
	h      		480
 Event, Touch Release Event
   if(visState.val==0)
   {
    vis b0,0
    vis b1,0
    vis b2,0
    vis n0,0
    vis t0,0
    vis fCount,0
    visState.val=1
   }else
   {
    vis b0,1
    vis b1,1
    vis b2,1
    vis n0,1
    vis t0,1
    vis fCount,1
    visState.val=0
   }


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.

Under Attribute select page0(Page) from the drop-down list.
Add the following code to the Preinitialize Event. This code will set the exp0 effect value equal to the value shown in the n1 number box before the page0 is loaded or refreshed.

Note: the existing code in the Postinitialize Event box hides and activates the file browser box to get the file count from sd0/xi Photos/ folder. Please do not amend or delete it!

page0(Page)

 Attribute, page0(page)

	vscope		global
	effect		load
	x      		0
	y      		0
	w      		800
	h      		480
 Event, Preinitialize Event
         exp0.effect=n1.val


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):

fbrowser0 (Browser) vscope global
b0 (Photos) vscope global
b1 (Serial OFF) vscope global
b2 (Random OFF) vscope global
n0 (Number) vscope global
t0 (Text “of”) vscope global
fcount (Number) vscope global
FileNr (Variable) vscope global
tFileNr (Variable) vscope global
tm0(Timer) vscope global
visState (Variable) vscope global


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.

b0(Button) - Photos

 Toolbox, Button, Attribute

	objname		b0
	vscope		global
	font		0
	txt		"Photos"
	x      		293
	y      		341
	w      		90
	h      		30
 Event, Touch Release Event
   b1.txt="Serial OFF"
   b2.txt="Random OFF"
   FileNr.val++
   n0.val=FileNr.val
   conx FileNr.val,tFileNr.txt,0,0
   if(FileNr.val>=fCount.val)
   {
    FileNr.val=0
   }
   exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   page page0
tm0(Timer)

 Toolbox, Timer, Attribute

	objname		tm0
	vscope		global
	tim		3000
	en		1
 Timer Event
   if(b1.txt=="Serial ON")
   {
    FileNr.val++
    n0.val=FileNr.val
    conx FileNr.val,tFileNr.txt,0,0
    if(FileNr.val>=fCount.val)
    {
     FileNr.val=0
    }
    exp0.path="sd0/xi Photos/Photo-"-"+tFileNr.txt+".xi"
   //-----------------------------------------------------------------
   if(b2.txt=="Random ON")
   {
    randset 1,fCount.val
    FileNr.val=rand
    n0.val=FileNr.val
    conx FileNr.val,tFileNr.txt,0,0
    exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   }
   //-----------------------------------------------------------------
   page page0


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

Nextion Editor - Automatically Change the Transition Effects

7a. Untitled-1.jpg
7b. video.gif

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.

b13(Button) – eSerial OFF

 Toolbox, Number, Attribute

     objname	b13
     vscope	global
     font	2
     txt	"eSerial OFF"
     txt_maxl	12
     x		635
     y		264
     w		100
     h		30
 Event, Touch Release Event
   b14.txt="eRandom OFF"
   if(b13.txt=="eSerial OFF")
   {
    b13.txt="eSerial ON"
   }else
   {
    b13.txt="eSerial OFF"
   }
b14(Button) – eRandom OFF

 Toolbox, Number, Attribute

     objname	b14
     vscope	global
     font	2
     txt	"eRandom OFF"
     txt_maxl	12
     x		735
     y		300
     w		100
     h		30
 Event, Touch Release Event
   b13.txt="eSerial OFF"
   if(b14.txt=="eRandom OFF")
   {
    b14.txt="eRandom ON"
   }else
   {
    b14.txt="eRandom OFF"
   }


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.

b0(Button) - Photos

 Toolbox, Button, Attribute

	objname		b0
	vscope		global
	font		0
	txt		"Photos"
	x      		293
	y      		341
	w      		90
	h      		30
 Event, Touch Release Event
   b1.txt="Serial OFF"
   b2.txt="Random OFF"
   FileNr.val++
   n0.val=FileNr.val
   conx FileNr.val,tFileNr.txt,0,0
   if(FileNr.val>=fCount.val)
   {
     FileNr.val=0
   }
   //-----------------------------------------------------------------
   if(b13.txt=="eSerial ON")
   {
     n1.val++
     if(n1.val>8)
     {
       n1.val=0
     }
   }
   if(b14.txt=="eRandom ON")
   {
     randset 0,8
     n1.val=rand
   }
   //-----------------------------------------------------------------

   exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   page page0
tm0(Timer)

 Toolbox, Timer, Attribute

	objname		tm0
	vscope		global
	tim		3000
	en		1
 Timer Event
   if(b1.txt=="Serial ON")
   {
    FileNr.val++
    n0.val=FileNr.val
    conx FileNr.val,tFileNr.txt,0,0
    if(FileNr.val>=fCount.val)
    {
      FileNr.val=0
    }
    exp0.path="sd0/xi Photos/Photo-"-"+tFileNr.txt+".xi"
   //-----------------------------------------------------------------
   if(b2,txt=="Random ON")
   {
      randset 1,fCount.val
     FileNr.val=rand
     n0.val=FileNr.val
     conx FileNr.val,tFileNr.txt,0,0
     exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   }
   //-----------------------------------------------------------------
   if(b13.txt=="eSerial ON")
   {
     n1.val++
     if(n1.val>8)
     {
       n1.val=0
     }
   }
   if(b14.txt=="eRandom ON")
   {
     randset 0,8
     n1.val=rand
   }
   //-----------------------------------------------------------------

   page page0


Now run Debug to ensure it all works.

Great!

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


Table of Contents

Nextion Editor - Tap on the Screen to Toggle the Controls ON/OFF

8a. Untitled-1.jpg
8b. video.gif
8c. Video.gif

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

t2(Text)

 Toolbox, Text, Attribute

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

exp0(ExPicture)

 Toolbox, ExPicture, Attribute

	objname		exp0
	vscope		global
	effect		top fly into
	x      		0
	y      		0
	w      		800
	h      		480
 Event, Touch Release Event
   if(visState.val==0)
   {
     vis b0,0
     vis b1,0
     vis b2,0
     vis n0,0
     vis t0,0
     vis fCount,0
     //-----------------------------------------------------------------
      vis b3,0
      vis b4,0
      vis b5,0
      vis b6,0
      vis b7,0
      vis b8,0
      vis b9,0
      vis b10,0
      vis b11,0
      vis b12,0
      vis t1,0
      vis n1,0
      vis b13,0
      vis b14,0
      vis t2,0
     //-----------------------------------------------------------------

     visState.val=1
   }else
   {
     vis b0,1
     vis b1,1
     vis b2,1
     vis n0,1
     vis t0,1
     vis fCount,1
     //-----------------------------------------------------------------
      vis b3,1
      vis b4,1
      vis b5,1
      vis b6,1
      vis b7,1
      vis b8,1
      vis b9,1
      vis b10,1
      vis b11,1
      vis b12,1
      vis t1,1
      vis n1,1
      vis b13,1
      vis b14,1
      vis t2,1
     //-----------------------------------------------------------------

     visState.val=0
   }


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

Nextion Editor - Fix the Timer Triggering Effects When the Controls Are OFF

9a. Video.gif

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.

va0(Variable)

 Toolbox, (X) Variable, Attribute

	objname		tmState
	vscope		global
	sta		Number
	val		0


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

b0(Button) - Photos

 Toolbox, Button, Attribute

	objname		b0
	vscope		global
	font		0
	txt		"Photos"
	x      		293
	y      		341
	w      		90
	h      		30
 Event, Touch Release Event
   tmState.val=0
   b1.txt="Serial OFF"
   b2.txt="Random OFF"
   FileNr.val++
   n0.val=FileNr.val
   conx FileNr.val,tFileNr.txt,0,0
   if(FileNr.val>=fCount.val)
   {
     FileNr.val=0
   }
   //-----------------------------------------------------------------
   if(b13.txt=="eSerial ON")
   {
     n1.val++
     if(n1.val>8)
     {
       n1.val=0
     }
   }
   if(b14.txt=="eRandom ON")
   {
     randset 0,8
     n1.val=rand
   }
   //-----------------------------------------------------------------
   exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   page page0


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

b1(Button) – Serial OFF

 Toolbox, Number, Attribute

     objname	b1
     vscope	global
     font	2
     txt	"Serial OFF"
     txt_maxl	12
     x		635
     y		264
     w		100
     h		30
 Event, Touch Release Event
   b2.txt="Random OFF"
   if(b1.txt=="Serial OFF")
   {
    b1.txt="Serial ON"
   tmState.val=1
   }else
   {
    b1.txt="Serial OFF"
   tmState.val=0
   }
b2(Button) – Random OFF

 Toolbox, Number, Attribute

     objname	b2
     vscope	global
     font	2
     txt	"Random OFF"
     txt_maxl	12
     x		735
     y		300
     w		100
     h		30
 Event, Touch Release Event
   b1.txt="Serial OFF"
   if(b2.txt=="Random OFF")
   {
    b2.txt="Random ON"
   tmState.val=1
   }else
   {
    b2.txt="Random OFF"
   tmState.val=0
   }


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!

tm0(Timer)

 Toolbox, Timer, Attribute

	objname		tm0
	vscope		global
	tim		3000
	en		1
 Timer Event
   if(tmState==1)
   {

     if(b1.txt=="Serial ON")
   {
      FileNr.val++
      n0.val=FileNr.val
      conx FileNr.val,tFileNr.txt,0,0
      if(FileNr.val>=fCount.val)
      {
         FileNr.val=0
      }
      exp0.path="sd0/xi Photos/Photo-"-"+tFileNr.txt+".xi"
   }
   //-----------------------------------------------------------------
    if(b2,txt=="Random ON")
   {
      randset 1,fCount.val
      FileNr.val=rand
      n0.val=FileNr.val
      conx FileNr.val,tFileNr.txt,0,0
      exp0.path="sd0/xi Photos/Photo-"+tFileNr.txt+".xi"
   }
   //-----------------------------------------------------------------
   if(b13.txt=="eSerial ON")
   {
     n1.val++
     if(n1.val>8)
     {
       n1.val=0
     }
   }
   if(b14.txt=="eRandom ON")
   {
     randset 0,8
     n1.val=rand
   }
   //-----------------------------------------------------------------
   page page0
   }


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

Nextion Editor - Add a Frame Delay Control 1 - 9 Seconds

10a. Untitled-1.jpg
10b. video.gif

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.

tm0(Timer)

 Toolbox, Timer, Attribute

	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):

Drag the fbrowser0 box towards the bottom left of the display to get it out of the way.
Add t3(Text), x0(Xfloat) and t4(Text) objects from the Toolbox
  - Set vscope all to global
  - Set the font to 1, the font colour pco to light yellow 65522
  - Set the t3’s txt “Frame delay” and t4’s txt to “Seconds” (Adjust the txt_maxl, w and h values to suit)
  - Align the 3 objects in a clear space on the screen (Use the Align tools below the top menu bar)
Add h0(Slider)
  - Set vscope all to global
  - Set it global, horizontal
  - bco = 0, bco1 = 0 and pco = 65535
  - val = 3000, maxval = 9900 and minval = 1000
  - Add tm0.tim=h0.val and x0.val=h0.val/100 to the Touch Move event
  - position it below the line of text
Add more code to the exp0(ExPicture) Touch Release Event to toggle these new controls ON/OFF
  - vis t3,0   vis x0,0   vis t4,0   vis h0,0
  - vis t3,1   vis x0,1   vis t4,1   vis h0,1


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

Summing Up…

11a. video.gif
11b. video.gif

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

Download Worked Example

12a. Untitled-1 - Copy.jpg
12b. Untitled-1.jpg

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

Rushtp4.txt

Note: This file has been saved as a .txt file because some web browsers will not allow .HMI files to be downloaded! You will have to rename the downloaded Rushtp4.txt file as Rushtp4.HMI before you can open it with the Nextion Editor.

Photo-1.txt, Photo-2.txt, Photo-3.txt, Photo-4.txt, Photo-5.txt, Photo-6.txt, Photo-7.txt, Photo-8.txt, Photo-9.txt, Photo-10.txt, Photo-11.txt

Note: These files have also been saved as a .txt files. Rename them as Photo-1.xi, Photo-2.xi,,,etc. Then copy them into a new "xi Photos" folder in the Nextion Editor Virtual SD Card folder. You will also have to copy the "xi Photos" folder onto the SD Card on the Nextion Intelligent Display before Uploading the Nextion TFT file.

Top Tool Bar

 File, Virtual SD Card Folder

   

	folder		sdcard0
	new		Folder
	folder name	"xi Photos"
	add files	“Photo-1.xi”
			“Photo-2.xi”
			“Photo-3.xi”
			etc...


Open the Rushtp4.HMI file in the Nextion Editor. and SaveAs Rushtp #4 - Nextion Intelligent - Photo Frame Transition Effects.HMI.

This file was developed for the Nextion Intelligent Series 7” display screen. To modify it for other size screen, or to include your own images, you will have to follow the whole Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card project making adjustments for your screen size, and photos.


Table of Contents