Create a Web-Enabled Digital Photo Frame: Step 6

Last modified by Microchip on 2023/12/15 16:38

Adding Application Code for Webserver

The framework files are ready. Now we need to code the application.

The contents of the Microchip Web Demo are available in the dev_files\tcpip_test\ folder from the downloaded ZIP.

Generation of the MPFS for the Web Server

Run MPFS Generator Utility

The TCP/IP stack comes with a utility that converts the contents of a folder into a C file that will contain the code of the file system in the MCU flash.

The utility is called MPFS Generator and can be found in the Harmony installation in the net\utilities\mpfs_generator\ folder. Since the application is using the http_net module, the mpfs_net.jar utility should be used. The application is written in Java, so the Java Runtime Engine should be installed on the user’s machine.

In case there is no Java installation available, then the Java from the MPLAB® X IDE installation could be used in the command/terminal interface of the PC.

Navigate into the terminal at the MPFS generator utility location, e.g.:

cd C:\Microchip\Harmony\v3\net\utilities\mpfs_generator\

Run the java with the command:

"C:\Program Files\Microchip\MPLABX\v6.05\sys\java\zulu8.64.0.19-ca-fx-jre8.0.345-win_x64\bin\java" -jar mpfs_net.jar

The application will open:

Microchip MPFS Generator Default Settings

Back to top

Update MPFS Generator Settings

The generator needs to be configured with the source and destination folders and the output type of the generated content. For this test, these will be:

  1. Source Directory: This should be the path to the pic32mzef_web_photo_frame\dev_files\tcpip_test\web_pages folder, provided with the ZIP file.
  2. Output: We will compile the MPFS file into the application, so PIC32 Image should be checked.
  3. Project Directory: This is the pic32mzef_web_photo_frame\firmware\src folder of this project.
  4. This option will disappear when PIC32 Image is chosen.
  5. Click on Generate to generate the code for the MPFS.

Microchip MPFS Generator Settings

After the generation ends, the following output windows will appear:

Microchip MPFS Generator Output Window

Note: The GENERATED MPFS2 IMAGE size at the end of the Output window. This needs to be smaller than the NVM Media Size set in the NVM Peripheral.

Back to top

LEDs and Switches

The pins used for LEDs and switches on the PIC32MZ EF Curiosity 2.0 board are automatically added by the PIC32MZ EF Curiosity BSP component. Those are:


  • RGB_LED_R – RB7
  • RGB_LED_G – RB8
  • RGB_LED_B – RB9


  • LED1 – PIN117 – RJ3
  • LED2 – PIN126 – RK7
  • LED3 – PIN134 – RJ7


  • SHITCH1 – PIN131 – RJ4
  • SHITCH2 – PIN132 – RJ5
  • SHITCH3 – PIN133 – RJ6
  • SHITCH4 – PIN72 – RC15

Those are already defined by the BSP and the definitions are available in the bsp.h file generated by MCC Harmony. Open the file to familiarize yourself with it.

Note: In case your code fails to build because definitions for LEDx_On, LEDx_Off, LEDx_Toggle are missing, you can add their definitions into the bsp.h file or system_config.h file, and just add aliases of the available definitions, for example: 

define LED1_On() LED_AL_RJ7_On()

Back to top

Test TCP/IP Application Code

The dev_files\tcpip_test\ folder contains a list of .c and .h files that need to be copied manually into your pic32mzef_web_photo_frame\firmware\src\ folder of the generated application. Overwrite the app.c, app.h and main.c files.

After this, the newly added files need to be manually added to the project.

Add Source files (.c)

Right-click on the logical folder called Source Files in your project and choose Add Existing Item.

Adding files to MPLAB X Project

Then point to the src\ folder of the project and add the .c files:

  • custom_http_net_app.c
  • http_net_print.c
  • mpfs_net_img.c

Adding Header files (.h)

Right-click on the logical folder called Header Files in your project and choose Add Existing Item.

Then point to the src\ folder in your project and add the .h files:

  • http_net_print.h

This is how it should look after adding the files.

Back to top

Build and Program the Board

Connect USB to UART bridge

Place the USB I2C Click board™ from Mikroe into mikroBUS™ 2 slot and connect to the PC with a USB mini cable.

Connect Ethernet

Option 1: Using a Router

Place the KSZ8061 RMII Daughter Board into the ETHERNET PHY MODULE and connect with a CAT5/CAT6 Ethernet cable to a router. The PC should be connected to the same router.

This option was used while building this documentation.

Option 2: Direct connection with the PC

There is an option to have the board directly connected to the PC with an Ethernet Cable.

The static IP address default configuration is and the netmask is This is configured into the MAC instance of the NETCONFIG component (see NETCONFIG – Instance 0 for details).

The Ethernet port of the PC should be in the same address range with netmask or example,

Back to top

Setup Terminal

Tera Term can be used as a terminal for the console.

Open Tera Term and connect the COM port where the USB I2C Click board resides. Set the Speed to 115200 baud.

Back to top

Program the board

The PC should be connected to the board debugger using a micro USB cable from the PC to the DEBUG USB connector on the board (J700)

In the MPLAB X IDE toolbar, click the Make and Program Device Main Project button.

Make and Program Device Main Project

When the programming finishes, LED1 (red) should illuminate. After a bit of time, LED2 should illuminate and  LED3 should blink.

In Tera Term the following should appear:

Terminal Output

Back to Top

Verify Outcome

Open a browser and type the IP address that appeared in the console into the address bar.

The standard Microchip web server demo should start.

Microchip Original HTTP Server Demo main page

If all this happens, then the web server part of this application will work.

There are other changes to be made to the web server, but we will do this after we add the graphics part.

Back to top