×
Logo
  • Get Started
    • Source Project Download
    • Description
    • Software Architecture
    • Installation For Windows
      • Install Compiler
      • Install Python
      • Install Scons
      • Install Kconfiglib
      • Configure Application (Menuconfig)
        • Using Menuconfig for Configuration
        • Operation Instructions
        • Configuration File Description
      • Startup by CMD (Scons)
      • Startup by CMD (CMake)
        • Dependencies
        • Initializing the Build Environment
        • Configuring the Application
        • Compiling the Project
        • Running the Program
      • Startup by VSCode
        • Install VSCode
        • Open Project
        • Run Project
    • Display
      • Watch Project
      • Dashboard Project
  • GUI Application
    • C-APP Application
      • Create C Application Widget Tree
      • C Application Transition Effect
    • Use RVD Tool Design An Application
    • Using VSCode Plugin to Develop Applications
      • Key Features
      • Development Workflow
        • Quick Start
          • Installation Requirements
            • Software Environment
          • Installing the Plugin
            • Method 1: Install from VSCode Marketplace
            • Method 2: Install from VSIX File
          • Environment Check
          • Creating Your First Project
            • Using Project Templates
            • Project Structure
          • Designing Interface
            • Opening the Designer
            • Designer Interface Overview
            • Adding Components
            • Basic Operations
          • Generating Code
            • Automatic Code Generation
            • Code Protection Zones
          • Build and Simulation
            • Building the Project
            • Running the Simulator
            • Common Issues
          • Next Steps
        • Designer Usage
          • Designer Interface
            • Interface Layout
            • Toolbar Features
              • Common Operations
              • View Tools
          • Component Library
            • Component Categories
              • Container Components
              • Basic Controls
              • Input Controls
              • Graphic Controls
              • Multimedia Components
            • Using Components
              • Adding Components
              • Adding from Assets Panel
          • Canvas Operations
            • Selecting Components
              • Single Selection
              • Multiple Selection
            • Moving Components
            • Resizing
            • Alignment and Distribution
            • Component Layers
          • Component Tree
            • Tree Structure
            • Tree Operations
          • Properties Panel
            • Basic Properties
            • Specific Properties
              • hg_button
              • hg_label
              • hg_image
              • hg_arc / hg_circle / hg_rect
            • Event Properties
            • Color Picker
          • Keyboard Shortcuts
            • Editing Operations
            • View Operations
            • Selection Operations
            • Precise Positioning
          • Context Menu
            • Component Operations
            • Layer Adjustment
            • Component Organization
            • Code Operations
          • Best Practices
            • Component Naming
            • Layout Tips
            • Performance Optimization
            • Collaborative Development
          • Next Steps
        • HML File Format
          • Overview
          • Basic Structure
            • Root Elements
          • Component Definition
            • Basic Syntax
            • Required Attributes
            • Position and Size Attributes
          • Component Types
            • Container Components
              • hg_view
              • hg_window
              • hg_canvas
              • hg_list
              • hg_menu_cellular
            • Basic Widgets
              • hg_button
              • hg_label
              • hg_image
            • Input Widgets
              • hg_input
              • hg_checkbox and hg_radio
            • Multimedia Components
              • hg_video
              • hg_gif
              • hg_3d
          • Event Configuration
            • Basic Syntax
            • Event Types
            • Action Types
              • switchView
              • sendMessage
              • callFunction
            • Multiple Events
          • Complete Examples
            • Simple Login Interface
            • Multi-View Navigation
          • Manual HML Editing
            • Validating HML
          • Best Practices
            • Naming Conventions
            • Structural Organization
            • Comments
            • Version Control
          • Next Steps
        • Code Generation
          • Overview
          • Code Generation Flow
          • Architecture Design
            • Core Components
          • File Naming and Directory Rules
            • Naming Rules
            • Directory Mapping
            • Generated File Structure
          • Usage
            • Generate Code
          • Code Protected Regions
            • Protected Region Syntax
            • Examples
          • Generated Code Structure
            • Header File (.h)
            • Implementation File (.c)
            • Callback Files (_callbacks.h / _callbacks.c)
          • Important Notes
          • View Switch Implementation
            • Example
          • Building Generated Code
          • Next Steps
        • Event System
          • Core Concepts
            • Event
            • Action
            • Message
          • UI Design Changes
            • Unified Property Panel Tabs
          • Event Types
            • Common Events (Supported by All Components)
            • Swipe Events (Supported by Container Components)
            • State Events (Supported by Specific Components)
            • Lifecycle Events (Supported by Container Components)
            • Message Events (Supported by All Components)
          • Component Supported Events
          • Action Types
            • View Switch Actions
            • Message Actions
            • Custom Actions
          • Message System
            • Concept
            • Use Cases
          • Data Structures
            • Event Configuration in HML
            • TypeScript Type Definitions
          • C Code Generation Implementation
            • View Switch (switchView)
            • Other Events
          • UI Design
            • Property Panel - Events Tab
          • Practical Examples
            • Example 1: Button Click to Jump
            • Example 2: Swipe Left to Switch View
            • Example 3: Message Communication
            • Example 4: Custom Function Call
          • Best Practices
            • Event Naming Conventions
            • Performance Optimization
            • Debugging Tips
          • Next Steps
        • Resource Management
          • Overview
          • Why JS Version?
            • Problems
            • Solutions
          • Feature Comparison
          • Tool Directory Structure
          • Image Resource Management
            • Supported Image Formats
            • Image Conversion Workflow
            • Manual Image Conversion
            • Pixel Format Selection Guide
          • 3D Model Resource Management
            • Supported Model Formats
            • OBJ Model Conversion
            • Model Optimization Recommendations
          • Font Resource Management
            • Font Formats
            • Font Conversion
          • Resource Packaging
            • ROM File System
            • Resource Path Conventions
          • Performance Data
          • Usage Recommendations
            • Resource Optimization
            • Resource Management Best Practices
          • Troubleshooting
            • Common Issues
            • Debugging Tips
          • Next Steps
        • Build and Simulation
          • Overview
          • Development Environment Requirements
            • Windows
            • Linux/WSL
            • Environment Variable Configuration
          • Project Structure
          • Project Configuration File
          • Build Process
            • Build Using VSCode Plugin
            • Build Using Command Line
          • Build Configuration
            • Application Configuration (Menuconfig)
            • Compiler Flags
          • Build with CMake (Optional)
          • Running the Simulator
            • Start Simulator
            • Interaction Methods
            • Debugging Tips
          • Common Issues
            • Build Errors
            • Runtime Errors
          • Performance Optimization
            • Build Speed Optimization
            • Runtime Performance Optimization
          • Continuous Integration
          • Next Steps
        • Embedded Deployment
          • Overview
          • Solution 1: Generate C Code
            • Description
            • Export Products
            • Generated Code Example
            • Advantages
            • Disadvantages
            • Use Cases
            • Deployment Steps
          • Solution 2: Generate HML (XML)
            • Description
            • Export Products
            • HML File Example
            • Embedded Implementation
            • Event Binding Mechanism
            • Advantages
            • Disadvantages
            • Use Cases
            • Recommended XML Parsers
          • Solution 3: Generate HML (BIN)
            • Description
            • Export Products
            • Binary Format Design
            • Embedded Implementation
            • Advantages
            • Disadvantages
            • Use Cases
          • Event Handling Mechanism (Common)
            • Configure Events in Designer
            • Generate Callback Stubs on Export
            • Register Callback Table in Firmware
          • Data Binding (Solutions 2 & 3 Support)
            • Use Data Binding in HML
            • Bind Data on Embedded Side
          • Solution Selection Guide
          • Performance and Resource Comparison
          • Development Recommendations
            • Development Phase
            • Testing Phase
            • Release Phase
          • Common Questions
            • Q: How to switch between the three solutions?
            • Q: Can Solutions 2 and 3 be mixed?
            • Q: Is OTA UI update secure?
            • Q: How significant are performance differences?
          • Next Steps
  • Widgets
    • Obj
      • Usage
      • API
        • gui_obj_get_root()
        • gui_obj_get_fake_root()
        • gui_obj_get_kb_root()
        • gui_obj_create()
        • gui_obj_show()
        • gui_obj_out_screen()
        • gui_obj_get_clip_rect()
        • gui_obj_in_rect()
        • gui_obj_enable_this_parent_short()
        • gui_obj_get_area()
        • gui_obj_point_in_obj_rect()
        • gui_obj_point_in_obj_circle()
        • gui_obj_checksum()
        • gui_get_root()
        • gui_obj_absolute_xy()
        • gui_obj_hidden()
        • gui_widget_name()
        • gui_update_speed()
        • gui_inertial()
        • gui_get_obj_count()
        • gui_set_location()
        • gui_dom_create_tree_nest()
        • gui_dom_get_preview_image_file()
        • gui_update_speed_by_displacement()
        • gui_obj_move()
        • gui_obj_create_timer()
        • gui_obj_delete_timer()
        • gui_obj_start_timer()
        • gui_obj_stop_timer()
        • gui_obj_add_event_cb()
        • gui_obj_enable_event()
        • gui_obj_event_dispatch()
        • gui_obj_tree_free()
        • gui_obj_tree_free_async()
        • gui_obj_child_free()
        • gui_obj_tree_print()
        • gui_obj_tree_count_by_type()
        • gui_obj_tree_show()
        • gui_obj_tree_get_root()
        • gui_obj_get_child_handle()
        • gui_obj_tree_get_widget_by_name()
        • gui_obj_tree_print_bfs()
    • Img
      • Usage
        • Create Widget
        • Set Focus
        • Set Position
        • Set Source
        • Get Height/Width
        • Refresh
        • Blend Mode
        • Translation
        • Rotation
        • Zoom
        • Opacity
        • Quality
        • Screenshot
      • Example
      • API
        • gui_img_get_width()
        • gui_img_get_height()
        • gui_img_refresh_size()
        • gui_img_refresh_draw_data()
        • gui_img_set_mode()
        • gui_img_set_attribute()
        • gui_img_set_pos()
        • gui_img_rotation()
        • gui_img_scale()
        • gui_img_translate()
        • gui_img_skew_x()
        • gui_img_skew_y()
        • gui_img_set_opacity()
        • gui_img_set_focus()
        • gui_img_create_from_mem()
        • gui_img_create_from_ftl()
        • gui_img_create_from_fs()
        • gui_img_set_quality()
        • gui_img_tree_convert_to_img()
        • gui_img_get_scale_x()
        • gui_img_get_scale_y()
        • gui_img_get_degrees()
        • gui_img_get_c_x()
        • gui_img_get_c_y()
        • gui_img_get_t_x()
        • gui_img_get_t_y()
        • gui_img_set_image_data()
        • gui_img_set_src()
        • gui_img_get_image_data()
        • gui_img_a8_recolor()
        • gui_img_a8_fix_bg()
        • gui_img_a8_mix_alpha()
        • gui_img_t
          • gui_img_t::base
          • gui_img_t::draw_img
          • gui_img_t::degrees
          • gui_img_t::scale_x
          • gui_img_t::scale_y
          • gui_img_t::f_x
          • gui_img_t::f_y
          • gui_img_t::t_x
          • gui_img_t::t_y
          • gui_img_t::src_data
          • gui_img_t::fg_color_set
          • gui_img_t::bg_color_fix
          • gui_img_t::opacity_value
          • gui_img_t::blend_mode
          • gui_img_t::storage_type
          • gui_img_t::high_quality
          • gui_img_t::need_clip
          • gui_img_t::free_on_destroy
          • gui_img_t::checksum
          • gui_img_t::animate_array_length
    • Text
      • Features
      • Usage
        • Font Files
        • Create Text Widget
        • Set Text Attributes
          • Set Text
          • Font Type
          • Text Content
          • Text Encoding
          • Convert to Img
          • Text Color
          • Font Size
          • Word Wrap
          • Letter and Line Spacing
          • Matrix Transformation
          • Minimum Scale
          • Font Render Mode
          • Font Source Mode
          • Bold Setting
          • Emoji
          • Text Modes
          • Text Move
          • Text Layout Measurement
          • Scope Clipping
      • Example
        • Simple Text Widget (Example 1: text_widget_example)
      • API
        • TEXT_MODE
          • TEXT_MODE::LEFT
          • TEXT_MODE::CENTER
          • TEXT_MODE::RIGHT
          • TEXT_MODE::MULTI_LEFT
          • TEXT_MODE::MULTI_CENTER
          • TEXT_MODE::MULTI_RIGHT
          • TEXT_MODE::MID_LEFT
          • TEXT_MODE::MID_CENTER
          • TEXT_MODE::MID_RIGHT
          • TEXT_MODE::MULTI_MID_LEFT
          • TEXT_MODE::MULTI_MID_CENTER
          • TEXT_MODE::MULTI_MID_RIGHT
          • TEXT_MODE::SCROLL_X
          • TEXT_MODE::SCROLL_X_REVERSE
          • TEXT_MODE::SCROLL_X_MID
          • TEXT_MODE::SCROLL_X_MID_REVERSE
          • TEXT_MODE::SCROLL_Y
          • TEXT_MODE::SCROLL_Y_REVERSE
          • TEXT_MODE::VERTICAL_LEFT_TOP
          • TEXT_MODE::VERTICAL_LEFT_MID
          • TEXT_MODE::VERTICAL_LEFT_BOT
          • TEXT_MODE::VERTICAL_RIGHT_TOP
          • TEXT_MODE::VERTICAL_RIGHT_MID
          • TEXT_MODE::VERTICAL_RIGHT_BOT
          • TEXT_MODE::RTL_RIGHT
          • TEXT_MODE::RTL_CENTER
          • TEXT_MODE::RTL_LEFT
          • TEXT_MODE::RTL_MULTI_RIGHT
          • TEXT_MODE::RTL_MULTI_CENTER
          • TEXT_MODE::RTL_MULTI_LEFT
        • gui_text_click()
        • gui_text_pswd_done()
        • gui_text_set()
        • gui_text_mode_set()
        • gui_text_input_set()
        • gui_text_color_set()
        • gui_text_wordwrap_set()
        • gui_text_extra_letter_spacing_set()
        • gui_text_extra_line_spacing_set()
        • gui_text_set_line_height()
        • gui_text_use_matrix_by_img()
        • gui_text_rendermode_set()
        • gui_text_bold_set()
        • gui_text_set_min_scale()
        • gui_text_move()
        • gui_text_size_set()
        • gui_text_font_mode_set()
        • gui_text_type_set()
        • gui_text_emoji_set()
        • gui_text_encoding_set()
        • gui_text_set_matrix()
        • gui_text_content_set()
        • gui_text_convert_to_img()
        • gui_text_create()
        • gui_text_layout_measure()
        • gui_text_set_scope()
        • gui_text_set_scope_absolute()
        • gui_text_set_font_blend_mode()
        • gui_text_t
          • gui_text_t::base
          • gui_text_t::color
          • gui_text_t::scale_img
          • gui_text_t::emoji_path
          • gui_text_t::min_scale
          • gui_text_t::content
          • gui_text_t::data
          • gui_text_t::path
          • gui_text_t::matrix
          • gui_text_t::len
          • gui_text_t::font_len
          • gui_text_t::active_font_len
          • gui_text_t::char_width_sum
          • gui_text_t::char_height_sum
          • gui_text_t::char_line_sum
          • gui_text_t::offset_x
          • gui_text_t::offset_y
          • gui_text_t::font_height
          • gui_text_t::scope_rect
          • gui_text_t::mode
          • gui_text_t::charset
          • gui_text_t::font_type
          • gui_text_t::font_mode
          • gui_text_t::font_blend_mode
          • gui_text_t::emoji_size
          • gui_text_t::checksum
          • gui_text_t::extra_letter_spacing
          • gui_text_t::extra_line_spacing
          • gui_text_t::line_height
          • gui_text_t::bold_weight
          • gui_text_t::layout_refresh
          • gui_text_t::content_refresh
          • gui_text_t::use_img_blit
          • gui_text_t::inputable
          • gui_text_t::ispasswd
          • gui_text_t::wordwrap
          • gui_text_t::scope
          • gui_text_t::scope_self
          • gui_text_t::scope_absolute
          • gui_text_t::arabic
          • gui_text_t::thai
          • gui_text_t::hebrew
          • gui_text_t::rendermode
          • gui_text_t::bold_mode
        • gui_text_line_t
          • gui_text_line_t::index
          • gui_text_line_t::offset
    • 3D Model
      • 3D Model Asset Processing
        • OBJ Static Model
        • GLTF Skeletal Animation Model
        • Model Preprocessing
      • 3D Model Generation
        • Create Model
        • Transformation Control
          • Global Transformation
            • Camera Transformation
            • World Transformation
          • Face Transformation
      • 3D Model Rendering
        • Create Widget
        • Set Click Event
        • Set Animations
      • Example
        • 3D Butterfly
        • 3D Face
        • 3D Dog
        • 3D Application List
        • 3D Robot
      • FPS Benchmark
      • API
        • gui_lite3d_create()
        • gui_lite3d_on_click()
        • gui_lite3d_t
          • gui_lite3d_t::base
          • gui_lite3d_t::model
    • Video
      • Usage
        • Video Formats
        • Access Methods
        • Playback Control
          • Playback State
          • Repeat Playback
          • Frame Rate Settings
          • Step Settings
        • UI Transformations
          • Scaling
      • Example
      • API
        • GUI_VIDEO_EVENT
          • GUI_VIDEO_EVENT::GUI_VIDEO_EVENT_FRAME_UPDATE
          • GUI_VIDEO_EVENT::GUI_VIDEO_EVENT_PLAY
          • GUI_VIDEO_EVENT::GUI_VIDEO_EVENT_PAUSE
          • GUI_VIDEO_EVENT::GUI_VIDEO_EVENT_STOP
          • GUI_VIDEO_EVENT::GUI_VIDEO_EVENT_END
        • GUI_VIDEO_STATE
          • GUI_VIDEO_STATE::GUI_VIDEO_STATE_ERR
          • GUI_VIDEO_STATE::GUI_VIDEO_STATE_INIT
          • GUI_VIDEO_STATE::GUI_VIDEO_STATE_PLAYING
          • GUI_VIDEO_STATE::GUI_VIDEO_STATE_PAUSE
          • GUI_VIDEO_STATE::GUI_VIDEO_STATE_STOP
        • GUI_VIDEO_RES
          • GUI_VIDEO_RES::GUI_IMG_LIVE_SUCCESSED
        • VIDEO_MJPEG_SCAN_STATE
          • VIDEO_MJPEG_SCAN_STATE::MJPEG_SCAN_INIT
          • VIDEO_MJPEG_SCAN_STATE::MJPEG_SCAN_START
          • VIDEO_MJPEG_SCAN_STATE::MJPEG_SCAN_END
          • VIDEO_MJPEG_SCAN_STATE::MJPEG_SCAN_EOF
        • GUI_VIDEO_TYPE
          • GUI_VIDEO_TYPE::VIDEO_TYPE_NULL
          • GUI_VIDEO_TYPE::VIDEO_TYPE_MJPEG
          • GUI_VIDEO_TYPE::VIDEO_TYPE_H264
          • GUI_VIDEO_TYPE::VIDEO_TYPE_AVI
        • AVI_CHUNK_TYPE
          • AVI_CHUNK_TYPE::CHUNK_VIDEO
          • AVI_CHUNK_TYPE::CHUNK_AUDIO
          • AVI_CHUNK_TYPE::CHUNK_UNKNOWN
        • gui_video_get_filesize_from_addr()
        • gui_video_set_frame_rate()
        • gui_video_get_frame_time()
        • gui_video_set_scale()
        • gui_video_set_state()
        • gui_video_set_repeat_count()
        • gui_video_get_state()
        • gui_video_set_frame_step()
        • gui_video_get_frame_step()
        • gui_video_refresh_size()
        • gui_video_refresh_type()
        • gui_video_create_from_ftl()
        • gui_video_create_from_fs()
        • gui_video_create_from_mem()
        • gui_h264_header_t
          • gui_h264_header_t::symbol
          • gui_h264_header_t::w
          • gui_h264_header_t::h
          • gui_h264_header_t::frame_num
          • gui_h264_header_t::frame_time
          • gui_h264_header_t::size
        • gui_riff_header_t
          • gui_riff_header_t::symbol
          • gui_riff_header_t::size
          • gui_riff_header_t::format
        • MainAVIHeader_t
          • MainAVIHeader_t::usec_per_frame
          • MainAVIHeader_t::max_byte_rate
          • MainAVIHeader_t::reserved_0
          • MainAVIHeader_t::flags
          • MainAVIHeader_t::total_frame
          • MainAVIHeader_t::initial_frame
          • MainAVIHeader_t::streams
          • MainAVIHeader_t::buffer_size
          • MainAVIHeader_t::width
          • MainAVIHeader_t::height
        • AVIStreamHeader_t
          • AVIStreamHeader_t::type
          • AVIStreamHeader_t::handler
          • AVIStreamHeader_t::flags
          • AVIStreamHeader_t::priority
          • AVIStreamHeader_t::initial_frames
          • AVIStreamHeader_t::scale
          • AVIStreamHeader_t::rate
          • AVIStreamHeader_t::start
          • AVIStreamHeader_t::length
          • AVIStreamHeader_t::buffer_size
          • AVIStreamHeader_t::quality
          • AVIStreamHeader_t::sample_size
          • AVIStreamHeader_t::frame
          • AVIStreamHeader_t::stream_format
          • AVIStreamHeader_t::length_format
        • BitMapInfoHeader_t
          • BitMapInfoHeader_t::size
          • BitMapInfoHeader_t::width
          • BitMapInfoHeader_t::height
          • BitMapInfoHeader_t::planes
          • BitMapInfoHeader_t::bit_count
          • BitMapInfoHeader_t::compression
          • BitMapInfoHeader_t::image_size
          • BitMapInfoHeader_t::x_pels_per_meter
          • BitMapInfoHeader_t::y_pels_per_meter
          • BitMapInfoHeader_t::colors_used
          • BitMapInfoHeader_t::colors_important
        • WaveFormateX_t
          • WaveFormateX_t::format_tag
          • WaveFormateX_t::channels
          • WaveFormateX_t::samples_per_sec
          • WaveFormateX_t::ave_bytes_per_sec
          • WaveFormateX_t::block_align
          • WaveFormateX_t::bits_per_sample
          • WaveFormateX_t::size_extra
        • IndexList_t
          • IndexList_t::indexID
          • IndexList_t::index_size
        • IndexItem_t
          • IndexItem_t::chunk_ID
          • IndexItem_t::flags
          • IndexItem_t::offset
          • IndexItem_t::size
        • AviMoviChunk_t
          • AviMoviChunk_t::offset
          • AviMoviChunk_t::len
          • AviMoviChunk_t::type
        • gui_video_t
          • gui_video_t::base
          • gui_video_t::img
          • gui_video_t::data
          • gui_video_t::num_frame
          • gui_video_t::array
          • gui_video_t::header
          • gui_video_t::frame_buff
          • gui_video_t::frame_buff_raw
          • gui_video_t::decoder
          • gui_video_t::frame_time
          • gui_video_t::frame_step
          • gui_video_t::frame_cur
          • gui_video_t::frame_last
          • gui_video_t::repeat_cnt
          • gui_video_t::img_type
          • gui_video_t::storage_type
          • gui_video_t::state
          • gui_video_t::frame_chunk_cur
          • gui_video_t::chunk_num
          • gui_video_t::rgb_type
    • View
      • Usage
        • Register Descriptor of View
        • Get Descriptor of View by Name
        • Create View Widget
        • Set Switch View Event
        • Switch View Directly
        • Set Animation Step Length
        • Set Opacity
        • Get Current View Pointer
        • Get Next View Pointer
      • Example
        • View
      • API
        • VIEW_SWITCH_STYLE
          • VIEW_SWITCH_STYLE::SWITCH_INIT_STATE
          • VIEW_SWITCH_STYLE::SWITCH_IN_STILL_USE_BLUR
          • VIEW_SWITCH_STYLE::SWITCH_OUT_STILL_USE_BLUR
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_LEFT_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_RIGHT_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_TOP_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_BOTTOM_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_LEFT_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_RIGHT_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_TOP_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_BOTTOM_USE_TRANSLATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_LEFT_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_RIGHT_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_TOP_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_BOTTOM_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_LEFT_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_RIGHT_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_TOP_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_BOTTOM_USE_CUBE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_LEFT_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_RIGHT_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_TOP_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_BOTTOM_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_LEFT_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_RIGHT_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_TOP_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_BOTTOM_USE_ROTATE
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_LEFT_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_RIGHT_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_TOP_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_IN_FROM_BOTTOM_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_LEFT_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_RIGHT_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_TOP_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_TO_BOTTOM_USE_REDUCTION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_NONE_ANIMATION
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_ZOOM
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_FADE
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_MOVE_TO_RIGHT
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_MOVE_TO_LEFT
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_ZOOM_TO_TOP_LEFT
          • VIEW_SWITCH_STYLE::SWITCH_OUT_ANIMATION_ZOOM_TO_TOP_RIGHT
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_ZOOM_FROM_TOP_LEFT
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_ZOOM_FROM_TOP_RIGHT
          • VIEW_SWITCH_STYLE::SWITCH_IN_NONE_ANIMATION
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_ZOOM
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_FADE
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_MOVE_FADE
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_MOVE_FROM_RIGHT
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_MOVE_FROM_LEFT
          • VIEW_SWITCH_STYLE::SWITCH_IN_ANIMATION_BOUNCE_FROM_RIGHT
        • gui_view_create()
        • gui_view_descriptor_register()
        • gui_view_descriptor_get()
        • gui_view_get()
        • gui_view_switch_on_event()
        • gui_view_switch_direct()
        • gui_view_set_animate_step()
        • gui_view_set_opacity()
        • gui_view_get_current()
        • gui_view_get_next()
        • gui_view_t
          • gui_view_t::base
          • gui_view_t::animate_step
          • gui_view_t::opacity
          • gui_view_t::current_transition_style
          • gui_view_t::current_event_code
          • gui_view_t::descriptor
          • gui_view_t::blur_param
          • gui_view_t::on_event
          • gui_view_t::on_event_num
          • gui_view_t::checksum
        • gui_view_descriptor_t
          • gui_view_descriptor_t::name
          • gui_view_descriptor_t::pView
          • gui_view_descriptor_t::on_switch_in
          • gui_view_descriptor_t::on_switch_out
          • gui_view_descriptor_t::keep
        • gui_view_on_event_t
          • gui_view_on_event_t::descriptor
          • gui_view_on_event_t::switch_out_style
          • gui_view_on_event_t::switch_in_style
          • gui_view_on_event_t::event_code
    • List
      • Usage
        • Create List Widget
        • Set List Widget Style
        • Set List Widget Deceleration Factor
        • Set List Widget Offset
        • Set List Widget Scroll Bar Color
        • Set List Widget Note Number
        • Set Card Style Stacking Position
        • Set Circle Style Radius
        • Set List Widget Out Scope
        • Set List Widget Auto Align
        • Set List Widget Inertia
        • Set List Widget Loop
        • Set List Widget Area Display
        • Set List Widget Keep Note Alive
      • Example
      • API
        • LIST_STYLE
          • LIST_STYLE::LIST_CLASSIC
          • LIST_STYLE::LIST_CIRCLE
          • LIST_STYLE::LIST_ZOOM
          • LIST_STYLE::LIST_CARD
          • LIST_STYLE::LIST_FADE
          • LIST_STYLE::LIST_FAN
          • LIST_STYLE::LIST_HELIX
          • LIST_STYLE::LIST_CURL
        • LIST_DIR
          • LIST_DIR::VERTICAL
          • LIST_DIR::HORIZONTAL
        • gui_list_create()
        • gui_list_set_style()
        • gui_list_set_factor()
        • gui_list_set_offset()
        • gui_list_set_bar_color()
        • gui_list_set_note_num()
        • gui_list_set_card_stack_location()
        • gui_list_set_circle_radius()
        • gui_list_set_out_scope()
        • gui_list_set_auto_align()
        • gui_list_set_inertia()
        • gui_list_enable_loop()
        • gui_list_enable_area_display()
        • gui_list_keep_note_alive()
        • gui_list_scroll_to_note()
        • gui_list_jump_to_note()
        • gui_list_get_current_note()
        • gui_list_enable_scroll()
        • gui_list_t
          • gui_list_t::base
          • gui_list_t::dir
          • gui_list_t::style
          • gui_list_t::auto_align
          • gui_list_t::inertia
          • gui_list_t::loop
          • gui_list_t::need_update_bar
          • gui_list_t::note_num
          • gui_list_t::space
          • gui_list_t::area_display
          • gui_list_t::keep_note_alive
          • gui_list_t::scroll_to_active
          • gui_list_t::enable_scroll
          • gui_list_t::circle_radius
          • gui_list_t::note_length
          • gui_list_t::speed
          • gui_list_t::record
          • gui_list_t::factor
          • gui_list_t::offset
          • gui_list_t::hold
          • gui_list_t::scroll_target
          • gui_list_t::total_length
          • gui_list_t::out_scope
          • gui_list_t::card_stack_location
          • gui_list_t::max_created_note_index
          • gui_list_t::last_created_note_index
          • gui_list_t::note_design
          • gui_list_t::design_param
          • gui_list_t::bar
          • gui_list_t::bar_data
          • gui_list_t::bar_color
          • gui_list_t::checksum
        • gui_list_note_t
          • gui_list_note_t::base
          • gui_list_note_t::start_x
          • gui_list_note_t::start_y
          • gui_list_note_t::t_x
          • gui_list_note_t::t_y
          • gui_list_note_t::animate_cnt
          • gui_list_note_t::is_speed_positive
          • gui_list_note_t::index
    • Canvas
      • Component Overview
      • Core Features
        • Creation & Initialization
        • Image Output
      • Example Code
      • API
        • gui_canvas_render_function
        • gui_canvas_create()
        • gui_canvas_set_canvas_cb()
        • gui_canvas_render_to_image_buffer()
        • gui_canvas_t
          • gui_canvas_t::base
          • gui_canvas_t::vg
          • gui_canvas_t::nanovg_canvas_cb
          • gui_canvas_t::checksum
          • gui_canvas_t::render
    • Menu Cellular
      • Usage
        • Create Menu Cellular Widget
        • Add Click Callback Event
        • Set Offset
      • Development Example
      • API
        • gui_menu_cellular_create()
        • gui_menu_cellular_on_click()
        • gui_menu_cellular_offset()
        • gui_menu_cellular_t
          • gui_menu_cellular_t::base
          • gui_menu_cellular_t::ver_speed
          • gui_menu_cellular_t::ver_record
          • gui_menu_cellular_t::ver_hold
          • gui_menu_cellular_t::hor_hold
          • gui_menu_cellular_t::ver_offset
          • gui_menu_cellular_t::hor_offset
          • gui_menu_cellular_t::ver_offset_min
          • gui_menu_cellular_t::icon_size
        • gui_menu_cellular_gesture_parameter
          • gui_menu_cellular_gesture_parameter::callback_function
          • gui_menu_cellular_gesture_parameter::parameter
    • Qbcode
      • Usage
        • Create Widget
        • Set Size and Border
        • Qrcode Encode Notes
      • Example
      • API
        • T_QBCODE_ENCODE_TYPE
          • T_QBCODE_ENCODE_TYPE::QRCODE_ENCODE_TEXT
          • T_QBCODE_ENCODE_TYPE::QRCODE_ENCODE_BINARY
          • T_QBCODE_ENCODE_TYPE::BARCODE_ENCODE_TEXT
        • T_QBCODE_DISPLAY_TYPE
          • T_QBCODE_DISPLAY_TYPE::QRCODE_DISPLAY_SECTION
          • T_QBCODE_DISPLAY_TYPE::QRCODE_DISPLAY_IMAGE
          • T_QBCODE_DISPLAY_TYPE::BARCODE_DISPLAY_SECTION
          • T_QBCODE_DISPLAY_TYPE::BARCODE_DISPLAY_IMAGE
        • gui_qbcode_create()
        • gui_qbcode_config()
        • gui_qbcode_t
          • gui_qbcode_t::base
          • gui_qbcode_t::offset_x
          • gui_qbcode_t::offset_y
          • gui_qbcode_t::border_size
          • gui_qbcode_t::scale_x
          • gui_qbcode_t::scale_y
          • gui_qbcode_t::data
          • gui_qbcode_t::image_data
          • gui_qbcode_t::qbcode_img
          • gui_qbcode_t::type
          • gui_qbcode_t::encodeType
    • Glass
      • Glass Data Generation
        • Glass Effect Image Generator User Manual
          • Software Overview
          • Features
            • Shape Selection
            • Parameter Adjustment
            • Custom Save Path
            • Image Operations
          • Usage Instructions
            • Basic Graphics
            • Vector Graphics
            • Usage of Vector
            • Drag Functionality
          • Notes
      • Usage
      • Example
      • API
        • gui_glass_get_width()
        • gui_glass_get_height()
        • gui_glass_refresh_size()
        • gui_glass_refresh_draw_data()
        • gui_glass_set_attribute()
        • gui_glass_translate()
        • gui_glass_create_from_mem()
        • gui_glass_create_from_ftl()
        • gui_glass_create_from_fs()
        • gui_glass_get_t_x()
        • gui_glass_get_t_y()
        • gui_glass_set_data()
        • gui_glass_get_data()
        • gui_glass_enable_pressing_envent()
        • gui_glass_enable_click_envent()
        • gui_glass_t
          • gui_glass_t::base
          • gui_glass_t::draw_img
          • gui_glass_t::t_x
          • gui_glass_t::t_y
          • gui_glass_t::drag_x
          • gui_glass_t::drag_y
          • gui_glass_t::history_x
          • gui_glass_t::history_y
          • gui_glass_t::data
          • gui_glass_t::filename
          • gui_glass_t::ftl
          • gui_glass_t::storage_type
          • gui_glass_t::checksum
    • Geometry Arc
      • Overview
      • Core Features
      • Arc Group Features
      • Angle Description
      • Gradient Fill
      • Features Highlights
      • Arc Group Widget
      • Use Cases
      • Configuration Instructions
      • Complete Example
      • API
        • gui_arc_create()
        • gui_arc_set_position()
        • gui_arc_set_radius()
        • gui_arc_set_opacity()
        • gui_arc_set_color()
        • gui_arc_set_start_angle()
        • gui_arc_set_end_angle()
        • gui_arc_set_line_width()
        • gui_arc_on_click()
        • gui_arc_rotate()
        • gui_arc_scale()
        • gui_arc_translate()
        • gui_arc_set_angular_gradient()
        • gui_arc_add_gradient_stop()
        • gui_arc_clear_gradient()
        • gui_arc_t
          • gui_arc_t::base
          • gui_arc_t::draw_img
          • gui_arc_t::pixel_buffer
          • gui_arc_t::buffer_size
          • gui_arc_t::buffer_w
          • gui_arc_t::buffer_h
          • gui_arc_t::buffer_valid
          • gui_arc_t::draw_ctx
          • gui_arc_t::opacity_value
          • gui_arc_t::x
          • gui_arc_t::y
          • gui_arc_t::radius
          • gui_arc_t::start_angle
          • gui_arc_t::end_angle
          • gui_arc_t::line_width
          • gui_arc_t::color
          • gui_arc_t::cached_x
          • gui_arc_t::cached_y
          • gui_arc_t::cached_radius
          • gui_arc_t::cached_start_angle
          • gui_arc_t::cached_end_angle
          • gui_arc_t::cached_line_width
          • gui_arc_t::cached_color
          • gui_arc_t::cached_not_show
          • gui_arc_t::degrees
          • gui_arc_t::scale_x
          • gui_arc_t::scale_y
          • gui_arc_t::offset_x
          • gui_arc_t::offset_y
          • gui_arc_t::gradient
          • gui_arc_t::use_gradient
        • gui_arc_group_create()
        • gui_arc_group_add_arc()
        • gui_arc_group_set_gradient()
        • gui_arc_group_add_gradient_stop()
        • arc_def_t
          • arc_def_t::cx
          • arc_def_t::cy
          • arc_def_t::radius
          • arc_def_t::start_angle
          • arc_def_t::end_angle
          • arc_def_t::line_width
          • arc_def_t::gradient
          • arc_def_t::use_gradient
          • arc_def_t::color
        • gui_arc_group_t
          • gui_arc_group_t::base
          • gui_arc_group_t::draw_img
          • gui_arc_group_t::pixel_buffer
          • gui_arc_group_t::buffer_size
          • gui_arc_group_t::buffer_valid
          • gui_arc_group_t::draw_ctx
          • gui_arc_group_t::opacity_value
          • gui_arc_group_t::arcs
          • gui_arc_group_t::arc_count
          • gui_arc_group_t::buffer_w
          • gui_arc_group_t::buffer_h
    • Geometry Rounded Rectangle
      • Overview
      • Core Features
      • Corner Radius Description
      • Gradient Fill
      • Feature Highlights
      • Use Cases
      • Configuration Instructions
      • Complete Example
      • API
        • gui_rect_gradient_dir_t
          • gui_rect_gradient_dir_t::RECT_GRADIENT_HORIZONTAL
          • gui_rect_gradient_dir_t::RECT_GRADIENT_VERTICAL
          • gui_rect_gradient_dir_t::RECT_GRADIENT_DIAGONAL_TL_BR
          • gui_rect_gradient_dir_t::RECT_GRADIENT_DIAGONAL_TR_BL
        • gui_rect_create()
        • gui_rect_set_style()
        • gui_rect_set_opacity()
        • gui_rect_set_position()
        • gui_rect_set_size()
        • gui_rect_set_radius()
        • gui_rect_set_color()
        • gui_rect_on_click()
        • gui_rect_on_press()
        • gui_rect_rotate()
        • gui_rect_scale()
        • gui_rect_translate()
        • gui_rect_set_linear_gradient()
        • gui_rect_add_gradient_stop()
        • gui_rect_clear_gradient()
        • gui_rect_set_dither()
        • gui_rounded_rect_t
          • gui_rounded_rect_t::base
          • gui_rounded_rect_t::circle_00
          • gui_rounded_rect_t::circle_01
          • gui_rounded_rect_t::circle_10
          • gui_rounded_rect_t::circle_11
          • gui_rounded_rect_t::circle_data
          • gui_rounded_rect_t::rect_0
          • gui_rounded_rect_t::rect_1
          • gui_rounded_rect_t::rect_2
          • gui_rounded_rect_t::rect_data
          • gui_rounded_rect_t::opacity_value
          • gui_rounded_rect_t::radius
          • gui_rounded_rect_t::color
          • gui_rounded_rect_t::checksum
          • gui_rounded_rect_t::degrees
          • gui_rounded_rect_t::scale_x
          • gui_rounded_rect_t::scale_y
          • gui_rounded_rect_t::offset_x
          • gui_rounded_rect_t::offset_y
          • gui_rounded_rect_t::gradient
          • gui_rounded_rect_t::use_gradient
          • gui_rounded_rect_t::enable_dither
          • gui_rounded_rect_t::gradient_dir
          • gui_rounded_rect_t::last_matrix
    • Geometry Circle
      • Overview
      • Core Features
      • Circle Characteristics
      • Gradient Fill
      • Feature Highlights
      • Use Cases
      • Configuration Instructions
      • Complete Example
      • API
        • gui_circle_gradient_type_t
          • gui_circle_gradient_type_t::CIRCLE_GRADIENT_RADIAL
          • gui_circle_gradient_type_t::CIRCLE_GRADIENT_ANGULAR
        • gui_circle_create()
        • gui_circle_set_style()
        • gui_circle_set_position()
        • gui_circle_set_radius()
        • gui_circle_set_opacity()
        • gui_circle_set_color()
        • gui_circle_on_click()
        • gui_circle_rotate()
        • gui_circle_scale()
        • gui_circle_translate()
        • gui_circle_set_radial_gradient()
        • gui_circle_set_angular_gradient()
        • gui_circle_add_gradient_stop()
        • gui_circle_clear_gradient()
        • gui_circle_t
          • gui_circle_t::base
          • gui_circle_t::center_rect
          • gui_circle_t::arc_left
          • gui_circle_t::arc_right
          • gui_circle_t::arc_top
          • gui_circle_t::arc_bottom
          • gui_circle_t::x
          • gui_circle_t::y
          • gui_circle_t::radius
          • gui_circle_t::color
          • gui_circle_t::opacity_value
          • gui_circle_t::checksum
          • gui_circle_t::degrees
          • gui_circle_t::scale_x
          • gui_circle_t::scale_y
          • gui_circle_t::offset_x
          • gui_circle_t::offset_y
          • gui_circle_t::gradient
          • gui_circle_t::use_gradient
          • gui_circle_t::gradient_type
          • gui_circle_t::last_matrix
    • Particle
      • Feature Overview
        • Emission Shapes
        • Trajectory Models
        • Color System
        • Interaction Modes
        • Rendering Features
        • Extensibility
      • Usage
        • Running the Particle Demo
        • Using Preset Effects
      • Preset Effects
      • API
        • particle_effect_handle_t
        • gui_particle_update_cb_t
        • gui_particle_render_mode_t
          • gui_particle_render_mode_t::PARTICLE_RENDER_DIRECT
          • gui_particle_render_mode_t::PARTICLE_RENDER_BUFFERED
        • gui_particle_widget_create()
        • gui_particle_widget_get_system()
        • gui_particle_widget_set_default_image()
        • gui_particle_widget_clear()
        • gui_particle_widget_get_active_count()
        • gui_particle_widget_set_render_mode()
        • gui_particle_widget_get_render_mode()
        • gui_particle_widget_set_update_cb()
        • gui_particle_widget_add_effect()
        • gui_particle_widget_remove_effect()
        • gui_particle_widget_trigger_burst()
        • gui_particle_widget_update_position()
        • gui_particle_widget_stop_effect()
        • particle_effect_entry_t
          • particle_effect_entry_t::handle
          • particle_effect_entry_t::emitter
          • particle_effect_entry_t::behavior
          • particle_effect_entry_t::active
        • gui_particle_widget_t
          • gui_particle_widget_t::base
          • gui_particle_widget_t::ps
          • gui_particle_widget_t::config
          • gui_particle_widget_t::effects
          • gui_particle_widget_t::next_handle
          • gui_particle_widget_t::trail_emitter
          • gui_particle_widget_t::prev_x
          • gui_particle_widget_t::prev_y
          • gui_particle_widget_t::trail_active
          • gui_particle_widget_t::touch_emitter
          • gui_particle_widget_t::touch_active
          • gui_particle_widget_t::default_image
          • gui_particle_widget_t::update_cb
          • gui_particle_widget_t::update_cb_data
          • gui_particle_widget_t::render_mode
          • gui_particle_widget_t::ramless_cache
          • gui_particle_widget_t::ramless_cache_valid
          • gui_particle_widget_t::draw_img
  • Porting
    • Platform Porting
      • Acceleration
      • Display Device
        • Supported Interface Types
        • Verified Screen Drivers
      • Filesystem
      • Flash Translation Layer
      • Input Device
        • Touch Chips
      • Operating System
      • Sleep Management
    • Font Porting
      • Dot Matrix Font Library Porting
        • Glyph Loading
          • Text Encoding Conversion
          • Font Library Indexing
        • Layout
        • Character Rendering
      • API
        • gui_font_mem_init()
        • gui_font_mem_init_ftl()
        • gui_font_mem_init_fs()
        • gui_font_mem_init_mem()
        • gui_font_mem_delete()
        • gui_font_mem_load()
        • gui_font_mem_draw()
        • gui_font_mem_unload()
        • gui_font_mem_destroy()
        • get_fontlib_by_size()
        • get_fontlib_by_name()
        • gui_font_mem_layout()
        • gui_font_get_dot_info()
        • gui_font_bmp_fallback_search()
        • GUI_CHAR_HEAD
          • GUI_CHAR_HEAD::char_y
          • GUI_CHAR_HEAD::baseline
          • GUI_CHAR_HEAD::char_w
          • GUI_CHAR_HEAD::char_h
        • MEM_FONT_LIB
          • MEM_FONT_LIB::font_file
          • MEM_FONT_LIB::font_size
          • MEM_FONT_LIB::type
          • MEM_FONT_LIB::data
        • GUI_FONT_HEAD_BMP
          • GUI_FONT_HEAD_BMP::head_length
          • GUI_FONT_HEAD_BMP::file_type
          • GUI_FONT_HEAD_BMP::version
          • GUI_FONT_HEAD_BMP::font_size
          • GUI_FONT_HEAD_BMP::render_mode
          • GUI_FONT_HEAD_BMP::bold
          • GUI_FONT_HEAD_BMP::italic
          • GUI_FONT_HEAD_BMP::scan_mode
          • GUI_FONT_HEAD_BMP::index_method
          • GUI_FONT_HEAD_BMP::crop
          • GUI_FONT_HEAD_BMP::rsvd
          • GUI_FONT_HEAD_BMP::index_area_size
          • GUI_FONT_HEAD_BMP::font_name_length
          • GUI_FONT_HEAD_BMP::font_name
        • TEXT_CHARSET
          • TEXT_CHARSET::UTF_8
          • TEXT_CHARSET::UTF_16
          • TEXT_CHARSET::UTF_16LE
          • TEXT_CHARSET::UNICODE_ENCODING
          • TEXT_CHARSET::UTF_16BE
          • TEXT_CHARSET::UTF_32LE
          • TEXT_CHARSET::UTF_32BE
        • THAI_MARK_POS
          • THAI_MARK_POS::THAI_NONE
          • THAI_MARK_POS::THAI_BELOW
          • THAI_MARK_POS::THAI_ABOVE
          • THAI_MARK_POS::THAI_TOPMOST
          • THAI_MARK_POS::THAI_LEFT
          • THAI_MARK_POS::THAI_RIGHT
        • process_content_by_charset()
        • get_len_by_char_num()
        • generate_emoji_file_path_from_unicode()
        • content_has_ap_unicode()
        • content_has_ap()
        • process_ap_unicode()
        • content_has_thai_unicode()
        • content_has_thai()
        • get_thai_mark_char_width()
        • process_thai_char_struct()
        • post_process_thai_char_struct()
        • content_has_hebrew_unicode()
        • content_has_hebrew()
        • gui_text_rect_t
          • gui_text_rect_t::x1
          • gui_text_rect_t::y1
          • gui_text_rect_t::x2
          • gui_text_rect_t::y2
          • gui_text_rect_t::xboundleft
          • gui_text_rect_t::xboundright
          • gui_text_rect_t::yboundtop
          • gui_text_rect_t::yboundbottom
        • mem_char_t
          • mem_char_t::unicode
          • mem_char_t::x
          • mem_char_t::y
          • mem_char_t::w
          • mem_char_t::h
          • mem_char_t::char_y
          • mem_char_t::char_w
          • mem_char_t::char_h
          • mem_char_t::render_mode
          • mem_char_t::dot_addr
          • mem_char_t::buf
          • mem_char_t::emoji_img
          • mem_char_t::bearing_x
          • mem_char_t::bearing_y
          • mem_char_t::advance
        • ap_chars_map_t
          • ap_chars_map_t::char_offset
          • ap_chars_map_t::char_end_form
          • ap_chars_map_t::char_beginning_form_offset
          • ap_chars_map_t::char_middle_form_offset
          • ap_chars_map_t::char_isolated_form_offset
          • ap_chars_map_t::conj_to_previous
          • ap_chars_map_t::conj_to_next
          • ap_chars_map_t::ap_chars_conjunction
        • THAI_MARK_INFO
          • THAI_MARK_INFO::base_index
          • THAI_MARK_INFO::mark_unicode
          • THAI_MARK_INFO::mark_pos
    • HoneyGUI Porting
      • Important Notes
      • Build Requirements
      • Armcc Compilation
      • Armclang Compilation
      • Project Porting Example
  • Samples
    • LiteGFX
      • QuDai Introduction
      • Source Code
        • Widget Adaptation Layer
        • Platform Adaptation Layer
        • Core Lib
    • Fruit Ninja
      • Requirements
      • Source File
      • Configurations
      • Usage Steps
        • Step 1: Declare Ui Design Function
        • Step 2: Call Function
      • Design Ideas
    • Music Player
      • Implementation
        • Code
        • Widgets Tree Design
    • 3D Watch Face
      • Core Features
        • Dynamic Koi Display
        • Time Display
        • Visual Effects
      • Implementation
        • Code
        • Widget Tree Design
    • Weather
      • Core Features
        • Weather List Scrolling
        • Implementation of Weather Animations
        • Image Creation and Usage
        • Other Interface Elements
      • Implementation
        • Code
        • Widget Tree Design
    • Rainbow Analog Clock
      • Core Features
        • Analog Clock Display
        • Capsule Animation
        • User Interaction
        • Physics Engine Integration
      • Implementation
        • Code
  • Tool
    • Resource Processing Tools
      • VSCode Plugin Resource Conversion Tool
        • Tool Overview
        • Quick Start
        • Image Conversion
          • Supported Formats
          • Compression Algorithms
          • Configuration Method
          • Adaptive Formats
          • Usage
        • 3D Model Conversion
          • Supported Formats
          • Usage
        • Video Conversion
          • Supported Formats
          • Conversion Options
          • Usage
        • Font Conversion
          • Supported Formats
          • Character Set Configuration
          • Render Mode
          • Crop Optimization
          • Usage
          • File Size Estimation
        • Glass Effect Conversion
          • Supported Formats
          • Conversion Parameters
          • Usage
        • Resource Directory Structure
      • Image Convert Tool
        • Image Format Conversion
          • Configuration
          • Color Space
        • Output Files
      • Font Convert Tool
        • Font Bin Generation
        • FontConfig.json Parameter Description
        • Setting.ini Parameter Description
        • Font Size Evaluation
          • Common Scenario Recommendations
          • Character Set Comparison
            • Character Set Description
          • Bit Depth Impact
          • Font Size Impact
          • Vector Fonts
          • Selection Guidelines
      • Pack Tool
        • RTL87x2G and RTL8762D
        • RTL8763E and RTL8773DO
        • RTL8773E
          • Generate Root Bin
          • Adding Header Information
    • MP Tool
      • Download to the EVB
  • Design Spec
    • RealUI System Overview
      • RealUI Workflow
        • System
        • GUI Server
        • GUI Application
        • GUI Server Task
    • Input Subsystem
      • Touchpad
        • Touchpad Hardware and Driver
        • Get Touchpad Data
        • Touchpad Algorithm Processor
        • Widget Response
      • Keyboard
        • Hardware and Driver
        • Get Keyboard Data
        • Keyboard Algorithm Processor
        • Response
    • Display Subsystem
      • Display Workflow
        • Flash File System
        • UI Widget
        • Acceleration Layer
        • Buffer
    • Software Accelerate
      • Overall Flow Chart
      • Overview No RLE Cover Mode
        • No RLE Cover
        • No RLE Cover Matrix
      • Overview No RLE Bypass Mode
        • No RLE Bypass Mode
        • No RLE Bypass Matrix
      • Overview No RLE Filter
        • No RLE Filter
        • No RLE Filter Matrix
      • Overview No RLE Source_over
        • No RLE Alpha No Matrix
        • No RLE Alpha Matrix
      • Overview RLE Cover Mode
        • RLE Cover No Matrix
        • RLE Cover Matrix
      • Overview RLE Bypass Mode
        • RLE Bypass No Matrix
        • RLE Bypass Matrix
      • Overview RLE Filter
        • RLE Filter
        • RLE Filter Matrix
      • Overview RLE Source_over
        • RLE Source_over No Matrix
        • RLE Source_over Matrix
      • Support Input Type and Output Type
  • Third-party Support
    • Use LVGL Design An Application
      • Use LVGL V8 to Design
        • LVGL Introduction
        • HoneyGUI Simulator
          • Run LVGL in HoneyGUI Simulator
          • HoneyGUI LVGL
        • Porting
          • Display
          • Input Device
          • File System
            • ROMFS File System Image
            • LittleFS File System Image
        • LVGL Benchmark
          • Benchmark for Reference
        • Start with Demo
        • Resource Converter
          • Image Converter
            • LVGL Image Online Converter
            • HoneyGUI Image Convert Tool
              • Compressing Images
              • Importing into LVGL
              • Enabling RLE Decoder in LVGL
          • Font Converter
        • Development Resources
          • Online Doucument
          • Github Repo
          • Designer
          • Forum
          • Blog
        • FAQ
          • HoneyGUI vs LVGL Picture Drawing Frame Rate
            • GRAM Screen (280x456) RAM Block Drawing
            • PSRAM Full Frame Buffer Drawing (800x480)
            • Analysis
          • HoneyGUI vs LVGL RAM Consumption
          • Conclusion
      • Use LVGL V9 to Design
        • Introduction to LVGL
        • Simulator
          • Running LVGL in the Simulator
          • LVGL Structure
        • Actual Device Porting
          • Display
          • Input Devices
          • File System
        • LVGL Benchmark Test
          • Benchmark Reference
        • Getting Started with Demo Development
          • LVGL Native Demo
          • RTK Extension Demo
            • Card Demo
            • Cellular Demo
            • Tileview Transition Demo
            • Tileview Transition Demo with 2.5D Transition Effects and Snapshot
            • 3D Model Demo
        • Resource Converter
          • Media Converter
            • LVGL Image Converter
            • Realtek Media Convert Tool
              • LVGL
              • RTZIP
              • JPG
              • AVI
          • Font Converter
            • LVGL Online Conversion Tool
            • Realtek Font Converter
        • Development Resources Support
          • Online Documentation
          • GitHub Repository
          • Designer
            • Squareline Studio
              • UI Design
              • Resource Conversion
              • Project Porting
              • Feature Extensions
            • LVGL Editor
            • EEZ Studio
            • GUI Guider
          • Forum
          • Blog
    • Use ARM-2D Design An Application
      • ARM-2D Introduction
  • FAQ
    • Development environment
      • Simulator in VSCode
        • Installing the Appropriate Version of the Toolchain
        • Adding Toolchain to System Environment Variables
    • Porting
      • User Data
      • JS Malloc Heap
      • Feed Watch Dog
      • Not Support FPU
      • File System
      • Flash Setting
      • CPU Frequence
      • SCONS Version
    • Specification
      • Graphics
      • Memory Usage
        • RTL8772F Demo
        • Widget Memory Usage
    • How to Increase FPS
      • Pixel Format
      • Hardware Acceleration
      • Data Transmission Speed
      • UI Design
      • Image Compression
      • Font
        • Custom Binary Files
        • Standard TTF Files
    • Display
      • Font
        • Why Is the Font Anti-Aliasing Effect Poor or White Font Edges Have Abnormal Colors?
      • Image
        • Why Do Black Stripes Appear After Image Rotation?
      • Screen Rotation
        • Does HoneyGUI Support Screen Rotation?
        • How Is Screen Rotation Implemented?
        • What Impact Does Screen Rotation Have on Rendering Frame Rate?
        • How to Enable Screen Rotation?
        • What Rotation Methods Are Available for Screen Rotation?
          • Quick Decision Flow
          • Detailed Rotation Solutions
          • Key Concepts
          • Typical Application Cases
          • Performance Optimization Recommendations
  • Get PDF
  • Glossary
  • Release Notes
    • v2.2.0.0
      • Major Changes
      • Change Logs
      • API Migration Guide
        • Image Widget API Changes
    • v1.0.6.6
      • Major Changes
      • Change Logs
