×
Logo
  • 入门指南
    • 源代码项目下载
    • 介绍
    • 软件架构
    • 安装在 Windows 操作系统上
      • 安装编译器
      • 安装 Python
      • 安装 Scons
      • 安装 kconfiglib
      • 配置应用程序(Menuconfig)
        • 使用 Menuconfig 进行配置
        • 操作说明
        • 配置文件说明
      • 通过 CMD 启动(Scons)
      • 通过 CMD 启动(CMake)
        • 依赖软件
        • 初始化构建环境
        • 配置应用程序
        • 编译项目
        • 运行程序
      • 通过 VSCode 启动
        • 安装 VSCode
        • 打开项目
        • 运行项目
    • 显示
      • 手表工程
      • 仪表盘工程
  • GUI 应用程序
    • C 应用程序
      • 创建 C 应用程序控件树
      • C 应用程序转场效果
    • 使用可视化工具设计应用程序
  • 控件
    • 对象 (Obj)
      • 用法
      • API
    • 图像 (Img)
      • 用法
        • 创建控件
        • 设置焦点
        • 设定属性
        • 获取高度/宽度
        • 刷新大小
        • 混合模式
        • 移动
        • 旋转
        • 缩放
        • 不透明度
        • 质量
        • 截屏
      • 示例
      • API
    • 文本 (Text)
      • 特性
      • 用法
        • 字体文件
        • 创建文本控件
        • 设置文本属性
          • 设置文本
          • 字体类型
          • 文本内容
          • 文本编码
          • 文本转换为图片
          • 文本颜色
          • 字体大小
          • 自动换行
          • 字符间距和行间距
          • 矩阵变换
          • 最小缩放比例
          • 字体渲染模式
          • EMOJI 表情
          • 文本模式
          • 文本移动
      • 示例
        • 简单文本控件
      • API
    • 3D 模型 (3D Model)
      • 3D 模型资源处理
        • OBJ 静态模型
        • GLTF 骨骼动画模型
        • 模型预处理
      • 3D 模型生成
        • 创建模型
        • 变换控制
          • 全局变换
            • 相机变换
            • 世界变换
          • 面变换
      • 3D 模型绘制
        • 创建控件
        • 设置点击事件
        • 设置动画
      • 示例
        • 3D 蝴蝶
        • 3D 人脸
        • 3D 小狗
        • 3D 应用列表
        • 3D 机器人
      • 帧率测试
      • API
    • 视图 (View)
      • 用法
        • 注册视图控件描述子
        • 获得视图控件描述子
        • 创建视图控件
        • 设置视图切换事件
        • 立即切换视图
        • 设置动画步进长度
        • 设置透明度
        • 获取当前显示的视图控件指针
        • 获取切换过程中新创建视图控件指针
      • 示例
        • 视图控件
      • API
    • 列表 (List)
      • 用法
        • 创建列表控件
        • 设置列表控件的样式
        • 设置列表控件的减速系数
        • 设置列表控件的偏移位置
        • 设置列表控件滚动条颜色
        • 设置列表控件表格数量
        • 设置卡片样式堆叠位置
        • 设置列表控件超出区域范围
        • 设置列表控件自动对齐
        • 设置列表控件惯性滚动
        • 设置列表循环滚动
      • 示例
      • API
    • 画布 (Canvas)
      • 组件概述
      • 核心功能
        • 创建与初始化
        • 图像输出
      • 示例代码
      • API
    • 蜂窝菜单 (Menu Cellular)
      • 用法
        • 创建蜂窝菜单控件
        • 添加点击回调事件
        • 设置偏移
      • 开发示例
      • API
    • 二维码或条形码 (Qbcode)
      • 用法
        • 创建控件
        • 设置尺寸和边框
        • 二维码编码注释
      • 示例
      • API
    • 玻璃效果 (Glass)
      • 玻璃数据生成
        • 玻璃效果图像生成器使用说明
          • 软件概述
          • 功能实现
            • 形状选择
            • 参数调节
            • 自定义保存路径
            • 图像操作
          • 使用方法
            • 基础图形
            • 矢量图形
            • 矢量图形使用方法
            • 拖动功能
          • 注意事项
      • 用法
      • 示例
      • API
    • 圆弧 (Geometry Arc)
      • 概述
      • 核心功能
      • 角度说明
      • 特性亮点
      • 应用场景
      • 配置说明
      • 完整示例
      • API
    • 圆角矩形 (Geometry Rounded Rectangle)
      • 概述
      • 核心功能
      • 圆角说明
      • 特性亮点
      • 应用场景
      • 配置说明
      • 完整示例
      • API
    • 圆 (Geometry Circle)
      • 概述
      • 核心功能
      • 圆形特性
      • 特性亮点
      • 应用场景
      • 配置说明
      • 完整示例
      • API
  • 移植
    • 平台移植
      • 加速
      • 显示设备
      • 支持接口类型
      • 已验证屏幕驱动
      • 文件系统
      • 闪存转换层
      • 输入设备
      • 触摸芯片
      • 操作系统
        • 休眠管理
    • 字库移植
      • 点阵字库移植
        • 字形加载
          • 文本编码转换
          • 字库索引
        • 排版
        • 字符绘制
      • API
    • HoneyGUI 移植
      • 注意事项
      • 编译环境要求
      • Armcc 编译
      • Armclang 编译
      • 工程移植示例
  • 示例
    • LiteGFX
      • 趣戴介绍
      • 源文件
        • 控件适配层
        • 平台适配层
        • 核心 lib
    • 水果忍者
      • 环境需求
      • 源文件
      • 配置
      • 调用步骤
        • 步骤 1: Declare the APP ui design function
        • 步骤 2: Call function
      • 设计思路
    • 音乐播放器
      • 实现
        • 代码
        • 控件树设计
    • 3D 表盘
      • 核心功能
        • 动态锦鲤展示
        • 时间显示
        • 视觉特效
      • 实现
        • 代码
        • 控件树设计
    • 天气
      • 核心功能
        • 天气列表滑动
        • 天气动画的实现
        • 图像创建与使用
        • 其他界面元素
      • 实现
        • 代码
        • 控件树设计
    • 彩虹模拟时钟
      • 核心功能
        • 模拟时钟显示
        • 胶囊动画
        • 用户交互
        • 物理引擎集成
      • 实现
        • 代码
  • 工具
    • 图像转换工具
      • 图像格式转换
        • 配置
        • 颜色空间
      • 输出文件
    • 字体转换工具
      • 生成字体 bin 文件
      • FontConfig.json 参数说明
      • Setting.ini 参数说明
    • 打包工具
      • RTL87x2G 和 RTL8762D
      • RTL8763E 和 RTL8773DO
      • RTL8773E
        • 生成用户数据
        • 添加头部信息
    • 烧录工具
      • 下载到 EVB 中
  • 设计说明
    • RealUI 系统概述
      • RealUI 工作流程
        • 系统
        • GUI 服务器
        • GUI 应用程序
        • GUI 服务器任务
    • 输入子系统
      • 触摸板
        • 触摸板硬件和驱动程序
        • 获取触摸板数据
        • 触摸板算法处理器
        • 控件响应
      • 键盘
        • 硬件和驱动程序
        • 获取键盘数据
        • 键盘算法处理器
        • 响应
    • 显示子系统
      • 显示工作流程
        • Flash 文件系统
        • UI 控件
        • 加速层
        • 缓冲区
    • 软件加速
      • 总体流程图
      • 无 RLE 覆盖模式概述
        • 无 RLE 覆盖模式(不带矩阵变换)
        • 无 RLE 覆盖模式(带矩阵变换)
      • 无 RLE 旁路模式概述
        • 无 RLE 旁路模式(不带矩阵变换)
        • 无 RLE 旁路模式(带矩阵变换)
      • 无 RLE 滤黑模式概述
        • 无 RLE 滤黑模式(不带矩阵变换)
        • 无 RLE 旁路模式(带矩阵变换)
      • 无 RLE 混合模式概述
        • 无 RLE 混合覆盖模式(不带矩阵变换)
        • 无 RLE 混合覆盖模式(带矩阵变换)
      • RLE 覆盖模式概述
        • RLE 覆盖模式(不带矩阵变换)
        • RLE 覆盖模式(带矩阵变换)
      • RLE 旁路模式概述
        • RLE 旁路模式(不带矩阵变换)
        • RLE 旁路模式(带矩阵变换)
      • RLE 滤黑模式概述
        • RLE 滤黑模式(不带矩阵变换)
        • RLE 滤黑模式(带矩阵变换)
      • RLE 混合模式概述
        • RLE 混合模式(不带矩阵变换)
        • RLE 源覆盖模式(带矩阵变换)
      • 支持的输入类型和输出类型
  • 第三方支持
    • 使用 LVGL 设计应用程序
      • 使用 LVGL V8 设计
        • LVGL 简介
        • HoneyGUI 模拟器
          • 在 HoneyGUI 模拟器中运行 LVGL
          • HoneyGUI LVGL
        • 实机移植
          • 显示
          • 输入设备
          • 文件系统
            • ROMFS 文件系统镜像
            • LittleFS 文件系统镜像
        • LVGL Benchmark 测试
          • 参考 Benchmark
        • 从 Demo 入门开发
        • 资源转换器
          • 图片转换器
            • LVGL 在线转换工具
            • HoneyGUI 图像转换工具
              • 压缩图片
              • 导入 LVGL
              • LVGL 启用 RLE 解码器
          • 字库转换器
        • 开发资源支持
          • 在线文档
          • Github 仓库
          • 设计器
          • 论坛
          • 博客
        • 常见问题
          • HoneyGUI vs LVGL 绘制图片帧率
            • GRAM 屏幕 (280x456)SRAM 分块绘制
            • PSRAM 整帧 buffer 绘制(800x480)
            • 分析
          • HoneyGUI vs LVGL RAM消耗
          • 结论
      • 使用 LVGL V9 设计
        • LVGL 简介
        • 模拟器
          • 在模拟器中运行 LVGL
          • LVGL 结构
        • 实机移植
          • 显示
          • 输入设备
          • 文件系统
        • LVGL Benchmark 测试
          • 参考 Benchmark
        • 从 Demo 入门开发
          • LVGL 原生 Demo
          • RTK 扩展 Demo
            • 卡片示例
            • 蜂窝列表示例
            • 平铺视图转场示例
            • 带有 2.5D 转场特效和快照缓存机制的平铺试图转场示例
            • 3D 模型示例
        • 资源转换器
          • 媒体资源转换工具
            • LVGL 在线图片转换工具
            • Realtek 媒体资源转换工具
              • LVGL
              • RTZIP
              • JPG
              • AVI
          • 字体转换器
            • LVGL 在线转换工具
            • Realtek 字体转换器
        • 开发资源支持
          • 在线文档
          • Github 仓库
          • 设计器
            • Squareline Studio
              • UI设计
              • 资源转换
              • 工程移植
              • 功能扩展
            • LVGL Editor
            • EEZ Studio
            • GUI Guider
          • 论坛
          • 博客
    • 使用 ARM-2D 设计应用程序
      • ARM-2D 介绍
  • 常见问题
    • 开发环境
      • 在 VSCode 中使用模拟器
        • 安装适当版本的工具链
        • 添加工具链到系统环境变量
    • 移植
      • 用户数据
      • JS 分配堆内存
      • 喂狗
      • 不支持 FPU
      • 文件系统
      • Flash 设置
      • CPU 频率
      • SCONS 版本
    • 规格
      • 图形
      • 内存使用量
        • RTL8772F示例
        • 控件内存使用量
    • 帧率
      • 像素格式
      • 硬件加速
      • 数据传输速度
      • UI 设计
      • 图像压缩
      • 字体
        • 自定义二进制文件
        • 标准 TTF 文件
    • 显示
      • 字体抗锯齿
      • 图像显示
  • 获取 PDF
  • 专业术语
  • 版本说明
    • v1.0.6.6
      • Major Changes
      • Change Logs
