Designing a Monochrome GUI Using MGS Composer

Introduction

This section focuses on user interface design practices specific to monochrome Graphical User Interfaces (GUIs) on ePaper displays. It emphasizes clear layouts, high-contrast visuals, efficient use of static and dynamic content, reduced screen updates, and appropriate font and icon choices.

This guide supplements the general Microchip Graphics Suite (MGS) Harmony user guide with information specific to GUI development on monochrome displays like ePaper.

Before getting started, it is essential to have a foundational understanding and practical experience with MGS Harmony and MGS Composer. Refer to "Microchip Graphics Suite (MGS) Harmony User Guide".

Creating a New Project

Back to Top

Color Configuration

For monochrome color mode, a pixel will have only two states, ON or OFF. If a pixel is visible, the library will turn the value of that pixel in the frame buffer to ON.

In the default starting project, the first screen consists of a full-screen panel widget that shows up as black in MGS Composer. The fill color of the panel widget is set by the base color of the color scheme, WhiteScheme, used by the widget. Clicking on the Scheme: WhiteScheme property of the panel widget will show the state of the different colors in the color scheme.

As shown, the Base color is unchecked, which means that the base color for the scheme is OFF or inactive. By default, black means the pixel is not active; thus, the panel widget is shown with a black background fill in MGS Composer.

Checking the Base color in the WhiteScheme will change the panel background color to ON, which will turn the panel background to white in MGS Composer.

By default, pixels that are ON will have a value of 1 in the frame buffer. Pixels that are OFF will be stored as 0.

To flip the logic, change the value of LE_MONOCHROME_ON to 0 or 1 in legato_config.h.

Back to Top

Using Images

MGS Composer enables you to convert RGB images to monochrome using the MGS Composer Asset Manager. However, for this conversion to properly work, the original image must already be black and white. If not, the MGS Composer Asset Manager will try to convert the RGB color image to black and white, and the appearance of the converted image may not be as intended.

For example, here's an image that is imported from a colored PNG file.

To store the image as monochrome, the Output Format must be set to Monochrome. MGS Composer will convert the original color image to monochrome, but the appearance of the resulting image may not be ideal.

To closely preserve the appearance of the image in monochrome, we recommend that the original image be only black and white. If using colored images, use third-party tools like GIMP or Adobe^® Photoshop^® to convert the image to black and white only.

Here's a version of the PNG image that was converted to black and white.


The image is imported into MGS Composer, and the color mode is set to Monochrome output format. Since the image is already in black-and-white, the outline of the image is preserved and the output image size is significantly smaller since the stored image is only 1 bit/pixel.

Notice that the color of the image is inverted. To change this, the Image Asset Manager provides an option to select the OFF Color. All pixels that have this color will be set to OFF, and the rest of the pixels will be ON. This feature can be used to invert the color of the black-and-white image.

Here's how the image would look when stored with the OFF color set to 0x0 (black). This now matches the look of the original image.
 

Recommendations for Monochrome Images

When designing for monochrome displays, choose visuals that remain clear after being reduced to black and white. Use high-contrast, bold outlines, simple silhouettes, and minimal detail so icons and images stay recognizable at small sizes and low resolutions. Do not depend on color alone to communicate meaning; pair symbols with text labels or distinct shapes, especially for warnings and status indicators. Avoid low-contrast photos, thin lines, subtle textures, and complex artwork that may disappear or merge during monochrome conversion. Always test images and icons in the final display mode, size, and resolution to confirm they are still easy to understand.

Refer to the "Using Images in Microchip Graphics Suite (MGS)" guide for more information.

Back to Top

Using Fonts

When fonts are imported into MGS Composer, each glyph or character that needs to be rendered on the GUI is rasterized. Font rasterization is the process of turning scalable font outlines into the exact pixels needed to display readable text on a screen.

In RGB color mode, rendered fonts are stored using RGB/RGBA pixels or grayscale alpha masks, allowing smooth edges through partial coverage values using a technique called anti-aliasing.

In monochrome mode, rendered fonts are stored as compact 1-bit-per-pixel masks where each pixel is either on or off. RGB anti-aliased text looks smoother but uses much more memory, while monochrome text is compact and fast but visually harsher.