RTKIOT GUI
  • Widgets
  • Menu Cellular
  • EN/中文

Menu Cellular

The menu cellular widget displays a set of icons in a honeycomb shape menu.

Usage

Create Menu Cellular Widget

The gui_menu_cellular_create() function can be used to create a menu cellular widget. Users need to enter the icons set's image file array.

Add Click Callback Event

The gui_menu_cellular_on_click() function can be used to add click callback event.

Set Offset

The gui_menu_cellular_offset() function can be used to adjust horizontal and vertical offset for better display.

Development Example

The development example of cellular menu widget is as follows. First, use the canvas widget to draw a set of solid-color icons, and then pass these icons to the cellular menu widget to display.

#include "guidef.h"
#include "gui_img.h"
#include "gui_win.h"
#include "gui_obj.h"
#include "gui_canvas.h"
#include "gui_menu_cellular.h"
#include "string.h"
#include "stdio.h"
#include "stdlib.h"
#include "gui_server.h"
#include "gui_components_init.h"

#define ICON_NUM 56
#define ICON_SIZE gui_get_screen_width() / 4

static size_t buffer_size = 0;
static NVGcolor color[4];
static uint8_t color_index = 0;

static void init_colors(void)
{
    color[0] = nvgRGBAf(1.0f, 1.0f, 1.0f, 1.0f); //white
    color[1] = nvgRGBAf(1.0f, 0, 0, 1.0f);       //red
    color[2] = nvgRGBAf(0, 1.0f, 0, 1.0f);       //green
    color[3] = nvgRGBAf(0, 0, 1.0f, 1.0f);       //blue
}

