kamo-soupbato/projects/panel/documentation.md

---
title: Knob feast & Cables spaghetti hell
description: Generate interactive synth panel from SVG
date: 11/04/2022
categories:
    - Web
    - Prototype
    - Interaction
url:
git: https://git.xpub.nl/kamo/panel
pad: https://pad.xpub.nl/p/modcms
project: panel
cover: nutritional-synth.jpg
cover_alt: Nutritional synth
---

This is a prototype for generating interactive panels starting from vector drawings of (real) synth. It will be used in the [mod cms](https://pad.xpub.nl/p/modcms), a CMS for storing patch of analog synthetizer in a workbook fashion. In the future maybe also making sounds out of it? Who knows.

ATM the interactive widgets are: knobs and sockets. For the knob we are using the [input-knobs.js](https://g200kg.github.io/input-knobs/) library. It's a small library that turns `<input>` HTML elements into controller of different types (knobs, fader, switch, etc)

The sockets are modelled on the modular idea of connecting things with cables. To see more look at [spaghetti](https://git.xpub.nl/kamo/spaghetti).

The idea of using SVG is borrowed from VCV rack, in this way the synth could be created starting from a drawing.

In the SVG there are two different layers: one is for the design and the other for the parameters. With a precise convention on colors and names in the second, the Panel class can mount the interactive knobs and sockets on the synth.

### Key:

<span style='color: red'>`#FF0000` Red</span> elements in the SVG `params` layer will be turned into knobs. Their ID will be the linked parameter. So for instance an `<ellipse id='LFO' />` Will generate a Knob controlling the value of LFO rate

<span style='color: #00FF00'>`#00FF00` Green</span> elements in the SVG `params` layer will be turned into sockets. Their ID will be the name of the socket.

Example:

```
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="params">
        <circle id="sun" cx="192" cy="64" r="32" fill="#FF0000"/>
        <rect id="morning" x="160" y="160" width="64" height="64" fill="#00FF00"/>
        <rect id="night" x="32" y="32" width="64" height="64" fill="#00FF00"/>
    </g>
</svg>
```

This will create a panel with a knob labeled `sun` and two sockets `morning` and `night`. Of course you don't have to write the SVG line by line: this is just a standard export from your favourite vector graphics editor (like Inkscape, Figma, Illustrator, etc)

The only important thing to make the script works is to export every element with its ID (usually the name of the layer or the element in the vector graphics software) and to group all the params in a group named `params`.

# How to use it

-   Create an HTML page
-   Load the panel.js script in the `<head>`
-   Load your script
-   Instantiate a new Panel passing your SVG and an HTML container
-   Fun

Small example:

```
// html
<div id='container'>
    <svg id='svg-panel' width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="params">
            <circle id="sun" cx="192" cy="64" r="32" fill="#FF0000"/>
            <rect id="morning" x="160" y="160" width="64" height="64" fill="#00FF00"/>
            <rect id="night" x="32" y="32" width="64" height="64" fill="#00FF00"/>
        </g>
    </svg>
</div>
```

```
// js
const container = document.querySelector("#container");
const SVGPanel = document.querySelector("#svg-panel");
let synth = new Panel(SVGPanel, container);
```

Ok need to elaborate this a bit. In case feel free to contact if you have questions or issues.
panel 3 years ago			`---`
			`title: Knob feast & Cables spaghetti hell`
			`description: Generate interactive synth panel from SVG`
			`date: 11/04/2022`
			`categories:`
			`- Web`
			`- Prototype`
			`- Interaction`
			`url:`
			`git: https://git.xpub.nl/kamo/panel`
			`pad: https://pad.xpub.nl/p/modcms`
panel project 3 years ago			`project: panel`
panel 3 years ago			`cover: nutritional-synth.jpg`
			`cover_alt: Nutritional synth`
			`---`

			`This is a prototype for generating interactive panels starting from vector drawings of (real) synth. It will be used in the [mod cms](https://pad.xpub.nl/p/modcms), a CMS for storing patch of analog synthetizer in a workbook fashion. In the future maybe also making sounds out of it? Who knows.`

			ATM the interactive widgets are: knobs and sockets. For the knob we are using the [input-knobs.js](https://g200kg.github.io/input-knobs/) library. It's a small library that turns `<input>` HTML elements into controller of different types (knobs, fader, switch, etc)

			`The sockets are modelled on the modular idea of connecting things with cables. To see more look at [spaghetti](https://git.xpub.nl/kamo/spaghetti).`

			`The idea of using SVG is borrowed from VCV rack, in this way the synth could be created starting from a drawing.`

			`In the SVG there are two different layers: one is for the design and the other for the parameters. With a precise convention on colors and names in the second, the Panel class can mount the interactive knobs and sockets on the synth.`

			`### Key:`

			<span style='color: red'>`#FF0000` Red</span> elements in the SVG `params` layer will be turned into knobs. Their ID will be the linked parameter. So for instance an `<ellipse id='LFO' />` Will generate a Knob controlling the value of LFO rate

			<span style='color: #00FF00'>`#00FF00` Green</span> elements in the SVG `params` layer will be turned into sockets. Their ID will be the name of the socket.

			`Example:`

			```
			`<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">`
			`<g id="params">`
			`<circle id="sun" cx="192" cy="64" r="32" fill="#FF0000"/>`
			`<rect id="morning" x="160" y="160" width="64" height="64" fill="#00FF00"/>`
			`<rect id="night" x="32" y="32" width="64" height="64" fill="#00FF00"/>`
			`</g>`
			`</svg>`
			```

			This will create a panel with a knob labeled `sun` and two sockets `morning` and `night`. Of course you don't have to write the SVG line by line: this is just a standard export from your favourite vector graphics editor (like Inkscape, Figma, Illustrator, etc)

			The only important thing to make the script works is to export every element with its ID (usually the name of the layer or the element in the vector graphics software) and to group all the params in a group named `params`.

			`# How to use it`

			`- Create an HTML page`
			- Load the panel.js script in the `<head>`
			`- Load your script`
			`- Instantiate a new Panel passing your SVG and an HTML container`
			`- Fun`

			`Small example:`

			```
			`// html`
			`<div id='container'>`
			`<svg id='svg-panel' width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">`
			`<g id="params">`
			`<circle id="sun" cx="192" cy="64" r="32" fill="#FF0000"/>`
			`<rect id="morning" x="160" y="160" width="64" height="64" fill="#00FF00"/>`
			`<rect id="night" x="32" y="32" width="64" height="64" fill="#00FF00"/>`
			`</g>`
			`</svg>`
			`</div>`
			```

			```
			`// js`
			`const container = document.querySelector("#container");`
			`const SVGPanel = document.querySelector("#svg-panel");`
			`let synth = new Panel(SVGPanel, container);`
			```

			`Ok need to elaborate this a bit. In case feel free to contact if you have questions or issues.`