Refer to the "Using Fonts in Microchip Graphics Suite (MGS)" guide for more information.

Recommendations for Monochrome Fonts

To select fonts that look good in monochrome 1 bpp, choose fonts whose shapes survive being reduced to pure black-and-white pixels, with no gray anti-aliased edge smoothing. Prioritize readability at the exact target pixel size, because a font that looks good at 14 px may fail at 11 px.

• Choose fonts with strong hinting or native bitmap versions.
• Prefer simple, open letterforms with large counters and clear spacing.
• Use regular or medium weights; avoid ultra-thin, hairline, overly bold, condensed, decorative, or high-contrast fonts.
• For small displays, prefer bitmap fonts such as Terminus, Spleen, Tamsyn, ProFont, u8g2 fonts, or Adafruit GFX fonts.
• For UI text, try Tahoma, Verdana, Arial, DejaVu Sans, Liberation Sans, or Microsoft Sans Serif.
• Test ambiguous characters like I l 1 |, O 0, 8 B, S 5, and small punctuation.
• Always preview the font in actual 1 bpp monochrome mode, at the exact size, DPI, rasterizer settings, and display type you will use.
• Pick the font whose final pixels look intentional, consistent, and readable, not necessarily the font that looks best with anti-aliasing.

Back to Top

Best Practices for Monochrome GUI Design

Working on monochrome displays like ePaper requires a different approach from designing for color displays. Unlike color displays, ePaper interfaces benefit from clean layouts, clear typography, and minimal visual decoration. Prioritize readability, efficient rendering, and infrequent updates by showing only the information the user needs and avoiding unnecessary screen changes.

Keep It Simple, Use Simple Widgets

Designing a GUI in MGS Composer for monochrome displays such as ePaper is most effective when the design is kept simple and purposeful. Limit the interface to simple MGS widgets wherever possible, such as buttons, labels, panels, and images. These widgets are easier to render clearly in monochrome, simpler to maintain, and better suited to low-refresh display behavior. Avoid overly complex controls, dense widget arrangements, decorative effects, and interface elements that require frequent updates or fine visual detail. A simple interface with stable elements, limited detail, and well-defined update areas will be easier to read, faster to refresh, and better suited to the characteristics of ePaper displays.

Clear Hierarchy and Consistent Grouping

Use a structured layout with clear grouping, generous spacing, and strong visual hierarchy. Important information should be easy to identify at a glance. Labels, values, icons, and status indicators should be arranged consistently across screens. Avoid dense layouts that require frequent user interpretation or small text that may become difficult to read on lower-resolution panels.

Static Layout and Defined Dynamic Update Regions

Since ePaper displays have limited refresh rates, design the interface around infrequent updates. Static elements such as section headers, borders, labels, and icons should remain unchanged whenever possible.

Dynamic content such as sensor values, timestamps, battery levels, and warnings should be grouped into defined update regions. This layout strategy improves partial-refresh efficiency and reduces power consumption.

When managing static and dynamic content, separate fixed interface elements from changing data. A dashboard might keep labels such as temperature, humidity, and battery static while only updating the numeric values. This approach reduces the amount of display data that must be redrawn and supports more efficient partial updates.

High Contrast Symbols and Text

High-contrast graphics are essential. For monochrome displays, black text on a white background is typically the clearest option. Fonts should be simple, readable, and appropriately sized. Sans-serif fonts often work well for embedded ePaper interfaces. Use a limited number of font sizes and weights to reduce memory usage and maintain consistency. Icons should use bold outlines, simple silhouettes, and minimal detail. Avoid relying only on color to communicate meaning. For example, a warning should include a symbol or text label rather than depending solely on red or another accent color.

Minimize Refreshes and Validate Visual Clarity

Avoid unnecessary screen updates. Do not redraw the entire screen when only one value changes. Avoid animation, blinking indicators, and continuous refresh loops. Instead, use event-driven updates or threshold-based updates so the display refreshes only when new information is meaningful to the user. Icons should be tested in the final display mode to ensure they remain clear after conversion to monochrome. For monochrome displays, use patterns, labels, outlines, or shapes to distinguish states.

Back to Top