Calendar - Change arrow background

elgerg · March 8, 2022, 5:53pm

Description

How do you change the blue colour of the back and forth arrows?

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

Simulator/framebuffer

What LVGL version are you using?

8.1

What do you want to achieve?

As described

What have you tried so far?

Reviewed Calendar (lv_calendar) — LVGL documentation

Code to reproduce

void cb_setLeavingDate(lv_event_t * event)
{
    lv_obj_t * cont = lv_win_get_content(holidy_mode_window);  /*Content can be added here*/
    lv_obj_t  * calendar = lv_calendar_create(cont);
    lv_obj_set_size(calendar, 385, 385);
    lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(calendar, cb_calendar_leavingDate, LV_EVENT_ALL, NULL);

    lv_calendar_set_today_date(calendar, 2022, 03, 8);
    lv_calendar_set_showed_date(calendar, 2022, 03);

    /*Highlight a few days*/
    static lv_calendar_date_t highlighted_days[1];       /*Only its pointer will be saved so should be static*/
    highlighted_days[0].year = 2021;
    highlighted_days[0].month = 03;
    highlighted_days[0].day = 8;

    lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);

    lv_calendar_header_arrow_create(calendar);

    lv_calendar_set_showed_date(calendar, 2022, 3);
}

Screenshot and/or video

bader · March 12, 2022, 7:56pm

you can set background color for the children of this object lv_calendar_header_arrow_create(calendar). Something like this.

lv_obj_t* a = lv_calendar_header_arrow_create(calendar);

// The Left Arrow
lv_obj_t* a1 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a1, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a1, LV_OPA_100, 0);


// The Right Arrow
lv_obj_t* a2 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a2, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a2, LV_OPA_100, 0);

elgerg · March 12, 2022, 8:06pm

bader:

// The Left Arrow
lv_obj_t* a1 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a1, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a1, LV_OPA_100, 0);


// The Right Arrow
lv_obj_t* a2 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a2, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a2, LV_OPA_100, 0);

@bader You are on a roll today!!

Nice!

Some slight tweaking (second arrow is 2 not 0 or 1. I wonder what 1 is…):

  lv_obj_t* calendar_arrows = lv_calendar_header_arrow_create(calendar);

  // The Left Arrow
  lv_obj_t* a1 = lv_obj_get_child(calendar_arrows, 0);
  lv_obj_set_style_bg_color(a1, lv_color_hex(MAIN_BG_COLOUR), 0);
  lv_obj_set_style_border_color(a1, lv_color_hex(0x01a2b1), 0);
  lv_obj_set_style_border_width(a1, 1, 0);

  // The Right Arrow
  lv_obj_t* a2 = lv_obj_get_child(calendar_arrows, 2);
  lv_obj_set_style_bg_color(a2, lv_color_hex(MAIN_BG_COLOUR), 0);
  lv_obj_set_style_border_color(a2, lv_color_hex(0x01a2b1), 0);
  lv_obj_set_style_border_width(a2, 1, 0);

Thanks!

bader · March 12, 2022, 8:19pm

Oh, I missed it
The second children or the children number 1 is the label in the middle between the two arrows.

elgerg · March 12, 2022, 8:20pm

Ah, of course

elgerg · March 12, 2022, 8:21pm

@bader any idea how to change the blue surrounding the 12 above? I’d like to use the same colour I have elsewhere…

Thanks!

bader · March 12, 2022, 9:32pm

Your style is different than mine, so I don’t know what is the “12” button represents. Is it when the user clicked on one of the squares? or it is the today square?

if it is the first situation, you can change it by changing the outline color of the lv_btnmatrix inside the calendar widget.

lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(calendar);
lv_obj_set_style_outline_color(btnMatrix, lv_palette_main(LV_PALETTE_GREEN), LV_PART_ITEMS | LV_STATE_FOCUS_KEY);

elgerg · March 12, 2022, 10:00pm

Hi @bader , its the today square…

Thanks!

bader · March 12, 2022, 10:50pm

Mmmm, I found a way, but I don’t know if it’s the right way or not. I don’t understand it fully but it works.


