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

Last modified by Microchip on 2024/02/06 12:24

Warning: This tutorial uses the old Harmony configuration tool (MPLAB® Harmony Configurator (MHC)). New Harmony projects should use the MPLAB Code Configurator (MCC) instead.

 

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.

App_Tasks state machine

App_Tasks()

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

Display tasks

PP_DISPLAY_Tasks()

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.

Note: 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, and USB v3.3.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:

Note that multiple versions of all these tools can co-exist on the same computer.

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

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