Step 5.1: Rename the Screen Name
1
Open MPLAB® Harmony Graphics Composer (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
Change the screen name from Screen1 to "MchpMainScreen". Find the Graphics Composer Management tab in the bottom-left pane and double-click on the Screen1 name to change it.
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 5.2: Import Images and Fonts (Assets)
Import the following images and fonts. These will be used for the display objects created in the "Add Primitive Objects" step below.
- Images:
- The Microchip logo will be applied to the LogoImage primitive object.
- Two images will be applied to the VolButton widget. One for mute off (play) and one for mute on.
- System Font:
- Arial font, 14 pt for ASCII numbers 32 to 127. This will be used for multiple schemes in the design.
- Arial font, 18 pt for ASCII number 94. This will be used for the ScrollUpScheme and applied to the ScrollUpButton widget.
1
Copy the Icons folder from this folder:
apps/training/middleware/voice_recorder/voice_recorder_lab/dev_files
to this one:
apps/training/middleware/dev/voice_recorder/voice_recorder_lab.
2
In the bottom-left pane, in the Graphics Composer Management tab, click on the Assets sub tab.
a
Import the following images:
MCHP_LOGO.bmp,
AudioMute16_2.bmp, and
AudioPlay16_2.bmp
from this folder
apps/training/middleware/dev/voice_recorder/voice_recorder_lab/Icons.
b
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.
c
ImportSystem Font Arial 18 pt for 94 ASCII.
Step 5.3: Create Schemes (Assign Standard Colors and Fonts)
Create schemes to standardize the look and feel (fonts, colors, styles) of the user interface. These will be used for the display widgets created in the "Add Widget Objects" step below.
- GroupScheme
- Applied to the AppModeGroup and MessageTextBox widgets.
- RadioScheme
- Applied to RadioButtonLoopback, RadioButtonRecord, RadioButtonPlayback, and ReRecordButton.
- TrackListScheme
- Applied to TrackListBox, ScrollDownButton, VolSlider, ModeStart, and ModeStop.
- VolumeButtonScheme
- Applied to VolButton.
- ScrollUpScheme
- Applied to ScrollUpButton.
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 following custom schemes by clicking the Create button.
Step 5.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.
- AppNameText: Text to display the application name.
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 below.
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:
Step 5.5: Add Widget Objects (List-box, Buttons, Slider)
Design the following widgets:
- AppModeGroup: Used to group the application modes (Loopback, Record, Playback).
- RadioButtonLoopback: Used to select the Loopback mode.
- RadioButtonRecord: Used to select the Record mode.
- RadioButtonPlayback: Used to select the Playback mode.
- TrackListBox: List Box to populate the audio track list.
- ScrollUpButton: Button to scroll items up in the TrackListBox.
- ScrollDownButton: Button to scroll items down in the TrackListBox.
- VolButton: Button for mute On/Off.
- VolSlider: Slider to control the audio volume level.
- ModeStart: Used for the mode start button.
- ModeStop: Used for the mode stop button.
- ReRecordButton: Used as a re-recording button in Record mode.
- MessageTextBox: Used to represent a text message for the operation being performed.
1
AppModeGroup:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Group Box onto the Graphics Composer Screen.
b
Modify the properties of the group box through the Graphics Composer Properties as follows:
Notice GroupScheme is the scheme applied to this widget.
c
The screen will now look like this.
2
RadioButtonLoopback:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag RadioButton onto the Graphics Composer Screen.
b
Modify the properties of the radio button through the Graphics Composer Properties as follows:
c
The screen will now look like this.
d
Notice that the radio button event Checked is checked. Click on the Browse button to add/edit action to the radio button event.
e
Click on the Add button to add an action to the Clicked radio button event.
f
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code re-enables the Loopback related UI elements and puts the application in Loopback mode.
3
RadioButtonRecord:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag RadioButton onto the Graphics Composer Screen.
b
Modify the properties of the radio button through the Graphics Composer Properties as follows:
c
The screen will now look like this.
d
Notice that the radio button event Checked is checked. Click on the Browse button to add/edit action to the radio button event.
e
Click on the Add button to add an action to the Clicked radio button event.
f
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code re-enables the Record related UI elements and puts the application in Record mode.
4
RadioButtonPlayback:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag RadioButton onto the Graphics Composer Screen.
b
Modify the properties of the radio button through the Graphics Composer Properties as follows:
c
The screen will now look like this.
d
Notice that the radio button event Checked is checked. Click on the Browse button to add/edit action to the radio button event.
e
Click on the Add button to add an action to the Clicked radio button event.
f
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code re-enables the Playback related UI elements and puts the application in Playback mode.
5
TrackListBox:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag List Box onto the Graphics Composer Screen.
b
Modify the properties of the list box through the Graphics Composer Properties as follows:
c
Notice that the list box event Touched is checked. Click on the Browse button to add/edit action to the list box event.
d
Click on the Add button to add an action to the Touched list box event.
e
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code switches to the selected random track so that the selected random track is played.
f
The screen will now look like this.
6
ScrollUpButton:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
c
Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This sets the focus in the list box to one item above (previous item) the current item in focus when a button release event is triggered.
e
The screen will now look like this.
7
ScrollDownButton:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
c
Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This custom code sets the focus in the list box to one item below the current item (next item) when the button release event is triggered.
e
The screen will now look like this.
8
VolSlider:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Slider onto the Graphics Composer Screen.
b
Modify the properties of the button throught the Graphics Composer Properties as follows:
c
Notice that the slider events Incremented and Decremented are checked. Click on the Browse button to add a custom action to the slider events.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This action increments/decrements the audio volume based on the position of the volume slider.
e
The screen will now look like this.
9
VolButton:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
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. You have also specified the default state as Pressed. The Pressed state corresponds to Mute Off. And release state could correspond to Mute On. Therefore, appropriate images are linked with the Pressed/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" and copy the following code into the Custom Action Definition window.
and copy the following code for the Released Event.
e
The screen will now look like this.
10
MessageTextBox:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Static Text onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
c
Since the Visible property of the Static Text is unchecked, the static text will not be visible on the screen.
11
ModeStart:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
c
Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code sets the start action on the mode selected.
e
The screen will now look like this.
12
ModeStop:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button Graphics Composer Properties as follows:
c
Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window.
This code sets the stop action on the mode selected.
e
The screen will now look like this.
13
ReRecordButton:
a
In the Graphics Composer Tool Box (top-left pane), under the Widgets group, left-click and drag Button onto the Graphics Composer Screen.
b
Modify the properties of the button through the Graphics Composer Properties as follows:
c
Notice that the button event Released is checked. Click on the Browse button to add a custom action to the button event.
d
In the Action window, select Type of action as Custom. Rename the action to "CustomAction" and copy the following code into the Custom Action Definition window:
e
Since the Visible property of the button is unchecked, the button will not be visible on the screen.
14
Click on the MPLAB® Harmony Configurator (MHC) Options tab to verify that the Graphics Library has been properly configured as shown in the following image.
Step 5.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 the MHC 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 in WQVGA display by Newhaven Display Intl.).
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 in WQVGA display by Newhaven Display Intl.). 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 5.7: Enable Touchscreen Control Using I2C
An instance (Instance 0) of the I²C 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 I²C 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 I²C driver module index. Change I²C driver module index to "DRV_I2C_INDEX_1". I²C 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 the MHC Pin Diagram tab and in the lower pane, select the MHC 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 I²C driver.
In a previous step, you created a Dynamic I²C driver and created a client for this driver. You also configured an I²C driver instance (I²C Driver Instance 0) for this client. This client and instance is used by the AK4953 audio CODEC.
In this step, you will add another client and instance (I²C Driver Instance 1) for this driver for the display Touch driver (MTCH6301).
Expand the Harmony Framework Configuration > Drivers > I²C > Use I²C Driver? selection tree.
a
Change Number of I²C Driver Clients and Number of I²C Driver Instances to 2.
b
You configured I²C Driver Instance 0 in a previous step. Verify that Use Bit Bang I²C Implementation is still unchecked.
c
Expand I²C Driver Instance 1 and make sure Use Bit Bang I²C Implementation? is unchecked. Since you are using the PIC32 I²C peripherals, you do not want to use the bit banged driver implementation.
d
Retain I2C_ID_1 as 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 Development 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 to INT_PRIORITY_LEVEL4 and INT_SUBPRIORITY_LEVEL0 respectively. A 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 to 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 I²C 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 as Power State. You will want to run the I²C module in Normal Power mode.
l
Verify the I/O Pins used by the I²C module using the Graphical Pin Manager. Click on the MHC Pin Diagram tab and in MHC's lower pane, click on the Pin Table tab.
The I2C1 module has dedicated pins for the SCL1 and SDA1 signals. These pins are hardcoded and configured by the I²C driver.
Step 5.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
|