Rushtp #3 - Nextion Intelligent - Photo Frame ExPicture Files From the SD Card

Background

The Nextion Intelligent Series displays have the ability to read files stored on the built-in micro SD card. Up till now the SD card reader could only be used to load the firmware TFT file.

So can it be used to make a digital photo frame? Well, Yes! Using a new “ExPixture” object in the Nextion Editor Toolbox... and this is how it can be done using a 7” display screen…

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.

The photo images have to be resized to match the “ExPixture” object dimensions in the Nextion Editor.

To program the Intelligent Displays the newer version of the Nextion Editor has a Virtual SD Card Folder.

Although the Nextion Intelligent Series can read files from it’s built-in SD Card reader they have to be in a “.xi” file format.

In this project only one screen page will be used, “page0” and we will add a background image. It will not be displayed on the finished Photo Frame but is make it easier to see the objects we will use in programming the display.

Create a new project file “Nextion Intelligent - Photo frame ExPicture files from the SD Card.HMI”

Select the NX8048P070_011 model and the display direction 0 Horizontal.

Note the page0(page) dimensions – 800 x 480 pixels. The background image has to be resized to these dimensions.

Save the project file. We will come back to it in Step 5.

Before we start, the screen page background will not be stored on the SD Card it will be held in the display memory.

Create a New, Blank File Photoshop Elements the same size as in page0 - Step 3 in the Nextion Editor - 800 x 480 Pixels.

Open an image file for the page0 background and drag it into the new Blank File tab.

Then select View, Fit on Screen and drag the corners until the background image just covers the Blank file outline. Now using SaveAs save it as Background (800x480).jpg.

In the Nextion Editor Open the project file “Nextion Intelligent - Photo frame ExPicture files from the SD Card.HMI”.

In the Picture section select “+” Add and load the Background (800x480).jpg file.

In the Attribute, page0(Page) section change the “sta” to image and set “pic” to 0.

This sets the page background image.

In the Toolbox create an ExPicture object set the origin to 0x0 and resize it to 800x480.

Note that the ExPicture object now fills the page0 background exactly. That is why the background image will not show when the Photo Frame is running – the photo files will cover it.

File, Save the project (“Nextion Intelligent - Photo frame ExPicture files from the SD Card.HMI”).

To make the process easier to handle create a new folders on your PC.

1. Original photos
2. Resized photos
3. Xi Photos

In Photoshop Elements and drag the original files in (in my case there are only 11 files).

Create a blank file 800x480 pixels - File, New, Blank File, Width = 800, Height = 480

Copy the original photos you want to add to the photo frame into a folder called “Original photos”.

In the same way we did in Step 4 the photo files need to be resized them to 800x480 pixels.

Select the first image loaded (it is in the Tab left of the Blank background Tab) and drag it into the Blank background Tab. If the dragged image is too big to fit in the Blank background select View, Fit on Screen and drag the corner handles to resize. You may have to select Fit on Screen a couple mote time to see more clearly.

File, Save as “Photo-1.jpg” in the “Resized photos” folder.

Delete the original photo Tab (click on the “X”).

Delete the Photo-1 layer 2 to leave the Blank background.

Repeat the process with each of the remaining original photo Tabs.

Remember to save the files in sequence "Photo-2.jpg, Photo-3.jpg, Photo-4.jpg,….”

Open the project file “Nextion Intelligent - Photo frame ExPicture files from the SD Card.HMI” in the Nextion Editor.

Next select Tools, Open PictureBox and Add all the resized and renamed photos and Open.

Now press Start to convert and put the converted “.xi” files in the “xi Photos” folder.

Select File, Virtual SD Card Folder and drag the “xi Photos” folder into it.

Check all the converted photo files are there.

Format the 32GB Micro SD Card file system to FAT32.

Copy the “xi Photos” folder into it and check converted photo files are there.

Install the SD Card in the reader on the Nextion Intelligent 7" Touch Screen (e.g. NX8048P070-011C)

In the Toolbox click on:-

