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


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.


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.

Note: The state machine for APP_SDCARD_AUDIO_Tasks remains the same as explained in audio_player_lab4.

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

Lab Source Files and Solutions:

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

This project has been verified to work with the following versions of software tools:
MPLAB X IDE v5.25, MPLAB XC32 Compiler v2.30, MPLAB Harmony MHC v3.3.2, DEV_PACKS v3.5.0, CORE v3.5.0, CSP v3.5.0, BSP v3.5.0, AUDIO v3.4.0, USB v3.3.0, GFX v3.4.0, TOUCH v3.4.0

As the tools are regularly updated, there may be occasional issues while using newer versions. If that is the case, we recommend using the same version as specified in the project.

The archived versions of our tools can be found below:
MPLAB Harmony
MPLAB X IDE and XC32 Compiler
Note: that multiple versions of all these tools can co-exist on the same computer.


This lab builds off the work you performed in the previous lab. If you did not complete 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 3.1: Open MHGC and Setup the Initial Display Screen

Step 3.2: Import Graphic Images

Step 3.3: Import Fonts

Step 3.4: Create Color Schemes

Step 3.5: Add Text Strings

Step 3.6: Create Static Logo and Title Fields

Step 3.7: Create Radio Button Group Box

Step 3.8: Create Play List Box

Step 3.9: Create Volume Control Items

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


If everything worked well, 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 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.


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.


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 touch screen 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!

© 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.