Using Images in Microchip Graphics Suite (MGS)

Last modified by Microchip on 2024/04/16 14:45


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 Assets Converter

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.

Back to Top

Using the Image Manager

Launch Image Manager by clicking Asset > Images in MGS Harmony Composer.

Image Manager

Image Manager provides the following interfaces for adding and configuring image assets.

  1. Import RGB Image File

    Supported file formats are PNG, JPEG, BMP, and GIF.

  2. 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.

  3. Image Preview

    Image Preview shows the image. The View menu enables options to zoom in/out of the image.

  4. Source Image File Properties

    These are the properties of the source image file and are read-only.

  5. Output Image Asset Properties

    These are the properties of the generated image asset. 

  6. Output Image Format Settings

    These are the configuration options for the generated image asset based on the output format.

Back to Top

Output Image Properties

Image Manager enables users to configure the generated image asset to optimize it for memory usage and rendering performance.  

Image Properties

The following properties can be set:

Output NameSets the image asset name. This name is also used in the generated code, so it must use valid characters for C variable names.
Output FormatSets 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:

  • Internal Flash stores the image data as a part of the source code programmed in non-volatile flash. This is the default setting.
  • Internal SRAM stores the image as a non-constant variable in RAM.
  • User memory locations can be used to store images in user-defined locations like external SQI flash SD card.  To enable these locations, they must be added using the Memory Locations manager in MGS Composer. 
PreprocessPreprocessing 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.

Back to Top

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:

Raw Image 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 CompressionThis 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:

JPG Image 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:

PNG Image 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.

Back to Top

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.

Back to Top

Choosing the Image Output Format

The following table shows the pros and cons of each image output format.

Output FormatAdvantagesDisadvantagesRelated 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. 




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

Compresses well, and is lossless.

Supports alpha channel for transparency.

Incurs decoding overhead.

Requires large heap to decode. 

Managing Memory for PNG Decoding

Back to Top

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.

Back to Top