Each template is a complete project; picking one replaces your current canvas.
Serial MonitorDisconnected
Onboard Hardware
Enabled peripherals get includes, globals, init functions, and a call from setup() in the generated sketch.
Rename screen
Project Details
Description appears as a header comment. Setup/loop code is injected into the generated sketch at the marked points and persists across regeneration. Reference any widget by its name (e.g. lv_arc_set_value(mtr_1_indicator, val)).
Saved with the project file (v3).
Restored from auto-save
Validation
Click a row to jump to the widget. Fix errors before generating code.
Export image
PNG and Native SVG both use the same primitive renderers and open
in any image-aware tool. The foreignObject SVG mode is pixel-perfect
in browsers but appears blank in most photo editors.
FI-042 // PANELWRIGHT // Quick Reference
Design touch UIs for the Arduino Giga Display Shield. Drag widgets from the
left palette onto the canvas, edit properties on the right, then click
Generate Code to produce a complete Arduino sketch using LVGL.
Starting a project
Click Templates in the toolbar to start from a curated
project (multimeter, thermostat, weather station, sensor recorder, audio
spectrum, or blank). Click the gear-icon Project button
(or the project title at the top-left) to open
Project Details and set author, target board, LVGL
version, and per-project setup / loop code hooks.
Multi-screen
The tab strip below the toolbar lists all screens. Click a tab to switch.
Click the + to add a screen. The screen marked with an asterisk is the
default screen loaded on boot. Buttons can navigate between screens by
setting their Action property.
Theme
The Theme selector switches the LVGL canvas between
lvgl_default (light) and Tradigital (dark amber/teal). The choice is
saved with the project and applied via lv_theme_default_init at runtime.
The small moon / sun button in the toolbar toggles the
editor itself (toolbar, palette, panels) between dark
and a warm cream/sepia light mode, independent of the canvas theme.
Preference persists across reloads.
Onboard hardware
Click Hardware to enable and configure the Giga R1 and
Display Shield peripherals: microphone, IMU, camera, SD card, WiFi, BLE,
RGB LED, and RTC. Enabled peripherals show as amber dots in the status
bar at the bottom (click any dot to jump back to the modal). Helpers
are generated automatically in the sketch.
Live preview & Serial monitor
Preview docks a live LVGL-accurate preview of the
current screen on the right side, useful while you adjust properties.
Serial opens a Web Serial monitor (Chrome / Edge) that
connects to a flashed Giga over USB so you can watch boot diagnostics
and live output while you iterate. Send commands from the input row.
Output
Generate Code opens a code preview with the full
Arduino sketch. From there, copy to clipboard, download a single .ino,
or download a complete .zip project bundle with a tuned lv_conf.h that
enables exactly the font sizes your project uses.
Export saves the current screen as PNG or SVG.
Open Viewer opens a separate read-only viewer for
sharing or testing.
LVGL version (v8 vs v9)
Set the target LVGL version in Project Details. Default is v9 (current
Arduino Library Manager). Pick v8 if your installed library is older;
the codegen switches API calls (lv_meter / lv_scale, lv_img_create /
lv_image_create, color formats, image descriptors) to match.
Image widget
Drag Image from the palette, then upload a PNG or JPG
from the properties panel. PANELWRIGHT resizes it (max 240 x 180) and
compiles it to RGB565 bytes alongside the sketch. Choose fit mode
(cover / contain / stretch) and opacity. Flash impact appears in the
status bar Memory readout.
Memory budget
The Memory item in the status bar estimates the flash + SRAM impact of
your project, broken down by images, fonts, and widget count. Hover for
the per-category breakdown. Use this to gauge whether you need to trim
images or unused font sizes before flashing.