Lab5: Display Graphics Support to Select and Play Audio File


After completing this lab, you will appreciate the power of the MPLAB® Harmony 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 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 v3.26, MPLAB XC32 Compiler v1.40, MPLAB Harmony v1.08

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 the Archived Downloads tab.)
MPLAB X IDE and XC32 Compiler (See the Downloads Archive tab.)
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 perform SD card Audio Player Lab4, please start this lab using the Lab4 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 Lab5

Step 2: With MHGC under MHC, Design Display GUI

Step 2.1: Rename the Screen Name

Step 2.2: Import Images and Fonts (Assets)

Step 2.3: Create Schemes (assign standard colors and fonts)

Step 2.4: Add Primitive Objects (rectangle, image, text)

Step 2.5: Add Widget Objects (buttons, boxes, slider)

Step 3: With MHC, Configure Touchscreen, and I2C driver

Step 3.1: Enable Touchscreen Control using I2C

Step 3.2: Verify I/O Pins used by I2C module

Step 3.3: Enable Touch System Service

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 event, 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 driver, 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.