Digit Recognition AI/ML Application on SAM E51 IGAT Curiosity Evaluation Kit Using MPLAB® Harmony v3: Step 5

Step 5: Configure Legato Graphics on GFX composer

1

To launch the Legato Graphics Composer window from the Project Graph tab, select Plugins > Legato Graphics Composer.

open_legato_graphics_composer.png

2

When it prompts to create a new project or load an existing project, choose Create a new project using the new project wizard on the Legato Graphics Composer window.

welcome_to_legato_graphics_window.png

3

Configure the Display Configuration as shown in the below picture and click Next.

display_configuration.png

The display resolution used in the SAM E51 IGAT Curiosity Evaluation Kit is 480X320.

display_resolution.png

4

Configure the Color Mode, select the RGB_565 as Nomenclature as shown in the below picture and click Next.

color_mode.png

5

Select the Memory Profile as M4 as the SAM E51 is a Cortex M4 microcontroller device and click Next.

memory_profile.png

6

Disable Start with a basic quick start project template as shown in the below picture and click Next.

project_template_enable.png

When prompted, click the Finish button.

gfx_finish_btn.png

You will see the window as shown here.

basic_quick_start_project_template.png

7

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.

asset_tab.png

Images

  • Add the required images under Asset > Image
  • Click on Import RGB Image and redirect to the images files under <your unzip folder>/digit_recognition/dev_files/images as described
import_rgb_image.png
select_rgb_image.png
  • Once the image is added to the Image asset, configure the Image Properties first then configure the Raw Image Settings as shown here
configure_image_properties.png
  • 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 here.

configure_fonts.png

Strings

Add and configure the required strings under Asset > Strings as shown here.

  • StartDrawing value : Start Drawing
  • TouchTitle value : Digit Recognition
configure_strings.png

Global Palette

You can use the default Global Palette configuration of the GFX Composer as shown here.

global_palette.png

8

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.

schemes.png

Once the scheme is added, configure the scheme in the Scheme Editor tab with the properties shown here.

scheme1_config_1.png
scheme1_config_2.png

Add one more scheme and configure the scheme in Scheme Editor with the properties shown here.

scheme2_config_1.png
scheme2_config_2.png
Base color editor configuration
scheme2_config_3.png
Foreground Inactive color editor configuration

Screen Tree

9

Select and delete the BackgroundPanel object under Layer 0 by clicking on Delete Selected Objects.

delete_selected_objects.png
  • 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.

panel_widget_instructions.png
panel_widget0_parameters.png
PanelWidget0 Parameters
panel_widget1_parameters.png
PanelWidget1 Parameters
panel_widget2_parameters.png
PanelWidget2 Parameters
panel_widget3_parameters.png
PanelWidget3 Parameters

10

  • 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 below 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.

Step 2

Configure the Draw Surface widget parameters in the Object Editor.

surface_widget_instructions.png
surface_widget_parameters.png
DrawSurfaceWidget0 Parameters
  • Define the Draw Surface area size in multiples of 28 x 28, as the final image will be compressed to a 28x28 pixel size and the image will be passed to the TensorFlow Interpreter to process and compare with the 28x28 pixel grayscale image database
  • Make sure the Draw Surface area size is in multiples of 2 (2, 4, 8, 16, etc…). This will be helpful to convert the image to a 28 x 28 pixel size using the left-shift binary division method (dividing technique when the divider is a multiple of 2)
Exmaple
In this project, the Draw Surface area is defined as 224 x 224. Note that 224 is in multiples of 28 and 8.

11

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.

Step 2

Configure the Image widget parameters in the Object Editor.

image_widget_instructions.png

GestureImageWiget Parameters

This image area is to display the result of the Gesture Image drawn by the user on the display screen.

image_widget0_parameters.png

ImageWidget0 Parameters

This image is to display the Microchip Logo on the display screen.

image_widget1_parameters.png

ImageWidget1 Parameters

This image is to display the Application Logo on the display screen.

image_widget2_parameters.png

12

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.

label_widget_instructions.png

DrawInstructionLabel Parameters

This label is to display the Draw Instruction to the user on the display screen.

label_widget0_parameters.png

LabelWidget0 Parameters

This label is to display the Application Name on the display screen.

label_widget1_parameters.png

13

You can configure the Legato Graphics Settings like Assets, Code Generator, Display, Editor, Library, Memory, Renderer and Widget under Project > Project Settings.

project_settings_tab.png

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.

renderer_config.png

14

You can configure Legato Graphics project Memory Configuration under Project > Memory Locations.

memory_locations_tab.png

Click on the green Plus button and configure the QSPI_XIP configuration as shown here.

qspi_xip_memory_config.png

Update the Internal SRAM capacity as shown here.

internal_sram_config.png

15

Configure the display screen configuration by clicking an empty area of the display screen design as shown here.

display_screen_config.png

16

After completing the previous steps, save the design by clicking on the Save Design save_design_icon.png 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.
save_design.png
Once the design is saved, generate the code by clicking on the Generate Code generate_code_icon.png button.

With this, you have completed the Display Graphics design on Legato Graphics Composer.


Next Step >

© 2024 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.