Advanced NanoVG custom Label?

Development
21

I’m starting to wonder if either you’re not reading any of the documentation links that have been posted, or if you just don’t understand what the documentation says.

once again, here’s a link to the documentation:

this is all about dealing with text.

if you read that, there’s an example right there. which, since you’re still saying is wrong, I went ahead and copied and moved into a module in rack:

struct DemoWidget : TransparentWidget {
  std::shared_ptr<Font> font;

	DemoWidget ( ) {
    font = APP->window->loadFont(asset::plugin(pluginInstance, "res/Lato.ttf"));
  }

  void draw (const DrawArgs &args) override {
    // draw the text
    float bounds[4];
    const char* txt = "DEMO";
    nvgTextAlign(args.vg, NVG_ALIGN_MIDDLE);
		nvgTextBounds(args.vg, 0, 0, txt, NULL, bounds);
		nvgBeginPath(args.vg);
    nvgFillColor(args.vg, nvgRGBA(0xff, 0xff, 0xff, 0xff));
		nvgRect(args.vg, bounds[0], bounds[1], bounds[2]-bounds[0], bounds[3]-bounds[1]);
		nvgFill(args.vg);
    nvgFillColor(args.vg, nvgRGBA(0x00, 0xff, 0x00, 0xff));
    nvgText(args.vg, 0, 0, txt, NULL);
  }
};

which gives me exactly what I’d expect:

07%20PM

if I set the alignment to NVG_ALIGN_TOP instead of NVG_ALIGN_MIDDLE, it aligns to the top of the box instead of the middle. the documentation is pretty darned clear.

22

I would say the same thing of you mate :slight_smile:

I think you don’t reach where the problem is. Here’s your code, adapted to illustrate the problem:

// draw the text
float bounds[4];
const char *txt = "DEMO";
float offsetX = 10.0f;
float offsetY = 10.0f;

mFont = APP->window->loadFont(pluginPath + "res/fonts/DejaVuSansMono.ttf");
nvgFontFaceId(args.vg, mFont->handle);
nvgFontSize(args.vg, 16);
nvgTextAlign(args.vg, NVG_ALIGN_TOP);
nvgTextBounds(args.vg, 0, 0, txt, NULL, bounds);
nvgBeginPath(args.vg);
nvgFillColor(args.vg, nvgRGBA(0xff, 0xff, 0xff, 0xff));
nvgRect(args.vg, offsetX + bounds[0], offsetY + bounds[1], bounds[2] - bounds[0], bounds[3] - bounds[1]);
nvgFill(args.vg);
nvgFillColor(args.vg, nvgRGBA(0x00, 0xff, 0x00, 0xff));
nvgText(args.vg, offsetX + 0, offsetY + 0, txt, NULL);

offsetX = 50.0f; // moving the second text/box right
mFont = APP->window->loadFont(pluginPath + "res/fonts/Segment7.ttf");
nvgFontFaceId(args.vg, mFont->handle);
nvgFontSize(args.vg, 16);
nvgTextAlign(args.vg, NVG_ALIGN_TOP);
nvgTextBounds(args.vg, 0, 0, txt, NULL, bounds);
nvgBeginPath(args.vg);
nvgFillColor(args.vg, nvgRGBA(0xff, 0xff, 0xff, 0xff));
nvgRect(args.vg, offsetX + bounds[0], offsetY + bounds[1], bounds[2] - bounds[0], bounds[3] - bounds[1]);
nvgFill(args.vg);
nvgFillColor(args.vg, nvgRGBA(0x00, 0xff, 0x00, 0xff));
nvgText(args.vg, offsetX + 0, offsetY + 0, txt, NULL);

And that’s the weird result:

image

Do you see the gap in the top? The first is correctly aligned, the second not:

image

Hope this makes the trouble more evident :slight_smile:

Working with Vertical metrics right now, probably the solution is there :wink:

24

I think its just a “fault” of the Segment font, which add the “space” in the bottom (maybe for further text). I would try with different “digit” font: do you know others?

25

that is the font you have chosen. there is no amount of math that will make that font work. choose a different font.

1 Like
26

Tried Segment14 and DSEG: they seems to suffers the same problems :slight_smile: