How to overstriking my font?

How-to
1

Description

how to overstriking my font? should I first find a bold font ttf then convert it?

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

What do you want to achieve?

What have you tried so far?

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:

/*You code here*/

Screenshot and/or video

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

2

Code

typedef struct {
  lv_label_ext_t label;
  bool overstrike;
} lv_label2_ext_t;

lv_design_cb_t ancestor_design;
bool lv_label2_design(lv_obj_t* label, const lv_area_t* mask, lv_design_mode_t mode);

lv_obj_t* lv_label2_create(lv_obj_t*par, lv_obj_t* copy){
  lv_obj_t* new_lb = lv_label_create(par, copy);
  lv_label2_ext_t *ext = (lv_label2_ext_t*) lv_obj_allocate_ext_attr(new_lb, sizeof(lv_label2_ext_t));
  ext->overstrike = false;

  if(ancestor_design==NULL) ancestor_design = lv_obj_get_design_cb(new_lb);
  lv_obj_set_design_cb(new_lb, lv_label2_design);
  return new_lb;
}

void lv_label2_set_overstrike(lv_obj_t* label, bool en)
{
  lv_label2_ext_t *ext = (lv_label2_ext_t*) lv_obj_get_ext_attr(label);
  ext->overstrike = !!en;
}

bool lv_label2_design(lv_obj_t* label, const lv_area_t* mask, lv_design_mode_t mode)
{
  if(mode == LV_DESIGN_COVER_CHK){
    return false;
  }else
  if(mode == LV_DESIGN_DRAW_MAIN){
    lv_label2_ext_t *ext = (lv_label2_ext_t*) lv_obj_get_ext_attr(label);
    ancestor_design(label, mask, mode);
    if(ext->overstrike) {
      lv_style_t* style = (lv_style_t*) lv_obj_get_style(label);
      lv_point_t p1, p2;
      p1.x = label->coords.x1; p1.y = label->coords.y1 + style->text.font->line_height/2;
      p2.x = label->coords.x2; p2.y = p1.y;
      lv_draw_line(&p1, &p2, mask, style, LV_OPA_COVER);
    }
  }
  return true;
}

Usage

  static lv_style_t style; lv_style_copy( &style, &lv_style_plain);
    style.text.color = LV_COLOR_WHITE;      // Text Color
    style.line.color = style.text.color;    // OverStrike Color
    style.line.width = 2;                   // OverStrike Thickness
  
  lv_obj_t* label = lv_label2_create(lv_scr_act(),NULL);
    lv_obj_set_style(label, &style);
    lv_label2_set_overstrike(label, true);  // Enable OverStrike
    lv_label_set_text(label, "Hello World.");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0,0);

Result

capture_00032

3 Likes
3

Beautiful and professional solution!

1 Like
4

Perhaps we should add the ability to strikeout text on labels. It doesn’t seem like it would be that complex.

2 Likes
5

@kisvegabor
It’s cause of amazing c inheritance technic in your littlevgl’s core!

@embeddedt
Agree that. Both the ability to strikeout and underline for labels.

6

emm, I’m sorry that I didn’t make myself clear. If I add a new font A, then I want to make the font bold, how to achieve it, it’s no need to draw a line.Like this I want make letter “A” turn to “A”

7

You must use TrueType Bold font to convert at littlevgl’s online TTF converter
https://littlevgl.com/ttf-font-to-c-array

and declare to the littlevgl before use new font.

8

Why not!
There can be a style.label.strike_y property which draws a line on the given y position with style.line style. It can be used underline texts too.

What do you think?

9

IMO it would be nicer to just have a flag that enables strikeout/underline and calculates the position automatically. For strikeout we could just use half the height of the character and for the underline we could put it right below the character.

10

I agree, strike_y really would overcomplicate things.
I’ve added it to dev-7.0 todo list