Skip to Content

Optimizing for Performance

Last modified by Microchip on 2024/05/13 13:29

Introduction

This page offers general guidelines for designing and setting up an MGS GUI project to ensure optimal rendering speed on the intended platform.

Optimizing the UI Design

Generally, UI screen update rates can be improved by incorporating the following elements into the UI design.

  • Color mode conversion is minimized or eliminated
  • Alpha blending is minimized or eliminated
  • Image decoding is minimized or eliminated
  • Damaged or dirty area (screen area that needs to be updated) is minimized
  • Unnecessary drawings are eliminated

Choosing and Configuring Color Modes

Selecting the right color mode for the project can affect the size and performance of the GUI application.

  • For a color GUI, using 16-bit RGB565 can reduce the size of the frame/scratch buffer and image assets. This means less data is needed to be read/written from/to memory which would effectively reduce the screen draw times.
    • Consider using RGB565 if your UI design doesn't need the fidelity of 24-bit colors or doesn't use alpha-blended images.
  • To eliminate the need for color mode conversion, set the frame buffer, MGC layer and image assets to the same color mode.
    • The frame buffer color mode is set in the display controller driver component in MCC.
    • The layer color mode is set in the layer properties in MGC. 
    • The image assets color mode is set in the image manager for RGB images. See "Using Images in Microchip Graphics Suite (MGS)" for more information.

Back to Top

Optimizing Widget Properties

Proper configuration of widgets in the screen design can help eliminate unnecessary redraws. To do this, consider the following recommendations whenever possible:

  • Do not overlap widgets.
    • When widgets overlap, this causes the library to redraw the overlapped section when either widget needs to be updated.
    • For example, if a button widget overlaps with an image widget below it, the library will need to decode and redraw the overlapped part of the image widget every time the button is touched and toggled. This unnecessary redraw of the static image can be eliminated by not overlapping the button with the image widget.
  • Set the widget size to the visible area
    • For example, if an 80x80 image widget only has a 60x60 image on it, reducing the image widget size to 60x60 to match the image would eliminate unnecessary redrawing of the background area when the image widget is redrawn.
    • Reducing the widget size will also minimize the chance of overlap with other widgets.
  • Set widget background to none
    • To render each widget, the library will first fill the widget background color.
    • If the widget background matches the main screen background, set the widget background to none to eliminate this extra color fill.

Back to Top

Optimizing Images

The Image Assets Manager provides a wide set of configuration options to configure image assets so that they are optimized for the resources available in the target platform.

For detailed information on the Image Assets Manager, refer to "Using Images in Microchip Graphics Suite (MGS)".

To ensure that images are rendered as fast as possible, consider the following recommendations:

  • Use uncompressed image assets (RGB) if possible, and make sure that the image color mode matches the MGS Composer project or layer color mode.
    • RGB image sizes are generally larger than other image formats. Consider this size tradeoff when using uncompressed RGB images for faster performance. 
    • If uncompressed RGB image sizes are too big, consider enabling RLE compression. RLE compression works well with human drawn images - like icons or clipart that are typically used for buttons.
    • For uncompressed RGB images, consider using Direct Render 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.
  • For devices with a large amount of RAM available (PIC32MZ DA), consider using image pre-processing if raw RGB images cannot be used due to Flash size limitations. 
    • Image preprocessing enables images to be stored as compressed in Flash and then decompressed to RAM during boot.
    • The decompressed images in RAM are used to very quickly render the image to the frame buffer.
    • Pre-processing enables users to reduce image asset size in Flash while also benefiting from the fast render performance of uncompressed images in RAM. For more information, refer to the "Image Pre-processing" page.

Back to Top

Optimizing Labels, Strings, and Fonts

String and Font Assets are used to create Labels in the UI design. The Font and String Assets Manager provide configuration options to configure these assets and optimize them for your design. Refer to the guide for Font Assets and String Assets for more information.

Strings can take longer to draw when the string asset uses anti-aliased fonts. Anti-aliased fonts are fonts that have undergone a process to smooth out the edges of the characters, making them appear less jagged and more visually appealing. The tradeoff is that these fonts are larger (8x versus aliased fonts), and require the library to alpha blend each pixel to the background, which can significantly increase draw time, especially on small MCUs.

A couple of options can be used to improve the rendering time of labels and strings:

  • Consider not using anti-aliased fonts if the pixelated edges on aliased fonts do not impact the readability of the strings rendered on the screen.
  • Consider using scheme acceleration for labels. Scheme acceleration generates a lookup table of pre-alpha blended foreground and background colors which can be used to quickly draw the anti-aliased glyphs on label widgets without the library having to do alpha blending at run-time.

Back to Top