Skip to content

RTechAI/esp32p4-ui-studio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

118 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🛠️ ForgeUI Studio (esp32p4-ui-studio)

The Open-Source Visual HMI Studio, Local Asset Pipeline, and Standalone Code Generator for Espressif ESP32-P4 Running Native LVGL v9 and ESP-IDF v5.5+.


⭐ 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.

✅ 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

Natural Language Prompt
            │
            ▼
        OpenAI GPT
            │
            ▼
Validated ForgeUI Layout Document
            │
            ▼
Visual Builder Canvas
            │
            ▼
Zero-Delay Browser Preview
            │
            ▼
Highly-Optimized LVGL Export
            │
            ▼
Independent Standalone ESP-IDF Project
            │
            ▼
Visual Studio Code
            │
            ▼
ESP-IDF Build
            │
            ▼
Physical ESP32-P4 Hardware

Verified

  • ✓ Live GPT integration
  • ✓ Structured ForgeUI document generation
  • ✓ Automatic JSON validation
  • ✓ Component validation
  • ✓ One-click Canvas insertion
  • ✓ Browser preview
  • ✓ Native LVGL export
  • ✓ Independent ESP-IDF project generation
  • ✓ Physical ESP32-P4 deployment

This architecture transforms ForgeUI Studio from a traditional visual editor into an AI-assisted embedded interface design platform while preserving completely native LVGL and ESP-IDF output.

Proven Workflow

ForgeUI Studio / AI Playground
              │
              ▼
    Visual Builder UI Canvas
              │
              ▼
    Zero-Delay Browser Preview
              │
              ▼
    Highly-Optimized LVGL Export
              │
              ▼
  Independent Standalone ESP-IDF Project
              │
              ▼
    Visual Studio Code Workspace
              │
              ▼
    Official ESP-IDF Extension Build
              │
              ▼
  Native Ninja Toolchain Binary Flash
              │
              ▼
 Physical Waveshare ESP32-P4 Silicon

Build Status Indicators

  • ✓ Browser Canvas Preview: Verified responsive widget rendering and coordinate validation layers.
  • ✓ LVGL Code Generation: Verified structural generation outputting clean static native C vectors.
  • ✓ Standalone Workspace Export: Verified one-click asset decoupling to external target files.
  • ✓ Independent VS Code Build: Verified clean cross-compilation with standard riscv32-esp-elf tools.
  • ✓ ESP-IDF Extension Compatibility: Verified matching manifest definitions with Ninja build runners.
  • ✓ Physical ESP32-P4 Flash: Verified operational boot cycles using native Web-Serial or hardware tools.

🚀 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. Unified Visual Canvas Workflow

  • Active Component Panels: Drag, drop, scale, and visually configure multi-state components including vector Arcs, Charts, Buttons, Calendars, Rollers, Textareas, Lines, Switches, and clean Tabviews.
  • Dynamic Theme Manager V2: Features 25+ built-in, low-contrast industrial design presets (Industrial Carbon, Reactor Hex, Cyber Teal Pro, Quantum Flow, Neon Horizon). Supports automatic background styling behaviors using repeated tiling or full resolution layouts.
  • Zero-Dependency Local Preview: Test visual properties, boundary geometries, responsive alignments, and style shifts instantly inside a sandboxed browser wrapper engine with zero compile-time delay.
  • Batch-Processing Icon Browser: Native integration with an indexing tree of 9,514 Feather Icons using an active staging asset cart workspace panel. Select multiple vector objects, queue them up, and inject them into your local asset pool simultaneously.

2. Automated Build & Local Flashing Pipeline

  • Inline Flash Console: Trigger compilation, execute local toolchain checks, run background memory repairs (REPAIR ESP-IDF MANAGED COMPONENT CACHE), and stream real-time logging records directly through local browser child processes.
  • Local Image Converter Pipeline V1: Zero cloud dependencies, zero external telemetry. Drag-and-drop PNG, JPG, or SVG assets directly into a local Python converter utility (tools/lvgl/LVGLImage.py). The pipeline handles local thumbnail layout mapping, performs precise ARGB8888 vector-to-raster transformations, generates clean static .c image array buffers on disk, and injects safe LV_IMAGE_DECLARE(...) expressions into your build tree automatically.

📁 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.