Using a custom font for the visuals of a VU-Meter

Development
1

vu meter
vu meter1113Ă—1215 117 KB

This VU-Meter consits of 48 font glyphs. Each single polygon is represented by a letter in a font. This method makes it possible to create complex graphic elements in InkScape on one hand, and on the other hand it makes it possible to declare the color and/or appearance of each polygon dynamically by a few lines of code.

nvgFontFaceId(disp.vg, vuMeterFont->handle);
nvgFontSize(disp.vg, 36);
textPos = Vec(2, 19.5);
for (auto i = 0; i < 24; ++i) {
	if (i > 15) {
		nvgFillColor(disp.vg, nvgRGB(0xff, 0x00, 0x00));
	} else if (i > 7) {
		nvgFillColor(disp.vg, textColorLight);
	} else {
		nvgFillColor(disp.vg, textColorDark);
	}
	if (i == needle) {
		nvgFillColor(disp.vg, COLOR_WHITE);
	}
	nvgText(disp.vg, textPos.x, textPos.y, std::string(1, 97 + i).c_str(), NULL);
}

nvgFillColor(disp.vg, COLOR_WHITE);
nvgText(disp.vg, textPos.x, textPos.y, std::string(1, 65 + needle).c_str(), NULL);
2 Likes
2

That’s pretty cool. One could also make the entire VU and SVG and then programmatically color the different section for the same effect, yes? What are the pros and cons of using a font like this vs. manipulating an SVG?

3

I haven’t tried manipulating SVG graphics programmatically, so I can’t tell the differences.

Building a font seemed an easy way for me to declare a polygon or even a group of polygons as a glyph that can be easily accessed by specifying the ASCII code for the glyph.

4

ah, tx. I also have done nothing in this area, so I can’t add anything here.

5

I did some research and after finding this thread How to nanovg to render SVG with the data parse from nanosvg? · Issue #58 · memononen/nanosvg · GitHub I decided to search for a simpler solution and came up with the one I described above.

6

I can see pros and cons to both ways.

Personally I wouldn’t want the overhead of maintaining a font as well.

But if I tweaked a glyph in the font, that change would propagate to all the modules that used it without any extra effort.

And in this case, the font is tied to the meter widget. There’s not one font that does everything for the whole plugin.

I think it’s a nice solution :+1:

7

Yeah it is nice. You realize, of course, that if you used the same svg you would get that same advantage, too.

8

Yes I’ve seen that. It does not look trivial. Anyway, thanks for sharing your technique!

9

Ahh yes. But I don’t use any SVGs at all. I do it all in nanovg these days.

10

Heh heh… I don’t care how you do it, as long as I can use your scopes. Just the other week I used envelope scope to “prove” that there was an omission in the SFZ spec.

1 Like