UI控件使用说明

一、控件的公共属性

struct element {u32 highlight: 1;			//高亮标志u32 state: 3;				//内核记录控件的状态u32 ref: 5;				//内核计数值u32 prj: 3;				//工程序号u32 hide_action: 1;			//HIDE_WITH_REDRAW,HIDE_WITHOUT_REDRAW,u32 css_num : 2;			//CSS的数量u32 page: 8;				//页面序号u32 prior: 9;				//优先级序号，大的在上层int id;					//控件idstruct element *parent;		//指向父控件的指针struct list_head sibling;		//兄弟控件链表头struct list_head child;		//子控件链表头	struct element *focus;		//焦点控件elementstruct element_css css;		//css属性struct draw_context *dc;	//dc，platform层使用const struct element_event_handler *handler;//库注册的handerint group;					//特效使用
};
struct element_css {u8  align: 2;				//对齐方式u8  invisible: 1;			//是否隐藏u8  z_order: 5;			//子元素排列int left;					//相对于父控件的左边界坐标int top;					//相对于父控件的上边界坐标int width;					//相对与父控件的宽度int height;				//相对于父控件的高度u32 background_color: 24;	//纯色背景颜色u32 alpha: 8;				//window/layer/layout背景透明度int background_image: 24;	//背景图片idint image_quadrant: 8;		//象限,23指针使用struct css_border border;	//边框struct css_rotate rotate;		//旋转属性struct css_ratio ratio;		//缩放
};

控件element均放置在控件句柄的第一个元素，即element与控件句柄指向同一地址，因此在确定控件类型的情况下，可以做转换
可以通过struct element *ui_core_get_element_by_id(u32 id)获取，养成判空好习惯

二、常用控件的私有属性

LAYOUT

struct layout {struct element elm; 			//公共属性u8 hide: 1;					//是否隐藏u8 inited: 1;					//是否被加载u8 release: 6;					
u8 page;
//lua使用u8 movable;					// 移动标志u8 star_menu;					// 满天星标志struct list_head *icon_root;		// 满天星icon的listint lcd_w;						//  用于移动计算int lcd_h;						//	用于移动计算struct element_luascript_t *lua;struct layout *layout;						const struct layout_info *info;				//存储的结构const struct element_event_handler *handler;	//应用层注册的句柄
};

布局是UI设计中最常用的容器
控件存放于布局之中
同一页面可以拥有多个布局，子布局之间可以进行切换（show/hide）
涉及到组合控件的情况，一般是以布局为整体进行操作（案例：抽屉列表）

PIC

struct ui_pic {struct element elm;					//公共属性char source[8];					//数据源（id不唯一或不固定时使用）u8 index;							//图片索引u8 page;							//u8 play_mode;					//播放模式:不播放、循环、单次u16 play_interval;					//播放间隔msvoid *timer;						//timer_idstruct element_luascript_t *lua;		const struct ui_pic_info *info;		//图片infoconst struct element_event_handler *handler;	//应用层注册的句柄
};
struct ui_pic_info {struct ui_ctrl_info_head head;char source[8];u8 highlight;u16 cent_x;u16 cent_y;u8 play_mode;u16 play_interval;struct ui_image_list *normal_img;			//非高亮图片链表struct ui_image_list *highlight_img;		//高亮图片链表struct element_event_action *action;
}
struct ui_image_list {u16 num;								//图片数量u16 image[0];							//图片资源id
};

显示单张图片：背景图、图片列表
显示多张图片：图片列表切换索引

切换索引的接口有如下两个：
int ui_pic_show_image_by_id(int id, int index);
int ui_pic_set_image_index(struct ui_pic *pic, int index);
id的接口是自带刷新的，常用于onkey、ontouch中
句柄接口是不带刷新的，常用于onchange事件、控件集中刷新（大面积、多控件、短时间）

一般通过切换图片索引、缩放、旋转实现需要的效果
旋转和缩放不能同时使用
缩放：比例为0.125~8，图片最大尺寸240*240
旋转：图片的旋转中心需位于图片内

TEXT\TIME\NUMBER（文本类）

