Getting Started

LCD Ultra Pro is a browser-based visual UI designer for ESP32 LCD panels. Design your interface with drag & drop widgets, export LVGL 8.4 C code, flash firmware to your device, and preview your design live on the physical display — all from your browser.

Quick Start

  • •Open app.lcdultrapro.com in Chrome or Edge
  • •Click the LCD button in the top bar and select your panel
  • •Drag widgets from the left palette onto the canvas
  • •Edit properties in the right panel
  • •Click Export to download the LVGL C project ZIP
  • •Flash the receiver firmware, then use Mirror for live preview

LCD Ultra Pro requires Chrome or Edge. Firefox does not support the Web Serial API needed for Flash and Mirror.

Requirements

  • •Google Chrome or Microsoft Edge browser
  • •ESP32 or ESP32-S3 based LCD panel
  • •USB data cable (not charge-only)
  • •CH343 USB-UART driver for firmware flashing

UI Editor

The canvas represents your LCD screen at the exact resolution of the selected panel. What you see is what appears on the physical display.

Canvas Navigation

  • •Zoom: Ctrl + Scroll or toolbar buttons
  • •Pan: Space + Drag or middle mouse button
  • •Reset zoom: Click the 1:1 button

Selecting & Moving Widgets

  • •Click to select a single widget
  • •Ctrl + Click to add/remove from selection
  • •Drag a selection box to select multiple widgets
  • •Drag to move — or use Arrow keys (1px) / Shift+Arrow (10px)
  • •Drag resize handles on corners and edges to resize
  • •Escape to deselect all

Right-click Menu

  • •Duplicate — copy widget with 15px offset (Ctrl+D)
  • •Bring to Front / Send to Back — layer ordering
  • •Lock / Unlock — prevent accidental moves
  • •Delete — remove widget (Del key)

Screens

A project can have multiple screens. Use the screen bar at the bottom to switch, rename (double-click), or add new screens (+). Each screen is a separate lv_scr_act() in the generated code.

Screen Background

  • •Solid — single background color
  • •Gradient — two colors with direction (right, bottom, diagonal, radial)
  • •Image — full-screen background image

Keyboard Shortcuts

Ctrl+Z      Undo
Ctrl+Y      Redo
Ctrl+S      Save
Ctrl+D      Duplicate selected
Ctrl+A      Select all
Delete      Delete selected
Arrow       Move 1px
Shift+Arrow Move 10px
Escape      Deselect / Close modal

Widgets

47 LVGL 8.4 widgets organized into 5 categories. Drag from the palette or double-click to add at center. Search the palette to find any widget quickly.

◻ Basic (8)

  • •Object (lv_obj) — Base container with full style control
  • •Label (lv_label) — Text: wrap, scroll, dot, clip modes
  • •Button (lv_btn) — Clickable button with label
  • •Image (lv_img) — Bitmap image display
  • •Image Button (lv_imgbtn) — Button with image states
  • •Line (lv_line) — Draw lines between points
  • •Button Matrix (lv_btnmatrix) — Grid of buttons
  • •Span (lv_span) — Rich text with mixed styles

◉ Input (13)

  • •Arc (lv_arc) — Circular slider with angle control
  • •Slider (lv_slider) — Horizontal or vertical value slider
  • •Switch (lv_switch) — On/off toggle
  • •Checkbox (lv_checkbox) — Checkable option
  • •Dropdown (lv_dropdown) — Select from list
  • •Roller (lv_roller) — Scrollable selector wheel
  • •Textarea (lv_textarea) — Text input with password mode
  • •Keyboard (lv_keyboard) — On-screen keyboard
  • •Color Wheel (lv_colorwheel) — HSV color picker
  • •Spinbox (lv_spinbox) — Number input with +/− buttons
  • •Stepper (lv_stepper) — Multi-step navigator
  • •Rating (lv_rating) — Star rating selector
  • •Color Picker (lv_cpicker) — Hue/saturation/value picker

◈ Display (12)

  • •Bar (lv_bar) — Linear progress bar
  • •Chart (lv_chart) — Line or bar data chart
  • •Meter (lv_meter) — Gauge/dial with needle
  • •LED (lv_led) — Status indicator light
  • •Table (lv_table) — Grid data display
  • •Calendar (lv_calendar) — Date picker
  • •Spinner (lv_spinner) — Animated loading indicator
  • •Anim Image (lv_animimg) — Image sequence player
  • •Circle — Simple filled circle
  • •Progress Bar — Bar with percentage label
  • •Gauge — Needle gauge with unit
  • •Status Bar — Info bar with left/right text

▣ Container (12)

  • •List (lv_list) — Scrollable button list
  • •Message Box (lv_msgbox) — Modal dialog
  • •Tab View (lv_tabview) — Tabbed content pages
  • •Tile View (lv_tileview) — Swipeable tile grid
  • •Window (lv_win) — Floating window with title bar
  • •Menu (lv_menu) — Hierarchical navigation menu
  • •Panel — Styled container with optional title
  • •Page (lv_page) — Scrollable container
  • •Flex Container — Row/column flex layout
  • •Tile — Individual tile
  • •Card — Card with title and subtitle
  • •Nav Drawer — Slide-in navigation drawer

◆ Advanced (2)

  • •Canvas (lv_canvas) — Low-level pixel drawing surface
  • •Toast — Notification popup (success/error/warning/info)

Widget Properties

Click any widget to open its properties in the right panel. Common sections:

  • •Position & Size — X, Y, Width, Height in pixels
  • •C ID — Custom C identifier for code generation (e.g. relay1 → lv_btn_relay1)
  • •Widget properties — text, value, min/max, options (widget-specific)
  • •Style — background, border, padding, shadow, text color, font size
  • •Visibility — show/hide on canvas
  • •Locked — prevent moving/resizing
  • •Layer — Bring to Front, Send to Back, Move Up, Move Down

