# Panel Tutorial

## Setup

Install [Inkscape](https://inkscape.org/), a cross-platform open-source vector graphics editor, to create SVG panels for Rack modules.

- Create a new document.
- Open the "Document Properties" panel (Shift+Ctrl+D), and make sure "Units" and "Display units" are set to "mm".
- Set the height to 128.5 mm and the width to a desired multiple of 5.08 mm ([1 HP](http://www.doepfer.de/a100_man/a100m_e.htm) in Eurorack).

## Designing your panel

Design the panel, or open an existing .pdf, .ai, .svg, etc file and copy-paste the contents into your new document.

![](https://vcvrack.com/images/Fundamental/VCO.m.png)

Design recommendations from VCV:
- Avoid gradients and photorealism. Use a flat style for panels and components. This increases clarity at all zoom levels, which is important when several other modules are on-screen.
- Design panels as if you are designing hardware.
	- Make sure there is enough space between knobs and ports to put your thumbs between them.
	- Use an inverted background for output ports (see Fundamental VCO-1 panel above).
	- Labels should succinctly state the purpose of knobs, switches, and ports.
- Roughly follow the graphical density and text sizes of Fundamental modules.

*Copyright and trademark advice:
Don't use others' intellectual property (IP) without their permission.
It may be illegal and/or make the owner of the IP upset.
Plugins which use other people's work unfairly will not be accepted into the [VCV Plugin Manager](https://vcvrack.com/plugins.html).*

Don't hesitate to ask the [VCV community](https://community.vcvrack.com/c/development) for design help.
You may find several graphic designers seeking programmers for collaboration.

## Adding components

A *component* is a graphical element that can be manipulated in C++.
A component can be a param (knob, switch, button, slider), input, output, light, or a custom widget (e.g. an LED display drawn procedurally in C++).

The actual component graphic should not be included on the panel.
Instead, add placeholders so that the `helper.py` script can generate C++.

- Open the "Layers" panel (Ctrl+Shift+L), and create a layer named `components`.
- For each desired component, create a particular shape on the components layer.
	- Use the circle tool (F5) to position a placeholder by its center.
		The size of the circle does not matter, only the center point.
		A `create*Centered()` function call is generated in C++.
	- Use the rectangle tool (F4) to to position a placeholder by its top-left point.
		This should only be used when the component's size needs to be defined on the panel, such as a rectangular LED display.
		A `create*()` function call is generated in C++.
- Set the color of each shape depending on the component's type.
	- **Param**: red `#ff0000`
	- **Input**: green `#00ff00`
	- **Output**: blue `#0000ff`
	- **Light**: magenta `#ff00ff`
	- **Custom widgets**: yellow `#ffff00`
- To save time editing the .cpp file later, you may name each component to automatically generate names in C++.
Open the "Object Properties" panel (Shift+Ctrl+O), select a component placeholder, and type in the "Label" field.
Note that you must press "Set" or Enter to apply the new name.
- Hide the components layer using the "Layers" panel and save the file to `res/<module slug>.svg`.

Run `<Rack SDK>/helper.py createmodule <module slug>` to automatically convert your panel into a template .cpp source file.