Step 4.1: Rename the Screen Name
1
Open MHGC. To do this, expand the Harmony Framework Configuration > Graphics Library > Harmony Graphics Library selection tree and check the Use Graphics Library? box. Click the Execute button beside Create a Design With MPLAB Harmony Graphics Composer.
2
Find the Graphics Composer Management tab in the bottom-left pane and double-click on Screen1 to change it. Delete Screen1 and then enter "MchpMainScreen".
You are not changing any of the properties of the screen, so keep the screen properties shown in the Graphics Composer Properties tab in the top-right pane.
Step 4.2: Import Images and Fonts (Assets)
- Images:
- The Microchip logo will be applied to the LogoImage primitive object.
- An image of a speaker will be applied to the SpeakerImage primitive object.
- Two images will be applied to the VolButton widget, one for mute off (play) and one for mute on.
- System Font:
- Arial (14) for ASCII numbers 32 to 127. This will be used for multiple schemes in the design.
1
Copy the Icons folder from this folder:
apps/training/middleware/usb_speaker/usb_speaker_lab/dev_files
to this one:
apps/training/middleware/dev/usb_speaker/usb_speaker_lab.
2
In the bottom-left pane, in the Graphics Composer Management tab, click on the Assets sub tab.
Import the following assets:
a
MCHP_LOGO.bmp,
speaker_image.bmp,
AudioMute16_2.bmp, and
AudioPlay16_2.bmp from this folder,
apps/training/middleware/dev/usb_speaker/usb_speaker_lab/Icons.
b
Import System Font Arial 14pt 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.
Step 4.3: Create Schemes (assign standard colors and fonts)
Create schemes to standardize the look and feel (fonts, colors, styles) of the user interface.
- VolSliderScheme
- Applied to VolSlider (see "Add Widget Objects" step below).
- VolButtonScheme
- Applied to VolButton.
1
In the bottom-left pane, in the Graphics Composer Management tab, click on the Schemes sub tab. A default scheme is present.
2
Create the following custom schemes by clicking the button Create.
Step 4.4: Add Primitive Objects (rectangle, image, text)
Design the following primitive objects:
- BgRectangle: Rectangle with a gradient shade at the top of the screen.
- LogoImage: Image of Microchip logo at the top of the screen.
- SpeakerImage: Image of a speaker.
- AppNameText: Text to display the application name.
- SamplingFrequencyText: Text to display sampling frequency supported.
- BitRateText: Text to display the bit rate supported.
1
BgRectangle:
a
In the Graphics Composer Tool Box (top-left pane), under the Primitives group, left-click and drag Rectangle onto the Graphic Composer Screen.
b
In the Graphics Composer Properties tab (top-right pane), observe the properties of this Rectangle.
c
Modify these properties as shown.
d
The screen will now look like this:
2
LogoImage:
a
In the Graphics Composer Tool Box (top-left pane), under the Primitives group, left-click and drag Image onto the Graphic Composer Screen.
b
Modify the properties of the image through the Graphics Composer Properties as follows:
c
The screen will now look like this:
3
AppNameText:
a
In the Graphics Composer Tool Box, under the Primitives group, left-click and drag Text onto the Graphic Composer Screen.
b
Modify the properties of the text through the Graphics Composer Properties as follows:
c
The screen will now look like this:
4
SpeakerImage:
a
In the Graphics Composer Tool Box (top-left pane), under the Primitives group, left-click and drag Image onto the Graphic Composer Screen.
b
Modify the properties of the image through the Graphics Composer Properties as follows:
c
The screen will now look like this:
5
SamplingFrequencyText:
a
In the Graphics Composer Tool Box, under the Primitives group, left-click and drag Text onto the Graphic Composer Screen.
b
Modify the properties of the text through the Graphics Composer Properties as follows:
c
The screen will now look like this:
6
BitRateText:
a
In the Graphics Composer Tool Box, under the Primitives group, left-click and drag Text onto the Graphic Composer Screen.
b
Modify the properties of the text through the Graphics Composer Properties as follows:
c
The screen will now look like this:
Step 4.5: Add Widget Objects (list-box, buttons, slider)
Design the following widgets:
1
VolSlider
a
In the Graphics Composer Tool Box, under the Widgets group, left-click and drag Slider onto the Graphic Composer Screen.
b
Modify the properties of the slider in the Graphics Composer Properties window as follows:
c
Notice that the slider events Incremented and Decremented are checked. Click on the **browse button ** (ellipsis found beside the check boxes) to add a custom action to the slider events.
d
When the "browse button" is clicked, an Event Editor window will open. Click on the Add button to add an action to the slider Incremented event.
e
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 action increments the audio volume based on the position of the volume slider.
f
Similarly, add the following code to the Decremented event of the slider.
The custom action decrements the audio volume based on the position of the volume slider.
g
The screen will now look like this:
2
VolButton:
a
In the Graphics Composer Tool Box, under the Widgets group, left-click and drag Button onto the Graphic Composer Screen.
b
Modify the properties of the button in the Graphics Composer Properties pane as shown in the following image:
c
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, the default state is specified as "Pressed". The Pressed state corresponds to Mute Off. And release state corresponds to Mute On. This links the images with the appropriate Pressed and Released states.
Click on the browse button to add a custom action to the button events.
d
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.
Copy the following code for the Released event.
e
The screen will now look like this:
f
Verify that the Graphics Library is configured as follows by expanding the Harmony Framework Configuration > Graphics Library > Harmony Graphics Library > Use Graphics Library? selection tree.
Step 4.6: Configure the Graphics display and Graphics Touch Driver
Enable the touch control feature of the graphics display on the MEB II board.
1
In MHC's Options tab, expand the Harmony Framework Configuration > Drivers > Graphics Displays > Use Graphics Display? selection tree. Notice the display has been correctly selected for you (MEB II uses a 4.3 inch, WQVGA display by NewHaven).
2
Expand Graphics Displays > Display Settings. You will keep all settings except "Requires Calibration Points?".
The Display Settings have values specific to the display (4.3 inch, WQVGA display by NewHaven). These include horizontal and vertical timing parameters and others. For details, refer to the display datasheet.
3
Expand "Requires Calibration Points?" and check the box beside Touchscreen Resistive Swap. This enables the touch screen.
Step 4.7: Enable Touchscreen Control Using I2C
An instance (Instance 0) of the I2C driver is already configured for the control interface of the audio CODEC. In this step, you will take advantage of this existing dynamic harmony driver, by adding a second I2C driver instance (Instance 1). You will configure this new instance to communicate with the display Touch driver (MTCH6301).
1
Expand the Harmony Framework Configuration > Drivers > Touch > MTCH6301 > Use the MTCH6301 Driver? selection tree.
2
Keep all selections except the I2C driver module index. Change the I2C driver module index to DRV_I2C_INDEX_1. I2C driver instance 1 is used for the touch driver.
3
Verify/Set the I/O pins used by Touch driver using the Graphical Pin Manager.
The touch driver uses PIC32 external interrupts source 1 for touch events. Select MHC's Pin Diagram tab and in the lower pane, select MHC's "Pin Table" tab.
Map the "External Interrupt 1" signal to pin "RPE8" as shown in this image. (For schematic, refer to the MEB II User’s Guide).
4
Add a new client and driver instance for the existing I2C driver.
In a previous step, you created a Dynamic I2C driver and created a client for this driver. You also configured an I2C driver instance (I2C Driver Instance 0) for this client. This client and instance are used by the AK4953 audio CODEC.
In this step, you will add another client and instance (I2C Driver Instance 1) for this driver for the display Touch driver (MTCH6301).
Expand the Harmony Framework Configuration > Drivers > I2C > Use I2C Driver? selection tree.
a
Modify "Number of I2C Driver Clients" and "Number of I2C Driver Instances" to 2.
b
You configured "I2C Driver Instance 0" in a previous step. Just verify "Use Bit Bang I2C Implementation" is still unchecked.
c
Expand I2C Driver Instance 1, and make sure "Use Bit Bang I2C Implementation?" is unchecked. Since you are using the PIC32 I2C peripherals, you do not want to use the bit-banged driver implementation.
d
Retain "I2C_ID_1" as the I2C Module ID.
"I2C_ID_1" refers to the PIC32 I2C1 peripheral (using pins SCL1 & SDA1). These pins are connected to the display touch controller on the MEB II board.
e
Retain default value "DRV_I2C_MODE_MASTER" as Operation Mode. The PIC32 I2C module 1 will be the master and the Touch MTCH6301 interface will be the slave.
f
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.
g
Change value for "Error Interrupt Priority" and "Error Interrupt Sub-priority" as INT_PRIORITY_LEVEL4 and INT_SUBPRIORITY_LEVEL0 respectively.
h
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.
i
Retain the default value of 50 KHz for "I2C CLOCK FREQUENCY".
j
Retain the Slew Rate Control as unchecked. This function enables the I2C module to use high-frequency signaling, allowing it to use the 400 kHz and 1 MHz signaling rates.
k
Retain the default value of SYS_MODULE_POWER_RUN_FULL for "Power State". You will want to run the I2C module in normal power mode.
l
Verify the I/O Pins used by the I2C module using the Graphical Pin Manager. Click on MHC's "Pin Diagram" tab, and in MHC's lower pane, click on the “Pin Table” tab.
The I2C1 has dedicated pins for SCL1 and SDA1 signals. These pins are hardcoded and configured by the I2C driver.
Step 4.8: Enable the Graphics Touch System Service
The Harmony touch display driver is used by the Harmony Touch System service. Expand the Harmony Framework Configuration > System Services > Touch selection tree and check the Use Touch System Service box.
|
Table of Contents
|