Import the following images:
MCHP_LOGO.bmp
ThumbdriveImage.bmp
AudioMute16_2.bmp
AudioPlay16_2.bmp from this folder
apps/training/middleware/dev/thumb_drive_player/thumb_drive_player_lab/Icons.

Import System Font Arial 14 pt from 32 ASCII to 127 ASCII.

Click on Edit Import Ranges and select the required character range. This is an important feature that enables you to import only the characters you need, thereby limiting the amount of memory needed to store the font.

• Start Index indicates the starting ASCII value of the character.
• End Index indicates the last ASCII value of the character.

Alternatively, the range can be provided by Start Character and End Character.

Import System Font Arial 18 pt for 94 ASCII.

In the Graphics Composer Tool Box (top left pane), under the Primitives group, left-click and drag Rectangle onto the Graphic Composer Screen tab.

In the Graphics Composer Properties tab (top right pane), observe the properties of this Rectangle.

Modify these properties as shown.

The screen will now look like this.

In the Graphics Composer Tool Box (top left pane), under the Primitives group, left-click and drag Image onto the Graphic Composer Screen tab.

Modify the properties of the image through the Graphics Composer Properties tab as follows:

The screen will now look like this:

In the Graphics Composer Tool Box, under the Primitives group, left-click and drag Text onto the Graphic Composer Screen tab.

Modify the properties of the text through the Graphics Composer Properties tab as follows:

The screen will now look like this:

In the Graphics Composer Tool Box (top left pane), under the Primitives group, left-click and drag Image onto the Graphic Composer Screen tab.

Modify the properties of the image through the Graphics Composer Properties tab as follows:

The screen will now look like this.

Left click and drag List Box to the Graphic Composer Screen tab.

Modify the properties of the list box Graphics Composer Properties as shown.

Notice that the list box event Touched is checked. Click on the Browse button to add/edit action to the list box event.

It will open an Event Editor window. Click on the Add button to add an action to the Touched list box event.

In the Action window, Select Type of action as Custom. Rename the action to CustomAction. Put the below custom code under Custom Action Definition.

The custom code switches to the selected random track so that the selected random track is played.

The screen will now look like this.

Left click and drag Button to the Graphic Composer Screen tab.

Modify the properties of the button Graphics Composer Properties as shown.

Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.

In the Action window, select the type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.

The screen will now look like this:

In the Graphics Composer Tool Box, left-click and drag Button onto the Graphic Composer Screen tab.

Modify the properties of the button through the Graphics Composer Properties tab as follows:

Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.

In the Action window, select Type of action as Custom. Rename the action to CustomAction. Copy the following code into the Custom Action Definition window.

The custom sets the focus in the list box to one item below (next item) the current item in focus when the button release event is triggered.

The screen will now look like this.

In the Graphics Composer Tool Box, left-click and drag Slider onto the Graphic Composer Screen tab.

Modify the properties of the slider through the Graphics Composer Properties tab as follows:

Notice that the slider events Incremented and Decremented are checked. Click on the Browse button to add a custom action to the slider events.

An Event Editor window will open. Click on the Add button to add an action to the slider Incremented event.

In the Action window, Select Type of action as Custom. Rename the action to CustomAction. Copy the following code into the Custom Action Definition window for both events.

This code increments/decrements the audio volume based on the position of the volume slider.

The screen will now look like this.

In the Graphics Composer Tool Box, left-click and drag Button onto the Graphic Composer Screen tab.

Modify the properties of the button through the Graphics Composer Properties tab as follows:

Notice that the button events Pressed and Released are checked. Also notice that the button has enabled the Toggle option. This option allows the button to be used as an On/Off button. Also, notice the default state is "Pressed". The Pressed state corresponds to Mute Off, and the Released state corresponds to Mute On.
Click the browse button to add a custom action to the button events.

In the Action window, Select Type of action as Custom. Rename the action to CustomAction. Copy the following code into the Custom Action Definition window for the Pressed event.

[[include :xsi:image:ras |file=image_70.png |max-width=500px]]
and copy the following code for the Released event.

The screen will now look like this.

In the Graphics Composer Tool Box, left-click and drag Static Text onto the Graphic Composer Screen tab.

Modify the properties of the static text through the Graphics Composer Properties tab as follows:

Since the Visible property of the Static Text is unchecked, the static text will not be visible on the screen. Check the Visible property to verify the text, and then un-check it again.

Click on MPLAB Harmony Configurators (MHC's) Options tab to verify the Graphics Library has been properly configured as shown in the following image.

Modify Number of I2C Driver Clients and Number of I2C Driver Instances to 2.

You configured I2C Driver Instance 0 in audio_player_lab1. Just verify Use Bit Bang I2C Implementation is still unchecked.

Expand I2C Driver Instance 1, and make sure Use Bit Bang I2C Implementation? is unchecked. Since you are using the PIC32 I²C peripherals, you do not want to use the bit banged driver implementation.

Retain I2C_ID_1 as the I2C Module ID.

Retain default value DRV_I2C_MODE_MASTER as Operation Mode. The PIC32 I²C module 1 will be the Master, and the Touch MTCH6301 interface will be the Slave.

Change value for Master Interrupt Priority and Master Interrupt Sub-priority as INT_PRIORITY_LEVEL4 and INT_SUBPRIORITY_LEVEL0 respectively. Lower priority for touch events is OK as this will not be occurring very frequently.

Change value for Error Interrupt Priority and Error Interrupt Sub-priority as INT_PRIORITY_LEVEL4 and INT_SUBPRIORITY_LEVEL0 respectively.

The Baud Rate generator clock is configured for 100 MHz. This is derived from the Peripheral bus 2 clock frequency generated from the 198 MHz system clock.

Retain the default value of 50 KHz for I2C CLOCK FREQUENCY.

Retain the Slew Rate Control as unchecked. This function enables the I²C module to use high-frequency signaling, allowing it to use the 400 kHz and 1 MHz signaling rates.

Retain the default value of SYS_MODULE_POWER_RUN_FULL for Power State. You will want to run the I²C module in Normal Power mode.

Verify the I/O Pins used by the I²C module. Click on MHC's Pin Diagram tab, and in MHC's lower pane, click on the Pin table tab.

The I²C1 has dedicated pins for SCL1 and SDA1 signals. These pins are hardcoded and configured by the I²C driver.