2.19进度条控件

在创建的屏幕控件中添加一个进度条控件并设置进度条控件属性。

运行后的进度条控件效果如下图所示。

2.20滑动条控件

在创建的屏幕控件中添加一个滑动条控件并设置滑动条控件属性。

运行后的进度条控件效果如下图所示，可以拖动设置滑动条的值。

2.21列表控件

在创建的屏幕控件中添加一个列表控件并设置列表控件属性。

运行后的列表控件效果如下图所示：

2.22滚轮控件

在创建的屏幕控件中添加一个滚轮控件并设置滚轮控件属性

2.23矩形控件

在创建的屏幕控件中添加一个矩形控件并设置矩形控件属性。

运行后的列表控件效果如下图所示

2.24 对话框控件

2.25 GIF 控件

运行后显示 GIF 控件效果如下图所示：

2.26 状态栏

在创建的屏幕控件中添加一个状态栏控件并设置状态栏控件属性。

2.27 图表控件

在创建的屏幕控件中添加一个图表控件并设置图表控件属性。

/** graph1 */ //在 screen home 屏幕控件中创建一个图表控件 graph1 = gt_graphs_create(screen_home); //设置图表控件的位置为（16，13） gt_obj_set_pos(graph1, 16, 13); //设置图表控件的尺寸为（宽 409，高 283） gt_obj_set_size(graph1, 409, 283);GT-HMI Engine 用户手册 V1.15 深圳高通半导体有限公司 www.hmi.gaotongfont.cn Call：0755-83453881 第 29 页 共 80 页 //初始化坐标集 gt_point_f_st graph1Rand0[] = { { 30, 30 }, { 60, 70 }, { 90, 70 }, { 120, 150 }, { 150, 130 }, { 180, 180 } }; //初始化线图配置结构体 gt_axis_st graph1Axis = { //水平轴 .hor = { .start = 0, .end = 200, }, //垂直轴 .ver = { .start = 0, .end = 200, }, //标尺水平跨度为 10 .hor_unit = 10, //标尺垂直跨度为 10 .ver_unit = 10, //外边框设置 .scale = { //外边框线宽为 3 .width = 3, //外边框颜色为 0x000000 .color = gt_color_hex(0x000000), //外边框透明度为 70 .opa = GT_OPA_70, }, //标尺设置 .grid = { //标尺线宽为 1 .width = 1, //标尺颜色为 0x000000 .color = gt_color_hex(0x000000), //标尺透明度为 30 .opa = GT_OPA_30, }, }; //用线图配置结构体配置图表控件 gt_graphs_set_axis(graph1, &graph1Axis); //设置图表控件关闭横坐标反转 gt_graphs_set_anti_axis_hor_dir(graph1, false); //设置图表控件关闭纵坐标反转 gt_graphs_set_anti_axis_ver_dir(graph1, false); //初始化线设置配置结构体 gt_line_st graph1Line0 = { //线宽为 2 .width = 2, //线颜色为 0xff0000 .color = gt_color_hex(0xff0000), //线透明度为 80 .opa = GT_OPA_80, //图表类型为折线图 .type = GT_GRAPHS_TYPE_LINE, }; //用线设置配置结构体配置图表控件 gt_series_points_st * graph1Ser0 = gt_graphs_add_series_line(graph1, &graph1Line0); //设置图表控件的坐标集为 graph1Rand0 gt_graphs_series_add_point_list_by(graph1, 0, graph1Rand0, 6); //设置图表控件线图为关闭自适应最值 gt_graphs_set_self_adaptive(graph1, false); //设置图表控件显示坐标系数 gt_graphs_set_show_ruler(graph1, true);

 

运行后图表控件效果如下图所示，还可以将图表控件设置为散点图、曲线图和柱状图。

 

2.28 布局控件

在创建的屏幕控件中添加一个自适应布局控件并设置自适应布局控件件属性。

