Glass

The glass widget is used to simulate the refraction effect of glass on a screen. Glass widgets can move on screen and requires an entire frame buffer.

To reduce time consumption in HoneyGUI, a simplified glass model which doesn't follow the principles of light refraction is applied. The simplified glass model only includes the the difference between the current coordinates and the refracted coordinates, as illustrated in the diagram below:

Simplified Model

Glass Data Generation

Based on the simplified model above, the rule can be derived that the offset of the pixel points after refraction is only related to the pixels within the range of the glass. Therefore, only a collection of the offset of each point on the glass is needed. In the design of the example , the offset is determined by the thickness (refractive) of the glass and the position of the observing point (x_o, y_o) through the following relationship:

\[offset(x, y) = distortion(x, y) * d(x, y)\]

Where distortion represents the thickness (refractive index) of each point on the glass, and d(x, y) represents the relationship between the current point on the glass and the observed point (x_o, y_o).

Glass Effect Image Generator User Manual

GlassTool: GlassTool

Software Overview

This software is a Python-based glass effect image generator that supports creating glass effect images in various shapes, currently including circle, rounded rectangle, and ring shapes.

Features

Shape Selection

• Circle: Creates circular glass effects

• Rounded Rectangle: Creates rounded rectangle glass effects

• Ring: Creates ring-shaped glass effects

• Custom Path: Creates stroke curves through path commands

• Close Shape: Creates automatically closed custom path shapes

• Load SVG: Imports SVG files and applies glass effects

Parameter Adjustment

• Radius/Size: Controls the size of the shape

• Distortion: Adjusts the distortion strength of the glass effect (0-1)

• Region: Controls the effective area range (0-1)

Custom Save Path

• Path Input: Specify data save path

• Confirm Output: Generate final data after clicking

• Reset: Restore settings to default values

Image Operations

• Real-time Preview: Updates image in real-time when parameters are adjusted

• Image Save: Supports saving generated glass effect data for use in HoneyGUI graphics rendering

• Motion Effect Preview: Preview dynamic effects by dragging glass graphics with data

Usage Instructions

Basic Operations

Tool Window

1. Select the desired shape type

2. Adjust the corresponding parameter sliders

3. Click Browse to specify data save path

4. Click OK to preview display effects and support drag functionality

Vector Graphics

Custom Path Usage Instructions:

1. Select Custom Path shape type

2. Enter drawing commands in the path command input box, or use Insert Commands menu to insert predefined commands

3. Set path line width in Stroke input box (default 30 pixels)

4. Use Add button to add commands to path list

5. Can delete selected commands through Delete, clear all commands through Clear

6. Click OK to generate custom path glass effect

7. Support mouse dragging to adjust position

Close Shape Usage Instructions:

1. Select Close Shape shape type

2. Input and edit path commands following the same way as custom path

3. System will automatically add end command to ensure proper path closure

4. Click OK to generate closed shape glass effect

5. Support mouse dragging and real-time effect updates

Load SVG Usage Instructions:

1. Select Load SVG type

2. Click Browse button to select SVG file

3. Software automatically parses path data in SVG file

4. Adjust Effect Strength slider to set glass distortion strength

5. Adjust Effect Area slider to set effect area range

6. Click Confirm to apply settings and generate SVG glass effect

7. Support drag functionality, can freely adjust SVG graphic position

Usage of Vector

The software supports three vector graphics creation methods, providing flexible custom path drawing functionality:

Custom Path

Custom path allows users to create arbitrary shapes through command sequences:

• Path Command Input: Enter drawing commands in the path command input box

• Command Format Support:

  • move(x, y) - Move pen to specified position

  • lineto(x, y) - Draw straight line to specified position

  • bezierto(x1,y1,x2,y2,x,y) - Draw cubic Bezier curve

  • quadto(x1,y1,x,y) - Draw quadratic Bezier curve

  • cubicto(x1,y1,x2,y2,x,y) - Draw cubic Bezier curve (same as bezierto)

  • end - Close path (draw line back to start point)

• Common Commands Insert: Quickly insert predefined commands through Insert Commands menu

