Step 3.1: Import Images and Fonts (Assets)
1
Copy the screen's GUI images and fonts from the solution folder to the /dev folder.
Copy the Icons and fonts folders from this folder:
apps/training/middleware/web_photoframe/web_photoframe_lab/dev_files
to this one:
apps/training/middleware/dev/web_photoframe/web_photoframe_lab.
2
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".
3
In the bottom left pane, in the Graphics Composer Management tab, click on the Assets sub tab.
Step 3.2: Create Schemes (Assign Standard Colors and Fonts)
Create schemes to standardize the look and feel (fonts, colors, styles) of the user interface.
- TextLabelScheme
- Applied to multiple Static Text widgets
- SlidePictureScheme
- Applied to the SlidePicture widget
1
In the bottom left pane, in the Graphics Composer Management tab, click on the Schemes sub tab. A default scheme is present.
Step 3.3: Create Screens
Create the following screens:
- WaitForMediaConnect
- The Initial Screen will be WaitForMediaConnect. Unless the SDCARD is inserted into the board, this message persists on the screen.
- ReadingMedia
- Once the SDCARD is inserted, the Screen state changes to ReadingMedia. The screen flashes for a short period and might not be visible.
- MainMenu
- Once the Images are read, the MainMenu screen is displayed on Screen.
- SlideShowInstructions
- If the screen is pressed, the Screen changes to the SlideShowInstructions screen
- SlideScreen
- If the screen is touched again, the screen changes to SlideScreen screen.
1
WaitForMediaConnect Screen
a
In the bottom left pane, in the Graphics Composer Management tab, click on the Screens sub tab. A default screen named Screen1 has been created. Double-click on the name "Screen1" to rename it "WaitForMediaConnect".
c
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Static Text onto the "Graphics Composer Screen".
Modify the properties of the Static text object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
2
ReadingMedia Screen
a
In the bottom left pane, in the Graphics Composer Management tab, click on the New icon to create a new screen. Name this screen ReadingMedia.
c
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Static Text onto the "Graphics Composer Screen".
Modify the properties of the Static text object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
3
SlideShowInstructions Screen
a
In the bottom left pane, in the Graphics Composer Management tab, click on the New icon to create a new screen. Name this screen SlideShowInstructions.
c
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Static Text onto the "Graphics Composer Screen".
Modify the properties of the Static text object through the Graphics Composer Properties pain (top right) as shown.
Click on the browse button beside the Text entry field to open the "Enter Text" pop-up window. You can copy the following block of text and paste it into this window.
4
MainMenu Screen
a
In the bottom left pane, in the Graphics Composer Management tab, click on the New icon to create a new screen. Name this screen MainMenu.
c
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Static Text onto the "Graphics Composer Screen".
Modify the properties of the Static text object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
d
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Picture onto the "Graphics Composer Screen".
Modify the properties of the Picture object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
e
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Picture onto the "Graphics Composer Screen".
Modify the properties of the Picture object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
f
5
SlideScreen Screen
a
In the bottom left pane, in the Graphics Composer Management tab, click on the New icon to create a new screen. Name this screen SlideScreen.
c
In the step above, you checked the box beside "Selected" in the Graphics Composer Properties "Events" category. Click on the browse icon (beside the checked box) to add a specific action to this event.

Step 3.4: Observe the Graphics Display and Touch Driver Configurations
1
In MHC's "Options" tab, expand the Harmony Framework Configuration > Drivers > Graphics Displays > Use Graphics Display? selection tree. Notice MHC's Board Support Package has already selected this for you (MEB II uses a 4.3 inch WQVGA display by Newhaven Display Intl.).
2
In MHC's "Options" tab, expand the Harmony Framework Configuration > Drivers > Graphics Controllers > LCC selection tree. Notice MHC's Board Support Package has already checked the "Use LCC Driver? box for you.
3
In MHC's "Options" tab, expand the Harmony Framework Configuration > Drivers > Touch > MTHC6301 selection tree. Notice MHC's Board Support Package has already selected the correct touch driver by checking the "Use MTCH6301 Driver?" box for you. Also note the correct I2C driver module index has already been selected for you (DRV_I2C_INDEX_0).
Step 3.5: Enable Touchscreen Control using I2C
1
Configure the External Interrupt pin for the Touch driver using the Graphical Pin Manager.
The touch driver uses one of the PIC32's external interrupt pins to notify it of touch events. You need to configure this pin as an external interrupt.
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 #23 (RE8) as shown in this image. (For schematic, refer to the MEB II User’s Guide).
3
In MHC's "Options" tab, expand the Harmony Framework Configuration > Drivers > I2C selection tree. Notice MHC's Board Support Package has already checked the "Use I2C Driver?" box for you.
Expand the "I2C Driver Instance 0" selection and UNCHECK "Use Bit Bang I2C Implementation?". You will use the PIC32 I2C1 peripheral (not software) to drive these pins.