Geometry Arc

Overview

The Geometry Arc widget is a lightweight GUI drawing component designed for rendering arcs and circular shapes in user interfaces. It provides a simple and user-friendly API to customize arc properties such as start angle, end angle, line width, and color, addressing various arc drawing requirements.

Core Features

Description	API
Create Widget	`gui_lite_arc_create()`
Set Position	`gui_lite_arc_set_position()`
Set Radius	`gui_lite_arc_set_radius()`
Set Color	`gui_lite_arc_set_color()`
Set Start Angle	`gui_lite_arc_set_start_angle()`
Set End Angle	`gui_lite_arc_set_end_angle()`
Set Line Width	`gui_lite_arc_set_line_width()`
Register Click Event Callback	`gui_lite_arc_on_click()`

Angle Description

The arc uses a standard mathematical coordinate system for angles:

0°: Points to 3 o'clock (due east)
90°: Points to 6 o'clock (due south)
180°: Points to 9 o'clock (due west)
270°: Points to 12 o'clock (due north)

Features Highlights

High Performance: Utilizes optimized rendering algorithms for smooth performance
Anti-Aliasing: Supports anti-aliasing for smooth visual effects
Flexible Configuration: Allows customization of angle range, line width, and color
Lightweight: Minimal memory footprint, suitable for embedded systems and resource-constrained environments
Ring Support: Automatically draws a full circle when start and end angles differ by 360°

Use Cases

The arc widget is useful in scenarios such as:

Progress Indicators: Displaying loading progress, battery levels, etc.
Dashboard Gauges: Constructing speedometers, thermometers, etc.
Data Visualization: Showing proportional data, statistical charts
UI Decoration: As decorative elements in the interface
State Indicators: Representing system statuses, connection statuses, etc.

Configuration Instructions

To use the arc widget, enable the corresponding macro in the configuration file:

In menu_config.h, add:

#define CONFIG_REALTEK_BUILD_REAL_LITE_ARC 1

Complete Example

#include "gui_components_init.h"
#include "gui_lite_geometry_arc.h"

static void create_activity_rings(float center_x, float center_y)
{
    // bg track color
    gui_color_t track_color_move     = gui_rgba(52, 14, 11, 200);
    gui_color_t track_color_exercise = gui_rgba(16, 37, 17, 200);
    gui_color_t track_color_stand    = gui_rgba(17, 32, 52, 200);
    // fg color
    gui_color_t col_move     = gui_rgba(255, 0, 0, 255);  // Move red
    gui_color_t col_exercise = gui_rgba(0, 255, 0, 255);  // Exercise green
    gui_color_t col_stand    = gui_rgba(0, 0, 255, 255);  // Stand blue

    // circle radius and thickness
    float outer_radius = 163.0f; float outer_thickness = 22.0f;
    float mid_radius   = 136.5f; float mid_thickness   = 22.0f;
    float inner_radius = 110.0f; float inner_thickness = 22.0f;

    uint16_t start_angle = 0;
    // background rings
    gui_lite_arc_t *ring_move = gui_lite_arc_create(gui_obj_get_root(), "test_ring_move", center_x,
                                                    center_y, outer_radius, 0, 360, outer_thickness,
                                                    track_color_move);
    gui_lite_arc_t *ring_exercise = gui_lite_arc_create(gui_obj_get_root(), "test_ring_exercise",
                                                        center_x, center_y, mid_radius, 0, 360, mid_thickness,
                                                        track_color_exercise);
    gui_lite_arc_t *ring_stand = gui_lite_arc_create(gui_obj_get_root(), "test_ring_stand", center_x,
                                                     center_y, inner_radius, 0, 360, inner_thickness,
                                                     track_color_stand);
    gui_lite_arc_set_style(ring_stand, center_x, center_y, inner_radius, 0, 360, inner_thickness,
                           track_color_stand);


    // arc style
    gui_lite_arc_t *arc_move = gui_lite_arc_create(gui_obj_get_root(), "test_arc_move", center_x,
                                                   center_y, outer_radius,
                                                   start_angle, start_angle + 252.0f, outer_thickness, col_move);
    gui_lite_arc_t *arc_exercise = gui_lite_arc_create(gui_obj_get_root(), "test_arc_exercise",
                                                       center_x, center_y, mid_radius,
                                                       start_angle, start_angle + 72.0f, mid_thickness, col_exercise);
    gui_lite_arc_t *arc_stand = gui_lite_arc_create(gui_obj_get_root(), "test_arc_stand", center_x,
                                                    center_y, inner_radius,
                                                    start_angle, start_angle + 198.0f, inner_thickness, col_stand);
}
static int geometry_demo_init(void)
{

    float center_x = 480 / 2.0f;
    float center_y = 480 / 2.0f;
    create_activity_rings(center_x, center_y);

    return 0;
}

