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 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 MHGC.
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. 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 the 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 pane (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 pane (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 pane (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 Selected box in the Events category in the Graphics Composer Properties pane. 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 pane (top right) as shown.
g
In the step above, you checked the Released box in the Events category Graphics Composer Properties pane. 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 pane (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 pane (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 pane (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 Released box in the Events category in the Graphics Composer Properties. 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 pane (top right) as shown.
c
In the step above, you checked the Selected box in the Events category in the Graphics Composer Properties. 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 I²C driver module index has already been selected for you (DRV_I2C_INDEX_0).
Step 3.5: Enable Touchscreen Control using I²C
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 the I²C 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 I²C 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.