• Line Width Setting: Set path line width in Stroke input box (default 30 pixels)

• Command Management: Support adding, deleting, clearing path commands, and displaying all command content

• Default Example: Automatically load triangle example path containing move, lineto command sequences

Close Shape

Close shape provides path drawing functionality, automatically ensuring path closure:

• Path Command System: Uses same command format and syntax as custom path

• Auto-close: System automatically detects and adds end command to ensure proper path closure

• Path Validation: Automatically validate path validity before generating image, ensuring geometric correctness

• Command Editing: Provides complete path command editing functionality, including add, delete, clear operations

• Help System: Built-in command format help to guide users in correct path command usage

Load SVG

Load SVG functionality supports importing standard SVG files and applying glass effects:

• File Selection: Select local SVG files through Browse button

• SVG Parsing: Automatically parse path elements in SVG files, extract path data

• Path Conversion: Convert SVG path commands to internal vector path format

  • Support M/m (move), L/l (line), C/c (cubic Bezier), Q/q (quadratic Bezier), Z/z (close) commands

• Multi-path Processing: Automatically process SVG files containing multiple paths, use first valid path

• Effect Parameters:

  • Effect Strength: Adjust glass effect distortion strength (0-100%)

  • Effect Area: Control effect area range (0-100%)

• Path Display: Display converted path command sequence in interface after loading

• Error Handling: Provide complete file reading and parsing error prompts

Drag Functionality

• All shapes (including basic graphics and vector graphics) support mouse dragging

• Shapes follow mouse movement in real-time during dragging

• Automatic boundary checking prevents moving out of visible area

• Vector graphics dragging maintains path shape and proportions unchanged

• Real-time glass effect rendering updates during dragging process

Notes

• Drag functionality requires glass data generation first

• Please confirm save path before saving data. If no path is specified, data will be saved in the tool's root directory by default

Usage

Description	API
Create Widget	gui_glass_create_from_mem()
Set Attribute	gui_glass_set_attribute()
Obtain Height	gui_glass_get_height()
Obtain Width	gui_glass_get_width()
Refresh Attribute	gui_glass_refresh_size()
Position Translation	gui_glass_translate()

Example

static int app_init(void)
{
#ifdef _HONEYGUI_SIMULATOR_
    unsigned char *resource_root = (unsigned char *)_binary_bg_bin_start;
#else
    unsigned char *resource_root = (unsigned char *)BG_ADDR;
#endif
    gui_video_t *video = gui_video_create_from_mem(gui_obj_get_root(), "background",
                                                   (void *)resource_root,
                                                   0, 0, 410,
                                                   502);
    gui_video_set_state(video, GUI_VIDEO_STATE_PLAYING);
    gui_video_set_repeat_count(video, GUI_VIDEO_REPEAT_INFINITE);
    gui_glass_create_from_mem(gui_obj_get_root(),  "img_2_test", (void *)glass_0, 195, 40, 0, 0);
    gui_glass_create_from_mem(gui_obj_get_root(),  "img_2_test", (void *)_acglass_1, 50, 40, 0,
                              0);
    gui_glass_create_from_mem(gui_obj_get_root(),  "img_2_test", (void *)glass_0, 30, 261, 0, 0);
    gui_glass_create_from_mem(gui_obj_get_root(),  "img_2_test", (void *)_acglass_1_2, 240, 270,
                              0, 0);

    return 0;
}
GUI_INIT_APP_EXPORT(app_init);

API

Functions

uint16_t gui_glass_get_width(gui_glass_t *_this)

Load the width of glass in pixel.

Parameters:

_this -- Glass widget pointer.

Returns:

Width of glass.

uint16_t gui_glass_get_height(gui_glass_t *_this)

Load the height of glass in pixel.

Parameters:

_this -- Glass widget pointer.

Returns:

Height of glass.

void gui_glass_refresh_size(gui_glass_t *_this)

Refresh the size of glass.

Parameters:

_this -- Glass widget pointer.

void gui_glass_refresh_draw_data(gui_glass_t *_this)

Refresh the source data of glass.

Parameters:

_this -- Glass widget pointer.

