How to make button with different border color?

How-to
1

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the FAQ and read the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

I want draw a button and a list of this buttons using the same style. how can I achieve this :
image

What MCU/Processor/Board and compiler are you using?

stm32f103

What LVGL version are you using?

LVGL 8.3

What do you want to achieve?

What have you tried so far?

I had tried to plot button with lv_style_set_border_side(&BT_style, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT);
but the four borders’ color is same.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

void setup_scr_screen(lv_ui* ui) {
        if (BT_style.prop_cnt > 1)
            lv_style_reset(&BT_style);
        else
            lv_style_init(&BT_style);

        /*Set a background color and a radius*/
        lv_style_set_radius(&BT_style, 1);
        lv_style_set_bg_opa(&BT_style, LV_OPA_COVER);
        lv_style_set_bg_color(&BT_style, lv_color_make(200, 0, 0));

        lv_style_set_border_color(&BT_style, lv_color_make(200, 200, 10));
        lv_style_set_border_width(&BT_style, 3);
        lv_style_set_border_opa(&BT_style, LV_OPA_50);
        lv_style_set_border_side(&BT_style, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT);
        lv_style_set_outline_opa(&BT_style, LV_OPA_TRANSP);
        lv_style_set_outline_width(&BT_style, 0);
        lv_style_set_outline_color(&BT_style, lv_color_make(200, 200, 200));
    /*    lv_style_set_height(&BT_style, 50);
        lv_style_set_width(&BT_style, 100);*/

        ui->screen_btn = lv_btn_create(ui->screen);
        lv_obj_remove_style_all(ui->screen_btn );
        lv_obj_add_flag(ui->screen_btn , LV_OBJ_FLAG_CHECKABLE);
        lv_obj_add_style(ui->screen_btn , &BT_style, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_add_event_cb(ui->screen,button_draw_event_cb,LV_EVENT_DRAW_PART_BEGIN,NULL);
}
static void button_draw_event_cb(lv_event_t* e)
{

    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* ta = lv_event_get_target(e);
    lv_obj_t* kb = lv_event_get_user_data(e);

    if (code == LV_EVENT_DRAW_PART_BEGIN)
    {

          lv_style_set_border_color(&BT_style, lv_color_make(0, 200, 0));
        lv_style_set_border_width(&BT_style, 3);
        lv_style_set_border_opa(&BT_style, LV_OPA_50);
        lv_style_set_border_side(&BT_style, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT);
    }
    if (code == LV_EVENT_DRAW_PART_END)
    {
        lv_style_set_border_color(&BT_style, lv_color_make(0, 200, 0));
        lv_style_set_border_width(&BT_style, 3);
        lv_style_set_border_opa(&BT_style, LV_OPA_50);
        lv_style_set_border_side(&BT_style, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT);
    }
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

2

You are on the right track but a few things should be dine differently.

Add the vent like this:

    lv_obj_add_event_cb(screen_btn,button_draw_event_cb,LV_EVENT_DRAW_PART_END,NULL);

Implement the event like this:

static void button_draw_event_cb(lv_event_t* e)
{

    lv_obj_draw_part_dsc_t * part_dsc = lv_event_get_draw_part_dsc(e);
    if(part_dsc->class_p == &lv_obj_class &&
            (part_dsc->part == LV_OBJ_DRAW_PART_RECTANGLE || part_dsc->part == LV_OBJ_DRAW_PART_BORDER_POST))
    {
        lv_obj_t * obj = lv_event_get_target(e);
        lv_draw_rect_dsc_t draw_dsc;
        lv_draw_rect_dsc_init(&draw_dsc);
        draw_dsc.bg_opa = 0;
        draw_dsc.border_width = lv_obj_get_style_border_width(obj, 0);
        draw_dsc.border_color = lv_color_hex(0x00ff00);
        draw_dsc.border_side = LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT;
        lv_draw_rect(part_dsc->draw_ctx, &draw_dsc, part_dsc->draw_area);
    }
}

And the result is:
image

3

@kisvegabor it works well, Thank you.