Transparent Panel

Development
1

I’m trying to create a panel in inkscape, whenever I create the panel through helper.py, the background of the panel is transparent and the text doesn’t appear, only the inputs and outputs are visible.

If I use the VCV rack Tutorial image, the panel appears with background and text.

Any explanation on how to create background and text in inkscape?

Thanks

2

Can you point us to your C++ code and your SVG file? There is no way to guess what’s wrong if we can’t see those…

3

I’ve never used Inkscape, but in drawing programs I’ve used I make an opaque filled rectangle at the bottom of the z-order to make a background.

4

And of course for text you need to convert it to a path. Pretty sure that’s documented, but who knows…?

5

Yeah Bruce it is: Module Panel Guide - VCV Rack Manual

Text and fonts: All text objects must be converted to paths. This can be achieved in Inkscape with Path > Object to Path. As a benefit, this avoids license issues with embedding proprietary fonts.

1 Like
6

Hello

the svg file comparator

the test panel from manual and my panel in vcv rack noBackModule

part of the code: struct CompModuleWidget : ModuleWidget { CompModuleWidget(CompModule* module) { setModule(module); setPanel(createPanel(asset::plugin(pluginInstance, “res/CompModule.svg”)));

	addChild(createWidget<ScrewSilver>(Vec(RACK_GRID_WIDTH, 0)));
	addChild(createWidget<ScrewSilver>(Vec(box.size.x - 2 * RACK_GRID_WIDTH, 0)));
	addChild(createWidget<ScrewSilver>(Vec(RACK_GRID_WIDTH, RACK_GRID_HEIGHT - RACK_GRID_WIDTH)));
	addChild(createWidget<ScrewSilver>(Vec(box.size.x - 2 * RACK_GRID_WIDTH, RACK_GRID_HEIGHT - RACK_GRID_WIDTH)));

	addInput(createInputCentered<PJ301MPort>(mm2px(Vec(31.033, 29.893)), module, CompModule::PATH6167_INPUT));
	addInput(createInputCentered<PJ301MPort>(mm2px(Vec(30.78, 54.086)), module, CompModule::PATH5750_INPUT));

	addOutput(createOutputCentered<PJ301MPort>(mm2px(Vec(30.146, 77.266)), module, CompModule::PATH5750_4_5_OUTPUT));
	addOutput(createOutputCentered<PJ301MPort>(mm2px(Vec(30.146, 103.105)), module, CompModule::PATH5750_4_OUTPUT));
}

};

I use helper.py to create the code

Link to svg file https://drive.google.com/file/d/1r5-IYRxkiHZVQN83tRDbDGayUNSTkOlF/view?usp=sharing

7

can you try this svg file? (right click on it and “save graphic under …”)

Test_Panel For VCV_02

8

with your svg file no components layer.

9

I think it’s not loading the svg at all. Is there some warning in the log.txt ?

10

Hi thanks for the tip. I checked the log file and found load error in svg file.

I use the command: $RACK_DIR/helper.py createmodule ComparatorModule res/comparator.svg src/Comparator.cpp comparator.svg is the name of file in my /res developer folder. After i do make install, I checked in the comparator.cpp file and found: setPanel(createPanel(asset::plugin(pluginInstance, “res/ComparatorModule.svg”)));

But in the rack2/plugin/res/ folder the file is comparator.svg, i rename the file to ComparatorModule.svg and now is working

I need to understand the helper.py syntax command. I assume helper.py copy the file to plugin/res folder without changing the name.

Thanks again for the help

Rui Cruz

1 Like
11

try this, clean your document (file/ clean-up) then save the documento as optimazed svg and delete all the data inkscape is adding to your document

image
image1920×1200 153 KB

12

this is actually an issue i’ve run into recently. when you create a module with the ‘createmodule’ helper.py command, no matter what you put as your svg file name, it will override that and use your module’s slug as the filename of the svg. so if your svg file is named differently than your module, you will always need to make sure you go into the module widget’s code and change the filename manually after creating the module.

2 Likes