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 user interface (UI) on the PIC32 Multimedia Expansion Board 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.
The APP_DISPLAY_Tasks() does not implment 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 downloaded all source files for the SD card Audio Player labs:
Download the lab source files and solutions >
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 "Archived Downloads" tab)
MPLAB X IDE and XC32 Compiler (see "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.
- Step 1 – Copy source files and rename project for Lab5.
- Step 2 – With MHGC under MHC, Design Display GUI.
- Step 3 – With MHC, Configure Touchscreen and I2C driver.
- Step 4 – Generate Harmony code and build project.
- Step 5 – Include application specific source files and add required code.
- Step 6 – Review the application code.
- Step 7 – Debug your application.
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 MPLAB Harmony Graphics Composer (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 MPLAB Harmony Graphics Composer (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!
Table of Contents