Create a Web-Enabled Digital Photo Frame: Step 9

Last modified by Microchip on 2023/12/22 13:15

Adding Application Code for Web Photo Frame

Generate Web Server Source Files

The web server is hosted inside the Flash memory (NVM), from address 0xD100000.

The file system source files and folder can be found in the folder firmware\src\website_files\.

These need to be converted into C code. The TCP/IP Stack comes with a utility for this called MPFS generator.

Create Web Server Files Using TCP/IP MPFS Generator

The web server .c file that is holding the Flash representation of the Microchip File System can be generated using the utility that comes with the net package in MPLAB® Harmony.

Launch Tool

Execute the following file: Harmony\v3\net\utilities\mpfs_generator\mpfs_net.jar.

Update Folders

Configure the source folder to point to the firmware\src\website_files and the target folder to the src folder of the project, pic32mzef_web_photo_frame\firmware\src.

Note: In case the user needs to change the web interface, modifications can be added into the firmware\src\website_files folder and then the MPFS generator needs to be used.

Code generation consists of creating the following files into the project:

  • http_net_print.c
  • http_net_print.h
  • mpfs_net_img.c

Increase Buffers

Because the web server uses dynamic variables processing to send the image file to the browser, the buffers need to be increased to speed up the loading of the images. To do so, after the code has been generated, open the http_net_print.h file and change the buffer size to 1500 bytes


Copy Image Files to SD Card

Locate SD card image files in the pic32mzef_web_photo_frame\sdcard_files folder.

Back to Top

Format the SD card as FAT32 and copy all the contents of this folder onto your SD card.

Back to Top

Add Web Photo Frame Application Code

Copy all the files from dev_files\application_code\ to the pic32mzef_web_photo_frame\firmware\src\ folder.

Back to Top

Add the missing .c file to MPLAB X Project Virtual Folder called Source Files.

  • app_file_handler.c

Back to Top

Add the missing .h files to MPLAB X Project Virtual Folder called Header Files.

  • app_file_handler.h

Back to Top

Remove the file custom_http_net_app.c from the Source Files.

Back to Top

Generate Graphics Source Code, Build and Program

Open the Microchip Graphics Composer plugin from Project Graph and then open the project in the pic32mzef_web_photo_frame\firmware\src\config\wpf_mzef_cu_tm4301bdefault\ file.

Back to Top

Click Generate in the Composer.

Figure: Generating the Graphics Source Code

The console should output success messages.

Figure: Microchip Graphics Composer – Generate Output Window

Leave the composer open.

Back to Top

Go to MPLAB X IDE and click Generate from the Resource Management tab.

Then build and program.

Back to Top