Help needed with GUI design

Hi, I’m experiencing problems with adding text to the panel of my plugin. I can see the text in inkview, but it is not shown when loading the panel in vcv rack. Is this because of a missing font problem or something of that kind? I do not see any error messages which include some hits. Can anybody help?

You need to do “Object to path” or equivalent on your text objects in your drawing app.

Text must be converted to paths.

Thx, that solved the issue.

Added a section to https://vcvrack.com/manual/PanelTutorial.html#svg-limitations

1 Like

And if you are incrediby lazy (like me), just adding a Label (in code, not in the SVG) can make things very easy.

1 Like

Totally agree.

Can you point to more info about this please? Is it a way to add text next to a parameter or to get rack to render the text from svg’s or sth?

I did it by adding a child to panel in ModuleWidget. The child’s draw function is called after the SVG is drawn.

To draw text, you’ll need to add a font to your module (I put mine in the res directory) and then load the font before drawing text in the NVGcontext.

Because the ModuleWidget panel inherits from FramebufferWidget, in 0.6 it can’t use the struct Font helper that Rack provides; you must call nvgCreateFont directly. Not a problem in 1.0 though.

Oh, you mean like struct based on TransparentWidget and using nvgText and all to place the labels for the parameters on the panel? That seems like more work than pressing ctrl-shift-C in inkscape :smile:

Definitely more work, but easier for me to get things to line up exactly. I had to toy with Inkscape way too long to get the module precisely the right size.

Hmm ok. Do you use the same for knob pots? And do you then also still put it first in inkscape to know how much space to leave?
I just put everything in the svg, along with copies of the widget graphics and then measure with the ruler and write the values in the code and it seems to line up.

My controls are custom drawn; recreating them in SVG was too much friction. I use SVG to draw the panel decorations behind the controls, but in the end I’ll probably switch over to code both to get the panel to look better and to allow runtime customization.

If you need help designing knobs, panels or UI, let me know, I would love to help.