Image Widget Documentation
Introduction
An Image Widget is a Graphical User Interface (GUI) that allows users to customize their size, position, opacity, format, etc. The widget supports a wide range of image formats such as PNG, JPG, RAW, and GIF, and can be converted as RGB, PND, JPEG, and Monochrome. Image is imported from Image Manager, which allows importing multiple images, selecting different image format/color modes for each image, selecting compression methods for each image, and displaying the memory footprint of each.
The Image Widget document covers:
- Creating and customizing image widgets using Microchip Graphics Suite (MGS) Harmony Composer
- Image Properties
- Handling image widget properties and events through application code
- Image widget example project
- Application Program Interfaces (APIs) specific to Image widgets
Designing Image Widgets Using MGS Harmony Composer
Follow these steps to add an Image Widget to your design:
In the graphic composer, locate the Image widget within the Toolbox on the right panel. Drag and position this widget to your preferred location on the screen.
Figure 1
To add and customize Image, go to Asset > Images. This will open the Image Manager. To learn how to use Image Manager, refer to the "Using Images in Microchip Graphics Suite (MGS)" page.
Figure 2
After importing the desired images, return to Screen0. From there, import the image to the Image Widget from the Object Editor.
Figure 3
Upon encountering the Select Image pop-up window, choose the preferred image import into the Image widget, then proceed by clicking OK.
Figure 4
The intended image will subsequently appear on the Image Widget. Refer to the "Base Widget Documentation" page for a detailed description of the properties listed in Object Editor.
Figure 5
Managing Image Widget Schemes
Schemes control the look and feel of a widget.
To learn how to set the scheme for an image, click on the 
button next to the Scheme property editor of the Object Editor.
Figure 6
This will launch the Image Scheme Helper window containing tips on how different sections of the scheme settings manipulate various elements of the image.
Figure 7
Figure 2 shows an example color scheme and the resulting image appearance:
Figure 8
The information from the Image Scheme helper and the example color scheme is summarized in Figure 9.
Figure 9
Image Properties
Name | This will be used to reference the image by the application. Example- Screen0_ImageWidget_0. |
| Image | This will be used to add Image to the widget that will display on the Image Widget. |
Managing Image Widget Through Programming
Once the graphical design is completed using MGS Harmony Composer, MCC generates the required code for all the widgets based on the properties set in the Object Editor. To learn more about the process flow between designing a User Interface (UI) and developing application code, refer to the "Designing an Application with Microchip Graphics Suite (MGS)" page.
Let us suppose that an image widget is created with the following properties in MGS Harmony Composer:
Figure 10
For the image widget with the properties shown in Figure 10, MCC will automatically generate the following lines of code in src\confg\default\gfx\legato\generated\screen\le_gen_screen_Screen0.c
- A new image widget is created by the variable name Screen0_Image1.
Screen0_Image1= leImageWidget_New();
- Its position is set to pixel location 20x120.
Screen0_Image1->fn->setPosition(Screen0_Image1, 20, 120);
- The image size is set to have a width of 80 pixels and a height of 80 pixels.
Screen0_Image1->fn->setSize(Screen0_Image1, 80, 80);
- This image scheme is set to Scheme1
Screen0_Image1->fn->setScheme(Screen0_Image1, Scheme1);
- This image is set to have no border in this example. However, you can have a line border or a beveled border.
Screen0_Image1->fn->setBorderType(Screen0_Image1, LE_WIDGET_BORDER_NONE);
- This image is imported from the Image Asset and its image name is "icon1".
Screen0_Image1->fn->setImage(Screen0_Image1, (leImage*)&icon1);
- Finally, the image is added to the screen.
root0->fn->addChild(root0, (leImage*)(leWidget*)Screen0_Image);
Image Widget Example Project
The example image widget project illustrates the various settings in which an image can be placed:
- Set as background
- How to add Scheme for an image
- How to apply Alpha Blending and adjust Alpha level
- Add border line
MGS Simulator Output
Image Widget APIs Description
This section describes the APIs specific to the image widget. For a description of APIs common to all widgets, refer to the "Base Widget Documentation" page.
getImage()
leImage* getImage(const leImageWidget* _this)
Get the image properties from the image asset.
Parameters
| leImageWidget* | _this | Image widget pointer to operate on. |
Returns image pointer.
setImage()
leResult setImage(leImageWidget* _this, leImage* imgAst)
Set the image widget to display the image asset.
Parameters
| leImageWidget* | _this | Image widget pointer to operate on. |
| leImage* | imgAst | Pointer to the image asset that should show on the image widget. |
Returns LE_SUCCESS or LE_FAILURE.