void gui_glass_set_attribute(gui_glass_t *_this, const char *name, void *addr, int16_t x, int16_t y)

Set glass attributes (name, path, position).

Parameters:

• this -- Glass widget pointer.

• name -- Widget name.

• addr -- Glass data address/path.

• x -- X-axis coordinate.

• y -- Y-axis coordinate.

void gui_glass_translate(gui_glass_t *_this, float t_x, float t_y)

Translate (move) the glass.

Parameters:

• _this -- Glass widget pointer.

• t_x -- New X-axis coordinate.

• t_y -- New Y-axis coordinate.

gui_glass_t *gui_glass_create_from_mem(void *parent, const char *name, void *addr, int16_t x, int16_t y, int16_t w, int16_t h)

Create a glass widget from memory address.

Note

Create a glass widget and set attribute.

Parameters:

• parent -- Father widget it nested in.

• name -- Widget name.

• addr -- Bin file address.

• x -- X-axis coordinate of the widget.

• y -- Y-axis coordinate of the widget.

• w -- Width of the widget.

• h -- Height of the widget.

Returns:

Widget object pointer.

gui_glass_t *gui_glass_create_from_ftl(void *parent, const char *name, void *ftl, int16_t x, int16_t y, int16_t w, int16_t h)

Create a glass widget from memory address.

Note

Create a glass widget and set attribute.

Parameters:

• parent -- Father widget it nested in.

• name -- Widget name.

• ftl -- Not xip address, use ftl address.

• x -- X-axis coordinate of the widget.

• y -- Y-axis coordinate of the widget.

• w -- Width of the widget.

• h -- Height of the widget.

Returns:

Widget object pointer.

gui_glass_t *gui_glass_create_from_fs(void *parent, const char *name, void *file, int16_t x, int16_t y, int16_t w, int16_t h)

Create a glass widget from filesystem.

Parameters:

• parent -- Father widget it nested in.

• name -- Widget name.

• file -- Glass file path.

• x -- X-axis coordinate of the widget.

• y -- Y-axis coordinate of the widget.

• w -- Width of the widget.

• h -- Height of the widget.

Returns:

Pointer to the created glass widget.

float gui_glass_get_t_x(gui_glass_t *_this)

Get the translation in X direction.

Parameters:

_this -- Glass widget pointer.

Returns:

Translation in X direction.

float gui_glass_get_t_y(gui_glass_t *_this)

Get the translation in Y direction.

Parameters:

_this -- Glass widget pointer.

Returns:

Translation in Y direction.

void gui_glass_set_data(gui_glass_t *_this, const uint8_t *glass_data_pointer)

Sets the glass data for a specified glass widget.

This function assigns the given glass data to the specified glass widget. The glass data might correspond to various formats, and the format should be compatible with the handling of gui_glass_t.

Parameters:

• _this -- Pointer to the glass widget (gui_glass_t) for which the glass data is to be set.

• glass_data_pointer -- Pointer to the glass data to be set to the widget. The data should persist as long as the widget needs it or until it is explicitly updated.

const uint8_t *gui_glass_get_data(gui_glass_t *_this)

Gets the glass data from a specified glass widget.

This function returns the current glass data that is set in the specified glass widget.

Parameters:

_this -- Pointer to the glass widget (gui_glass_t) from which the glass data should be retrieved.

Returns:

Pointer to the glass data currently set in the widget. If no glass data is set, the result may be NULL.

void gui_glass_enable_pressing_envent(gui_glass_t *_this)

Enable long pressing event on glass widget.

Parameters:

_this -- Pointer to the glass widget (gui_glass_t) from which the glass data should be retrieved.

void gui_glass_enable_click_envent(gui_glass_t *_this)

Enable click event on glass widget.

Parameters:

_this -- Pointer to the glass widget (gui_glass_t) from which the glass data should be retrieved.

struct gui_glass_t

Glass widget structure.

Public Members

gui_obj_t base

draw_img_t *draw_img

int16_t t_x

int16_t t_y

int16_t history_x

int16_t history_y

void *data

void *filename

void *ftl

union gui_glass_t

uint32_t storage_type

uint8_t checksum