static void draw_circle_cb(NVGcontext *vg)
{
    nvgBeginPath(vg);
    nvgCircle(vg, ICON_SIZE / 2.0f, ICON_SIZE / 2.0f, ICON_SIZE / 2.0f);
    nvgFillColor(vg, color[color_index++]);
    nvgFill(vg);
    color_index %= 4;
}

static int app_init(void)
{
    init_colors();
    void *img_data_array[ICON_NUM] = {0};
    for (int i = 0; i < ICON_NUM; i++)
    {
        int image_h = ICON_SIZE;
        int image_w = ICON_SIZE;
        int pixel_bytes = 4;
        buffer_size = image_h * image_w * pixel_bytes + sizeof(gui_rgb_data_head_t);
        img_data_array[i] = gui_lower_malloc(buffer_size);
        memset(img_data_array[i], 0, buffer_size);
        gui_canvas_render_to_image_buffer(GUI_CANVAS_OUTPUT_RGBA, 0, image_w, image_h, draw_circle_cb,
                                          (uint8_t *)img_data_array[i]);

    }
    int array_size = sizeof(img_data_array) / sizeof(img_data_array[0]);
    gui_menu_cellular_t *menu = gui_menu_cellular_create(gui_obj_get_root(), ICON_SIZE, img_data_array,
                                                         array_size, IMG_SRC_MEMADDR);
    GUI_UNUSED(menu);

    return 0;
}

