Reference

This chapter provides supporting reference material for GUI Guider, including frequently asked questions, external resources, and a glossary of key terms. Use it to confirm concepts, resolve common issues, and find related documentation.

FAQs

This section answers common questions about GUI Guider.

What should I do if a configured property or style is not rendered correctly in the UI editor?

First check whether the UI editor is still responsive. If interactions such as drag-and-drop no longer work, restart GUI Guider. Otherwise, open and then close the JS Simulator to force a re-render of the current screen.

How can I prevent the simulator from running target specific code?

GUI Guider defines a macro GG_USE_SIMULATOR in lv_conf.h. Use it to guard device specific code so that the simulator skips that path:

#if !GG_USE_SIMULATOR   // or GG_USE_SIMULATOR == 0
    /* MCU-specific code */
#endif

How can I reuse an application on a different board?

When creating a project, select an existing project as a template. Use auto-size to adapt the layout to the target display.

What should I do if I create a project at an unsupported resolution from a template?

Templates are designed for specific resolutions, so you may need to manually adjust some UI details for the new resolution. Also check the custom code and update any image and font variable names as needed to ensure the project compiles successfully.

What should I check if touch or display does not work?

The most common cause is an incorrect panel selection. Verify that the panel type configured in the project matches the panel used on the target board.

How can I customize lv_conf macros without losing the changes after regeneration?

Place custom configuration changes in lv_conf_ext.h inside the project’s custom folder. GUI Guider preserves this file across regeneration, so it is the recommended location for any lv_conf overrides.

Resources and links

This section lists external resources that complement this user guide. Links are grouped by topic for quick access.

GUI Guider product

• GUI Guider product page — downloads, release notes, and product overview.

• GUI Guider community forum — questions, answers, and feedback from NXP and the user community.

LVGL

GUI Guider is aligned with LVGL 9.4.0. For details on widget behavior, drawing, and configuration options that are not covered in this guide, refer to the LVGL documentation:

• LVGL v9 documentation — main reference for LVGL widgets, styles, layouts, and APIs.

• LVGL v9 NXP integration guide — how to leverage NXP hardware accelerators with LVGL v9.

• LVGL parts and states — reference for part-specific style behavior used in the event workflow.

NXP toolchains and SDKs

• MCUXpresso IDE — IDE used for MCU project import, build, and target debug.

• MCUXpresso for VS Code — VS Code extension for NXP embedded development, including the MCUXpresso Installer.

• MCUXpresso for VS Code community — community forum for the VS Code extension workflow.

• MCUXpresso SDK — board-specific SDK builds, including LVGL and FreeRTOS middleware.

• NXP Visual Studio Code download — host editor for the MCUXpresso for VS Code workflow.

Zephyr and Linux

• Zephyr Project documentation — official Zephyr RTOS reference.

• Zephyr boards and shields — supported boards and shields for the Zephyr ports used by GUI Guider.

• Zephyr Lab installation and preparation — NXP-curated Zephyr setup guide for MCUXpresso for VS Code.

• Real-Time Edge software — NXP Real-Time Edge product page used by the Industrial HMI workflow.

• Yocto Real-Time Edge v3.4 README — detailed Yocto setup instructions for the Real-Time Edge distribution.

Tools and utilities

• Git for Windows — required for the workflow and recommended for managing project sources.

• Figma — design tool used together with the Figma to GUI Guider plugin.

• Figma to GUI Guider — plugin to transform Figma design to GUI Guider project.

Related GUI Guider user guide chapters

For internal navigation, the following chapters of this user guide are commonly used as cross-references:

• Quick Start Guide — fastest path from project creation to simulator and target validation.

• IDE Overview — workspace organization, menus, and editor panels.

• Advanced Usage — Figma plugin, JSON-based editing, and custom code integration.

• Development Guide — target integration with MCUXpresso, IAR, Keil, Zephyr, Yocto, and Real-Time Edge.

• Performance Optimization — hardware acceleration and tuning practices.

• Demos — descriptions of the application templates shipped with GUI Guider.

Glossary

The following table explains key terms used throughout the GUI Guider documentation. Terms are listed alphabetically.