struct ui_text {struct element elm;						//公共属性struct ui_text_attrs attrs;				//文本类公共属性char source[8];						//数据源u16 timer;							//刷新定时器u16 _str[UI_TEXT_LIST_MAX_NUM];		//文本列表信息char _format[7];						//格式”strpic””text””ascii”u8 str_num;							//文本列表数量u8 index;								//文本列表索引u8 page;			struct element_luascript_t *lua;const struct ui_text_info *info;			//文本存储
const struct element_event_handler *handler;	//应用层注册的句柄
};
struct ui_text_attrs {const char *str;			//文本数组*生命周期长于控件显示周期const char *format;			//类型int color;					//文本颜色565u16 strlen;				//str长度u16 offset;				//偏移距离，用于滚动u8  encode: 2;			//编码u8  endian: 1;			//大小端u8  flags: 5;				//滚动/多行等u16  displen;				//文本长度const char *mulstr;			//多国语言混合的数组*生命周期长于控件显示周期u16 mulstr_len;			//混合长度
u16 default_code;			//默认字符自定义功能（字符显示不了时，用什么符号代替）u8 x_interval;				//文本水平间距
};
struct ui_time {struct element_text text;		//文本型元素公共属性char source[8];				//数据源u16 year: 12;					//年u16 month: 4;					//月u8 day;						//日u8 hour;						//时u8 min;						//分u8 sec;						//秒u8 css_num;					//css数量u8 auto_cnt;					//自动计数u8 page;						u32 css[2];	 				//css地址int color;						//文本颜色int hi_color;					//高亮文本颜色u16 buf[20];					//存放显示内容buffer（因此time控件不存在buffer生命周期的问题）void *timer;					//定时器idstruct element_luascript_t *lua;const struct ui_time_info *info;const struct element_event_handler *handler;//应用层注册的句柄
};
struct ui_number {struct element_text text;char source[8];u16 number[2];u16 buf[20];						//存放显示数字int color;int hi_color;u8 css_num;u8 page;u8 nums: 6;						//number个数u8 type: 2;						//数字型or文本型u32 css[2];u8 *num_str;						//指向传入文本型的字符串，因此需要考虑生命周期u8 *temp_str;u16 temp_str_len;struct element_luascript_t *lua;const struct ui_number_info *info;const struct element_event_handler *handler;//应用层注册的句柄
};
struct element_text {struct element elm;               		//公共属性char *str;								//显示字符const char *format;						//字符格式void *priv;							//elementint color;								//颜色值u8 x_interval;							//文本间隔const struct element_event_handler *handler;//应用层注册的句柄
};

如在onchange中修改文本的值，要在show_probe中进行，在show/show_post修改需要等下一次刷新才起作用
文本包括四类显示：字库、多国语言、多国语言拼接、数字&符号图片

GRID

struct ui_grid {struct element elm;			//公共属性char hi_index;				//高亮项索引char touch_index;			//触摸项索引char cur_dindex;			//动态高亮项索引char onfocus;				//列表焦点标志，用于响应touch事件u8   page_mode;			//跟手滑动和按页滚动标志u8   slide_direction;		//滑动方向u8   col_num;			//列数u8   row_num;			//行数u8   show_row;			//显示行数u8   show_col;			//显示列数u8   avail_item_num;		//有效项数u8   pix_scroll;			//触摸标志u8   ctrl_num;			//传入的有效项数u8   page;				//所在页面u8   child_init;			//子控件初始化标志u8   rotate;				//垂直列表转为旋转列表标志luaint  x_interval;			//水平项间距（相对数值）int  y_interval;			//垂直项间距（相对数值）int  max_show_left;		//ui库使用计算变量int  max_show_top;		//ui库使用计算变量int  min_show_left;		//ui库使用计算变量int  min_show_top;		//ui库使用计算变量int  max_left;				//ui库使用计算变量int  max_top;				//ui库使用计算变量int  min_left;				//ui库使用计算变量
int  min_top;				//ui库使用计算变量int energy_timer;			//惯性定时器idfloat energy_vx0;			//惯性速度，由tp给出float energy_vy0;			//惯性速度，由tp给出float energy_a;			//惯性负加速度，固定参数float energy_val;			//惯性系数，用于调整惯性大小u8 energy_xdir;			//惯性方向u8 energy_ydir;			//惯性方向u8 energy_status;			//惯性状态u8 energy_tslide;			//惯性滑动时间间隔，固定参数u8 flick_endflag;			//回弹结束标志u8 flick_status;			//回弹状态u16 flick_cmpsize;			//回弹项sizeint flick_timer;				//回弹定时器idint flick_distance;			//回弹距离，中间变量int flick_overdis;			//回弹目标距离int flick_resdis;			//回弹步进float flick_v0;				//回弹初速u16 center_target_line;		//居中目标中线位置：0-10000u16 center_next_threshold;	//居中滑入下一项阈值：0-10000u8 center_item_offset;		//居中项偏移阈值:0-(avail_item_num-1)u8 center_index_mode;		//居中项：高亮项or触摸项u8 auto_center_enable;		//居中模式使能u8 flick_close;				//回弹关闭struct element_luascript_t *lua;struct scroll_area *area;			//滑动区域，需要传入全局变量or局部静态struct layout *item;				//列表子项属性struct layout_info *item_info;	//列表子项infostruct ui_grid_dynamic *dynamic;	//动态列表信息struct position pos;				//触摸点位struct draw_context dc;			//不使用struct element_touch_event *e;	//不适用const struct ui_grid_info *info;	//列表infoconst struct element_event_handler *handler;	//应用层注册的句柄u8 key_jump;				//key_jump:静态垂直或者水平列表才能使用，使用按键滚动u8 hi_move;				//滑动highlight_ajust使能void (*highlight_ajust)(struct ui_grid *grid, int direction);void (*end_once)(struct ui_grid *grid);
};struct ui_grid_dynamic {int  dhi_index;				//动态高亮项int  dcol_num;				//动态列数量int  drow_num;				//动态行数量int  min_row_index;			//最小行索引int  max_row_index;			//最大行索引int  min_col_index;			//最小列索引int  max_col_index;			//最大列索引int  min_show_row_index;int  max_show_row_index;int  min_show_col_index;int  max_show_col_index;int  grid_xval;					int  grid_yval;				u8   grid_col_num;u8   grid_row_num;u8   grid_show_row;u8   grid_show_col;int  base_index_once;				//first_show第一行索引int  init_step_once;				//first_show初始化步进
};

