Step 5: Configure Legato Graphics on GFX composer
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.
- 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
- 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
Add and configure the required font\fonts under Asset > Fonts as shown here.
Add and configure the required strings under Asset > Strings as shown here.
- StartDrawing value : Start Drawing
- TouchTitle value : Digit Recognition
You can use the default Global Palette configuration of the GFX Composer as shown here.
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 here.
Add one more scheme and configure the scheme in Scheme Editor with the properties shown here.
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
Double-click on Panel in the Toolbox window and drop on the screen area to add the Panel widget to the "Layer 0".
Configure the Panel widget parameters in the Object Editor.
- 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
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.
Configure the Draw Surface widget parameters in the Object Editor.
- 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)
- In this project, the Draw Surface area is defined as 224 x 224. Note that 224 is in multiples of 28 and 8.
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
Double-click on Image in the Toolbox window and drop on the screen area to add the Image widget to the Layer 0.
Configure the Image widget parameters in the Object Editor.
This image area is to display the result of the Gesture Image drawn by the user on the display screen.
This image is to display the Microchip Logo on the display screen.
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
Double-click on Label in the Toolbox window and drop on the screen area to add the Label widget to the Layer 0.
Configure the Label widget parameters in the Object Editor.
This label is to display the Draw Instruction to the user on the display screen.
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.
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.
With this, you have completed the Display Graphics design on Legato Graphics Composer.