TUI组件是通过基础控件实现复杂界面功能模块,用户也可以自定义组件模块(参考template.c),或者根据自己需求修改系统提供的组件。组件里面的json解析函数,是方便将来UIStudio工具对组件的扩展。用户在使用的时候需要包含头文件tui_component.h
和tjson.h
,然后将文件夹📁component里面的.C
文件参加编译,最后结合TUISYS/tui_project
仓库里面的tui库文件,在tui内核初始化完成后调用。
只需要设置日历组件的坐标位置和宽高,其中calendar.c里面有中国农历的计算公式,目前没有使用,方便后面扩展。测试代码如下:
void tui_com_calendar_test(void)
{
tui_obj_t * obj;
tui_com_calendar_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_calendar_create(tui_layer_top());
/* 通用属性 */
attri.obj.pt.x = 200;
attri.obj.pt.y = 100;
attri.obj.size.width = 600;
attri.obj.size.height = 400;
tui_com_calendar_set_attri(obj, &attri);
}
实际效果如图:
设置时钟组件的坐标位置和宽高,将.png
图片资源通过UIStudio工具导入打包,重点设置图片对应的路径和旋转图片的旋转坐标,测试代码如下:
void tui_com_clock_test(void)
{
tui_obj_t * obj;
tui_com_clock_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_clock_create(tui_layer_top());
/* 通用属性 */
attri.obj.pt.x = 1024-382;
attri.obj.pt.y = 60;
attri.obj.size.width = 382;
attri.obj.size.height = 382;
attri.bg_img_path = "V:\\image\\clock_bg.png";
attri.bg_img_pt.x = 0;
attri.bg_img_pt.y = 0;
attri.point_h_img_path = "V:\\image\\point_h.png";
attri.point_h_img_pt.x = 186;
attri.point_h_img_pt.y = 108;
attri.point_h_img_rotate_pt.x = 6;
attri.point_h_img_rotate_pt.y = 78;
attri.point_m_img_path = "V:\\image\\point_m.png";
attri.point_m_img_pt.x = 185;
attri.point_m_img_pt.y = 66;
attri.point_m_img_rotate_pt.x = 7;
attri.point_m_img_rotate_pt.y = 120;
attri.point_s_img_path = "V:\\image\\point_s.png";
attri.point_s_img_pt.x = 185;
attri.point_s_img_pt.y = 71;
attri.point_s_img_rotate_pt.x = 7;
attri.point_s_img_rotate_pt.y = 115;
tui_com_clock_set_attri(obj, &attri);
}
效果如图:
设置仪表盘组件的坐标位置和宽高,将.png
图片资源通过UIStudio工具导入打包,重点设置图片对应的路径和旋转图片的旋转坐标,测试代码如下:
void tui_com_dial_test(void)
{
tui_obj_t * obj;
tui_com_dial_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_dial_create(tui_layer_top());
/* 通用属性 */
attri.obj.pt.x = 412;
attri.obj.pt.y = 200;
attri.obj.size.width = 382;
attri.obj.size.height = 382;
attri.bg_img_path = "V:\\image\\dial_bg.png";
attri.bg_img_pt.x = 0;
attri.bg_img_pt.y = 0;
attri.point_img_path = "V:\\image\\dial_point.png";
attri.point_img_pt.x = 186;
attri.point_img_pt.y = 50;
attri.point_img_rotate_pt.x = 5;
attri.point_img_rotate_pt.y = 165;
strcpy(attri.txt, "0");
attri.txt_pt.x = 150;
attri.txt_pt.y = 180;
attri.txt_fnt_size = 60;
attri.txt_fnt_color = 0xFFFFFFFF;
tui_com_dial_set_attri(obj, &attri);
tui_com_dial_set_point_angle(obj, 100);
}
效果如图:
设置折线表组件的坐标位置和宽高,设置折线的点个数,通过tui_com_chart_set_point()
函数设置对应索引点的位置,表的底部值是0
,测试代码如下:
void tui_com_chart_test(void)
{
tui_obj_t * obj;
tui_com_chart_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_chart_create(tui_layer_top());
/* 通用属性 */
attri.obj.pt.x = 5;
attri.obj.pt.y = 65;
attri.obj.size.width = 595;
attri.obj.size.height = 295;
attri.point_num = 10;
tui_com_chart_set_attri(obj, &attri);
tui_com_chart_set_point(obj, 0, 50);
tui_com_chart_set_point(obj, 1, 150);
tui_com_chart_set_point(obj, 2, 20);
tui_com_chart_set_point(obj, 3, 0);
tui_com_chart_set_point(obj, 4, 200);
tui_com_chart_set_point(obj, 5, 150);
tui_com_chart_set_point(obj, 6, 80);
tui_com_chart_set_point(obj, 7, 10);
tui_com_chart_set_point(obj, 8, 60);
tui_com_chart_set_point(obj, 9, 250);
}
效果如图:
设置翻页动画组件的坐标位置和宽高,设置对应的上下图片路径,通过tui_com_volti_set_attri()
函数显示对应数字的翻页效果,测试代码如下:
void tui_com_volti_test(void)
{
tui_obj_t * obj;
tui_com_volti_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_volti_create(tui_layer_top());
/* 通用属性 */
attri.obj.pt.x = 200;
attri.obj.pt.y = 100;
attri.obj.size.width = 200;
attri.obj.size.height = 260;
attri.up_num_img_pt.x = 0;
attri.up_num_img_pt.y = 0;
strcpy(attri.up_num_img_path[0], "V:\\image\\0u.png");
strcpy(attri.up_num_img_path[1], "V:\\image\\1u.png");
strcpy(attri.up_num_img_path[2], "V:\\image\\2u.png");
strcpy(attri.up_num_img_path[3], "V:\\image\\3u.png");
strcpy(attri.up_num_img_path[4], "V:\\image\\4u.png");
strcpy(attri.up_num_img_path[5], "V:\\image\\5u.png");
strcpy(attri.up_num_img_path[6], "V:\\image\\6u.png");
strcpy(attri.up_num_img_path[7], "V:\\image\\7u.png");
strcpy(attri.up_num_img_path[8], "V:\\image\\8u.png");
strcpy(attri.up_num_img_path[9], "V:\\image\\9u.png");
attri.down_num_img_pt.x = 0;
attri.down_num_img_pt.y = 130;
strcpy(attri.down_num_img_path[0], "V:\\image\\0d.png");
strcpy(attri.down_num_img_path[1], "V:\\image\\1d.png");
strcpy(attri.down_num_img_path[2], "V:\\image\\2d.png");
strcpy(attri.down_num_img_path[3], "V:\\image\\3d.png");
strcpy(attri.down_num_img_path[4], "V:\\image\\4d.png");
strcpy(attri.down_num_img_path[5], "V:\\image\\5d.png");
strcpy(attri.down_num_img_path[6], "V:\\image\\6d.png");
strcpy(attri.down_num_img_path[7], "V:\\image\\7d.png");
strcpy(attri.down_num_img_path[8], "V:\\image\\8d.png");
strcpy(attri.down_num_img_path[9], "V:\\image\\9d.png");
attri.cur_num = 2;
tui_com_volti_set_attri(obj, &attri);
tui_com_volti_set_num(obj, 3);
}
效果如图:
只需要设置消息框组件的宽高,显示屏幕居中,其中消息框组件支持三种消息提示YES,NO
按钮、OK
按钮和5秒自动消失提示框。测试代码如下:
void tui_com_msgbox_test(void)
{
tui_obj_t * obj;
tui_com_msgbox_attri_t attri = { 0 };//注意先清空结构体,避免随机值
obj = tui_com_msgbox_create(tui_layer_normal());
/* 通用属性 */
attri.obj.size.width = 300;
attri.obj.size.height = 200;
attri.msg_str = "test msg box test !\nnew line test !";
attri.btn_num = 2;//2、1、0分别对应不要消息框
attri.no_str = "NO";
attri.yes_str = "YES";
attri.ok_str = "OK";
tui_com_msgbox_set_attri(obj, &attri);
tui_com_msgbox_show_or_hide(obj, 1);
}
实际效果如图:
该文件没有实际功能,主要是提供给开发者扩展自己的组件,按照这个模板文件书写代码,规范格式,避免遗漏代码。