Slide

struct ui_slider {struct element elm;								//公共属性struct element child_elm[SLIDER_CHILD_NUM];		//左右图片和点的elmu8 step;										//步进，用于编码器u8 move;										//char persent;									//百分比s16 left;										//左边界s16 width;									//宽度s16 min_value;								//最小值，用于文本显示s16 max_value;								//最大值，用于文本显示u16 text_color;								//文本颜色565struct element_luascript_t *lua;const struct ui_slider_info *info;const struct slider_text_info *text_info;const struct element_event_handler *handler;//应用层注册的句柄
};

垂直滑动条与水平滑动条一致

Compass

struct ui_compass {struct element elm;										//公共属性struct element child_elm[COMPASS_CHILD_NUM];			//子控件属性struct compass_css_info child_css[COMPASS_CHILD_NUM];	//子控件csschar source[8];				//数据源int bk_angle : 16;				//背景盘角度int indicator_angle : 16;			//指针角度int last_bk_angle : 16;			//上一次背景盘角度int last_indicator_angle : 16;		//上一次指针角度u8 updata;					//更新标志u8 ctrl_num;					//子控件数量void *timer;					//刷新定时器idconst struct layout_info *info;const struct compass_pic_info *pic_info[COMPASS_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};struct compass_pic_info {struct ui_ctrl_info_head head;u16 cent_x;		//旋转中心xu16 cent_y;		//旋转中心ystruct ui_image_list *img;
};

表盘

struct ui_watch {struct element elm;								//公共属性struct element child_elm[WATCH_CHILD_NUM];		//子控件属性struct watch_css_info child_css[WATCH_CHILD_NUM];	//子控件csschar source[8];				//数据源u8 hour;						//时u8 min;						//分u8 sec;						//秒u8 last_hour;					//上一次时u8 last_min;					//上一次分	u8 last_sec;					//上一次秒u8 updata;					//更新标志u8 ctrl_num;					//子控件数量u8 sec_cnt;					//秒计数，用于匀速表盘计数u8 slow_sec;					//匀速表盘使能void *timer;					//timeridconst struct layout_info *info;const struct watch_pic_info *pic_info[WATCH_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};
struct watch_pic_info {struct ui_ctrl_info_head head;u16 cent_x;		//旋转中心u16 cent_y;		//旋转中心u16 dst_cent_x;	//偏移距离u16 dst_cent_y;	//偏移距离struct ui_image_list *img;
};struct ui_progress {struct element elm;				//公共属性struct element child_elm[PROGRESS_CHILD_NUM];		//子控件属性char source[8];				//数据源u16 center_x;					//圆环中心u16 center_y;					//圆环中心u16 radius;					//圆环半径u16 angle_begin;				//起始角度u16 angle_end;				//结束角度u8 ctrl_num;					//控件数量char percent;					//百分比u8 *mask;					//不使用u16 mask_len;					//不使用void *timer;					//不使用const struct layout_info *info;const struct progress_highlight_info *pic_info[PROGRESS_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};
struct progress_highlight_info {struct ui_ctrl_info_head head;u16 center_x;					//圆环中心u16 center_y;					//圆环中心u16 radius_big;				//外径u16 radius_small;				//内径u32 color;					//颜色565u16 angle_begin;				//起始角度u16 angle_end;				//结束角度struct ui_image_list *img;
};struct multiprogress_highlight_info {struct ui_ctrl_info_head head;u16 number;u16 center_x;u16 center_y;u16 radius0_big;u16 radius0_small;u32 color0;u16 radius1_big;u16 radius1_small;u32 color1;u16 radius2_big;u16 radius2_small;u32 color2;u16 angle_begin;u16 angle_end;struct ui_image_list *img;
};

三、控件的显示与隐藏

1. 控件
   线程同步接口（带刷新）
   将页面id post到ui线程调用，先释放原有页面，再加载新页面

int ui_show_main(int id);
int ui_hide_main(int id);

非线程同步接口（带刷新）
需要在ui线程调用，不会主动释放原页面，可以用于多页面同时加载

int ui_show(int id);
int ui_hide(int id);

非线程同步接口（不带刷新）
控件需要在页面内

int ui_core_show(void *_elm, int init);
int ui_core_hide(void *_elm);

动态加载
一般是在init的时候调用，跟随刷新
需要注意父子关系，不能将layout加载到window下面

int create_control_by_id(char *tabfile, int page_id, int id, int parent_id);
int delete_control_by_id(int id);