Step 3: Build Display Screen Using MPLAB® Harmony Graphics Composer (MHGC)
Open MHGC and Set Up the Initial Display Screen
Open the MPLAB® Harmony Graphics Composer (MHGC) utility.
To do this, expand the MHC > Tools selection and click on Graphics Composer.
A Welcome Dialog screen will appear. Click Use design loaded from current MHC configuration or just close the screen to start.
The MPLAB Harmony Graphics Composer screen will be displayed as shown in the accompanying image.
Change the screen name.
In the Screens window, double-click on the Name field and replace the name with "MchpMainScreen".
Import Graphic Images
apps/training/solutions/audio_player/audio_player_lab5/dev_files
to this one:
apps/training/solutions/dev/audio_player/audio_player_lab5.
In MHGC, open the Image Assets screen by clicking the Asset tab and selecting Images.
Select each image individually by clicking on the file name from the Icons folder. Add all three images to assets.
Keep the default settings for each image except for MCHP_LOGO.bmp. For this image, we want to mask the background color that is not part of the logo design. Check the Color Masking box and set the RGB values of the Mask Color to 29,46,60. This happens to be the RGB values of the background in the image.
Import Fonts
In this step, we will add two system fonts, Arial14pt and Arial18pt.
In MHGC, open the Font Assets screen by clicking the Asset tab and selecting Fonts.
Select the icon to Add Installed Font. This will bring up a screen that allows you to select a font installed in your system. Select the Arial font and press Ok.
This will bring up a screen that allows you to configure different properties of the font. Select the Style tab and choose a size of 14.
Now, select the Glyphs tab and click the add icon to add a glyph range. For Arial14pt, we want the Basic Latin range of characters, number 32 to 127. Then press the Ok button.
Finally, we want to rename this font from the default name to Arial14pt. Click on the font and select the Rename Selected Font icon. Then input Arial14pt and press Ok.
Similarly, repeat the above steps to add the Arial18pt font. Except for the range values, we only want to add one character, a caret. This will be used by the ScrollUpButton.
Select size of 18.
Select a starting and ending character of 94. This is the caret character (^).
Rename the font to Arial18pt.
Create Color Schemes
Create color schemes to standardize the look and feel of the user interface. These will be used for the display widgets created in the following steps on this page. You can add color schemes in the Schemes window by clicking on the Add icon.
Add the color schemes listed below. Change the name field by typing over the existing name field. The color can be changed by clicking the … icon to the right. This will bring up a color selection screen that will allow you to enter the RGB values.
Add Text Strings
In MHGC, open the String Assets screen by clicking the Asset tab and selecting Strings.
Select the icon to Add New String. This will bring up the Add String Dialog box. Enter the name of the string. This is a name used to reference the string and not the string value itself.
Now, we can enter the actual string text. Click in the value field to enter the text. Then click in the font field to get a dropdown menu of available fonts.
Do this for each of the strings listed in the table. Make sure that the ScrollUp string has the Arial18pt font.
| Name | Value | Font |
|---|---|---|
| GroupBoxTitle | Mode | Arial14pt |
| NoFilesMessage | No Audio Files Found. Please Select Reader Mode to Load. | Arial14pt |
| RadioButtonPlayer | Player | Arial14pt |
| RadioButtonReader | Reader | Arial14pt |
| ScrollDown | v | Arial14pt |
| ScrollUp | ^ | Arial18pt |
| TitleString | Harmony SD Card Audio Player / Reader | Arial14pt |
Once complete, you should have all of the strings listed in the accompanying image.
Create Static Logo and Title Fields
In MHGC, click on Layer0 in the Tree View window.
This should bring up the properties for Layer0 in the Properties Editor window. Change the color scheme to BackgroundScheme and check the Transparency Enabled box.
Add a gradient box to highlight the logo image. Click and drag the Gradient widget from the Widget Tool Box window onto the screen image. Then, use the Properties Editor window to specify the detail placement and properties of the widget.
Add an image box to display the logo image. Click and drag the Image widget onto the screen. Change the properties as specified in the accompanying image. In the Image field, select the graphics image imported from the previous step.
Add a text box to display the application title. Click and drag a Text Field widget onto the display screen. Change the properties as specified in the accompanying image.
Add a text box to provide the ability to display an error message. Click and drag a Text Field widget onto the display screen. Change the properties as specified in the accompanying image.
Create Radio Button Group Box
Add a group box for the radio buttons. Click and drag a Group Box widget onto the display screen. Change the properties as specified in the accompanying image.
Add a Radio button for Player mode. Click and drag a Radio Button widget onto the display screen. Change the properties as specified in the accompanying image.
For this widget, we need to add action code that will be executed when the button is selected. Click on the … icon next to the Selected field. This will bring up a screen where you can add the action code text shown in the accompanying image.
laWidget_SetEnabled(&(ScrollUpButton->widget), true);
laWidget_SetEnabled(&(ScrollDownButton->widget), true);
laWidget_SetEnabled(&(MessageTextBox->editWidget.widget), true);
laWidget_SetEnabled(&(VolButton->widget), true);
laWidget_SetEnabled(&(VolSlider->widget), true);
APP_DISPLAY_ModeSet(0);
Add another Radio button for Reader mode. Click and drag a Radio Button widget onto the display screen. Change the properties as specified in the accompanying image.
Similar to the previous radio button, add the action code shown in the accompanying image to the Selected field.
laWidget_SetEnabled(&(ScrollUpButton->widget), false);
laWidget_SetEnabled(&(ScrollDownButton->widget), false);
laWidget_SetEnabled(&(MessageTextBox->editWidget.widget), false);
laWidget_SetEnabled(&(VolButton->widget), false);
laWidget_SetEnabled(&(VolSlider->widget), false);
APP_DISPLAY_ModeSet(1);
Create Play List Box
Add a list box to display the list of files from the SD card. Click and drag a List widget onto the display screen. Change the properties as specified in the accompanying image.
Click on the … icon next to the Selection Changed field. This will allow you to add action code when the list box selection changes.
{
APP_SDCARD_AUDIO_RandomTrackSet(APP_DISPLAY_XlatListIdx(idx));
}
Add a ScrollUp button for the list box. Click and drag a Button widget onto the display screen. Change the properties as specified in the accompanying image.
Add action code for the button Released action.
Add a ScrollDown button for the list box. Click and drag a Button widget onto the display screen. Change the properties as specified in the accompanying image.
Add action code for the button Released action.
Create Volume Control Items
Add a rectangle border to go around the volume slider. Click and drag a Rectangle widget onto the display screen. Change the properties as specified in the accompanying image.
Add the volume slider to change the output volume from minimum to maximum. Click and drag a Slider widget onto the display screen. Change the properties as specified in the accompanying image.
Add action code to control input from the volume slider as shown in the accompanying image.
Add volume button that can mute and unmute the sound. Click and drag a Button widget onto the display screen. Change the properties as specified in the accompanying image.
Add action code to unmute the sound (button pressed) as shown in the accompanying image.
Add action code to mute the sound (button released) as shown in the accompanying image.
The final screen image should appear as shown in the accompanying image.