Term	Definition
Animation	A reusable animation configuration that defines property changes over time (for example, size, position, or style) with explicit start and end values. Animations can be triggered from events and shared across screens.
Application	A template-oriented entry point into the project creation workflow. Selecting an application narrows the available board choices, complementing the Board entry point.
Board	The hardware target or hardware context associated with a project. The board selection affects the available display configurations, project templates, generated code, and applicable toolchains.
C simulator	A simulator option that runs the full code generation, build, and execution pipeline. Its behavior is closer to the actual target build than the JS Simulator.
Code generation	The process of producing source files, resources, and integration-ready project output from the visual project definition inside GUI Guider.
Condition	A reusable conditional variable that defines an IF or Switch expression in C-style syntax. Conditions can be referenced from events to gate the actions that are executed.
Custom code	Hand-written code added to a GUI Guider project—inside a screen, inside an event handler, or as common functions placed in the project’s custom/ directory. Custom code is preserved across regeneration.
Event	A configured interaction trigger that allows widgets or screens to respond to user actions or state changes (for example, Clicked, Pressed, Value Changed, Gesture).
FPS	Frames per second. The rate at which the UI is rendered to the display, and a primary measure of perceived UI responsiveness.
G2D	A 2D graphics hardware accelerator available on supported NXP i.MX MPU devices. When enabled, G2D offloads drawing operations to dedicated hardware, increasing performance and reducing CPU load.
Generated folder	The folder inside a GUI Guider project that contains files produced by code generation. Changes made directly in this folder are overwritten on the next code-generation run, so user code should be placed elsewhere.
IDE	The integrated development environment used to create, configure, and manage GUI Guider projects. In this document, “IDE” refers to GUI Guider unless a third-party IDE (for example, MCUXpresso IDE or Keil MDK) is named explicitly.
JS simulator	A simulator option that displays the designed UI without compilation. It is fast and well suited for early visual validation, but cannot fully reflect project content that depends on custom code.
Layer	A top-level structural slot in the workspace tree. GUI Guider exposes four layer entries—System layer, Top layer, Screens, and Bottom layer—that map to the corresponding LVGL layers.
LVGL	Light and Versatile Graphics Library, the open-source embedded GUI library that GUI Guider builds on. GUI Guider is aligned with LVGL 9.4.0.
MCUXpresso	The family of NXP development tools, including the MCUXpresso IDE, MCUXpresso for VS Code, the MCUXpresso Installer, and MCUXpresso SDK builds. GUI Guider integrates with these tools for target build, debug, and SDK provisioning.
Project	The complete set of GUI design data, resources, configuration, and generated output associated with one GUI Guider application.
PXP	Pixel Pipeline. An NXP hardware engine, available on selected i.MX RT MCUs and i.MX MPUs, that accelerates pixel-level operations such as area fill, BLIT, color keying, and recoloring.
Resource manager	The workspace area used to manage images, fonts, and other UI assets, including the default built-in font that ships with GUI Guider.
Screen	A single top-level page of the UI managed under the Screens entry in the Layers view. Most UI design work happens at the screen level.
Style	A definition of the visual properties of widgets or screens, including background, border, padding, margin, outline, shadow, text, transform, image, line, and size or position. GUI Guider styles align with the LVGL model.
Target	The destination runtime environment for a GUI Guider project, typically defined by the selected board, operating environment, and deployment workflow.
Toolchain	The compiler, build system, and supporting tools used to produce executables for the target. Supported toolchains include MCUXpresso IDE, MCUXpresso for VS Code with ARMGCC, IAR Embedded Workbench, and Keil MDK.
Variable	A piece of project-level state exposed through the GUI workflow and used to drive dynamic values, interactions, or synchronization with application logic. Conditions and animations are specialized kinds of variables.
VGLite	A vector and raster 2D GPU API used by selected NXP i.MX RT MCUs. When enabled, VGLite accelerates LVGL drawing operations such as area fill and BLIT.
Widget	A reusable UI building block (button, label, image, chart, and so on). Widgets are placed inside screens or other container widgets, and their behavior is configured through properties, styles, and events.
Workspace	The central area of the GUI Guider IDE. In the workspace you can edit screens, configure widgets, manage resources, define events and variables, and review project content.