Button styling to fully remove border

I have a grey circular button on top of a grey object background. I want the grey of the button to merge seamlessly into the grey of the background but try as i might I always seem to get a 1px border around the circular button… It is very subtle, not as obvious as this picture makes it appear but it is still there…
Red arrows pointing to two areas with the same colour.
Orange area highlights visible border I am trying to remove.

Style for circular button on top (I’ve tried adding everything i thought might help to no avail)…

  static lv_style_t CircleButton;   
  lv_style_copy(&CircleButton, &lv_style_btn_rel );         
  CircleButton.body.radius = LV_RADIUS_CIRCLE;
  CircleButton.text.font = &lv_font_roboto_28;
  CircleButton.body.padding.left = 30;
  CircleButton.body.padding.right = 30;
  CircleButton.body.padding.top = 30;
  CircleButton.body.padding.bottom = 30;
  CircleButton.body.main_color = GUIColourBack2;
  CircleButton.body.grad_color = GUIColourBack2;
  CircleButton.body.border.color = GUIColourBack2;
  CircleButton.body.shadow.width = 0;
  CircleButton.body.border.opa =  LV_OPA_TRANSP;
  CircleButton.text.color = GUIColourFront1;
  CircleButton.body.border.width = 0;  

and style for the background it is on top of…

static lv_style_t RectangleBackgroundStyle;
lv_style_copy(&RectangleBackgroundStyle, &lv_style_plain_color);
RectangleBackgroundStyle.body.main_color = RectangleBackgroundStyle.body.grad_color = GUIColourBack2;
RectangleBackgroundStyle.body.radius = 0;

Try
body.border.width = 0

for LV_BTN_STYLE_REL, LV_BTN_STYLE_PR, …

and set style by lv_btn_set_style() such as

lv_btn_set_style( play_btn, LV_BTN_STYLE_REL, &CircleButton_REL );
lv_btn_set_style( play_btn, LV_BTN_STYLE_PR, &CircleButton_PR );

It should be an issue with mixing colors. It’s already fixed in v7.0 but it should be easy to fix in v6.1 too.

Please replace lv_color_mix in lv_misc/lv_color.h with this:


static inline lv_color_t lv_color_mix(lv_color_t c1, lv_color_t c2, uint8_t mix)
{
    lv_color_t ret;
#if LV_COLOR_DEPTH != 1
    /*LV_COLOR_DEPTH == 8, 16 or 32*/
    LV_COLOR_SET_R(ret, (uint16_t)((uint16_t) LV_COLOR_GET_R(c1) * mix + LV_COLOR_GET_R(c2) * (256 - mix)) >> 8);
    LV_COLOR_SET_G(ret, (uint16_t)((uint16_t) LV_COLOR_GET_G(c1) * mix + LV_COLOR_GET_G(c2) * (256 - mix)) >> 8);
    LV_COLOR_SET_B(ret, (uint16_t)((uint16_t) LV_COLOR_GET_B(c1) * mix + LV_COLOR_GET_B(c2) * (256 - mix)) >> 8);
    LV_COLOR_SET_A(ret, 0xFF);
#else
    /*LV_COLOR_DEPTH == 1*/
    ret.full = mix > LV_OPA_50 ? c1.full : c2.full;
#endif

    return ret;

Does it solve the issue?

Tried making that change but looks like there are some other changes that need to go along with it, i can just wait until 7.0, not a biggie, just wanted to make sure you were aware of it…

Those macros should be present in version 6.1. Are you still using 6.0?

Just updated to v7.0 from github and yehhawww it’s fixed here and looking great.

I’ve just noticed that accidentally I pushed some dev-7.0 commits to master… :man_facepalming:

I’ve reverted them, so master should be fine again.