Using Images in Microchip Graphics Suite (MGS)
Introduction
Image graphic assets in a Graphical User Interface (GUI) refer to the visual elements used in the interface design. These can include icons, buttons, backgrounds, banners, diagrams, illustrations, animations, and other visual components that help to enhance user interaction and experience.
These assets are designed to be intuitive and easy to understand, helping users to navigate and interact with the software or website more effectively.
Microchip Graphics Suite (MGS) Harmony enables GUI development using image assets from standard file formats like BMP, JPEG, and PNG.
MGS Harmony Composer Image Manager
MGS Harmony Composer has a utility called Image Manager that enables users to add and manage image assets.
Image Manager lets users import image files from various formats at design time, and convert them to another format in the generated code. This means that the users can specify the converted output format based on the available memory and processing resources in the system.
For example, a user can import a PNG file from their artwork designer group and then convert and store it to RAW format to reduce processing overhead for decoding and rendering. To reduce the size of the output image asset, the user can enable compression using Run-Length Encoding (RLE).
This level of tool integration enables rapid development when using images in the design.
Using the Image Manager
Launch Image Manager by clicking Asset > Images in MGS Harmony Composer.
Image Manager provides the following interfaces for adding and configuring image assets.
Import RGB Image File
Supported file formats are PNG, JPEG, BMP, and GIF.
Image Asset List
This list shows the image assets in the design. Selecting an image asset in this list will preview the image and show its properties.
Image Preview
Image Preview shows the image. The View menu enables options to zoom in/out of the image.
Source Image File Properties
These are the properties of the source image file and are read-only.
Output Image Asset Properties
These are the properties of the generated image asset.
Output Image Format Settings
These are the configuration options for the generated image asset based on the output format.
Output Image Properties
Image Manager enables users to configure the generated image asset to optimize it for memory usage and rendering performance.
The following properties can be set:
| Output Name | Sets the image asset name. This name is also used in the generated code, so it must use valid characters for C variable names. |
| Output Format | Sets the output image asset format. This format can be different from the Source File format. Output formats include RGB, PNG, JPEG and Monochrome. |
| Data Location | Sets the location of the generated image asset. The following values are supported:
|
| Preprocess | Preprocessing is an advanced function where the library decompresses images in Flash to RAW uncompressed images in RAM during initialization. Since the images are now available as uncompressed, this speeds up the image rendering process at run-time. |
Output Image Format Settings
The Image Manager provides additional options to configure the image asset depending on its output format.
RGB Image Assets
RGB Image Assets, also called 'RAW', have the following settings:
| Color Mode | Specify the color mode of the RGB image assets. The color mode options include the standard 32-, 16-, and 8-bit color and grayscale modes. Global Palette converts the image asset into an 8-bit indexed image that references the global color palette. Information about the bit-depth, color count, and output size (bytes) of the specified color mode are indicated. |
| Render Mode | Render mode sets the rendering process used to draw the image to the frame. Pipeline is the default setting, which means that the image will be rendered through the software pipeline. This includes decompression and color conversion, which will incur performance overhead if the image is compressed and if the color mode does not match the project color mode. Direct render mode tells the library to directly copy the image data without any processing. Since there is no processing overhead of the image asset, this can result in very fast image rendering. This requires that the image color mode matches the project color mode. |
| Enable Compression | This enables RLE compression of the RGB image. RLE compression works well with human-drawn images like icons, where there are large solid color sections in the image. RLE does not work well with photo-realistic images and may even result in a bigger image size. |
| Color Mask Mode | Color masking enables users to specify a color in the image that will not be rendered on the screen. This is useful when using color modes without an alpha channel (like RGB565) to indicate transparent pixels. Note that color masking will incur rendering overhead. |
JPEG Image Assets
JPEG images have the following settings:
Image Manager allows users to set the JPEG compression level. JPEG is a lossy image format, so using higher compression will result in smaller images but lower image quality.
PNG Image Assets
PNG images have the following settings:
Image Manager enables the PNG Color Mode to be set. RGBA 8888 is the default mode, with an option for RGB 888 and compression level.
Optimizing Image Assets
Image Manager provides various configuration options for users to configure and optimize assets based on their application needs. In most cases, users will have to configure image assets so they will be smaller and use less memory, or render faster. In general, using images with compression will result in a smaller size, but will incur decoding overhead, which negatively impacts rendering speed.
Choosing the Image Output Format
The following table shows the pros and cons of each image output format.
| Output Format | Advantages | Disadvantages | Related Information |
| RGB (uncompressed) | Fastest rendering as the uncompressed format eliminates decoding overhead. Supports Direct Render Mode that can further speed up rendering. Supports color masking. Supports options for setting color mode. This provides flexibility to further optimize for speed or size. | Bigger asset size than compressed formats. | |
| RGB with Compression | Generally smaller than uncompressed RGB. Compression works well with images with solid colors like icons. Faster rendering than most compressed formats. Supports color masking. Supports options for setting color mode. This provides flexibility to further optimize for speed or size. | Generally larger in size than PNG or JPEG. Compression doesn't work well with photo-realistic images. | |
JPEG
| Generally provides smallest compression size, and works well with photo-realistic images. | Lossy compression. Incurs decoding overhead. Does not support alpha channel. | Managing Memory for JPEG Decoding |
| PNG | Compresses well, and is lossless. Supports alpha channel for transparency. | Incurs decoding overhead. Requires large heap to decode. | Managing Memory for PNG Decoding |
Design Recommendations
- Use uncompressed RGB image assets as much as possible. This removes decoding overhead and enables options to set the color mode and render mode to optimize for size and performance. For best performance, use the same color mode as the project.
- If large size becomes an issue with RGB assets, consider RLE compression, especially for icons or images with solid colors. Avoid using RLE compression for photo-realistic images, as these don't compress well and yet incur decoding.
- For photo-realistic images, consider JPEG if using uncompressed RAW is not an option due to size. Note that JPEG images will be slower to render due to decoding.
- Consider using PNG format as the last option. PNG images generally require large memory to decode.