ESP-GSP

[中文]

ESP-GSP: Precompiled UI Framework

Solution Positioning

ESP-GSP (Espressif Graphics Scene Processor) is a precompiled UI framework for ESP-IDF by Espressif. Developers use JSON to describe the interface and provide resources such as images and fonts. The build is completed using the accompanying tools, and the generated C interface is used to connect business logic and update the interface. The core runtime library is delivered in the form of a precompiled library, and customers integrate and use it through public interfaces and tools.

ESP-GSP is suitable for products where the interface structure is determined at build time, and data and interaction status are updated at runtime. It supports dynamic text, values, images, lists, as well as animations, page navigation, and touch interaction.

Main Advantages

  • Automatic optimization of image resources. The accompanying tools process the imported image resources during the build process, reducing the work of customers manually converting and optimizing materials, helping to control resource usage and reduce device operating costs.

  • Optimized display performance for ESP platform. The framework optimizes rendering and refreshing for embedded interfaces, helping to improve the smoothness of animations, scrolling, and data updates, and reducing the work of customers to optimize underlying performance themselves. Actual frame rate and resource usage need to be tested in conjunction with target hardware and interface load.

  • Separation of interface and business. Maintain the interface using JSON, update status and handle interaction through the generated C interface, reducing handwritten binding code, and making it easier to maintain the interface and product features separately.

  • Support for host preview and AI-assisted development. Can be combined with scene specifications and widget documentation, AI-assisted generation or modification of JSON interface, and verification of layout and interaction through compilation checks and host simulators, speeding up interface iteration.

Advantages over Other UI Frameworks

ESP-GSP emphasizes build-time preprocessing and accompanying development processes, suitable for projects with clear interface structure, hoping to reduce device runtime burden and development workload:

  • Build-time preprocessing, reducing runtime overhead: GSP, combined with interface definition, completes image adaptation and resource optimization work that can be processed in advance during the build stage. Compared to UI frameworks based on runtime object trees, it can reduce runtime resource processing burden, leaving more processing power for interface refresh. Customers only need to maintain the interface and original materials, and the accompanying build process completes the preprocessing.

  • In terms of frame rate, reduce runtime burden, improve refresh smoothness: For build-time known interface resources, complete the work that can be preprocessed in advance, combined with display optimization for the ESP platform, helps to shorten the time for interface updates, providing more room for higher frame rates for animations, scrolling, and continuous data refresh. In interfaces with large resource processing or drawing overhead, this benefit can be evaluated; the final frame rate is still limited by the screen interface and hardware capabilities.

  • In terms of memory, plan usage according to interface requirements: GSP can configure runtime capacity according to determined interface requirements, combined with resource preprocessing, reducing unnecessary runtime resource overhead. For the original need to temporarily process images on the device side, it can reduce the corresponding temporary memory requirements, leaving more RAM/PSRAM space for business functions. Image resource optimization also helps to control Flash usage; Flash and runtime memory should be evaluated separately, and specific benefits depend on resource configuration.

  • More direct interface development: Describe the interface through JSON, automatically generate business call interfaces, and accompany compilation checks and host previews, suitable for projects with clear interface structure, hoping for rapid iteration or introduction of AI-assisted development.

What to Confirm Before Use

  • Adaptation requirements: The current documentation requires ESP-IDF 6.0 or later. Check that the selected release supports your chip, display, and memory configuration, and that the widgets, interactions, and language capabilities meet the product requirements.

  • Validation: Evaluate frame rate, memory, and touch experience on the target hardware using a representative product UI. Host preview can be used for additional checks.

  • Components and versions: Match components and accompanying tools to the selected release documentation. The core runtime is provided as a precompiled library and is integrated through public APIs; if you need to change the core implementation, confirm whether the current release supports that.

Entry to Information

  • Component Registry: espressif/esp-gsp.

  • Solution Introduction: ESP-GSP Project Homepage.

  • Development Documentation: Chinese and English Documentation Entry, including quick start, controls, scene writing, C interface, display integration, compatibility, and troubleshooting instructions.

  • First-time Access: hello_world Example, used to run the minimum complete interface and board-level display link.

  • Effect Display: showcase Example, used to understand the product interface, controls, and interaction effects; check the example resolution and board-level configuration before use.

  • Hardware-free Preview: Simulator Reference, providing preview, screenshot, and automated interaction methods.

  • Performance Evaluation: benchmark Example, used to measure and compare actual loads on target hardware.