Custom V-pot images V2
When V-pot graphics were introduced in the Mackie Control action, the easiest way (at the time) was to define one image for each of the 12 possible states (a V-pot on a Mackie Control device has 12 states). This principle can't be used when porting the functionality to the Control Change action since it has 128 states. Instead, the V-pot graphics V2 are built using a static background image, a section from the ring image, optional direction indicators, and the knob image rotated according to the midi value.
V-pot V2 definitions can be used in the Mackie Control and Control Change button actions and the Dial action.
In addition to the paths to the images, a couple of parameters control how the final image is built up. Instead of bloating the minimal plugin space in the editor with these fields, everything is defined in an XML file.
Images
Image | Description |
---|---|
Background Dial Background | The background image is a static image that will always be the image's base layer. There are no hard rules (that I'm aware of), but these are my recommendations regarding the background:
For more details, please see the Button/Dial differences section below. |
Ring |
|
Fixed direction indicators | Fixed direction indicators are rendered on the background if selected by the user.
|
Knob | The knob is rotated according to the current midi value. The image should be saved with the knob in the 12 o'clock position. The image is rotated around the center, and the endpoints of the rotation are determined by the span attribute in the definition file. |
Rotating direction indicators | Rotating direction indicators are rendered on the knob if selected by the user.
|
Example of final image | This is an example of a final image built from the three main images (without direction indicators). The image shows a situation where the active span indication is From min to max, and the current midi value is around 40. |
All images must be square, and the size should be 144x144 pixels. The image size can differ, but the images will be resized to 144x144 by the plugin, so having other sizes only adds time for image conversion. Images should be saved in .png format, and the ring, knob, and indicator images should be fully transparent for parts that are not the active part of the image. The images must be in the same folder as the configuration file.
Configuration file
The configuration for a V-Pot "design" is stored in an XML file, and if you want to use a specific design for a button, you only need to reference this XML file.
If you want to add a new (=previously not referenced) design to a button, press the Add design button and select the XML file that defines the design. This will select the design for the current button and add the design name to the dropdown list for easy access when configuring other buttons.
If you want to add the same design to other buttons, choose the design from the dropdown list.
File content:
<?xml version="1.0" encoding="utf-8" ?>
<VPot displayname="Black knob">
<Background image="Background.png" dialimage="Background.png"/>
<RotatingPart image="Knob.png" span="250"/>
<Ring image="Ring.png" minwidth="20"/>
<Direction fixedimagecw="FixedCW.png"
fixedimageccw="FixedCCW.png"
rotatingimagecw="RotatingCW.png"
rotatingimageccw="RotatingCCW.png"/>
</VPot>
Attribute | Description |
---|---|
VPot - displayname |
If you are a content creator, I recommend adding a unique ID (company name or similar) to the name to avoid duplicates. |
Background - image/ dialimage | The file names for the background images for buttons and dials. The images must be in the same folder as the XML file and should be defined with the file name only (not the full path).
For more details, please see the Button/Dial differences section below. |
RotatingPart - image | The file name for the knob image. The image must be in the same folder as the XML file, and the image should be defined with the file name only (not the full path). |
RotatingPart - span |
If the design is used on a dial with the mode set to half (i.e., only half the V-knob is visible), the span will be limited to 180 (i.e., the visible part of the V-pot). |
Ring - image | The file name for the ring image. The image must be in the same folder as the XML file, and the image should be defined with the file name only (not the full path). |
Ring - minwidth |
|
Direction | The file names for the direction indicator files. The images must be present in the same folder as the XML file, and the images should be defined with file name only (not the full path). The Direction tag is optional, as are the individual attributes. If the user selects to see a direction indicator that is not defined in this tag, no direction indicator will (of course) be visible. Direction images are not used for dials.
|
XML tags and attribute names are case-sensitive.
Button/Dial differences
As mentioned before, it is my recommendation (but no hard rule) to have an opaque button background that covers the entire area and a dial background that is transparent in areas that are not a part of the static part of the V-pot.
Direction images are not used for dials.
Some examples of the built-in V-pots that describe how the plugin handles the background image attributes:
Built-in design | Description |
---|---|
Blue | For the Blue design, the background image is all just background, and the only static part of the V-pot is the Ring image. In this case, the dialimage attribute should be omitted or left blank. <Background image="Background.png"/>
|
Blue | For the Black design, the background image contains a static part of the V-pot and must be included, but since the image for buttons is opaque, a different image must be used for dials. <Background image="Background.png" dialimage="DialKnobBackground.png"/>
|
Image attributions
Images for the built-in designs are rebuilt to suit the use by the plugin, but the following sites created the base images:
Black knob created by sideshowfx - www.sideshowfx.netWhite knob created by macrovector - www.freepik.com
Scrub wheel and silver knob created by designfreebies - www.designfreebies.org