static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_DRAW_PART_BEGIN) {
        lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
        /*Change the draw descriptor*/
        if (dsc->id != 0) {
            dsc->rect_dsc->radius = 0;
            if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
                dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
            }
        }
    }
}

void cb_setLeavingDate(lv_event_t * event)
{
    ...
    ...
    lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(calendar);
    lv_obj_add_event_cb(btnMatrix, event_cb, LV_EVENT_ALL, NULL);
}

elgerg · March 12, 2022, 11:08pm

bader:

static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_DRAW_PART_BEGIN) {
        lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
        /*Change the draw descriptor*/
        if (dsc->id != 0) {
            dsc->rect_dsc->radius = 0;
            if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
                dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
            }
        }
    }
}

How on earth did you find that out!?!

Absolutely amazing!!

Thank you

FYI, I slightly simplified the code to:

  lv_obj_t  * calendar = lv_calendar_create(cont);

  lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(calendar);
  lv_obj_add_event_cb(btnMatrix, cb_calendar_event_draw_begin, LV_EVENT_DRAW_PART_BEGIN, NULL);

static void cb_calendar_event_draw_begin(lv_event_t* e)
{
  lv_obj_t* obj = lv_event_get_target(e);
  lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
  /*Change the draw descriptor*/
  if (dsc->id != 0) {
      dsc->rect_dsc->radius = 0;
      if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
          dsc->rect_dsc->border_color = lv_color_hex(0x01a2b1);
      }
  }
}

bader · March 13, 2022, 12:48am

You are so welcome. It is just a workaround, it might cause bad performance I haven’t tried it in actual device other than the simulator.

By the way, you can just modify the lv_calendar.c file in this function static void draw_part_begin_event_cb(lv_event_t * e). It does the same thing.

Hossein_Bakhshipoor · August 5, 2022, 7:57pm

Thanks Bader;
I cusomize my calendar.

static void cb_calendar_event_draw_begin(lv_event_t* e)
{
  lv_obj_t* obj = lv_event_get_target(e);
  lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
  /*Change the draw descriptor*/
  if (dsc->part == LV_PART_ITEMS) {
      if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CLICK_TRIG)) {
    	  dsc->rect_dsc->radius = 5;
          dsc->rect_dsc->bg_color=lv_color_hex(0x999999);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x444444);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_LEFT;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          dsc->rect_dsc->shadow_ofs_x=2;
          dsc->rect_dsc->shadow_ofs_y=2;
          dsc->rect_dsc->shadow_opa=20;
          dsc->rect_dsc->shadow_width=1;
      }

      if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
    	  dsc->rect_dsc->bg_opa=255;
    	  dsc->rect_dsc->radius = 5;
          dsc->rect_dsc->bg_color=lv_color_hex(0xb5d9ff);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x006f94);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_LEFT;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          dsc->rect_dsc->shadow_ofs_x=2;
          dsc->rect_dsc->shadow_ofs_y=2;
          dsc->rect_dsc->shadow_opa=40;
          dsc->rect_dsc->shadow_width=1;
      }

      if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_DISABLED)) {
          dsc->rect_dsc->radius = 0;
          dsc->rect_dsc->bg_color=lv_color_hex(0xFFFFFF);
          dsc->rect_dsc->border_width=0;
          dsc->rect_dsc->border_color=lv_color_hex(0x000000);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_FULL;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          dsc->rect_dsc->shadow_ofs_x=0;
          dsc->rect_dsc->shadow_ofs_y=0;
          dsc->rect_dsc->shadow_opa=0;
          dsc->rect_dsc->shadow_width=0;
      }

      if (dsc->id < 7) {
    	  dsc->rect_dsc->bg_opa=150;
    	  dsc->rect_dsc->radius = 5;
          dsc->rect_dsc->bg_color=lv_color_hex(0x666666);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x000000);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_BOTTOM;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          dsc->rect_dsc->shadow_ofs_x=0;
          dsc->rect_dsc->shadow_ofs_y=0;
          dsc->rect_dsc->shadow_opa=0;
          dsc->rect_dsc->shadow_width=0;

          dsc->label_dsc->color=lv_color_hex(0xffffff);
     }
  }
}