Lab 5: Display Graphics Support to Select and Play Audio File

Purpose

After completing this lab, you will appreciate the power of the MPLAB^® Harmony 3 Graphics Composer (MHGC), by discovering the ease of adding display graphics functionality to the end application. You will also learn how to integrate the new functionality into the existing MPLAB Harmony project.

Overview

In this lab, you will add to the previous MPLAB Harmony project audio_player_lab4, a graphics display UI on the PIC32 Multimedia Expansion Board (MEB) II. The audio_player_lab5 application displays audio tracks from the SD card in a list box. You can navigate the list to select and play a track. It also provides a volume increase/decrease scroll bar and a mute on/off button. This lab will demonstrate the configuration and integration of additional modules to audio_player_lab4 using the MPLAB Harmony 3 Configurator (MHC), thereby extending its functionality.

The APP_DISPLAY_Tasks() does not implement an internal state machine. It implements a set of functions based on events in the audio application.

Back to Top

Lab Source Files and Solutions

If you haven't already, download the lab source files and solutions for the SD card audio player labs.

Procedure

This lab builds off the work you performed in the previous lab. If you did not complete the SD card Audio Player Lab 4, please start this lab using the Lab 4 solution project. Open that project (found under the lab's firmware folder) and verify it works as expected before continuing with this lab.

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

Lab Index

• Step 1 – Copy Source Files and Rename Project for Lab 5
• Step 2 – Add Graphics and Touchscreen Components in MHC
• Step 3 – Build Display Screen Using MPLAB Harmony Graphics Composer (MHGC)
• Step 4 – Generate Harmony Code
• Step 5 – Include Application-specific Source Files, Add Required Code, and Build the Project
• Step 6 – Review the Application Code
• Step 7 – Debug Your Application

Results

You should see a graphical user interface on the MEB II display, populated with a list of tracks read from the SD card along with volume and mute control. The user interface should respond to touch events and you should be able to select random tracks for playing, increase or decrease the volume level, and mute the audio output. You should be able to put the application either into audio player mode or SD card reader mode by selecting the appropriate radio button on the UI. You might not get the intended results if the Graphics Library was not configured correctly, an invalid Graphics Display was selected, or if the Touch interface was not configured correctly.

Analysis

In this lab, you added graphics display support. You used the MHGC, embedded within MHC, to design and develop the graphical user interface. You added a display driver and touch driver from the list of driver implementations provided by MHC. You added custom actions to handle various UI events like touch, pressed, released, etc. At the application layer, you added a new task (state machine) to handle graphics-related activities like populating the display with the list of tracks read from the SD card, handling track change events, volume increase/decrease, and mute events.

Conclusions

With this lab, you add graphics support to your application and extend it a step further. The lab demonstrates the use of the MHGC to design and develop UI screens. It shows you how to add and customize different properties of widgets, create schemes, add images and font libraries, and how to handle events originating from the widgets. The lab shows how easily you can add complex graphics, display drivers, and touchscreen drivers to your project using MHC. Going forward, you can experiment with MHGC and try to create a UI of your choice. You may want to add multiple screens!

Back to Top