Geometry Circle

Overview

The Circle widget is a lightweight GUI drawing component designed specifically for rendering circle shapes in user interfaces. This component provides a simple and easy-to-use API for customizing the circle's center position, radius, color, etc., allowing the creation of various circular UI elements.

Core Features

Description	API
Create Widget	`gui_lite_circle_create()`
Set Style	`gui_lite_circle_set_style()`
Set Position	`gui_lite_circle_set_position()`
Set Radius	`gui_lite_circle_set_radius()`
Set Color	`gui_lite_circle_set_color()`
Register Click Event Callback	`gui_lite_circle_on_click()`

Circle Characteristics

The circle widget has the following geometric characteristics:

Center Positioning: Precisely locate through center point coordinates
Radius Control: Support any size radius value
Perfect Circle: Ensure perfect geometric circular rendering
Boundary Handling: Automatically handle clipping with boundaries

Feature Highlights

High Performance: Utilizes optimized circle drawing algorithms to ensure smooth rendering performance
Anti-Aliasing: Supports anti-aliasing for smooth circular edge effects
Flexible Configuration: Supports custom radius, position, and color
Transparency Support: Supports ARGB color format for semi-transparent circle effects
Lightweight: Minimal memory usage, suitable for embedded systems and resource-limited environments
Dynamic Updates: Allows for runtime dynamic modification of position and style

Use Cases

The circle widget is suitable for the following scenarios:

Status Indicators: Create circular status indicator lights
User Avatar: Implement circular user avatar display
Icon Design: Draw various circular icon elements
Progress Indication: Create circular progress bars or loading animations
Button Design: Implement circular interactive buttons
Decorative Elements: Serve as decorative circular elements in the UI
Data Visualization: Used in pie charts, radar charts, etc., for data visualization components

Configuration Instructions

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

In menu_config.h, add:

#define CONFIG_REALTEK_BUILD_REAL_LITE_CIRCLE 1

Complete Example

#include "gui_components_init.h"
#include "gui_lite_geometry_circle.h"
static void gui_lite_circle_cb(gui_obj_t *obj)
{
    gui_log("gui_lite_circle_cb: %s\n", obj->name);
}
static int geometry_circle_demo_init(void)
{
    const uint32_t W = 480, H = 480;
    const uint32_t big_d   = 368;
    const uint32_t small_d = 66;
    const uint32_t margin  = 36;

    gui_lite_circle_t *big_circle = gui_lite_circle_create(gui_obj_get_root(), "big_circle", W / 2,
                                                           H / 2, big_d / 2, gui_rgba(0, 255,
                                                                   0, 255));

    gui_lite_circle_create(gui_obj_get_root(), "top_left", margin + small_d / 2, margin + small_d / 2,
                           small_d / 2,
                           gui_rgba(255, 0, 0, 255));


    gui_lite_circle_create(gui_obj_get_root(), "top_right", W - margin - small_d / 2,
                           margin + small_d / 2, small_d / 2,
                           gui_rgba(0, 255, 0, 255));


    gui_lite_circle_create(gui_obj_get_root(), "bottom_left", margin + small_d / 2,
                           H - margin - small_d / 2, small_d / 2,
                           gui_rgba(0, 0, 255, 255));


    gui_lite_circle_create(gui_obj_get_root(), "bottom_right", W - margin - small_d / 2,
                           H - margin - small_d / 2, small_d / 2,
                           gui_rgba(0, 0, 255, 150));
    gui_obj_add_event_cb(big_circle, (gui_event_cb_t)gui_lite_circle_cb, GUI_EVENT_TOUCH_CLICKED, NULL);
    return 0;
}

GUI_INIT_APP_EXPORT(geometry_circle_demo_init);

API

Defines

BLOCK_SIZE 100: Tile size for block-based rendering.

Functions

gui_lite_circle_t *gui_lite_circle_create(void *parent, const char *name, int x, int y, int radius, gui_color_t color)

Create a lite geometry circle widget.

Parameters:

parent -- Parent widget.
name -- Widget name.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.
radius -- Circle radius.
color -- Circle color.

Returns:

Pointer to the created circle widget.

void gui_lite_circle_set_style(gui_lite_circle_t *this, int x, int y, int radius, gui_color_t color)

Set circle style.

Parameters:

this -- Circle widget pointer.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.
radius -- Circle radius.
color -- Circle color.

void gui_lite_circle_set_position(gui_lite_circle_t *this, int x, int y)

Set circle position.

Parameters:

this -- Circle widget pointer.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.

void gui_lite_circle_set_radius(gui_lite_circle_t *this, int radius)

Set circle radius.

Parameters:

this -- Circle widget pointer.
radius -- Circle radius.

void gui_lite_circle_set_color(gui_lite_circle_t *this, gui_color_t color)

Set circle color.

Parameters:

this -- Circle widget pointer.
color -- Circle color.

void gui_lite_circle_on_click(gui_lite_circle_t *this, void *callback, void *parameter)

Set click callback for the circle.

Parameters:

this -- Circle widget pointer.
callback -- Callback function.
parameter -- Callback parameter.

struct gui_lite_circle_t

Lite circle widget structure.

Public Members

gui_obj_t base: Base widget.

draw_img_t *center_rect: Center rectangle (inscribed square).

draw_img_t *arc_left: Left arc.

draw_img_t *arc_right: Right arc.

draw_img_t *arc_top: Top arc.

draw_img_t *arc_bottom: Bottom arc.

int x: Center X coordinate relative to widget.

int y: Center Y coordinate relative to widget.

int radius: Circle radius.

gui_color_t color: Circle color.

uint8_t opacity_value: Opacity value.

uint8_t checksum: Checksum for change detection.