MPLAB® Harmony v2 Web Photo Frame Tutorial


MPLAB® Harmony is a flexible firmware development platform for PIC32 microcontrollers. This integrated software framework provides driver libraries and APIs that make it easier for you to use PIC32 peripherals (Timers, GPIO, UART, I2C, SPI, etc.). It also includes middleware libraries for USB (Host and Device), TCP/IP (Ethernet and WiFi), Graphics, Bluetooth, and others.

This tutorial shows you how to create a web-enabled digital photo frame from scratch using MPLAB Harmony and the MPLAB Harmony Configurator (MHC). The project you create will run on the PIC32 Multimedia Expansion Board II (MEB II). This application will perform the following tasks:

  • Display photos (stored on an SD card) using the onboard graphics display
  • Host an onboard webserver to display the same photos using your computer's web browser
    • MEB II Board connected to LAN via Ethernet
    • You will use MHC to configure the TCP/IP stack
  • Enable the board to broadcast its IP address over USB
    • You will use MHC to configure the USB Library

Two Ways to Use This Tutorial

  1. Create the project from scratch:
    • Use the provided source files and step-by-step instructions below.
  2. Use the solution project as an example:
    • Just build the solution project and download it to the MEB II Board to observe the expected behavior.

Lab Objectives

  1. Create an MPLAB X IDE Harmony project for a PIC32 microcontroller from scratch.
  2. Use the MPLAB Harmony Configurator (MHC) to configure and generate code.
  3. Create new application states and variables for the project.
  4. Identify the proper place to add your own application code to the project.
  5. Demonstrate the use of MPLAB Harmony peripheral libraries and drivers to control PIC32 peripherals (SPI, I2C, Timers etc.).
  6. Demonstrate the use of MPLAB Harmony middleware libraries to add TCP/IP, USB, and Graphics capabilities to the project.


Hardware Tools

Tool About Purchase
In-Circuit Emulator
PIC32MZ Embedded Connectivity with FPU
Starter Kit
PIC32 Multimedia Expansion Board II (v5)
For PIC32 Starter Kits

It is not necessary to have an MPLAB Real ICE to program/debug the code. The PIC32MZ EF Starter Kit includes a PICkit on-board (PKOB) debugger. The PKOB debugger can be connected to a host PC through the USB mini-B connector on the PIC32MZ EF Starter Kit for programming/debugging (refer to the red cable in the "Hardware Setup" below).

In addition to the hardware listed above, you'll also need an Ethernet cable and two USB mini-B cables.

Hardware Setup


Software Tools

This project has been verified to work with the following versions of software tools:
MPLAB X IDE v3.26, MPLAB XC32 Compiler v1.40, MPLAB Harmony v1.08

Note: Because we regularly update our tools, occasionally you may discover an issue while using newer versions. If you suspect that to be the case, we recommend that you double check using the same versions that the project was tested with.

Archived versions of our tools can be found on the following Microchip websites:
MPLAB Harmony (see "Archived Downloads" tab)
MPLAB X IDE and XC32 Compiler (see "Downloads Archive" tab)
Note that multiple versions of all these tools can co-exist on the same computer.

Tool About Installers
Windows Linux Mac OSX
Integrated Development Environment
C/C++ Compiler
MPLAB® Harmony 1.xx
Integrated Software Framework


This application provides the ability to load and render graphic image files (onto the display panel of the development board) via a FAT32 File System stored on external SD card media. The images stored on the SD card can also be viewed as a slideshow on a web page hosted by the web server running on the development board.

The application enables DHCP client support. The image format supported is JPEG. The application also supports plug and play feature for the SD card media.


The web enabled digital photo frame application runs as a single application task in the App_Tasks() function.

Click image to enlarge.
Click image to enlarge.

Application States

The STATE_INIT state registers an application callback with the file system service, and waits in the STATE_MEDIA_UNMOUNTED state. Once the SD card is mounted, the application moves to the STATE_TCPIP_INIT state. After TCP/IP initialization, it moves to the STATE_MEDIA_MOUNTED state. The application then moves to the STATE_DRAW_NEXT_SLIDE state on Timer or Touch events. The application reads the next image header in the STATE_WAIT_BETWEEN_SLIDE state.

Click image to enlarge.
Click image to enlarge.

Lab Source Files and Solutions:

This .zip file contains the completed solution project for this lab. It also contains the source files needed to perform the labs per the following step-by-step instructions (see the "Procedure" section on this page).

The contents of this .zip file need to be placed in this folder:

<MPLAB Harmony install path>/apps/training/middleware/
(example MPLAB Harmony install path = c:/microchip/harmony/v1_08)

If this is not done, MPLAB X IDE will not be able to find all source files for the lab solution and the solution project will not build successfully.

Extracting the .zip file will create the following folders:

  • web_photoframe contains the lab folder web_photoframe_lab.
  • web_photoframe_lab contains the lab solution (in the firmware folder) and source files (in the dev_files folder).
  • dev_files contains application source files and other support files (if any) required to perform the lab (see "Procedure" section below).
  • firmware contains the completed lab solution project. It can be directly built and downloaded on the hardware to observe expected behavior.


All steps must be completed before you will be ready to build, download, and run the application.

Lab Index

Step 1: Create Project and Configure the PIC32

  • Step 1.1 – Create an MPLAB Harmony Project
  • Step 1.2 – Select the Board Support Package (BSP)
  • Step 1.3 – Verify Configuration Bits are Correct
  • Step 1.4 – Verify and Change Oscillator Settings
  • Step 1.5 – Use the Graphical Pin Manager to Verify I/O Pins

Step 2: Configure TCPIP Stack and Related Modules

  • Step 2.1 - Enable and Configure the TCP/IP Stack
  • Step 2.2 - Configure the Crypto Library
  • Step 2.3 - Configure the Timer Driver
  • Step 2.4 - Enable and Configure the Internal Ethernet MAC Driver

Step 3: Design Display GUI, and Configure the Touch and I2C Driver

  • Step 3.1 - Import Images and Fonts (Assets)
  • Step 3.2 - Create Schemes (Assign Standard Colors and Fonts)
  • Step 3.3 - Create Screens
  • Step 3.4 - Observe the Graphics Display and Touch Driver Configurations
  • Step 3.5 - Enable Touchscreen Control using I2C

Step 4: Configure the USB Library for the Console System Service

  • Step 4.1 - Enable and Configure the Console System Service
  • Step 4.2 - Configure the USB Library

Step 5: Configure the SD card driver, SPI driver and File System

  • Step 5.1 - Configure the SD Card Driver
  • Step 5.2 - Configure the SPI Driver Used by the SD Card Driver
  • Step 5.3 - Verify and Configure the SPI I/O Pins
  • Step 5.4 - Configure the SD Card's File System Service

Step 6: Generate MPLAB Harmony Code
Step 7: Include Application Specific Source Code and Files
Step 8: Review the Application Code
Step 9: Debug Your Application

© 2024 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.