VOLPE Wiki

Video OverLay Producer and Editor, professional overlay techniques

Brought to you by: skepticalee

JavaScript - jQuery, jQuery-UI, paperjs, spectrum

Installing Javascript dependencies: jQuery, jQuery-UI, paperjs, spectrum

Manual Installation

jQuery

A full installation of jQuery is required, including a complete installation of jQuery UI from https://jqueryui.com/. In particular the following files will be required:

jQuery:
- jquery-3.4.1.js
jQuery UI:
- jquery-ui.theme.css
- jquery-ui.structure.css
- jquery-ui.css
- jquery-ui.js
- As well as all of the files in the folder “images”

All of these files should be packed into one common subdirectory, with one subdirectory “images”.

paperjs

Paperjs can be obtained from https://paperjs.org. This version contains a limited number of blend modes. To access all the available blend modes, a special vesion of paperjs, called paper_volpe.js is supplied with this distribution.

Paper.js should be unpacked to its own directory.

spectrum

Spectrum is a color picker utility available from https://bgrins.github.io/spectrum/. Both spectrum.js and spectrum.css are required. This distribution of VOLPE also includes Swatch.php for making your own color palettes as well as volpe-spectrum_palettes.json which contains a number of standard color selections.

Directory structure

It is recommended to keep all Javascript installations in their own subdirectory of your localhost (e.g. “JS”) so that they can easily be accessed by other programs. JQuery is then found in the directory “JS/jquery”, and paperjs in “JS/paperjs”.

Configuration file

This file should be changed to reflect the relative position of the Javascript files with respect to Volpe, which should be in its own subdirectory of your host. The corresponding lines in volpe_config.php would read (if the above instructions were carried out):

define ("JQUERY", "../JS/jquery/jquery-3.4.1.js");
define ("JQUERYUI", "../JS/jquery"); # path only
define ("PAPERJS", "../JS/paperjs/paperLT.js");
define ("SPECTRUM", "../JS/spectrum"); # path only

Installation via Volpe

The program comes with a default configuration file that uses CDNs as the source of the dependencies. If you are connected to the internet, Volpe will load these CDN files and operate normally. By clicking on the "Admin" tab, local files can be chosen instead of the CDNs.

Start up Volpe.
Click the tab "Admin". The default javascript dependencies are in the first table.
Click the button "Search for dependencies" which will load any available dependencies found in subdirectories of your documentroot (localhost).
Choose the local sources you need. Save by clicking on the button "Save these paths and files". After saving the button will now read "Reload page", which will reload the page with the new files.