GUI_INIT_APP_EXPORT(app_init);


API

Functions

gui_menu_cellular_t *gui_menu_cellular_create(void *parent, int icon_size, void *icon_array[], int array_size, IMG_SOURCE_MODE_TYPE src_mode)

Config offset.

Parameters:
  • menu_cellular -- Menu_cellular pointer.

  • offset_x -- X-axis offset.

  • offset_y -- Y-axis offset.

  • src_mode -- Image source mode, support file system and memory address.

void gui_menu_cellular_on_click(gui_menu_cellular_t *menu_cellular, struct gui_menu_cellular_gesture_parameter *para_array, int array_length)

Add click events on images based on the cellular menu.

Parameters:
  • menu_cellular -- Menu_cellular pointer.

  • para_array -- Array of gesture parameters corresponding to the click event.

  • array_length -- Length of the gesture parameters array.

void gui_menu_cellular_offset(gui_menu_cellular_t *menu_cellular, int offset_x, int offset_y)

Config offset.

Parameters:
  • menu_cellular -- Menu_cellular pointer.

  • offset_x -- X-axis offset.

  • offset_y -- Y-axis offset.

struct gui_menu_cellular_t

Menu_cellular structure.

Public Members

gui_obj_t base
int16_t ver_speed
int16_t ver_record[5]
int16_t ver_hold
int16_t hor_hold
int16_t ver_offset

Vertical offset.

int16_t hor_offset

Horizontal offset.

int16_t ver_offset_min

Minimum vertical offset.

int16_t icon_size
struct gui_menu_cellular_gesture_parameter

Public Members

gui_event_cb_t callback_function
void *parameter
Previous Next

Copyrights ©瑞晟微电子有限公司 2026. All rights reserved. 苏ICP备10062199号-8