Skip to content

RTechAI/esp32p4-ui-studio

Repository files navigation

πŸ› οΈ ForgeUI Studio (esp32p4-ui-studio)

The Open-Source AI-Assisted Embedded HMI Studio for ESP32-P4 that transforms natural language into production-ready LVGL applications, reusable widgets, native assets and standalone ESP-IDF projects.

⭐ Leave a Star!

If ForgeUI Studio helped accelerate your embedded development, saved you from proprietary ecosystem lock-in, or slashed your interface compilation times, please leave a GitHub Star! Stars are our open-source currencyβ€”they drive visibility, fund community development, and ensure this framework remains 100% free and subscription-free forever.


⚑ Verified Hardware Performance

Real-world runtime logs captured directly via idf_monitor.py on the physical Waveshare ESP32-P4-WiFi6-Touch-LCD-7B system hardware platform running intensive vector widgets over full layered 1024x600 alpha-blended high-contrast textures show:

  • Fluid Visuals: Fixed, rock-solid 63 FPS continuous hardware-accelerated rendering loop profiles.
  • Minimal Processor Overhead: Low 2.5% CPU utilization footprint under active layout rendering passes.
  • Sub-Millisecond Drawing Passes: Ultra-low 2ms to 5ms draw cycle updates across complex layered geometries.
  • Silicon Optimization: Deep core configuration scripts unlock the high-performance dual-core RISC-V processor straight to its high-speed 360MHz CPU frequency.
  • Expanded Volatile Memory: Auto-maps a 32MB external Hex-PSRAM bank running at a 200MHz bus clock for massive volatile canvas allocations.

βœ… Native Render Parity Achieved

ForgeUI now maintains render parity across:

βœ“ Builder Canvas

βœ“ Browser Preview

βœ“ Generated LVGL Assets

βœ“ Physical ESP32-P4 Hardware

Images imported into ForgeUI are automatically processed into native device-sized assets ensuring identical rendering throughout the complete development workflow.

πŸ–ΌοΈ AI Hero Asset Pipeline V2

ForgeUI Studio now supports automatic AI-generated Hero Backgrounds that are converted into native LVGL assets during import.

Proven Workflow

Natural Language Prompt
            β”‚
            β–Ό
     OpenAI Image Generation
            β”‚
            β–Ό
      PNG Import
            β”‚
            β–Ό
 Automatic Device Preprocessing
            β”‚
            β–Ό
 Center Crop
            β”‚
            β–Ό
 Resize To Active Display
            β”‚
            β–Ό
 Native LVGL Asset Generation
            β”‚
            β–Ό
 Theme Manager
            β”‚
            β–Ό
 Builder Canvas
            β”‚
            β–Ό
 Browser Preview
            β”‚
            β–Ό
 ESP-IDF Export
            β”‚
            β–Ό
 Physical ESP32-P4

Verified

βœ“ AI Hero Generation

βœ“ Automatic Image Processing

βœ“ Native LVGL Asset Generation

βœ“ Builder Rendering

βœ“ Browser Preview

βœ“ ESP32-P4 Hardware

πŸ•ΉοΈ Interactive Button Asset Pipeline β€” Physical Hardware Proven

ForgeUI Studio now supports reusable image-based Interactive Buttons with independent Normal and Pressed visual states.

Buttons can be created manually from existing LVGL-ready assets or generated directly with AI.

Proven Workflow

Button Description
        β”‚
        β–Ό
AI Normal State Generation
        β”‚
        β–Ό
AI Pressed State Generation
        β”‚
        β–Ό
Requested Width & Height
        β”‚
        β–Ό
Interactive Button Preprocessor
        β”‚
        β–Ό
Native-Size PNG Assets
        β”‚
        β–Ό
LVGL C Asset Generation
        β”‚
        β–Ό
Interactive Asset Registry
        β”‚
        β–Ό
Builder Canvas
        β”‚
        β–Ό
Browser Preview
        β”‚
        β–Ό
Native LVGL Export
        β”‚
        β–Ό
Physical ESP32-P4

---
---

## βœ… Verified End-to-End Development Workflow

ForgeUI Studio has now been physically verified from Builder to hardware using both the integrated Studio workflow and a completely detached exported project.

## πŸ€– AI Studio V2 β€” Verified End-to-End AI Interface Generation

ForgeUI Studio now includes **ForgeUI AI Studio**, allowing developers to describe interfaces using natural language and generate validated ForgeUI layouts that can be immediately edited, exported, compiled and flashed to physical hardware.

### Proven AI Workflow