/** layout1 init */ //在 screen home 屏幕控件中创建一个自适应布局控件 gt_obj_st * layout1 = gt_obj_create(screen_1); //初始化自适应布局的配置结构体 gt_obj_container_st layout1container = { //左右边距为 0 .gap = 0, //溢出时不压缩 .layout_type = GT_LAYOUT_TYPE_FLEX, //主轴方向为水平向右 .flex_direction = GT_LAYOUT_FLEX_DIR_ROW, //主轴对齐方式为居中对齐 .justify_content = GT_LAYOUT_JUSTIFY_CONTENT_CENTER, //交叉轴对齐方式为顶部对齐 .align_items = GT_LAYOUT_ALIGN_ITEMS_START, }; //用配置结构体配置自适应布局控件 gt_layout_init(layout1, &layout1container); //设置自适应布局控件的位置为（148，85） gt_obj_set_pos(layout1, 148, 85); //设置自适应布局控件的尺寸为（宽 230，高 137） gt_obj_set_size(layout1, 230, 137); //需要添加到自适应布局控件中的其他控件，应修改其所属布局 input1 = gt_input_create(layout1);

 

主轴和交叉轴的基本概念：

主轴：Flex 组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主

轴起始点，结束位置称为主轴结束点。

交叉轴：垂直于主轴方向的轴线，交叉轴开始的位置称为交叉轴起始点，结束位置称

为交叉轴结束点。主轴为水平方向的 Flex 容器示意图如下图所示：

2.29 Media Player 播放器流控件

在创建的屏幕控件中添加一个 Media Player 播放器流控件并设置 Media Player 播放器流控件属性。

/** media_player1 */ //初始化播放图片格式结构体 gt_img_raw_st raw_st = { .buffer = raw_buf, //图片颜色数据 .opa = NULL, //图片透明度 .width = 138, //图片宽度 .height = 131, //初始图片高度 }; //在 screen home 屏幕控件中创建一个 Media Player 播放器流控件 media_player1 = gt_media_player_create(screen_home); //设置 Media Player 播放器流控件的位置为（29,39） gt_obj_set_pos(media_player1, 29, 39); //设置 Media Player 播放器流控件的大小为（宽 240，高 240） gt_obj_set_size(media_player1, 240, 240); //设置 Media Player 播放器流控件的总时长为 MEDIA_NUM_MAX gt_media_player_set_total_time(media_player1, MEDIA_NUM_MAX); //设置 Media Player 播放器流控件的当前进度为 0 gt_media_player_set_current_time(media_player1, 0); //设置 Media Player 播放器流控件的播放图片格式 gt_media_player_set_raw(media_player1, &raw_st); //设置 Media Player 播放器流控件的播放回调函数为 play_cb gt_media_player_set_play_cb(media_player1, play_cb, NULL); //设置 Media Player 播放器流控件的暂停回调函数为 stop_cb gt_media_player_set_stop_cb(media_player1, stop_cb, NULL); //设置 Media Player 播放器流控件通过滑动条来设置当前时间 gt_media_player_set_slider_change_cb(media_player1, value_change_cb, NULL); //设置 Media Player 播放器流控件开始播放 gt_anim_init_start();

还需要定义一个动画播放函数。

 

static void gt_anim_init_start(void) { //新建一个动画对象 gt_anim_st anim_del; //初始化动画对象 gt_anim_init(&anim_del); //设置动画的时间间隔为 1000ms gt_anim_set_time(&anim_del, 1000); //设置动画播放的次数为无限循环 gt_anim_set_repeat_count(&anim_del, GT_ANIM_REPEAT_INFINITE); //设置动画播放的对象 gt_anim_set_target(&anim_del, media_player1); //设置动画每一帧播放的回调函数 gt_anim_set_exec_cb(&anim_del, _scr_anim_del_ready_cb); //开始播放 anim_del_p = gt_anim_start(&anim_del); if (NULL == anim_del_p) { GT_CHECK_PRINT(anim_del_p = gt_anim_start(&anim_del)); } } //每一帧的播放回调函数 static void _scr_anim_del_ready_cb(struct gt_anim_s * anim) { //读取一帧图片的数据 bsp_qspi_flash_read(media_current*IMG_BUFF_SIZE , IMG_BUFF_SIZE , raw_buf); //设置 Media Player 播放器流控件的当前进度 gt_media_player_set_current_time(media_player1, media_current); //显示新的一帧内容 gt_disp_invalid_area(media_player1); //帧数加一 ++media_current; //到最后一帧后，回到第一帧 if(media_current == MEDIA_NUM_MAX) { media_current = 0; } }