Graphic filters and custom components

Hi, I have a couple of questions. I made well-designed components but other users pointed out that the colors are too dark, so I used Inkscape’s “Brightness” filter to fix the problem. While developing the first module, I realized that no filters are detected inside Rack and the components are still dark. So here’s the first question: is there a way to get the filters to be detected in Rack or should I just change the colors “at the root”?

Second problem: to see my components on my modules I used strange and entirely temporary tricks. As for the screws, I removed that part of the module code, then Rack loads me the panel without the screws of VCV, and I can see my screws (integrated directly into the panel project), let’s say it can also be a definitive solution leave the screws integrated in the panel and do not insert them in the code but I would be the only one to do it.

As for the ports, I momentarily put mine in the original VCV ports svg file, but this would only work for me, other users would be shown the VCV ports, plus this way I added my ports to pretty much all the modules in Rack, which I don’t want to do.

So how can I tell the code that it needs to load my svg files and not the original ones?

There is no way to get rack to understand the filters. NanoSvg interprets just a subset of svg syntax into a nanovg object tree and there are many things in svg that it doesn’t understand.

The way to get new port designs is to create subclasses of the port widgets and use them. If you look at the source for the existing rack ports, I think you will see that there are basic port widget classes, and then there are specific subclasses which load specific svg files. You should create your own subclasses using a similar approach.


Do I need to create an .hpp file dedicated to components? I saw that CountModula did this. I tried to recreate the same concept inside the module cpp code, many errors. In fact there will be differences that I have not considered between the .cpp and .hpp files I was only able to correct the ports errors. I deleted the part of the code for the lights and screws, I could not solve. I developed the module and … again Rack crash, always the same fatal signal 22, but reading carefully log.txt I saw that the problem is the ports (which MinGW did not detect as an error … and this time the SDKs are really ok) So I deleted everything and started over.

For the filter issue you can try using the Extension menu instead of filters. Extensions modify the underlying svg directly and I think that will show in VCV Rack.

By now I have directly changed the colors, thanks anyway. Now I just need to understand how to add my components into the code.

(Actually also how to get perfect dimensions, following the tutorial with 128.5mm and a multiple of 5.08mm, I saw that in Rack I get the ports and screws a bit bigger than expected (surely it will be the same also for the knobs but still I have not developed modules with knobs) I opened a svg file of VCV and saw that they are designed directly in pixels, so I’m trying to redo my panel in pixels and see if I fix the size problem)

1 Like

In any case, the extensions work. Even though I have already changed the colors, I have not achieved the same brilliance as the filter and the extension is helping me a lot! Thanks again!

1 Like