VPD: VCV Rack 2 Panel Designer

VPD is a web application to create the SVG files for a basic VCV module panel.

It has been tested on:

Chrome
Firefox
Opera
Safari

(but TBH, mostly on Chrome).

There is a brief Getting started section below and a somewhat more comprehensive user guide which describes all the available commands (along with a summary cheatsheet)

Status: ALPHA

Raison d’être

VPD was created mostly as an experiment in implementing a command interface using tree-sitter, but also because having to switch back and forth between between text and paths in Inkscape when creating or modifying a VCV panel is just plain annoying.

Getting Started

Assuming that you have already installed the VCV plugin SDK:

Create a sample VCV plugin:

$RACK_DIR/helper.py createplugin bodacious
cd bodacious
make

Open the VPD web application in a browser.
Create a sample panel by either:
- Downloading the quickstart.vpd project file and opening it by clicking on the Load () button (or alternatively by executing the load project command)
  
  -- OR --
- Downloading the quickstart.vpx script file and opening it by Alt-clicking on the Load () button (or alternatively by executing the load script command)
  
  -- OR --
- Following the Getting started instructions in the User Guide
Export the SVG files to the plugin res folder using either the Export SVG buttons ( ) or the commands:
```
export panel svg
export panel svg dark
```

Generate a module using the VCV helper script and add the module to the plugin:

$RACK_DIR/helper.py createmodule bodacious res/bodacious.svg src/bodacious.cpp

plugin.hpp

#pragma once
#include <rack.hpp>

using namespace rack;

extern Plugin* pluginInstance;
extern Model* modelBodacious;

plugin.cpp

#include "plugin.hpp"

Plugin* pluginInstance;

void init(Plugin* p) {
    pluginInstance = p;

    p->addModel(modelBodacious);
}

Compile and link and (optionally) install:
```
make
make install
```

Releases

web app

The VPD web app is currently hosted on Cloudflare Pages.

Running locally

VPD application

Download the vpd executable archive from a release or the latest alpha build and extract it to a folder of your choice.
Open the vpd application in a terminal window (on a Mac you may have to Ctrl-Open the file the first time to grant it permissions to run).
Open http://localhost:9876 in your browser.
Voilá, you're good to go!

Command line

vpd [--debug] [--port <port>] [--html <folder>]

Options:
--debug          Enables verbose internal debug logging
--port <port>    Serves the web application on the specifed port (the default port is 9876)
--html <folder>  External folder for the HTML files - by default it serves the web application
                 embedded in the executable. A tar.gz file with the base version of the HTML
                 can be downloaded from the Github releases or the latest 'alpha' build.

Python

Download the HTML artifact from either a release or the latest alpha build and unzip it to a folder.
Start an HTTP server to serve the unzipped files:
```
cd vpd
python3 -m http.server 9876 -d html
```

NodeJS

Download the HTML artifact from either a release or the latest alpha build and unzip it to a folder.
Start an HTTP server to serve the unzipped files:
```
cd vpd
npx http-server html --port 9876
```

Building from source

You need a bunch of tools:

NOTES:

apt install sass on Ubuntu installs ruby-sass which was marked obsolete in 2019. Please follow the installation instructions on the Sass homepage to install the current version.
The web app is not bundled because I cannot for the life of me figure out how to resolve all the wasm dependencies.

Build instructions

Clone the repository

git clone https://github.com/transcriptaze/vpd
cd vpd

Start docker
Build everything:
```
make build-all
```

Attribution

undo icon by Michael Kussmaul from Noun Project (CC BY 3.0)
redo icon by Michael Kussmaul from Noun Project (CC BY 3.0)
The remaining icons are from the SVG Silh project.