Shape
A filled triangle, arrow, needle or three corners of your own. The Line only outlines, and LVGL has no filled polygon, so this draws one: use it for a pointer, a compass needle or an arrow that turns.
| Setting | Default | What it does |
|---|---|---|
| Shape | Triangle | Triangle, Arrow, Needle (a long thin diamond) or Three points of my own. It is filled with the Main part’s background colour and opacity. |
| Points | Up | For the first three shapes: the way the tip points before any rotation (Up, Right, Down, Left). The shape fills the widget’s box. |
| Head length | 45 % | Arrow only: how much of its length is the head. |
| Shaft width | 40 % | Arrow only: how wide the shaft is, against the head. |
| Widest at | 75 % | Needle only: how far from the tip it is widest. |
| Corners | 30,0 60,60 0,60 | Three-points shape only: three x,y lines, in pixels from the widget’s top-left corner. A corner outside the box is drawn there too. |
| Rotation | 0 deg | Turns the shape clockwise about its pivot. Bind it to a value to make a needle or a compass follow it. The widget’s box, which is what a finger presses, does not turn. |
| Pivot X, Pivot Y | -1 (the middle) | The point it turns about, in pixels from the box’s left and top. A gauge needle turns near its tail. |
Styling. Only the fill is drawn: the Main part’s background colour and opacity, in every state, so a Pressed or Checked colour and a binding on the colour work. Its border, outline, shadow, radius, gradient and picture are not drawn, and are hidden in the Inspector. Where two parts of an arrow meet, an opaque fill is joined cleanly; a translucent one may show a faint seam.
Exports. Arduino and ESP-IDF. MicroPython refuses it, and so does ESPHome, which has no polygon. Compiled and drawn by LVGL 9.4.0 and 8.3.11 to match the designer, not run on a board.
Example: a needle that follows a slider
- Drag a Shape onto the screen. Give it Width
20and Height100. - Under Shape settings choose Shape Needle, and set Pivot Y to
80so it turns near its tail. - Add a Slider from -90 to 90 and bind the Shape’s Rotation to it, in the same way as a variable is bound to any property (see Variables and bindings).