🎡 Arc
The Arc widget is used to visualize values or progress along a curved path. It is a highly customizable component frequently used to create speedometers, circular loading bars, or volume regulators.
⚙️ Properties (Props)
These properties are defined by the ArcWidget interface in the Studio and control both the visual range and the data representation.
| Property | Type | Description |
|---|---|---|
| Value | number | The current progress value shown on the indicator. |
| Range | number | The Min and Max limits for the value (e.g., 0-100). |
| Start / End Angle | number | Defines the start and end positions of the foreground indicator arc (in degrees). |
| BG Start / End Angle | number | Defines the start and end positions of the background track (in degrees). |
🎨 Visual Configuration
The Arc consists of two main parts that can be styled independently in the Style Panel:
- The Main (Background): The full path of the arc, usually styled with a subtle color or transparency to indicate the total possible range.
- The Indicator: The segment that represents the current
value. This is typically highlighted with a solid color or gradient. - Rotation: By default, 0° is at the 3 o'clock position. You can rotate the entire widget to align the arc to your design (e.g., a 180° semi-circle facing upward).
⚡ Runtime API (Lua)
The Arc is often updated dynamically via sensor data or user input. Use the following methods in the Logic and Events system:
-- Update the arc value based on a temperature reading
arc_temp:set_value(data.current_temp)
-- Change the background arc range at runtime
arc_temp:set_bg_angles(135, 45)
-- Adjust the indicator color if the value is too high
if arc_temp:get_value() > 90 then
arc_temp:set_style_arc_color(0xFF0000) -- Red alert
end
AI APPEARANCE
Creating glass-effect or glowing arcs can be complex. Use AI Appearance and try a prompt like: "A glowing neon-cyan arc with a dark semi-transparent background track."