Buttons, SVG and layers

(Alan Holding) #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.

(David O'Rourke) #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")));

(Alan Holding) #3

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

(Antonio Tuzzi) #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

(Andrew Belt) #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.

(Alan Holding) #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.

(Alheeley) #7

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