Arc

Arc bind value

An arc and a slider co-bound to one subject; moving the slider rotates the arc.

Both widgets target subject_value via bind_value. The slider is the editor; the arc is a read-only visualizer. Because the binding is two-way at the widget level, the arc would also push updates back if it were interactive — but here we lock it with clickable="false" so it stays purely indicative.

Arc change rate

Limit how fast the value can change while dragging.

change_rate caps the maximum value change per second triggered by user input. The lower setting responds sluggishly to fast pointer gestures, while the higher setting tracks the pointer almost instantly — useful for fine-tuning versus quick-jump knobs.

Arc value-changed event

React to drag updates by logging and refreshing a sibling label.

The arc emits LV_EVENT_VALUE_CHANGED continuously while it's being dragged. The handler reads the current value via lv_arc_get_value, logs it, and updates a label with lv_label_set_text_fmt — any LVGL function may be called from the event callback.

Arc image indicator

Use bitmaps as the arc background and indicator — the arc shape is cut from each image.

arc_image_src replaces the solid arc_color with pixels sampled from a bitmap, centred on the arc's centre point. Here the MAIN part uses a dark segmented-ring bitmap so the background track shows individual tiles, and the INDICATOR part uses a glowing-cyan version of the same ring so the filled portion lights up. Both images are 224×224 and match the 180×180 widget with arc_width="23".

Place a Widget on the arc's knob

Position a label so it tracks the arc's current value angle.

lv_arc_align_obj_to_angle(arc, widget, radius_offset) repositions widget so its centre sits on the same angle as the arc's current value, offset radially by radius_offset pixels. Called from a LV_EVENT_VALUE_CHANGED handler, it makes any sibling widget follow the knob — useful for a value label, a marker, or a secondary indicator. lv_arc_rotate_obj_to_angle does the same but also rotates the widget to point along the angle.

Arc indicator modes

Compare normal, reverse, and symmetrical mode side by side.

Three arcs share the same min/max range and value but use different mode settings. Normal grows clockwise from min_value, reverse grows counter-clockwise from max_value, and symmetrical grows outward from the middle of the range — making it obvious where each mode anchors the indicator.

Arc as pie-chart slices

Stack five arcs at the same centre to render a coloured pie chart.

Each slice is a separate lv_arc aligned at the same centre. bg_start_angle and bg_end_angle carve out the wedge; the slice is painted by LV_PART_MAIN (the bg track) — there's no need to set a value just to make an indicator cover the bg, instead we hide the indicator entirely with arc_opa="0" on the indicator selector. The MAIN style sets arc_width to half the radius so the band reaches the centre, and arc_rounded="false" flattens the end caps so adjacent slices share their seam pixels exactly (rounded caps overshoot and leave gaps).

The three shared parts (thick flat-ended main, invisible indicator, invisible knob) are factored into named styles. Because position and size are style properties too, the style_pie_main style also pins width/height/align — so each <lv_arc> only carries its slice angles and its colour.

Arc rotation offset

Rotate the whole dial around its center.

The rotation attribute shifts both background and indicator angles by the same amount, keeping their relative span. The two arcs share the same bg_start_angle, bg_end_angle, and value, so only the rotation offset distinguishes them visually.

Arc with explicit indicator angles

Drive the indicator directly via start_angle and end_angle.

The left arc draws the indicator the usual way, from value, mode, and range. The right arc sets start_angle and end_angle explicitly, which overrides the value-based drawing. This is handy for static graphics or custom dial layouts where the indicator span is not tied to a numeric value.

Arc styling

Style the background ring, the active indicator, and the knob.

Arc has three parts: MAIN (the unfilled background ring), INDICATOR (the active arc), and KNOB. Each is styled with a named style block via selector="main|indicator|knob". arc_color, arc_width, and arc_rounded are the line-style equivalents for ring segments; the knob uses the regular background properties since it's drawn as a fill.

Arc value and range

Show how min_value/max_value map onto the same background arc.

Two arcs with different numeric ranges share the same visible background span. The indicator length depends on (value - min_value) / (max_value - min_value), so any range — including one crossing zero — produces the same relative fill.