```text
Natural Language Prompt
            β”‚
            β–Ό
   Layout Prompt Helper (Optional)
            β”‚
            β–Ό
        OpenAI GPT
            β”‚
            β–Ό
Validated ForgeUI Layout Document
            β”‚
            β–Ό
Semantic Icon Resolution
            β”‚
            β–Ό
Visual Builder Canvas
            β”‚
            β–Ό
Live Browser Preview
            β”‚
            β–Ό
Native LVGL Code Generation
            β”‚
            β–Ό
Standalone ESP-IDF Project
            β”‚
            β–Ό
Visual Studio Code
            β”‚
            β–Ό
ESP-IDF Build
            β”‚
            β–Ό
Physical ESP32-P4 Hardware

Verified

  • βœ“ AI Layout Prompt Helper
  • βœ“ Live GPT integration
  • βœ“ Structured ForgeUI layout generation
  • βœ“ Automatic JSON validation
  • βœ“ Component validation
  • βœ“ Semantic icon resolution
  • βœ“ Native icon asset generation
  • βœ“ One-click Canvas insertion
  • βœ“ Live Browser Preview
  • βœ“ Native LVGL code generation
  • βœ“ Standalone ESP-IDF project generation
  • βœ“ Physical ESP32-P4 deployment

ForgeUI Studio transforms natural-language interface ideas into fully native LVGL applications while preserving a pure ESP-IDF workflow. Every generated layout remains fully editable before export, giving developers complete control over the final firmware.


πŸ“¦ Proven Development Pipeline

ForgeUI Studio
        β”‚
        β–Ό
Visual Builder / AI Playground
        β”‚
        β–Ό
Canvas & Live Browser Preview
        β”‚
        β–Ό
Native LVGL Code Generation
        β”‚
        β–Ό
Standalone ESP-IDF Export
        β”‚
        β–Ό
Visual Studio Code
        β”‚
        β–Ό
ESP-IDF Build System
        β”‚
        β–Ό
Ninja Toolchain
        β”‚
        β–Ό
ESP32-P4 Hardware

Build Status

  • βœ“ Visual Builder and Canvas
  • βœ“ AI Layout Generation
  • βœ“ Layout Prompt Helper
  • βœ“ Semantic Icon Pipeline
  • βœ“ Browser Preview
  • βœ“ Native LVGL Code Generation
  • βœ“ Standalone ESP-IDF Export
  • βœ“ Independent Visual Studio Code Build
  • βœ“ ESP-IDF v5.5 Compatibility
  • βœ“ Physical ESP32-P4 Flash Validation

🧹 Firmware Maintenance

ForgeUI Studio now includes built-in firmware maintenance tools to keep generated projects clean during rapid AI iteration.

Clean Firmware

Regenerates the generated project while preserving user assets.

Rebuilds:

  • main/CMakeLists.txt
  • 90_Studio_Export.c
  • 90_Studio_Export.h

Preserves:

  • Uploaded assets
  • AI-generated themes
  • Generated icons

Clean Build & Flash

Performs a complete firmware cleanup before rebuilding.

Actions:

  • Removes temporary build files
  • Clears ESP-IDF build output
  • Regenerates CMake
  • Regenerates Studio export files
  • Performs a clean rebuild
  • Flashes the physical ESP32-P4

This eliminates stale generated files, historical assets and cached build artefacts, ensuring every deployment is produced from a clean project state.

πŸš€ Core Philosophy: Zero-Bloat Native Output

ForgeUI Studio completely removes the engineering overhead of setting up modern embedded display architectures:

[Eliminated Workspace Overhead]         [Preserved Native Low-Level Control]
Manual coordinate calculations    ───►  Pure Native C Code Syntax Structures
Monolithic UI programming         ───►  Standard ESP-IDF Toolchain Optimization
Manual graphic file formatting    ───►  Raw 2D-DMA Hardware Acceleration Loops
Complex CMake script management   ───►  Zero Web Runtimes Ever Deployed to Flash

No HTML, CSS, JavaScript, Node.js, or browser runtimes ever deploy onto the microcontroller. Everything compiles down into pure embedded firmware.


πŸ› οΈ Complete Feature Matrix

1. Visual Builder & Design Studio

  • Visual Canvas β€” Drag, drop, resize and configure LVGL components including Buttons, Text, Images, Charts, Arcs, Bars, Scales, LEDs, Calendars, Rollers, Switches and many more.

  • AI Layout Designer β€” Generate complete embedded HMI layouts from natural language using the integrated ForgeUI AI Playground.

  • AI Layout Prompt Helper β€” Guided prompt builder for creating structured industrial dashboards and embedded interfaces.

  • AI Asset Designer β€” Generate reusable ForgeUI widgets and standalone industrial artwork using AI.

  • Forge Asset Library β€” Save, organise, reuse and insert AI-generated widgets and artwork across projects.

  • Dynamic Theme Manager V2 β€” Includes 25+ built-in industrial themes with persistent hero backgrounds and custom asset support.

  • Semantic Icon Browser β€” Search and use over 9,500 React Icons. AI-generated icon requests are automatically resolved into native LVGL-ready assets.

  • Live Browser Preview β€” Instantly preview layouts, widgets, themes and assets before exporting or flashing hardware.


2. Native Asset Pipeline

  • Device-Aware Image Processing β€” Automatically preprocesses imported artwork and AI-generated images for the active display resolution.

  • Native LVGL Asset Generation β€” Converts PNG, JPG and SVG assets into optimized LVGL image resources using the local LVGLImage.py pipeline.

  • Automatic Asset Registry β€” Manages uploaded images, icons, AI artwork and generated assets with automatic LVGL conversion and project integration.

  • Theme & Hero Pipeline β€” AI-generated hero backgrounds integrate directly into the Theme Manager, Builder Canvas and Browser Preview.


3. Build & Deployment

  • One-Click Build & Flash β€” Build, deploy and monitor firmware directly from ForgeUI Studio.

  • Clean Build & Flash β€” Regenerates project files, refreshes CMake, performs a clean ESP-IDF build and flashes the physical device.

  • Inline Flash Console β€” Streams live build output, firmware logs and deployment status directly inside the Studio.

  • Standalone ESP-IDF Export β€” Generate fully independent ESP-IDF projects that build directly in Visual Studio Code without requiring ForgeUI Studio.

  • Native ESP32-P4 Workflow β€” Zero cloud runtime, zero embedded web technologies. Every interface compiles into pure native LVGL C running on physical ESP32-P4 hardware.

AI Capabilities

  • AI Layout Generation
  • AI Layout Prompt Helper
  • AI Hero Background Generation
  • AI Asset Designer
  • AI Artwork Generation
  • Forge Asset Library
  • Reusable Widget Library
  • Semantic Icon Resolution
  • Native Icon Asset Generation
  • Device-Aware Image Processing
  • Native LVGL Asset Generation
  • Theme Manager Integration
  • Asset Manager Integration

Proven Pipeline

AI Artwork / Hero Prompt β”‚ β–Ό OpenAI Image Generation β”‚ β–Ό ForgeUI Asset Import β”‚ β–Ό Automatic Device Preprocessing β”‚ β–Ό Native 1024Γ—600 Processing β”‚ β–Ό LVGLImage.py β”‚ β–Ό Generated LVGL C Asset β”‚ β–Ό ForgeUI Asset Registry β”‚ β–Ό Theme Manager / Asset Library β”‚ β–Ό Builder Canvas β”‚ β–Ό Live Browser Preview β”‚ β–Ό Native LVGL Code Export β”‚ β–Ό Standalone ESP-IDF Project β”‚ β–Ό Build & Flash β”‚ β–Ό Physical ESP32-P4

πŸ“ Decoupled Workspace Architecture

Clicking Export Standalone Project completely decouples ForgeUI Studio from the generated firmware, producing a fully independent ESP-IDF workspace that can be built, flashed, version controlled, and shared without requiring ForgeUI Studio.

The exported project has been physically verified by:

  • βœ“ Opening directly in Visual Studio Code
  • βœ“ Building with the Espressif ESP-IDF Extension
  • βœ“ Flashing to a physical ESP32-P4
  • βœ“ Running independently of ForgeUI Studio
ForgeUI Studio
        β”‚
        β–Ό
   Export Standalone Project
        β”‚
        β–Ό
 Independent ESP-IDF Workspace
        β”‚
        β–Ό
   Visual Studio Code Workspace
        β”‚
        β–Ό
   Official ESP-IDF Extension Build
        β”‚
        β–Ό
   Ninja Toolchain Binary Flash
        β”‚
        β–Ό
 Physical ESP32-P4 Hardware Run

Example Export Destination Target:

C:\ForgeUI-Exports\ForgeUI_Export_003

Project Structural Workspace Directory Tree:

esp32p4-ui-studio/
β”œβ”€β”€ studio/                     # React / Next.js visual builder workspace
β”œβ”€β”€ tools/lvgl/LVGLImage.py     # Local offline raw LVGL asset asset converter
└── firmware/ForgeUI-One/       # Standalone ESP-IDF reference deployment target
    β”œβ”€β”€ .vscode/                # Pre-configured editor workspace files
    β”œβ”€β”€ partitions.csv          # Linear flash partition memory layouts
    β”œβ”€β”€ sdkconfig.defaults      # Default optimization settings and frequency parameters
    β”œβ”€β”€ sdkconfig               # Actively generated target compilation properties
    β”œβ”€β”€ CMakeLists.txt          # Top-level project build declaration file
    └── main/
        β”œβ”€β”€ assets/uploads/     # Auto-converted target image data structs (.c)
        β”œβ”€β”€ 00_ForgeUI_Config.h # Global canvas pin constraints and geometric definitions
        β”œβ”€β”€ 01_FG_Runtime.c/.h  # Threaded interface redraw hooks and execution timers
        β”œβ”€β”€ 20_RTC.c/.h         # Native I2C real-time system clock drivers (DS3231)
        β”œβ”€β”€ 30_Audio.c/.h       # Asynchronous MP3 / WAV hardware decoding runtimes
        β”œβ”€β”€ 30_WIFI.c/.h        # Hosted SDIO Wi-Fi wireless co-processor management (ESP32-C6)
        β”œβ”€β”€ 40_SD.c/.h          # FATFS system memory interface drivers
        └── 90_Studio_Export.c  # Clean native generated LVGL 9 application source code

Standalone Export Philosophy

ForgeUI Studio maintains absolute ownership over visual project generation layouts, while ESP-IDF maintains total ownership over low-level code compilation and hardware deployment.

Following export, the directory acts as an independent application. Developers are completely free to track progress inside isolated Git repositories and integrate backend modifications without vendor lock-in.


πŸ’Ύ Optimized Flash Partition & Memory Map

Your exported code incorporates a high-capacity custom allocation scheme designed to prevent memory overflows when managing dense layout interface assets:

1. Flash Partition Allocations (partitions.csv)

  • factory (8 MB / 0x10000, 8M): Massive linear code space window allocated exclusively for user runtime firmware logic, application states, and UI layouts.
  • storage (7 MB / 0x810000, 7M): High-capacity dedicated local SPIFFS partition block ensuring static background structures and image file array matrices remain safe from software layer collisions.

2. Low-Level Silicon Optimization Settings

  • Direct 2D-DMA Tunneling: The display refresh configuration parameters (bsp_display_cfg_t) lock pixel allocation pathways directly to active DMA engines (.buff_dma = true) while enforcing direct internal RAM layout tracking (.buff_spiram = false). This completely eliminates frame rendering transmission latency over slower external memory lanes.
  • Thread-Safe Graphics Handshaking: Visual initialization calls inside main.c are fully encapsulated within native Espressif display locks (bsp_display_lock(0)), ensuring your graphic compositions update with complete structural integrity across multi-core task switches.

ForgeUI Philosophy

Build it.

Prove it.

Flash it.

Improve it.

Repeat.

Current Development Status

ForgeUI Studio has now proven:

βœ“ Visual Builder

βœ“ AI Layout Generation

βœ“ AI Layout Prompt Helper

βœ“ AI Hero Background Generation

βœ“ AI Asset Designer

βœ“ AI Artwork Generation

βœ“ Forge Asset Library

βœ“ Reusable Widget Library

βœ“ Semantic Icon Pipeline

βœ“ Native Icon Asset Generation

βœ“ Device-Aware Asset Pipeline

βœ“ Automatic Image Preprocessing

βœ“ Native LVGL Asset Generation

βœ“ Theme Manager Integration

βœ“ Browser Preview

βœ“ Native LVGL Export

βœ“ Standalone ESP-IDF Export

βœ“ Independent Visual Studio Code Build

βœ“ One-Click Build & Flash

βœ“ Physical ESP32-P4 Validation

About the Creator

Hi, I'm Scott Forster from New Zealand.

ForgeUI Studio began as a personal project to make embedded HMI development easier, faster and more enjoyable. As someone who enjoys solving real engineering problems, I wanted a tool that could take an idea from a simple prompt all the way through to a working interface running on physical ESP32 hardware.

Every feature in ForgeUI is developed with a simple philosophy:

Build it. Prove it. Flash it. Improve it.

The project has grown into an open-source AI-assisted embedded UI platform combining visual design, AI-powered generation, LVGL, and ESP-IDF into a single workflow.

ForgeUI Studio is developed in collaboration with ChatGPT, which serves as a coding assistant, architectural sounding board and rapid prototyping partner. While I define the vision, validate the hardware and direct the engineering, ChatGPT helps accelerate implementation, refactoring and documentation., which has been an invaluable coding assistant, sounding board and development partner throughout the project. While I design the architecture, test the hardware and drive the vision, ChatGPT has helped accelerate development by assisting with implementation, refactoring and documentation.

This project is shared with the community in the hope that it makes embedded development more accessible and inspires others to build amazing products.

I welcome feedback, ideas and contributions from developers around the world.


Scott Forster
Creator & Lead Developer β€” ForgeUI Studio

πŸ“§ forgeui.esp32@gmail.com