Digit Recognition AI/ML Application on SAM E51 IGAT Curiosity Evaluation Kit Using MPLAB® Harmony v3: Step 5
Configure Legato Graphics on GFX composer
Configure the Display Configuration as shown in the accompanying image and click Next.
The display resolution used in the SAM E51 IGAT Curiosity Evaluation Kit is 480X320.
Disable Start with a basic quick start project template as shown.
Click Next.
When prompted, click the Finish button.
You will see the window as shown here.
Add Images, Fonts, Strings, and Global Palette
You can add required Images, Fonts, Strings and Global Palette as assets under the Asset tab. These assets will be useful in the further development of Display Screen Design.
Images
Add the required images under Asset > Image.
Click on Import RGB Image and redirect to the image files under <your unzip folder>/digit_recognition/dev_files/images as described.
Once the image is added to the Image asset, configure the Image Properties first then configure the Raw Image Settings as shown here.
Similarly, import all the required images under the ../dev_files/images folder.
Fonts
Add and configure the required font\fonts under Asset > Fonts as shown in the accompanying image.
Strings
Add and configure the required strings under Asset > Strings as shown in the accompanying image.
- StartDrawing value : Start Drawing
- TouchTitle value : Digit Recognition
Global Palette
You can use the default Global Palette configuration of the GFX Composer as shown in the accompanying image.
Add Schemes
From the Schemes tab on the lower left of the Legato Graphics Composer window.
Click on the green Plus button to add a new scheme.
Once the scheme is added, configure the scheme in the Scheme Editor tab with the properties shown in the accompanying image.
Add one more scheme and configure the scheme in Scheme Editor with the properties shown in the accompanying image.
Base color editor configuration
Foreground Inactive color editor configuration
Add Screen Tree
Select and delete the BackgroundPanel object under Layer 0 by clicking on Delete Selected Objects.
- Add and configure the four Panel widgets on four sides of the display screen as shown here. These four-panel widgets will reduce the screen load time when the screen needs to update in the run time to display the result or output of the application
- Configure the panel widget by using the panel widget parameters shown in the following steps
Step 1
Double-click on Panel in the Toolbox window and drop on the screen area to add the Panel widget to the Layer 0.
Step 2
Configure the Panel widget parameters in the Object Editor.
PanelWidget0 Parameters
PanelWidget1 Parameters
PanelWidget2 Parameters
PanelWidget3 Parameters
Add and configure the Draw Surface widget on the display screen design as shown here. This will be useful to read the drawn points on this specific area (configured area). This surface widget can notify when the user has drawn on this defined screen area if this option is enabled.
Configure the surface widget by using surface widget parameters and with the following instructions.
Step 1
Double-click on Draw Surface in the Toolbox window and drop on the screen area to add the Draw Surface widget to the Layer 0.
Caption
Step 2
Configure the Draw Surface widget parameters in the Object Editor.
DrawSurfaceWidget0 Parameters
Add and configure the Image widget on the display screen design as shown here.
Configure the image widget by using the image widget parameters shown in the following steps.
Step 1
Double-click on Image in the Toolbox window and drop on the screen area to add the Image widget to the Layer 0.
Caption
Step 2
Configure the Image widget parameters in the Object Editor.
GestureImageWiget Parameters
This image area is to display the result of the Gesture Image drawn by the user on the display screen.
ImageWidget0 Parameters
This image is to display the Microchip Logo on the display screen.
ImageWidget1 Parameters
This image is to display the Application Logo on the display screen.
Add and configure the Label widget on the display screen design as shown here.
Configure the Label widget by using the Label widget parameters shown in the following steps
Step 1
Double-click on Label in the Toolbox window and drop on the screen area to add the Label widget to the Layer 0.
Step 2
Configure the Label widget parameters in the Object Editor.
DrawInstructionLabel Parameters
This label is to display the Draw Instruction to the user on the display screen.
LabelWidget0 Parameters
This label is to display the Application Name on the display screen.
You can configure the Legato Graphics Settings like Assets, Code Generator, Display, Editor, Library, Memory,
Renderer and Widget under Project > Project Settings.
Use the default Legato Graphic Project settings created by the Legato Graphics composer except for the Renderer settings.
Click on Renderer and configure the Scratch Buffer Size then click on the OK button.
You can configure Legato Graphics project Memory Configuration under
Project > Memory Locations.
Click on the green Plus button and configure the QSPI_XIP configuration as shown here.
Update the Internal SRAM capacity as shown in the accompanying image.
After completing the previous steps, save the design by clicking on the Save Design 
button.
If it prompts for a path, choose the required path and ZIP file name. In general, use the default project path and ZIP file name suggested by the Legato Graphics Composer.
Once the design is saved, generate the code by clicking on the Generate Code 
button.
With this, you have completed the Display Graphics design on Legato Graphics Composer.
