lvgl 使用demo 按钮表格,圆,arc的使用
实现效果
代码
#define OBJ_PARENT_WIDTH 970 #define OBJ_PARENT_HEIGH 446 #define OBJ_BTN_WIDTH 150 #define OBJ_BTN_HEIGH 50 #define OBJ_BTN_POS_X 120 #define OBJ_BTN_POS_Y 40 #define OBJ_ITEM_WIDTH 420 #define OBJ_ITEM_HEIGH 50 #define OBJ_TABLE_HEIGH 60 #define OBJ_ITEM_STEP 60 #define OBJ_COLOR_BG_MAIN 0xfff2f2f2 #define OBJ_COLOR_FONT_DEFAULT 0xFF2E2E2E #define OBJ_COLOR_FONT_BLUE 0xFF3B90F4 #define OBJ_COLOR_FONT_GRAY 0xFFB3B3B3 lv_obj_t* obj_p = lv_obj_create(appObjUiParent); lv_obj_center(obj_p); lv_obj_set_size(obj_p,OBJ_PARENT_WIDTH,OBJ_PARENT_HEIGH); lv_obj_set_style_border_width(obj_p,0,LV_STATE_DEFAULT); lv_obj_set_style_bg_color(obj_p,lv_color_hex(OBJ_COLOR_BG_MAIN),LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_p,0,LV_STATE_DEFAULT); lv_obj_set_style_text_font(obj_p, &lv_font_montserrat_24, LV_STATE_DEFAULT); //设置字体大小 lv_obj_set_style_text_color(obj_p,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT); // 创建两个obj 左右各一个,使用btn按钮作为基座,上面label左右对齐 lv_obj_t * obj_left_face = lv_obj_create(obj_p); lv_obj_align(obj_left_face,LV_ALIGN_LEFT_MID,0,0); lv_obj_set_size(obj_left_face, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH); // lv_obj_set_style_bg_color(obj_left_face,lv_color_hex(0xfff2f200),LV_STATE_DEFAULT); lv_obj_set_style_bg_opa(obj_left_face,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_face,0,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_left_face,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_face,0,LV_STATE_DEFAULT); // 摄像头 if(1){ // canvas #define CAMERA_SHOW_WIDTH 240 #define CAMERA_SHOW_HEIGH 240 static unsigned char bufCameraBigCanvas[CAMERA_SHOW_WIDTH*CAMERA_SHOW_HEIGH*4]; lv_obj_t* appObj_canvas_p=lv_obj_create(obj_left_face); lv_obj_set_size(appObj_canvas_p,CAMERA_SHOW_WIDTH+50, CAMERA_SHOW_HEIGH+50); lv_obj_set_style_bg_opa(appObj_canvas_p,LV_OPA_0,LV_STATE_DEFAULT); lv_obj_set_style_border_width(appObj_canvas_p,0,LV_STATE_DEFAULT); lv_obj_set_style_radius(appObj_canvas_p,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(appObj_canvas_p,0,LV_STATE_DEFAULT); lv_obj_align(appObj_canvas_p, LV_ALIGN_TOP_MID, 0, 0); // CANVAS lv_obj_t* appObjCamera = lv_canvas_create(appObj_canvas_p);//lv_scr_act() lv_obj_align(appObjCamera, LV_ALIGN_CENTER, 0, 0); lv_obj_set_size(appObjCamera,CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH); lv_obj_set_style_radius(appObjCamera,CAMERA_SHOW_WIDTH/2,LV_STATE_DEFAULT); lv_obj_set_style_border_color(appObjCamera,lv_color_hex(0xffffffff),LV_STATE_DEFAULT); lv_obj_set_style_border_width(appObjCamera,0,LV_STATE_DEFAULT); lv_canvas_set_buffer(appObjCamera, bufCameraBigCanvas, CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH, LV_IMG_CF_TRUE_COLOR_ALPHA);mydebug; // lv_canvas_copy_buf(appObjCamera,bufCameraBigCanvas,0,0,CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH);mydebug; // lv_obj_invalidate(appObjCamera);// 主动触发重绘指令 lv_obj_t* appObj_p2=lv_obj_create(appObj_canvas_p); lv_obj_set_size(appObj_p2,CAMERA_SHOW_WIDTH+4, CAMERA_SHOW_HEIGH+4); lv_obj_set_style_border_width(appObj_p2,4,LV_STATE_DEFAULT); lv_obj_set_style_radius(appObj_p2,CAMERA_SHOW_WIDTH/2+2,LV_STATE_DEFAULT); lv_obj_set_style_border_color(appObj_p2,lv_color_hex(0xffffffff),LV_STATE_DEFAULT); lv_obj_set_style_bg_opa(appObj_p2,LV_OPA_0,LV_STATE_DEFAULT); lv_obj_align(appObj_p2, LV_ALIGN_CENTER, 0, 0); } // 弹窗,按钮 if(1){ // 中间弹窗 // xxx:录入中,录入成功,录入超时,录入失败 ---:-- lv_obj_t* obj_left_face_state=lv_label_create(obj_left_face); lv_obj_align(obj_left_face_state, LV_ALIGN_TOP_MID, 0, 290); lv_label_set_text(obj_left_face_state,"---:--"); lv_obj_set_style_text_color(obj_left_face_state,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT); // 左侧按钮 lv_obj_t* obj_left_face_btn_l=lv_btn_create(obj_left_face); lv_obj_set_size(obj_left_face_btn_l,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH); lv_obj_t* obj_left_face_btn_l_text=lv_label_create(obj_left_face_btn_l); lv_obj_center(obj_left_face_btn_l_text); lv_label_set_text(obj_left_face_btn_l_text,"btn1"); lv_obj_align(obj_left_face_btn_l, LV_ALIGN_BOTTOM_MID, -OBJ_BTN_POS_X, -OBJ_BTN_POS_Y); // 右侧按钮 lv_obj_t* obj_left_face_btn_r=lv_btn_create(obj_left_face); lv_obj_set_size(obj_left_face_btn_r,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH); lv_obj_t* obj_left_face_btn_r_text=lv_label_create(obj_left_face_btn_r); lv_obj_center(obj_left_face_btn_r_text); lv_label_set_text(obj_left_face_btn_r_text,"btn2"); lv_obj_align(obj_left_face_btn_r, LV_ALIGN_BOTTOM_MID, OBJ_BTN_POS_X, -OBJ_BTN_POS_Y); // 下划线 新增记录 if(1){ lv_obj_t* obj_left=lv_label_create(obj_left_face); lv_obj_align(obj_left,LV_ALIGN_BOTTOM_MID,0,-5); lv_label_set_text(obj_left,"new record"); // lv_obj_set_style_text_decor(obj_left,LV_TEXT_DECOR_UNDERLINE,LV_STATE_DEFAULT);// 文字下划线 lv_obj_set_style_text_font(obj_left, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小 lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT); lv_obj_t * obj_left_1 = lv_btn_create(obj_left_face); lv_obj_set_size(obj_left_1, OBJ_BTN_WIDTH, 30); lv_obj_align(obj_left_1,LV_ALIGN_BOTTOM_MID,0,-5); lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_1,2,LV_STATE_DEFAULT); lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT); lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT);//边框 lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_radius(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_ofs_x(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_ofs_y(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_width(obj_left_1,0,LV_STATE_DEFAULT); } } //lv_obj_add_flag(obj_left_face,LV_OBJ_FLAG_HIDDEN); lv_obj_t * obj_left_info = lv_obj_create(obj_p); lv_obj_align(obj_left_info,LV_ALIGN_LEFT_MID,0,0); lv_obj_set_size(obj_left_info, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH); lv_obj_set_style_bg_opa(obj_left_info,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_info,0,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_left_info,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_info,0,LV_STATE_DEFAULT); if(1){ // 姓名 lv_obj_t* obj_left_0=lv_label_create(obj_left_info); lv_obj_align(obj_left_0, LV_ALIGN_TOP_MID, 0, 12); lv_obj_set_style_text_font(obj_left_0, &lv_font_montserrat_28, LV_STATE_DEFAULT); //设置字体大小 lv_label_set_text(obj_left_0,"namexxx"); lv_obj_set_style_text_color(obj_left_0,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_DEFAULT); char* info[]={ "tel","18531231298", "id","411325199505050578", "driver date","2050-05-05", "auth date","2050-05-05" }; // tel for(int i=0;i<4;i++){ lv_obj_t * obj_left_1 = lv_obj_create(obj_left_info); lv_obj_set_size(obj_left_1, OBJ_ITEM_WIDTH, OBJ_ITEM_HEIGH); lv_obj_align(obj_left_1,LV_ALIGN_TOP_MID,0,OBJ_ITEM_STEP*(i+1)); lv_obj_set_style_bg_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_t* obj_left=lv_label_create(obj_left_1); lv_obj_align(obj_left, LV_ALIGN_LEFT_MID, 10, 0); lv_label_set_text(obj_left,info[2*i+0]); lv_obj_t* obj_right=lv_label_create(obj_left_1); lv_obj_align(obj_right, LV_ALIGN_RIGHT_MID, -10, 0); lv_obj_set_style_text_font(obj_right, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小 lv_obj_set_style_text_color(obj_right,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT); lv_label_set_text(obj_right,info[2*i+1]); } // 左侧按钮 lv_obj_t* obj_left_face_btn_l=lv_btn_create(obj_left_info); lv_obj_set_size(obj_left_face_btn_l,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH); lv_obj_t* obj_left_face_btn_l_text=lv_label_create(obj_left_face_btn_l); lv_obj_center(obj_left_face_btn_l_text); lv_label_set_text(obj_left_face_btn_l_text,"btn3"); lv_obj_align(obj_left_face_btn_l, LV_ALIGN_BOTTOM_MID, -OBJ_BTN_POS_X, -OBJ_BTN_POS_Y); // 右侧按钮 lv_obj_t* obj_left_face_btn_r=lv_btn_create(obj_left_info); lv_obj_set_size(obj_left_face_btn_r,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH); lv_obj_t* obj_left_face_btn_r_text=lv_label_create(obj_left_face_btn_r); lv_obj_center(obj_left_face_btn_r_text); lv_label_set_text(obj_left_face_btn_r_text,"btn4"); lv_obj_align(obj_left_face_btn_r, LV_ALIGN_BOTTOM_MID, OBJ_BTN_POS_X, -OBJ_BTN_POS_Y); lv_obj_add_event_cb(obj_left_face_btn_r, my_cb_text_handle, LV_EVENT_CLICKED,obj_left_info); } lv_obj_t * obj_right = lv_obj_create(obj_p); lv_obj_set_size(obj_right, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH); // lv_obj_set_style_bg_color(obj_right,lv_color_hex(0xff00f2f2),LV_STATE_DEFAULT); lv_obj_set_style_bg_opa(obj_right,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_align(obj_right,LV_ALIGN_RIGHT_MID,0,0); lv_obj_set_style_border_width(obj_right,0,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_right,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_right,0,LV_STATE_DEFAULT); if(1){ lv_obj_t * obj_left_1 = lv_obj_create(obj_right); lv_obj_set_size(obj_left_1, OBJ_PARENT_WIDTH/2-10, OBJ_TABLE_HEIGH); lv_obj_align(obj_left_1,LV_ALIGN_TOP_LEFT,0,0); lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_1,1,LV_STATE_DEFAULT); lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT); lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT|LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_radius(obj_left_1,1,LV_STATE_DEFAULT); lv_obj_t* obj_left_0=lv_label_create(obj_left_1); lv_obj_align(obj_left_0, LV_ALIGN_CENTER, 0, 0); lv_obj_set_style_text_font(obj_left_0, &lv_font_montserrat_28, LV_STATE_DEFAULT); //设置字体大小 lv_label_set_text(obj_left_0,"record"); lv_obj_set_style_text_color(obj_left_0,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_DEFAULT); lv_obj_t * obj_list = lv_obj_create(obj_right); lv_obj_set_size(obj_list, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH-OBJ_TABLE_HEIGH); lv_obj_set_style_bg_opa(obj_list,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_align(obj_list,LV_ALIGN_TOP_LEFT,0,OBJ_ITEM_STEP); lv_obj_set_style_border_width(obj_list,0,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_list,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_list,0,LV_STATE_DEFAULT); // 渐变色 static lv_style_t style; lv_style_init(&style); lv_style_set_radius(&style, 0); lv_style_set_bg_opa(&style, LV_OPA_80); lv_style_set_bg_color(&style, lv_color_hex(0xFFD9D9D9)); lv_style_set_bg_grad_color(&style, lv_color_hex(OBJ_COLOR_BG_MAIN)); lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_HOR); lv_style_set_bg_main_stop(&style, 0);//样式起点 lv_style_set_bg_grad_stop(&style, 150);//样式结束位置 static lv_style_t style_scroll;//滚动条颜色设置 lv_style_init(&style_scroll); lv_style_set_bg_color(&style_scroll, lv_color_hex(OBJ_COLOR_FONT_BLUE)); lv_style_set_width(&style_scroll,6); lv_obj_scroll_to_y(obj_list,OBJ_ITEM_STEP*20,LV_ANIM_OFF); //滑动到底部 lv_obj_add_style(obj_list, &style_scroll, LV_PART_SCROLLBAR);//设置滚动条样式 char* info[]={ "namexx","18531231298" }; lv_group_t * group=lv_group_create(); for(int i=0;i<20;i++){ lv_obj_t * obj_left_1 = lv_btn_create(obj_list); lv_group_add_obj(group,obj_left_1); lv_group_focus_obj(obj_left_1); lv_obj_set_size(obj_left_1, OBJ_PARENT_WIDTH/2-10, OBJ_TABLE_HEIGH); lv_obj_align(obj_left_1,LV_ALIGN_TOP_LEFT,0,OBJ_ITEM_STEP*(i)); lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT); lv_obj_set_style_border_width(obj_left_1,1,LV_STATE_DEFAULT); lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT); lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT|LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT); lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_radius(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_ofs_x(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_ofs_y(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_shadow_width(obj_left_1,0,LV_STATE_DEFAULT); lv_obj_set_style_border_color(obj_left_1,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_FOCUSED); lv_obj_set_style_border_width(obj_left_1,3,LV_STATE_FOCUSED); lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT,LV_STATE_FOCUSED); lv_obj_set_style_shadow_ofs_x(obj_left_1,-1,LV_STATE_FOCUSED); lv_obj_set_style_shadow_ofs_y(obj_left_1,1,LV_STATE_FOCUSED); lv_obj_set_style_shadow_width(obj_left_1,1,LV_STATE_FOCUSED); lv_obj_add_style(obj_left_1, &style, LV_STATE_FOCUSED); //为对象增加 样式 lv_obj_t* obj_left=lv_label_create(obj_left_1); lv_obj_align(obj_left, LV_ALIGN_LEFT_MID, 10, 0); lv_label_set_text(obj_left,info[0]); lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT); lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_FOCUSED); // 聚集焦点 lv_obj_add_event_cb(obj_left_1, my_cb_text_handle, LV_EVENT_FOCUSED,obj_left); lv_obj_add_event_cb(obj_left_1, my_cb_text_handle, LV_EVENT_DEFOCUSED,obj_left); lv_obj_t* obj_right=lv_label_create(obj_left_1); lv_obj_align(obj_right, LV_ALIGN_RIGHT_MID, -10, 0); lv_obj_set_style_text_font(obj_right, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小 lv_obj_set_style_text_color(obj_right,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT); lv_label_set_text(obj_right,info[1]); } }
lv_obj_t* appObj=lv_scr_act();
lv_obj_t * arc = lv_arc_create(appObj);
// lv_obj_set_style_bg_opa(arc,LV_OPA_TRANSP,LV_PART_MAIN|LV_PART_INDICATOR|LV_PART_KNOB);
// lv_obj_set_style_arc
lv_arc_set_rotation(arc, 270);
lv_arc_set_bg_angles(arc, 0, 360);
lv_obj_remove_style(arc, NULL, LV_PART_KNOB); /*Be sure the knob is not displayed*/
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE); /*To not allow adjusting by click*/
lv_obj_set_size(arc,100,100);
lv_obj_align(arc, LV_ALIGN_CENTER, 0, 10);
lv_obj_set_style_bg_color(arc,lv_palette_lighten(LV_PALETTE_RED,1),LV_PART_MAIN);
// lv_obj_set_style_width(arc,1,LV_PART_MAIN|LV_PART_INDICATOR);
// lv_obj_set_style_arc_width(arc,1,LV_PART_MAIN|LV_PART_INDICATOR);
lv_obj_set_style_arc_width(arc,6,LV_PART_MAIN);//得拆开设置
lv_obj_set_style_arc_width(arc,6,LV_PART_INDICATOR);//得拆开设置
lv_obj_set_style_arc_width(arc,6,LV_PART_KNOB);//得拆开设置
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, arc);
lv_anim_set_exec_cb(&a, lv_arc_set_value);
lv_anim_set_time(&a, 1000);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); /*Just for the demo*/
lv_anim_set_repeat_delay(&a, 500);
lv_anim_set_values(&a, 0, 100);
lv_anim_start(&a);
