Getting Started with MPLAB® Harmony v3 to Create a Web-Enabled Digital Photo Frame

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

Contents:

Introduction

MPLAB® Harmony is a flexible firmware development platform for PIC32 microcontrollers. This integrated software framework provides driver libraries and APIs that make it easier to use PIC32 peripherals (timers, GPIO, UART, I2C, SPI, etc.). It also includes middleware libraries for USB (host and device), TCP/IP (Ethernet and Wi-Fi®), graphics, Bluetooth®, and others.

This tutorial is intended to show users how to create a web-enabled digital photo frame from scratch using MPLAB Harmony 3 and MPLAB Code Configurator (MCC) with Harmony 3. The project you create will run on the  Curiosity PIC32MZ EF 2.0 Development Board (DM320209). This application will perform the following tasks:

Hardware Setup

Figure: Hardware Setup

MPLAB Code Configurator version 5.5.0 with MPLAB Harmony 3 will be used to configure the PIC32MZ, the File Systems, the TCPIP Stack and the HTTP and graphics applications.

MPLAB X IDE v6.05 and MPLAB XC32 compiler v4.21 have been used to build the application.

Two ways to use this tutorial:

  1. Creating the project from scratch: Use the provided source files and step-by-step instructions below.
  2. Using the solution project as an example: Build the solution project and download it to the PIC32MZ EF Curiosity 2.0 board and observe the expected behavior.

Application Description

There are three applications that run in parallel on the PIC32MZ device using FreeRTOS. The number of FreeRTOS tasks are greater than this, because the TCP/IP stack, the graphics, the touch, and other components that are helping the application to run have their own tasks.

Main Application

The main application is focused on the media files from the SD card. When the SD card is detected, it looks for the files and folders.  Then, it makes a list of files that are supported by this example.  For limitation reasons, the example supports only JPEG files with a max width of 480 pixels. Inside the app.h file, there are commented defines that enable support for PNG, BMP, and GIF. However, due to limitations of the Legato Graphics library, they will not function properly (BMP) or at all (GIF, PNG) on the Graphics Display. Serving them to the web browser should be just fine.
Secondary activities would be to blink the LEDs on the Curiosity board such that it indicates the status of the SD card.
• Red LED lit: the SD card is not mounted.
• Green LED lit: the SD card is mounted.
• Red and green LED lit: the SD card is mounted, but there is no playable media on it.
• Green LED lit and orange LED blinking: the Graphics and the TCP/IP applications can run - media is available.

HTTP Application

The web server resides in the MCU Flash, and it is defined in the mpfs_net.c file provided with the application example. This file can also be generated using the MPFS Generator (mpfs_net.jar) available in our net component - C:\Microchip\Harmony\v3\net\utilities\mpfs_generator. How to use it is explained into the Generation of the MPFS for the Web Server chapter.

It has been chosen to have the web server files in the MCU Flash memory because even if the SD card is present in the SD card slot or not,, the web browser on the PC should be always able to browse the web pages, and these can provide status of the SD card.

Serving files to the HTTP Browser

Because there are two file systems, one for the SD card, and one for the Memory, the mount points will be such that the files on the SD card are not directly accessible through URLs to the Web Server, these need to be fed upon request by the web server.
The pictures are sent to the web server by using so called Dynamic Variable Processing. The variable used is placed in the get_picture.cgi file. It is called “picture_content”, and it is served by the function TCPIP_HTTP_Print_picture_content inside the app_http.c source file.

Displaying the pictures:

The web browser makes a request to get the next picture file name, using AJAX and dynamic variable in the get_picture_file_name.xml file. This file contains the dynamic variable called “get_picture_file_name”. Through GET, it is sent the direction to look at the file list: next or previous.
After this, the get_picture.cgi is loaded with two GET arguments: file name and a random seed. The application will search the file list to see if the file really exists on the SD card and it is allowed to be served. Then it opens it and sends it in chunks of about 1500 bytes to the web browser. To keep track of the file content that has been sent, the seed is used to identify the http request, and one byte counter.

Graphics Application

The APP_GFX contains the code and the state machine used to display the two screens available: home screen and the slideshow screen.

The Stream library is used to stream the files from the SD card, and they call the application defined functions: leApplication_MediaOpenRequest, leApplication_MediaReadRequest, and leApplication_MediaCloseRequest. These three functions are there to decide which file to load, to read the file and to close it. This can be called repeatedly based on how much scratch memory is available to stream, so the user cannot rely on it to load the next picture. So, the three functions are called repeatedly for each single media file that is streamed.

The loading of the next media on the graphics display is managed by the APP_GFX_Tasks state machine. It loads one media file and then disposes it to the streaming engine. After this, it will wait for the renderer to be idle, then wait for a delay between the pictures.  Last, it will provide the next picture to the streaming engine.

When the SD card is removed then the graphics application should switch to the home screen.

Back to Top

Lab Source Files and Solutions

This file contains the completed solution project for the lab. It also includes the source files needed to perform the lab following step-by-step instructions below.

1702059032778-409.png pic32mzef_web_photo_frame.zip

​Extracting the ZIP file creates the following folders:

  • pic32mzef_web_photo_frame contains the lab solution (in the firmware folder) and source files (in the dev_files folder).
    • firmware contains the completed lab solution project. It can be directly built and downloaded on the hardware to observe expected behavior.
    • dev_files contains application source files and other support files required to perform the lab.

Back to Top

Procedure

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

Step 1: Creating the Project and Downloading MCC Harmony Content

Step 2: Adding and Connecting the Required Components

Step 3: Configuring the Components

Step 4: Generating the MCC Harmony Code

Step 5: Programming the Board

Step 6: Adding Application Code for Webserver

Step 7: Adding and Configuring Graphics Components

Step 8: Configuring Project Settings for Streaming Media

Step 9: Adding Application Code for Web Photo Frame

Step 10: Using the Solution Project as an Example

Step 11: Running the Application

Back to top