RTKIOT GUI
  • 控件
  • 蜂窝菜单 (Menu cellular)
  • EN/中文

蜂窝菜单 (Menu cellular)

蜂窝菜单控件以蜂窝形状显示一组图标。

用法

创建蜂窝菜单控件

使用 gui_menu_cellular_create() 函数创建蜂窝菜单控件,用户需要提供代表图标集的图像文件数组。

添加点击回调事件

使用 gui_menu_cellular_on_click() 函数添加点击图标的回调事件。

设置偏移

使用 gui_menu_cellular_offset() 函数可以调整水平和垂直偏移以获得更好的显示效果。

开发示例

蜂窝菜单控件的开发示例如下,首先使用画布控件绘制一组纯色图标,再将这些图标传递给蜂窝菜单控件进行显示:

#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;
NVGcolor color[] =
{
    {1.0f, 1.0f, 1.0f, 1.0f}, //white
    {1.0f, 0, 0, 1.0f},       //red
    {0, 1.0f, 0, 1.0f},       //green
    {0, 0, 1.0f, 1.0f},       //blue
};
static uint8_t color_index = 0;

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)
{
    uint32_t *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);

    return 0;
}

GUI_INIT_APP_EXPORT(app_init);


API

Functions

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

Create a menu_cellular widget.

Parameters
  • parent -- Father widget it nested in.

  • icon_size -- Size of icon.

  • icon_array -- Icons' image data address array.

  • array_size -- Size of array.

Returns

Menu_cellular pointer.

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.

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.

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 ©瑞晟微电子有限公司 2025. All rights reserved. 苏ICP备10062199号-8