GUI_INIT_APP_EXPORT(geometry_demo_init);

API

Defines

BLOCK_SIZE 100: Tile size for block-based rendering.

Functions

gui_lite_arc_t *gui_lite_arc_create(void *parent, const char *name, int x, int y, int radius, float start_angle, float end_angle, float line_width, gui_color_t color)

Create a new lite arc widget.

Parameters:

parent -- Parent widget or NULL for top-level widget.
name -- Name of the widget.
x -- Center X coordinate.
y -- Center Y coordinate.
radius -- Arc radius.
start_angle -- Start angle in degrees.
end_angle -- End angle in degrees.
line_width -- Line width.
color -- Arc color.

Returns:

Pointer to the created lite arc widget.

void gui_lite_arc_set_position(gui_lite_arc_t *this, int x, int y)

Move arc geometry.

Parameters:

this -- Pointer to the arc widget.
x -- New center X coordinate relative to widget.
y -- New center Y coordinate relative to widget.

void gui_lite_arc_set_radius(gui_lite_arc_t *this, int radius)

Set the radius of the lite arc widget.

Parameters:

this -- Pointer to the lite arc widget.
radius -- Arc radius.

void gui_lite_arc_set_color(gui_lite_arc_t *this, gui_color_t color)

Set the color of the lite arc widget.

Parameters:

this -- Pointer to the lite arc widget.
color -- Arc color.

void gui_lite_arc_set_start_angle(gui_lite_arc_t *this, float start_angle)

Set the start angle of the lite arc widget.

Parameters:

this -- Pointer to the lite arc widget.
start_angle -- Start angle in degrees.

void gui_lite_arc_set_end_angle(gui_lite_arc_t *this, float end_angle)

Set the end angle of the lite arc widget.

Parameters:

this -- Pointer to the lite arc widget.
end_angle -- End angle in degrees.

void gui_lite_arc_set_line_width(gui_lite_arc_t *this, float line_width)

Set the line width of the lite arc widget.

Parameters:

this -- Pointer to the lite arc widget.
line_width -- Line width.

void gui_lite_arc_on_click(gui_lite_arc_t *this, void *callback, void *parameter)

Register click event callback for lite arc widget.

Parameters:

this -- Pointer to the arc widget.
callback -- Callback function pointer.
parameter -- Optional parameter to pass to callback.

struct gui_lite_arc_t

Lite arc widget structure.

Public Members

gui_obj_t base: Base widget.

draw_img_t *draw_img: Drawing image object.

uint8_t *pixel_buffer: Cached pixel buffer.

uint32_t buffer_size: Buffer size.

bool buffer_valid: Buffer cache valid flag.

DrawContext draw_ctx: Drawing context.

uint8_t opacity_value: Opacity value.

int x: Center X coordinate relative to widget.

int y: Center Y coordinate relative to widget.

int radius: Arc radius.

float start_angle: Start angle in degrees.

float end_angle: End angle in degrees.

float line_width: Line width.

gui_color_t color: Arc color (stored as uint32_t internally).

int cached_x

int cached_y

int cached_radius

float cached_start_angle

float cached_end_angle

float cached_line_width

gui_color_t cached_color