Buttons, SVG and layers

Development
1

Hello. I’m working on my second module. (It’ll be a proper one this time!) I’m drafting the design for some buttons on it (see the attached image). The “glow” is a shape layer in the SVG inside each button group. Is there a way (or example someone could point me to) to turn that layer on and off programatically if someone clicks that button in the module panel, or should I just swap the “off” button SVG file for the “on” one? Thanks in advance and hope this make sense. All the best, Alan.

16
16881×247 45.8 KB

1 Like
2

There’s no way to turn the layers on and off within vcv rack. I would use two svgs. The SVGSwitch class would be ideal. Here’s a fragment of code that I use for a two state parameter widget.

struct sub_sw_2 : SVGSwitch, ToggleSwitch {
	sub_sw_2() {
		addFrame(SVG::load(assetPlugin(plugin, "res/Components/sub_sw_2a.svg")));
		addFrame(SVG::load(assetPlugin(plugin, "res/Components/sub_sw_2b.svg")));
	}
};
1 Like
3

@carbon14 Thanks very much! That’s really helpful. :grin:

4

it is possible to hide and show single objects in the svg. I don’t think can be done for groups or layers, but single priimitives
You need to assign an id to the path and parse the svg handle in the step method of widget

5

That’s probably the easiest way to do it. You could also write some custom code that sets Widget::visible on another Widget that programmatically draws the gradient with nanovg calls.

Gradients in Rack’s SVG renderer are experimental.

1 Like
6

It’s coming along. :slight_smile: Not done the SVG flicking stuff yet as spent a while getting my head around PulseGenerator. :slight_smile: Also, the design of the panel will probably change a bit, too. But I’m a slow worker so don’t expect anything for a few weeks.

14
14600×760 257 KB

7

Is there any tutorial on making your own blank panel designs?