Widgets

Every widget in the palette, a page each: a picture of it, every setting and a worked example.

The screen

The root of every design: its colour, its events, and the four screen-only triggers.

Basic

The building blocks: panels, containers, buttons, labels, icons, images, text boxes, tabs, lists, tables, tiles and windows.

Panel, Container, Button, Label, Icon, Image, Textarea, Tabview, List, Table, Tileview, Window

Controller

What a finger works: sliders, switches, check boxes, dropdowns, rollers, arcs, spin boxes, keys and calendars.

Slider, Joystick, Switch, Checkbox, Dropdown, Roller, Arc, Spinbox, Image Button, Keyboard, Calendar, Colorwheel

Visualiser

What shows a value: bars, scales, LEDs, lines, charts and spinners.

Bar, Scale, LED, Line, Shape, Canvas, Chart, Spinner

System

Joining a network, the internet radio and its icon, and the AI assistant.

WiFi Setup, Internet Radio, Radio icon, AI Assistant

Ready-made

Finished pieces to drop in: the clock, timer, weather card, QR code, data list, map and more.

Spectrum analyser, Notification badge, QR code, Weather card, Data list, Item text, Map, Map marker, Web server, Firmware update, Animation, Sprite, Clock, Timer, Bluetooth LE icon, Bluetooth audio icon, Camera view, Video player, Two-way radio, WiFi by phone

About these pages

The widgets are in the groups the palette has. Open a group to see its widgets, and a widget for its page: a picture of it as it is dropped, its settings as the Inspector shows them, a table of what each setting does and a small worked example. Every widget also has the common things - name, geometry, flags, layout, styles, events and bindings - which have pages of their own: Position and layout, Styles, Events and actions and Variables and bindings.

LVGL 8 and 9. The catalogue is the same on both, but a few settings only exist on one. The Image widget's Inner align is LVGL 9 only, the Label's Recolor is LVGL 8 only. Two widgets exist on one version only: the Scale is LVGL 9 only, and the Colorwheel is LVGL 8 only, because LVGL 9 removed it. The palette greys whichever one your project's version lacks and says why. The generator switches every renamed call (lv_img_* to lv_image_*, lv_obj_clear_flag to lv_obj_remove_flag) for you.

Each widget has a picture of it as it is dropped, its settings as the Inspector shows them, and a small worked example: steps in the designer’s own words, and what they come to. The examples are built on the Cheap Yellow Display, 320 x 240 and LVGL 9; the few that need PSRAM, a camera or a microphone are built on the LCDWIKI 2.8" ESP32-S3, which has the same size of screen. A picture marked Preview was taken with the Preview button pressed, as the panel will draw it.