Geometry Rounded Rectangle

Overview

The Rounded Rectangle widget is a lightweight GUI drawing component specifically designed for rendering rectangles with rounded corners in user interfaces. It offers a simple and user-friendly API that allows customization of the rounded rectangle's size, corner radius, and color, enabling the creation of modern UI elements.

Core Features

Description	API
Create Widget	`gui_lite_round_rect_create()`
Set Style	`gui_lite_round_rect_set_style()`
Set Position	`gui_lite_round_rect_set_position()`
Set Size	`gui_lite_round_rect_set_size()`
Set Color	`gui_lite_round_rect_set_color()`
Register Click Event Callback	`gui_lite_round_rect_on_click()`

Corner Radius Description

The rounded rectangle supports the same corner radius for all four corners:

radius = 0: Draw a rectangle with sharp corners
radius > 0: Draw a rounded rectangle, with the radius determining the arc of the corners

Feature Highlights

High Performance: Utilizes optimized rendering algorithms for smooth performance
Anti-Aliasing: Supports anti-aliasing for smooth rounded corner effects
Flexible Configuration: Allows customization of size, corner radius, and color
Transparency Support: Uses ARGB color format for semi-transparent effects
Lightweight: Minimal memory footprint, suitable for embedded systems and resource-constrained environments
Dynamic Updates: Supports runtime dynamic modification of position and style

Use Cases

Rounded Rectangle widgets are applicable in scenarios such as:

Modern Buttons: Create interactive buttons with rounded corner effects
Card Layouts: Implement card-style UI design elements
Dialogs and Panels: Render rounded corner dialogs and information panels
Icon Backgrounds: Serve as background for app icons or functional icons
Progress Bar Containers: Create rounded containers for progress bars
List Items: Implement rounded list items or menu items
Animated Elements: Support animation effects with dynamic position changes

Configuration Instructions

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

In menu_config.h, add:

#define CONFIG_REALTEK_BUILD_REAL_LITE_RECT 1

Complete Example

#include "gui_components_init.h"
#include "gui_lite_geometry_round_rect.h"
#include "gui_view.h"
#include "gui_view_instance.h"

#define RECT_VIEW_NAME "rect_round_view"
gui_lite_round_rect_t *round_rect = NULL;
void round_rect_timer_cb(void *arg)
{
    gui_lite_round_rect_set_position(arg, 100, 100);
    gui_fb_change();
}
void rect_click_demo(void)
{
    round_rect = gui_lite_round_rect_create(gui_obj_get_root(), "round_rect", 0, 0, 200, 200, 10,
                                            gui_rgba(255, 0, 0, 255));
    gui_lite_round_rect_set_style(round_rect, 200, 200, 200, 200, 10, gui_rgba(255, 0, 0, 255));
    gui_lite_round_rect_on_click(round_rect, round_rect_timer_cb, NULL);
}
static void app_rect_round_design(gui_view_t *view)
{
    gui_view_switch_on_event(view, "rect_view", SWITCH_OUT_ANIMATION_FADE,
                             SWITCH_IN_ANIMATION_FADE,
                             GUI_EVENT_KB_SHORT_CLICKED);
    gui_view_set_animate_step(view, 500);
    uint8_t alpha = 200;
    gui_lite_round_rect_create(gui_obj_get_root(), "bg", 0, 0, 480, 480, 0, gui_rgba(255, 200, 200,
                               255));

    gui_lite_round_rect_create(gui_obj_get_root(), "geometry1", 20, 20, 200, 200, 20, gui_rgba(255, 0,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry2", 50, 50, 200, 200, 20, gui_rgba(0, 255,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry3", 80, 80, 200, 200, 20, gui_rgba(0, 0,
                               255, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry1", 150, 150, 200, 200, 20, gui_rgba(255, 0,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry2", 210, 210, 200, 200, 20, gui_rgba(0, 255,
                               0, alpha));

    // rect_click_demo();
}
static int geometry_rect_demo_init(void)
{
    gui_view_create(gui_obj_get_root(), RECT_VIEW_NAME, 0, 0, 0, 0);

    return 0;
}
GUI_VIEW_INSTANCE(RECT_VIEW_NAME, false, app_rect_round_design, 0);
GUI_INIT_APP_EXPORT(geometry_rect_demo_init);

API

Defines

BLOCK_SIZE 100: Tile size for block-based rendering.

Functions

gui_lite_round_rect_t *gui_lite_round_rect_create(void *parent, const char *name, int x, int y, int w, int h, int radius, gui_color_t color)

Create a new lite round rect widget.

Parameters:

parent -- Parent widget or NULL for root widget.
name -- Widget name or NULL for default name.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.
w -- Round rect width.
h -- Round rect height.
radius -- Round rect radius.
color -- Round rect color.

Returns:

Pointer to the created lite round rect widget.

void gui_lite_round_rect_set_style(gui_lite_round_rect_t *this, int x, int y, int w, int h, int radius, gui_color_t color)

Set the style of the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.
w -- Round rect width.
h -- Round rect height.
radius -- Round rect radius.
color -- Round rect color.

void gui_lite_round_rect_set_position(gui_lite_round_rect_t *this, int x, int y)

Set the position of the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.

void gui_lite_round_rect_set_size(gui_lite_round_rect_t *this, int w, int h)

Set the size of the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
w -- Round rect width.
h -- Round rect height.

void gui_lite_round_rect_set_radius(gui_lite_round_rect_t *this, int radius)

Set the radius of the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
radius -- Round rect radius.

void gui_lite_round_rect_set_color(gui_lite_round_rect_t *this, gui_color_t color)

Set the color of the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
color -- Round rect color.

void gui_lite_round_rect_on_click(gui_lite_round_rect_t *this, void *callback, void *parameter)

Register a click event callback for the lite round rect widget.

Parameters:

this -- Pointer to the lite round rect widget.
callback -- Callback function pointer.
parameter -- Optional parameter to pass to the callback.

struct gui_lite_round_rect_t

Lite arc widget structure.

Public Members

gui_obj_t base: Base widget.

draw_img_t *circle_00

draw_img_t *circle_01

draw_img_t *circle_10

draw_img_t *circle_11

uint8_t *circle_data

draw_img_t *rect_0

draw_img_t *rect_1

draw_img_t *rect_2

uint8_t *rect_data

uint8_t opacity_value: Opacity value.

int radius: Round rect radius.

gui_color_t color: Round rect color.

uint8_t checksum: Checksum for change detection.