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;					//控件id
    struct element *parent;		//指向父控件的指针
    struct list_head sibling;		//兄弟控件链表头
    struct list_head child;		//子控件链表头	
    struct element *focus;		//焦点控件element
    struct element_css css;		//css属性
    struct draw_context *dc;	//dc，platform层使用
    const struct element_event_handler *handler;//库注册的hander
    int 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;	//背景图片id
    int 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的list
    int 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;					//播放间隔ms
    void *timer;						//timer_id
    struct element_luascript_t *lua;		
    const struct ui_pic_info *info;		//图片info
    const 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;					//文本颜色565
    u16 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;					//定时器id
    struct 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;							//element
    int 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;				//垂直列表转为旋转列表标志lua
    int  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;			//惯性定时器id
    float 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;			//回弹项size
    int flick_timer;				//回弹定时器id
    int flick_distance;			//回弹距离，中间变量
    int flick_overdis;			//回弹目标距离
    int flick_resdis;			//回弹步进
    float flick_v0;				//回弹初速
    u16 center_target_line;		//居中目标中线位置：0-10000
    u16 center_next_threshold;	//居中滑入下一项阈值：0-10000
    u8 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;	//列表子项info
    struct ui_grid_dynamic *dynamic;	//动态列表信息
    struct position pos;				//触摸点位
    struct draw_context dc;			//不使用
    struct element_touch_event *e;	//不适用
    const struct ui_grid_info *info;	//列表info
    const 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];		//左右图片和点的elm
    u8 step;										//步进，用于编码器
    u8 move;										//
    char persent;									//百分比
    s16 left;										//左边界
    s16 width;									//宽度
    s16 min_value;								//最小值，用于文本显示
    s16 max_value;								//最大值，用于文本显示
    u16 text_color;								//文本颜色565
    struct 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];	//子控件css
    char 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;					//刷新定时器id
    const 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;		//旋转中心x
    u16 cent_y;		//旋转中心y
    struct 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];	//子控件css
    char 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;					//timerid
    const 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;					//颜色565
    u16 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);