1. 1x Button - drag it into position, change the txt Attribute to “Photos” and resize w80 x h30
2. 1x Number - drag it into position and resize w40 x h30
3. 2x Variable – Change va0 objname to “FileNr”, va1 objname to “tFileNr” and it’s sta to String

The tool bar just above the Toolbox can be used to align and space objects on the screen page.

Variables appear below the screen page and are invisible when the display is running.

Now click on the Compile button on the top tool bar.

If you get error messages “…invalid Font ID” go to Step 13 to generate some text fonts.

Select Font Generator from the Tools tab

1. Height 16
2. Encoding utf-8
3. Font Arial
4. Name “Arial16”
5. Generate font – and Add the generated font

Repeat for “Arial32b” (Bold)

Now click on the Compile button again and the errors should clear.

Click on the Photos button and copy and paste the following code into the Touch Release Event code area.

Note: do NOT add extra spaces in the code (e.g. “If<space>(FileNr…” will case a Compile error!). There is a space after the convert statement “conv”.

By converting FileNr into text (tFileNr) it can be used to change the photo file name selected for display.

Run Debug and press the Photos button repeatedly.

If all goes well you should be able to skip through the Photo files stores in the Virtual SD Card Folder.

WARNING! – The first time you use the Upload option process can take a long time to complete. In my case it was 23 minutes! …so go and make a cup of tea while you wait.

However, subsequent uploads only take a few seconds as it appears that only changes are uploaded.

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.

Well, that proves a Photo Frame can be programmed to use the built in SD card.

But, there are a number of improvements we need to make:

1. Automatically count the files stored on the SD Card
2. Auto run the photo files in Serial and Random
3. Hide the Photos button and the file count n0 while the frame is running
4. Add special effects as each photo is loaded (This will be covered in a future project)

From the Toolbox add a FileBrowser and press OK to add two pictures to Picture list.

Position and size fBrowser0 above the existing Photos button.

Set the dir attribute to “sd0/xi Photos/ “.

Add a new Text object and set the background to transparency and set the size to w40 h30 pixels.

Set the font to 1 and the pco colour to white (Font 1 is the Arial32b we created earlier in Step 13).

Add a Number object and name it fCount and set the size to w40 h30 pixels.

Use the align tools to position the new objects in line with the Photos and n0 objects.

Click on the Compile button and ensure there are no errors in the Output area.

If there are errors double click on the red error text and the cursor will jump to the defective code.

e.g. Error:Invalid Variables:fCount.val( Double click to jump to code)
       Error:Compile failed! 1 Errors, 0 Warnings

Select Debug and check it out. Initially the file count is 0, but click anywhere on the browser and it will display the file count in the “sd0/xi Photos/” folder. In my case the file count is 12 because I added another resized and converted photo (Photo-12.xi).

Now we need to set up the programming to “Click” and hide the browser object.

In the Attributes area select Page0(page).

Then select the Postinitialize Eventtab and add the following code:

Use Debug  and confirm it The file browser object fbrowser0 is hidden.

Close the Debug screen.

Now add two more buttons (b1 and b2). Then position and resize them to w90 and h30. Align them below the Photos button. Use the Align tools to refine the three button positions.

To improve the button layout resize the “Photos” button too.

Note: Holding the “ctrl” key allows all three buttons to be selected for fine tuning the alignment – remember to de-select by clicking outside the display area.

Change the txt attribute on the new buttons to “Serial OFF” and “Random OFF”.

In the button Touch Release Events add the following code:

Test the buttons out in Debug.

All that happens is that the buttons toggle their text …ON / …OFF.

Add two new objects from the Toolbox – Timer tm0 and Variable renamed to visState.

Set the timer attribute tim to 3000 millisecond (this is the photo display time).

To the Timer Event add the following code:

Select the ExPicture object exp0 in the Attributes list.

To toggle the screen objects between visible and hidden when the ExPicture (exp0) is touched add the following code to the Touch Release Event area:

First try it out in Debug to ensure it all works.

Then upload it took 23 minutes again! …so time for lunch.

And Finally The photo Frame Works.

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.

So can it be used to make a digital photo frame?     ...Yes it can!

In the next project I will show how to add special effects as each photo is loaded.