This is a prototype for generating interactive panels starting from vector drawings of (real) synth. It will be used in the mod cms, 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 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.

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:

#FF0000 Red 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

#00FF00 Green 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.