#ifndef _API_GUI_H #define _API_GUI_H typedef struct rect_t_ { s16 x; s16 y; s16 wid; s16 hei; } rect_t; typedef struct point_t_ { s16 x; s16 y; } point_t; typedef struct area_t_ { s16 wid; s16 hei; } area_t; typedef void widget_t; typedef void widget_page_t; typedef void widget_image_t; //功能比较全 typedef void widget_icon_t; //只有简单的贴图和缩放功能，但是更省Buffer typedef void widget_text_t; typedef void widget_rect_t; typedef void widget_qrcode_t; typedef void widget_arc_t; typedef void widget_chart_t; typedef void widget_circle_t; //=== 常用颜色，非常用颜色可以用make_color函数来生成 === #define COLOR_WHITE 0xFFFF #define COLOR_BLACK 0 #define COLOR_RED 0xF800 #define COLOR_GREEN 0x07E0 #define COLOR_BLUE 0x001F #define COLOR_YELLOW 0xFFE0 #define COLOR_MAGENTA 0xF81F #define COLOR_CYAN 0x07FF #define COLOR_GRAY 0x8410 #define COLOR_DARKGRAY 0xAD55 #define COLOR_DIMGRAY 0x6B4D //=== GUI === //GUI初始化参数 typedef struct gui_init_param_t_ { u16 screen_width; //屏幕宽 u16 screen_height; //屏幕高 u8 *element_buf; //element与widget缓存 u8 *widget_buf; u16 element_buf_size; u16 widget_buf_size; u8 *temp_buf; //中间计算缓存 u32 temp_buf_size; //中间计算缓存大小 u8 *lines_buf; //推屏缓存(双份) u32 lines_buf_size; //推屏缓存大小 u16 lines_count; //每次推屏的行数 u16 maxsize_parbuf; //PAR解码缓存 u32 font_res_addr; //字库资源地址 u16 max_font_size; u8 font_wspace; //字的间距 u8 font_hspace; u8 rsvd[20]; } gui_init_param_t; void os_gui_init(const gui_init_param_t *param); //GUI初始化 void os_gui_draw(void); //TE信号起来后，GUI开始绘制图形 void gui_process(void); //主循环调用，更新Widget绘制 void gui_set_te_margin(u8 margin); //设置TE时隙 void gui_widget_refresh(void); //刷新widget void os_gui_draw_w4_done(void); //等待当前帧刷完 area_t gui_image_get_size(u32 res_addr); //获取图像尺寸 area_t widget_image_get_size(widget_image_t *img); //根据控件获取图像尺寸 typedef enum WGT_CHART_TYPE_ { CHART_TYPE_BAR, //直角柱形 CHART_TYPE_BAR_ARC, //圆角柱形 }WGT_CHART_TYPE; /** * @brief 生成一个RGB565的颜色值 * @param[in] r : #ff0000 红色饱和度(0 ~ 0xff) * @param[in] g : #00ff00 绿色饱和度(0 ~ 0xff) * @param[in] b : #0000ff 蓝色饱和度(0 ~ 0xff) * @return RGB565的颜色值 **/ u16 make_color(u8 r, u8 g, u8 b); //============= Widget Common ==============// /** * @brief 创建控件池(最多允许创建两个)，并创建首个widget_page * @param[in] flag_top : 是否在顶层 * @return page **/ widget_page_t *widget_pool_create(bool flag_top); /** * @brief 清除一个控件池 * @param[in] widget : 首个widget_page * @return 无 **/ void widget_pool_clear(widget_page_t *widget); /** * @brief 获取第一个Widget，配合widget_get_next来遍历所有Widget * @param[in] 无 * @return 无 **/ void *widget_get_head(void); /** * @brief 根据当前widget获取下一个widget * @param[in] widget:当前的widget * @return next widget **/ widget_t *widget_get_next(const widget_t *widget); /** * @brief 获取Widget的父Page * @param[in] widget:当前的widget * @return 当前widget的widget_page **/ widget_page_t *widget_get_parent(const widget_t *widget); /** * @brief 设置Widget的Alpha值 * @param[in] widget:需要设置的控件 * @param[in] alpha:透明度(0 ~ 0xff) * @return 当前widget的widget_page **/ void widget_set_alpha(widget_t *widget, u8 alpha); /** * @brief 获取Widget的Alpha值 * @param[in] widget:控件指针 * @return alpha:透明度(0 ~ 0xff) **/ u8 widget_get_alpha(widget_t *widget); /** * @brief 设置Widget是否按中心点来设置坐标 * @param[in] widget:需要设置的控件 * @param[in] align_center:true:按中心对齐,false：按左上角对齐，default:true * @return 无 **/ void widget_set_align_center(widget_t *widget, bool align_center); /** * @brief 设置Widget是否按中心点来设置坐标 * @param[in] widget:需要设置的控件 * @param[in] align_center:true:按中心对齐,false：按左上角对齐，default:true * @return 无 **/ bool widget_get_align_center(widget_t *widget); /** * @brief 设置Widget坐标 * @param[in] widget:需要设置的控件 * @param[in] x:以屏幕左上角为原点，控件的中心点或左上角的x坐标 * @param[in] y:以屏幕左上角为原点，控件的中心点或左上角的y坐标 * @return 无 **/ void widget_set_pos(widget_t *widget, s16 x, s16 y); /** * @brief 设置Widget大小 * @param[in] widget:需要设置的控件 * @param[in] width:宽度 * @param[in] height:高度 * @return 无 **/ void widget_set_size(widget_t *widget, s16 width, s16 height); /** * @brief 设置Widget坐标及大小 * @param[in] widget:需要设置的控件 * @param[in] x:以屏幕左上角为原点，控件的中心点或左上角的x坐标 * @param[in] y:以屏幕左上角为原点，控件的中心点或左上角的y坐标 * @param[in] width:宽度 * @param[in] height:高度 * @return 无 **/ void widget_set_location(widget_t *widget, s16 x, s16 y, s16 width, s16 height); /** * @brief 获取Widget坐标及大小 * @param[in] widget:控件指针 * @return 控件的位置和大小 **/ rect_t widget_get_location(const widget_t *widget); /** * @brief 获取Widget绝对坐标及大小 * @param[in] widget:需要设置的控件 * @return 控件的绝对位置和大小 **/ rect_t widget_get_absolute(const widget_t *widget); /** * @brief 设置Widget的显示状态 * @param[in] widget:需要设置的控件 * @param[in] visible:true:可见 false:隐藏 * @return 无 **/ void widget_set_visible(widget_t *widget, bool visible); /** * @brief 获取widget显示状态 * @param[in] widget:控件指针 * @return 显示状态 true:可见 false:隐藏 **/ bool widget_get_visble(widget_t *widget); //============= Widget Page ==============// /** * @brief 创建一个Page型widget * @param[in] parent:父控件 * @return page widget **/ widget_page_t *widget_page_create(widget_page_t *parent); /** * @brief 判断widget是否为一个Page型 * @param[in] widget:需要判断的控件 * @return true or false **/ bool widget_is_page(const void *widget); /** * @brief 设置Page client相对Page Window左上的坐标。0,0则对齐到左上角 * @param[in] widget:需要设置的控件 * @param[in] x:相对于左上角x坐标 * @param[in] y:相对于左上角y坐标 * @return 无 **/ void widget_page_set_client(widget_page_t *widget, s16 x, s16 y); /** * @brief 设置Page window缩放到的大小。0,0则不进行缩放 * @param[in] wid:缩放的宽度 * @param[in] hei:缩放的高度 * @return 无 **/ void widget_page_scale_to(widget_page_t *widget, s16 wid, s16 hei); /** * @brief 更新Page信息 * @param[in] 无 * @return 无 **/ void widget_page_update(void); //============= Widget Image ==============// enum { ROT_MODE_NORMAL, //普通旋转模式 ROT_MODE_X, //只旋转X (平行四边形, 2.5D效果) }; /** * @brief 创建图片widget,支持缩放、裁剪和旋转 * @param[in] parent:父控件 * @param[in] res_addr:图片地址，在ui.h中获取 * @return widget_image_t **/ widget_image_t *widget_image_create(widget_page_t *parent, u32 res_addr); /** * @brief 设置图片 * @param[in] img:图片控件 * @param[in] res_addr:图片地址，在ui.h中获取 * @return 无 **/ void widget_image_set(widget_image_t *img, u32 res_addr); /** * @brief 设置图片的旋转角度，图片旋转时，需要经过转换工具勾上 旋转压缩 的选项 * @param[in] img_ptr:图片控件 * @param[in] angle:旋转角度 0 ~ 3600 * @return 无 **/ void widget_image_set_rotation(void *img_ptr, s16 angle); /** * @brief 按坐标设置图像旋转角度，图片旋转时，需要经过转换工具勾上 旋转压缩 的选项 * @param[in] img:图片控件 * @param[in] x:相对于x * @param[in] y:相对于y * @return 无 **/ void widget_image_set_rotation_bypos(widget_image_t *img, s16 x, s16 y); /** * @brief 设置图片的旋转中心点 * @param[in] img_ptr:图片控件 * @param[in] x:相对于x * @param[in] y:相对于y * @return 无 **/ void widget_image_set_rotation_center(void *img_ptr, s16 x, s16 y); /** * @brief 设置图像旋转模式 * @param[in] img:图片控件 * @param[in] mode:ROT_MODE_NORMAL:普通旋转模式， ROT_MODE_X：只旋转X (平行四边形, 2.5D效果) * @return 无 **/ void widget_image_set_rotation_mode(widget_image_t *img, u8 mode); /** * @brief 裁剪图片区域 * @param[in] img:图片控件 * @param[in] x:相对于图片左上角x坐标 * @param[in] y:相对于图片左上角y坐标 * @param[in] wid:截取宽度 * @param[in] hei:截取高度 * @return 无 **/ void widget_image_cut(widget_image_t *img, s16 x, s16 y, s16 wid, s16 hei); //设置图像前景色 AT(.text.widget) void widget_image_set_color(widget_image_t *img, u16 color); //============= Widget Icon ==============// /** * @brief 创建图标控件(和wiget_image的区别：只有简单的贴图和缩放功能，但是更省Buffer) * @param[in] parent:父控件 * @param[in] res_addr:图片地址，在ui.h中获取 * @return 图标控件 **/ widget_icon_t *widget_icon_create(widget_page_t *parent, u32 res_addr); /** * @brief 判断是否是一个图标控件 * @param[in] icon:任意widget * @return true or false **/ bool widget_is_icon(widget_icon_t *icon); /** * @brief 设置图标的图片 * @param[in] icon:图标控件 * @param[in] res_addr:图片地址，在ui.h中获取 * @return 无 **/ void widget_icon_set(widget_icon_t *icon, u32 res_addr); //============= Widget Text ==============// /** * @brief 创建一个文本控件. * @param[in] parent:父控件 * @param[in] max_word_cnt:最多多少个字(不分全半角) * @return 文本控件 **/ widget_text_t *widget_text_create(widget_page_t *parent, u16 max_word_cnt); /** * @brief 设置文本字库, 同时清空文本内容(需要重新设置文本内容) * @param[in] txt:文本控件 * @param[in] font_res_addr:字库地址, 0则表示用回系统字体 * @return 无 **/ void widget_text_set_font(widget_text_t *txt, u32 font_res_addr); /** * @brief 清空文本内容. * @param[in] txt:文本控件 * @return 无 **/ void widget_text_clear(widget_text_t *txt); /** * @brief 设置文本内容. * @param[in] txt:文本控件 * @param[in] text:字符串文本内容 * @return 无 **/ void widget_text_set(widget_text_t *txt, const char *text); /** * @brief 设置文本颜色. * @param[in] txt:文本控件 * @param[in] color:rgb565颜色值 * @return 无 **/ void widget_text_set_color(widget_text_t *txt, u16 color); /** * @brief 设置是否支持自适应大小 * @param[in] txt:文本控件 * @param[in] autosize:true or false * @return 无 **/ void widget_text_set_autosize(widget_text_t *txt, bool autosize); /** * @brief 设置文本是否自动换行。 * @param[in] txt:文本控件 * @param[in] wordwrap:true or false * @return 无 **/ void widget_text_set_wordwrap(widget_text_t *txt, bool wordwrap); /** * @brief 设置Client相对左上的坐标。0,0则对齐到左上角(用于文字滚动) * @param[in] txt:文本控件 * @param[in] rel_x:以文本布局方向为参考系，内容相对于控件左上角x坐标 * @param[in] rel_y:以文本布局方向为参考系，内容相对于控件左上角y坐标 * @return 无 **/ void widget_text_set_client(widget_text_t *txt, s16 rel_x, s16 rel_y); /** * @brief 以文本布局方向为参考系，获取字体区域 * @param[in] txt:文本控件 * @return 文本内容的宽度和高度 **/ area_t widget_text_get_area(widget_text_t *txt); /** * @brief 以文本布局方向为参考系，获取文本框区域 * @param[in] txt:文本控件 * @return 文本框的宽度和高度 **/ area_t widget_text_get_box_area_rel(widget_text_t *txt); /** * @brief 获取文字行数 * @param[in] txt:文本控件 * @return ：行数 **/ u8 widget_text_get_line_cnt(widget_text_t *txt); /** * @brief 获取文字行数 * @param[in] txt:文本控件 * @return ：像素点数 **/ u16 widget_text_get_autoroll_circ_pixel(widget_text_t *txt); /** * @brief 获取系统字高(典型值，非最大值) * @param[in] 无 * @return 系统字库字体字高 **/ u8 widget_text_get_height(void); /** * @brief 设置排版方向 * @param[in] right_align:排版方向是否右对齐 * @return 无 **/ void widget_text_set_right_align(widget_text_t *txt, bool right_align); /** * @brief 设置滚动模式 * @param[in] txt : 文本指针 * @param[in] mode : 滚动模式，0:不滚动, 1:环形滚动 2、左右、普通滚动 **/ void widget_text_set_autoroll_mode(widget_text_t *txt, u8 autoroll_mode); /** * @brief 设置环形滚动间隔 * @param[in] txt : 文本指针 * @param[in] space_pixel : 环形滚动间隔，以英文空格为单位，默认是50 **/ void widget_text_set_autoroll_circ_space(widget_text_t *txt, u16 space_pixel); /** * @brief 获取排版方向 * @param[in] 无 * @return 排版方向1:右对齐 0:左对齐 **/ bool widget_text_get_right_align(widget_text_t *txt); /** * @brief 获取布局方向 * @param[in] 无 * @return 布局方向0:横向布局 1:竖向布局 **/ int widget_text_get_layout(widget_text_t *txt); //============= Widget Rect ==============// /** * @brief 创建一个矩形控件 * @param[in] parent：父控件 * @return 矩形控件 **/ widget_rect_t *widget_rect_create(widget_page_t *parent); /** * @brief 设置矩形的填充颜色 * @param[in] rect:矩形控件 * @param[in] color:填充颜色 * @return 无 **/ void widget_rect_set_color(widget_rect_t *rect, u16 color); /** * @brief 设置矩形的圆角半径 * @param[in] rect:矩形控件 * @param[in] r:圆角半径 当半大于高或宽的一半时，底层自动把半径设置为其中最小的；(高或宽的一半) * @return 无 **/ void widget_rect_set_radius(widget_rect_t *rect, u16 r); //============= Widget QRCode ==============// enum { QRCODE_TYPE_2D, //二维码 QRCODE_TYPE_HORIZONTAL, //横向条形码 QRCODE_TYPE_VERTICAL, //竖向条形码 }; /** * @brief 创建Widget QRCode * @param[in] parent：父控件 * @param[in] qr_type：类型 * @param[in] max_ch_cnt:需要支持的最大字符数 * @return 矩形控件 **/ widget_qrcode_t *widget_qrcode_create(widget_page_t *parent, u8 qr_type, u16 max_ch_cnt); /** * @brief 设置QRCode * @param[in] qrcode：码控件 * @param[in] str：内容信息 * @return 无 **/ void widget_qrcode_set(widget_qrcode_t *qrcode, const char *str); /** * @brief 设置单位宽度, 同时会自动计算更新QRCode的大小 * @param[in] qrcode：码控件 * @param[in] bit_wid：像素宽度 * @return 无 **/ void widget_qrcode_set_bitwid(widget_qrcode_t *qrcode, u8 bit_wid); /** * @brief 设置显示宽度, 同时会自动计算更新QRCode的大小 * @param[in] qrcode：码控件 * @param[in] qr_wid：码宽度 * @return 无 **/ void widget_qrcode_set_bitwid_by_qrwid(widget_qrcode_t *qrcode, u16 qr_wid); /** * @brief 设置显示宽度, 同时会自动计算更新QRCode的大小 * @param[in] qrcode：码控件 * @param[in] level：码纠错等级 * @return 无 **/ void widget_qrcode_set_level(widget_qrcode_t *qrcode, u8 level); /** * widget交换前后位置(体现在显示上下层关系) * widget_b : widget_t类型的，处理完后会返回新地址 * widget_f : widget_t类型的，处理完后会返回新地址 * 返回，1成功，0失败 page类型的widget不能参与交换，会返回失败; 两个widget必须是相同的爸爸(parent)，否则返回失败; 当两个不一样类型的widget需要交换，这两个必须是相邻的，否则返回失败; */ bool widget_bf_exchange(widget_t **widget_b, widget_t **widget_f); //============= Widget ARC ==============// /** * 创建圆弧类型的widget * parent:父亲 注意: widget_set_size 或 widget_set_location设置宽度；来设置圆弧的大小；所以没有在单独创建其他函数 */ widget_arc_t *widget_arc_create(widget_page_t *parent); /** * 设置圆弧角度 * arc:arc widgeit * start_angle:起始角度，单位是0.1度(参考位置在右水平线上，可以任意角度，软件自动3600对齐，如下图) * end_angle :结束角度，单位是0.1度(参考位置在右水平线上，可以任意角度，软件自动3600对齐，如下图) 起始和结束角度没有限制谁大谁小 /|\ 270.0 度 | | | | 180.0度 | -------------------|----------------> 0 度 | | | | | | 90.0 度 */ void widget_arc_set_angles(widget_arc_t *arc, u16 start_angle, u16 end_angle); /** * 设置圆弧颜色 * arc:arc widgeit * color_intra:设置角度内的颜色 * color_outre:设置角度外的颜色 比如设置的是30度到90度，30到90度圆弧内颜色是color_intra；其他圆弧是color_outre */ void widget_arc_set_color(widget_arc_t *arc, u16 color_intra, u16 color_outre); /** * 设置圆弧透明度 * arc:arc widgeit * alpha_intra:设置角度内的透明度 * alpha_outre:设置角度外的透明度 比如设置的是30度到90度，30到90度圆弧内透明度是alpha_intra；其他圆弧是alpha_outre */ void widget_arc_set_alpha(widget_arc_t *arc, u8 alpha_intra, u8 alpha_outre); /** * 设置圆弧透宽度 * arc:arc widgeit * arc_width:圆弧宽度(设置两个圆中间的那段圆弧宽度，R1-R2) 不是半径哦，是内外半径差这个东东 */ void widget_arc_set_width(widget_arc_t *arc, u16 arc_width); /** * 设置圆弧截面是否圆弧化 * arc:arc widgeit * start_onoff: 开始角度位置 1:圆弧化 0:直线化 end_onoff : 结束角度位置 1:圆弧化 0:直线化 圆弧化后目前缩放对齐有点偏差 */ void widget_arc_set_edge_circle(widget_arc_t *arc, bool start_onoff, bool end_onoff); /** * 创建实心圆类型的widget * parent:父亲 注意: widget_set_size 或 widget_set_location设置宽度；来设置圆的大小；所以没有在单独创建其他函数 */ widget_circle_t *widget_circle_create(widget_page_t *parent); /** * 设置实心圆颜色 * circle:circle widgeit * color_intra:颜色 * alpha_intra:透明度 比如设置的是30度到90度，30到90度圆弧内颜色是color_intra；其他圆弧是color_outre */ void widget_circle_set_acolor(widget_circle_t *circle, u16 color_intra, u8 alpha_intra); //============= Widget chart ==============// /** * 创建图表类型的widget * parent:父亲 * type:选择图表类型，直角还是圆角 * max_num:需要最大的柱形数量 max_num设置一个最大值，实际使用数量用后面widget_chart_set_real_num函数来设置 */ widget_chart_t *widget_chart_create(widget_page_t *parent, WGT_CHART_TYPE type, u8 max_num); /** * 设置图表的等效范围 * chart:图表 * range_x：X轴的范围 * range_y: Y轴的范围 图表的高和宽是widget_set_size 或 widget_set_location设置； range_x和range_y是设置多少等份；举例widget_set_size设置的宽度是200像素，range_x设置100，表示将200分成100等份； 这样做的原因是参考LVGL，方便客户代码通用性； */ void widget_chart_set_range(widget_chart_t *chart, u16 range_x, u16 range_y); /** * 设置图表的等效范围 * chart:图表 * real_num:设置实际使用的图表柱状个数，出现这个函数的原因是方便客户设置需要显示的数量； 需要小于create时候设置的max_num； */ bool widget_chart_set_real_num(widget_chart_t *chart, u8 real_num); /** * 设置图表数据 * chart:图表 * id : 柱形图序列号，0开始，0 到 real_num-1(包含real_num-1) x_start: 0到range_x范围 x_end : 0到range_x范围 y_start: 0到range_y范围 y_end : 0到range_y范围 color : RGB565 说明：x_start和x_end及y_start和y_end意思设置这个柱状图x和y显示区域 举个例子，range_x设置为100，range_y设置为100；调用如下函数后： widget_chart_set_value(chart, 0, 10, 20, 0, 100, COLOR_RED); widget_chart_set_value(chart, 1, 30, 40, 50, 100, COLOR_RED); 大致如下显示 /|\ y轴正方向 | ** ** | ** ** | ** ** | ** ** | ** ** | ** | ** | ** 0| ** ----------------------------------------------> x正方向 */ bool widget_chart_set_value(widget_chart_t *chart, u8 id, u16 x_start, u16 x_end, u16 y_start, u16 y_end, u16 color); #endif // _API_GUI_H