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



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



- Nextion Intelligent 7" Touch Screen (e.g. NX8048P070-011C)
- USB to TTL CP2102 UART Module 5Pin Serial Converter
- USB extender cable (3m)
- Nextion 7” Display DIY Enclosure (Optional)
- 20mm clear heat Shrink tube (Optional)
- Nextion Editor (Download)
- Nextion Editor Guide
- Nextion Instruction set
- Adobe Photoshop Elements (NOT Adobe Premiere Elements!)
- 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.
Nextion Editor - Shorthand Conventions I’ll Be Using


The Nextion Editor has a number of display areas that contain objects, actions, files or code.
- File
- Tools
- Toolbox
- Display
- Program.s
- Page
- Attribute
- Event
- Pictures
- 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)
|
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.
Nextion Editor - Demonstration of Local Vs Global Attribute Variables
.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.
- The local values will return to its default state (the one set by Attribute val = 0).
- 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 . |
Nextion Editor - Load the Rushtp #3 Photo Frame Project Files




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. 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.
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. |
Nextion Editor – Creating a New Font



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 |
Nextion Editor - Playing With Pages




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.
|
Go back to page 0 and add button b3 and change its Attributes and add the Event.
|
|
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.
|
Go to Debug and check the page buttons switch between the two pages.
Nextion Editor - Exploring ExPicture Attribute “effects”



The Nextion Editor has a number of built-in effects
- Load
- top fly into
- bottom fly into
- left fly into
- right fly into
- top left fly into
- top right fly into
- bottom left fly into
- 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.
|
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…).
|
|
|
|
|
|
|
|
|
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
|
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!
|
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.
|
|
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).
Nextion Editor - Automatically Change the Transition Effects


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.
|
|
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.
|
|
Now run Debug to ensure it all works.
Great!
(If things go wrong please recheck the coding from Step 6).
Nextion Editor - Tap on the Screen to Toggle the Controls ON/OFF



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.
Nextion Editor - Fix the Timer Triggering Effects When the Controls Are OFF

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..
|
For buttons b1 and b2 add tmState.val=0 and tmState.val=1 at the beginning of the Touch Release Event code..
|
|
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!
|
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.
Nextion Editor - Add a Frame Delay Control 1 - 9 Seconds


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.
Summing Up…


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.
Download Worked Example


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