Efficient GUI Design

Experience Flow with Microchip Graphics Suite (MGS)

Achieving these goals can be challenging for both UI/UX designers and embedded engineers, both of which are critical to creating modern GUIs. Typically, these two distinct groups of creators operate in vastly different domains. The former is focused on visual aesthetics while the latter is more attentive to functionality and hardware integration.

Tools that seamlessly serve both creator groups minimize the complexity of the development process and accelerate product time-to-market. Microchip Technology developed Microchip Graphics Suite (MGS), a comprehensive solution to bridge this gap, enabling a more efficient GUI design experience. The result is a streamlined workflow where static design elements and dynamic interactive features come together seamlessly in the final product.

This article explores how the MGS Client Experience Flow, illustrated in Figure 1, improves GUI development for embedded systems. We will focus on how MGS Composer and MGS Simulator work together to empower designers and engineers, enabling them to create polished, user-friendly GUIs more quickly and efficiently than ever before.

The Importance of a Unified GUI Development Workflow

Developing a functional and visually appealing GUI traditionally required a lengthy, iterative process involving multiple teams working independently. UI/UX designers would create the look and feel of the interface using photo editing design tools that produced static designs, which were then passed on to embedded engineers. Engineers would translate these designs into working software, which often resulted in discrepancies between the intended design and the final product due to communication breakdowns, differences in interpretation, or tool limitations.

This fragmented workflow causes development delays and an overall lower-quality GUI design. MGS was developed to address these challenges to provide an integrated workflow that improves collaboration between designers and engineers while streamlining the overall GUI development process.

MGS Client Experience Flow: A Step-by-Step Breakdown

The MGS Client Experience Flow illustrates how MGS facilitates a modern, integrated design workflow that accelerates the development of embedded GUIs. Let’s break down each step of the process:

Step 1: UI/UX Designer Creates the Visual Layout

The design process begins with the UI/UX designer, who uses standard design tools to create the visual layout of the GUI. This includes defining key elements such as buttons, icons, and backgrounds—components that shape the overall aesthetic of the interface. These visual designs establish the foundation for the GUI’s structure and functionality, representing the intended look and feel of the final product.

Step 2: MGS Composer—Bringing Visuals to Life

Once the visual design is ready, it is transferred to MGS Composer, the core tool within the MGS for developing and managing GUIs. MGS Composer allows both designers and engineers to manipulate and refine the interface in a single environment.

The tool provides an intuitive visual interface where static elements such as images, fonts, and buttons can be easily arranged and structured for deployment on an embedded system. MGS Composer automatically generates the C code necessary to implement the graphical design, reducing the amount of manual coding required by the engineer.

By automating the code generation process, MGS Composer ensures that the GUI is correctly formatted for the hardware platform, saving time and reducing the chance of errors. This integration streamlines the workflow, allowing designers and engineers to focus on what they do best without the need for excessive back-and-forth communication.

Testing and Simulation: Verifying the Design

A critical phase in GUI development is testing and verifying that the design behaves as expected under real-world conditions. In traditional workflows, engineers often had to wait for the final hardware to become available before thoroughly testing the GUI’s functionality. However, MGS offers powerful simulation tools that allow for thorough testing even before hardware is in hand.

Step 3: Web Mode Simulation—Sharable Reviewing

Using the MGS Simulator, developers can run a complete web-based demo of the GUI, allowing them to interact with the interface in a browser environment. This is a valuable step for testing fundamental interactions and verifying that the design functions as intended. Furthermore, stakeholders and clients can review the web demo and provide early feedback on the design without the need for physical access to hardware.

The MGS Simulator also enables in-depth testing, including debugging graphical elements and interactions in a desktop environment. This hardware-independent testing phase accelerates development, allowing issues to be caught and resolved early in the process, minimizing the risk of last-minute changes or costly rework.

Step 4: Native Mode Simulation—Debugging on Desktops

In native mode, the MGS Simulator generates the necessary files to enable desktop simulations within an Integrated Development Environment (IDE) such as Visual Studio Code (VS Code). This allows engineers to test the GUI design in a controlled environment, which is crucial for fine-tuning performance, memory usage, and overall system behavior.

By enabling detailed debugging at this stage, MGS helps engineers optimize the GUI’s performance to meet the constraints of the target hardware platform. Whether the system has limited processing power or memory, engineers can make the necessary adjustments before deploying the design on physical hardware.

Final Implementation: Deploying on Hardware

Once the design has been refined and tested through simulation, the final step is deploying it on the actual hardware platform. The MGS Client Experience Flow ensures that this process is smooth, predictable, and free from significant issues.

Step 5: UI Design on Hardware

With the code generated by MGS Composer and debugged through MPLAB X (using the Harmony v3 environment or GNU Debugger (GDB) in the case of embedded Linux environments), the embedded engineer can deploy the GUI on the target hardware platform. Whether the system runs on Microchip’s 32-bit microcontrollers (MCUs) or microprocessors (MPUs), the design will run seamlessly, thanks to the efficient integration of MGS into the development pipeline.

This final step allows the client to review the fully functional UI on hardware, providing them with a tangible product to interact with and ensuring that the design meets their expectations before it moves to production.

Conclusion: A Seamless GUI Design Experience with MGS

The MGS represents a significant leap forward in the way UI/UX designers and embedded engineers collaborate on embedded GUI development. By providing a unified toolset that simplifies everything from design to deployment, MGS ensures that the visual intent of the GUI is preserved while the interface is optimized for hardware performance.

The MGS Client Experience Flow demonstrates how the entire process—from initial design through testing and final deployment—can be executed more efficiently, with fewer opportunities for miscommunication or error. MGS Composer and MGS Simulator work together to provide a complete solution that reduces development time and ensures that the GUI performs as expected, even on resource-constrained embedded systems.

In an era where time-to-market is critical, having an integrated workflow that bridges the gap between visual design and technical implementation is invaluable. For anyone working on embedded GUI development, the Microchip Graphics Suite offers the tools necessary to create responsive, visually appealing, and efficient interfaces that enhance the user experience.

By adopting MGS, development teams can significantly improve their design process, ensuring faster project completion, reduced errors, and a more enjoyable collaboration between designers and engineers. 

RESOURCES
Microchip | www.microchip.com

PUBLISHED IN CIRCUIT CELLAR MAGAZINE • JUNE 2025 #419 – Get a PDF of the issue

Sponsor this Article