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.
a
Import the following images:
microchipLogo_small.jpg
NewHarmonyLogo_Small.bmp
layers_image.bmp
layers_image_outline.bmp
from this folder
apps/training/middleware/dev/web_photoframe/web_photoframe_lab/Icons.
b
Import "Font File" VeraMono.ttf from this folder:
apps/training/middleware/dev/web_photoframe/web_photoframe_lab/fonts
Change the Font Size to 16. And check the Bold option in Style, as shown below
The Assets sub-tab in the Graphics Composer Management tab should look like this when you are done:
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.
2
Create following custom schemes by clicking the Create button.
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".
b
Change the Background Color of the screen from black to white. In the top right pane, in the Graphics Composer Properties tab, expand the Background Color selection, and change the color as shown.
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.
b
Change the Background Color of the screen from black to white. In the top right pane, in the Graphics Composer Properties tab, expand the Background Color selection, and change the color as shown.
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.
b
Change the Background Color of the screen from black to white. In the top right pane, in the Graphics Composer Properties tab, expand the Background Color selection, and change the color as shown.
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.
d
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.
e
- Click the Add button in the Action window,.
- Select the Type of action as Custom.
- Copy the following code and paste it into the Custom Action Definition window as shown.
- Close the Event Editor window when you are done.
f
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Button ** onto the "Graphics Composer Screen".
Modify the properties of the **Button object through the Graphics Composer Properties pain (top right) as shown.
g
In the step above, you checked the box beside "Released" in the Graphics Composer Properties "Events" category. Click on the browse icon (beside the checked box) to add a specific action to this event.
h
- Click the Add button in the Action window,.
- Select the Type of action as Custom.
- Copy the following code and paste it into the Custom Action Definition window as shown.
- Close the Event Editor window when you are done.
The simulated screen should look like this:
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.
b
Change the Background Color of the screen from black to white. In the top right pane, in the Graphics Composer Properties tab, expand the Background Color selection, and change the color as shown.
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
In the "Graphics Composer Tool Box" (top left pane), under the "Widgets" group, left-click and drag Button onto the "Graphics Composer Screen".
Modify the properties of the Button object through the Graphics Composer Properties pain (top right) as shown.
The simulated screen should look like this:
g
In the step above, you checked the box beside "Released" in the Graphics Composer Properties "Events" category. Click on the browse icon (beside the checked box) to add a specific action to this event.
h
- Click the Add button in the Action window,.
- Retain the Type of action as Template.
- Configure the action as shown.
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.
b
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.
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.
d
- Click the Add button in the Action window,.
- Select the Type of action as Custom.
- Copy the following line of code and paste it into the Custom Action Definition window as shown.
- Close the Event Editor window when you are done.
The simulated screen should look like this:
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).
2
Verify the I/O Pins used by I2C module using the Graphical Pin Manager.The I2C1 peripheral has dedicated pins for SCL1 and SDA1 signals. These pins are hardcoded and configured by the I2C driver.
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.