Use the C ID field to give your widgets meaningful names in the generated code. Example: setting C ID to "relay1" generates lv_btn_relay1 in C.

LCD Panels

Click the LCD button in the top bar to open the panel library. Select your panel and the canvas instantly resizes to the exact screen resolution.

Supported Panels

LCD Ultra Pro supports a wide range of popular ESP32 LCD panels. New panels are added with every update.

Memory Estimator

After selecting a panel, the Memory Estimator in the right panel shows real-time PSRAM and SRAM usage based on your current design. Click to expand for a detailed breakdown.

  • •PSRAM — frame buffer (W×H×2×2 bytes), background images, image widgets
  • •SRAM — widget heap (~350–1900 bytes per widget), LVGL draw buffer, system overhead
  • •🟢 Safe: under 60% | 🟡 Caution: 60–80% | 🔴 Warning: 80–95% | 💀 Critical: 95%+

Code Export

Click the Export button to download a complete LVGL 8.4 C project as a .zip file.

Generated Files

  • •ui.c / ui.h — Main UI init calling all screen inits
  • •ui_Screen1.c — Per-screen widget creation code
  • •lv_conf.h — LVGL configuration for your panel
  • •Panel driver files — Manufacturer's original LCD driver files
  • •ProjectName.ino — Ready-to-upload Arduino sketch
  • •README.txt — Setup instructions

The exported ZIP includes the manufacturer's original driver files for your specific panel — no manual driver setup needed.

Arduino IDE Setup

  • •Install ESP32 board support (Espressif Systems)
  • •Install LVGL 8.4 library — NOT version 9.x
  • •Install GFX Library for Arduino (moononournation)
  • •Open the exported .ino file
  • •Set board settings (see below)
  • •Select port and Upload

Board Settings (ESP32-S3)

Board:            ESP32S3 Dev Module
PSRAM:            OPI PSRAM
Flash Size:       16MB
USB CDC On Boot:  Enabled
Partition Scheme: Huge APP (3MB No OTA)
Upload Speed:     921600

Always install LVGL 8.4 — the generated code is not compatible with LVGL 9.x.

Flash Firmware

Upload the LCD Ultra Pro receiver firmware directly from the browser — no Arduino IDE needed for this step.

How to Flash

  • •Click Flash in the top bar
  • •Select your panel from the list
  • •Put the device in bootloader mode (see below)
  • •Click Start Flash
  • •Select the USB port in the browser dialog
  • •Wait ~10 seconds for upload to complete
  • •The LCD should show "LCD Ultra Pro V1" after reboot

Bootloader Mode

  • •Hold the BOOT button on your ESP32
  • •Plug in the USB cable (or press RST while holding BOOT)
  • •Release BOOT — device is now in flash mode
  • •Select the CH343/UART port in the browser dialog

Command Line Alternative

python -m esptool --chip esp32s3 --port COM7 --baud 921600 write-flash 0x10000 firmware.bin

Select the UART port (CH343) for flashing — not the USB JTAG/CDC port.

USB Mirror

Mirror streams your canvas in real-time to the physical LCD over USB. Any change you make in the editor appears on the device within ~300ms — no reflashing needed.

How to Use

  • •Flash the receiver firmware first
  • •Connect ESP32 via USB — LCD shows "USB Mirror — Waiting..."
  • •Click Mirror in the top bar
  • •Select the USB CDC port (0x303a:0x1001) in the dialog
  • •Wait ~3 seconds for ESP32 to initialize
  • •Your canvas appears on the LCD!
  • •Edit anything — LCD updates automatically after ~300ms pause

How It Works

  • •Canvas is captured and compressed as JPEG (~80% quality)
  • •Sent over USB CDC using the LUPF protocol
  • •ESP32 decodes JPEG and displays using the panel driver
  • •Only sends when canvas changes (delta detection)
  • •Stops automatically on USB disconnect

Performance by Panel Size

  • •Small panels (480×320): fast, near real-time
  • •Medium panels (800×480): ~200ms per frame
  • •Large panels (1024×600): ~500ms per frame

Mirror requires the receiver firmware to be flashed. Select the USB CDC port (0x303a:0x1001), not the CH343 UART port.

Save & Cloud

Local Save

  • •Press Ctrl+S or click Save
  • •Auto-saves locally every 30 seconds
  • •Stored in browser storage — tied to this browser/device

Cloud Save

  • •Click the Cloud button to sync to LCD Ultra Pro cloud
  • •Accessible from any device when logged in
  • •Always cloud-save before closing the browser

Import / Export

  • •Export — generates a .zip with the full LVGL C project
  • •Import — load a previously exported project .zip file

Tips & Tricks

Design Tips

  • •Design at 1:1 zoom to see true pixel sizes
  • •Watch the Memory Estimator — crash risk above 95%
  • •Use Labels instead of Image widgets when possible (lower memory)
  • •Use the C ID field to give widgets meaningful names in generated code
  • •Keep widget count reasonable — each widget uses SRAM

Common Issues

  • •Blank LCD after flash: check correct panel is selected
  • •Mirror not working: receiver firmware must be flashed first; select CDC port 0x303a:0x1001
  • •Export won't compile: install LVGL 8.4, not 9.x
  • •Port not found: use Chrome or Edge, not Firefox
  • •ESP32 resets when Mirror connects: normal behavior — wait 3s for init
  • •Flash fails: try command line esptool as fallback

After flashing firmware once, use Mirror for all subsequent previews — no need to reflash after every change.