Here’s a handy little button I created from the example on the button demo page.
Basically it allows one to create a “blooming button” in only one line of code. This provides for great user feedback.
It’s overloaded to provide for a default color.
bloomButton(*screen, xpos, ypos, width, height, “Button label”, callback, (optional) color );
Use it as such:
bloomButton(scr, 200, 60, 100, 50, “Finish”, run_event_cb,LV_PALETTE_GREEN);
bloomButton(scr, 200, 120, 100, 50, “Back”, back_event_cb,LV_PALETTE_ORANGE);
bloomButton(scr, 200, 180, 100, 50, “Cancel”, cancel_event_cb);
lv_style_t styleBloom;
// put the following in an INIT method:
lv_style_init(&styleBloom);
/*Add a large outline when pressed*/
lv_style_set_outline_width(&styleBloom, 30);
lv_style_set_outline_opa(&styleBloom, LV_OPA_TRANSP);
lv_style_set_translate_y(&styleBloom, 5);
lv_style_set_shadow_ofs_y(&styleBloom, 3);
lv_style_set_bg_color(&styleBloom, lv_palette_darken(LV_PALETTE_BLUE, 2));
lv_style_set_bg_grad_color(&styleBloom, lv_palette_darken(LV_PALETTE_BLUE, 4));
/*Add a transition to the outline*/
lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 300, 0, NULL);
lv_style_set_transition(&styleBloom, &trans);
// then create these functions in a globally accessible file:
lv_obj_t * bloomButton(lv_obj_t *scr,
lv_coord_t x, lv_coord_t y,
lv_coord_t w, lv_coord_t h,
const char *lab, lv_event_cb_t cb,
lv_palette_t color)
{
lv_obj_t *btn1 = lv_btn_create(scr);
lv_obj_add_style(btn1, &styleBloom, LV_STATE_PRESSED);
lv_obj_set_pos(btn1, x, y);
lv_obj_set_size(btn1, w, h);
lv_obj_add_event_cb(btn1, cb, LV_EVENT_ALL, NULL);
lv_obj_t *label = lv_label_create(btn1);
lv_label_set_text(label, lab);
lv_obj_center(label);
lv_obj_set_style_bg_color(btn1, lv_palette_main(color), LV_PART_MAIN);
return btn1;
}
lv_obj_t * bloomButton(lv_obj_t *scr,
lv_coord_t x, lv_coord_t y,
lv_coord_t w, lv_coord_t h,
const char *lab, lv_event_cb_t cb
)
{
return bloomButton(scr,x,y,w,h,lab,cb,LV_PALETTE_BLUE);
}