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 buttons, the background image should cover the entire area with non-transparent content.

  • For dials, the background image (if any) should be transparent for all areas that are not a part of the fixed part of the V-pot. The reasoning is that setting a background from the background library becomes pointless if you have dial images that cover the entire area and hide the strip background. If you are creating images just for yourself, it's, of course, up to you; if you want to fill the entire space, you are free to do so.

For more details, please see the Button/Dial differences section below.

Ring

The ring is an optional layer that will be added to the base layer. The ring intends to visualize the active span of the button and will be masked so that only a portion of the image is visible. Which part of the ring will be visible depends on the active span setting and the current midi value. Please note that the daw automatically controls the active span setting when using the Mackie Control protocol.

 

  • If the active span indication is From min to max, the ring will be visible from the leftmost position (=midi value 0) to the current midi value.

  • If the active span indication is From midpoint, the ring will be visible from the center position (=midi value 64) to the current midi value (left or right).

  • If the active span indication is At current value, the ring will be visible only at the current midi value.

Fixed direction indicators

Fixed direction indicators are rendered on the background if selected by the user.

  • Either the clockwise or the counterclockwise image is rendered, depending on the current direction of the button.

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.

  • Either the clockwise or the counterclockwise image is rendered, depending on the current direction of the button, and the direction indicator will be rotated along with the knob. Images should be saved as viewed in the 12 o'clock position.

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

This is the name that the design will have in the dropdown. You can set whatever name you like, preferably a name not already in the dropdown list.

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).

  • image - the background image for buttons. The image should fill the area and be non-transparent. The property can be omitted if the V-Pot is used only on dials.

  • dialimage - the background image for dials. The attribute can be omitted if the V-Pot is used only on buttons or if a fully transparent background should be used on dials. If the same image is to be used on buttons and dials, set the same image name in both attributes.

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

The span attribute defines the rotating part's span (in degrees) from midi value 0 to midi value 127. The center point for the span is always the 12 o'clock position, so if you, e.g., define a span of 250, the knob will rotate from a position -125 degrees from the center point (=midi value 0) to +125 degrees from the center point (=midi value 127). Please define an integer value between 0 and 360.

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

The minwidth attribute defines the ring image's minimum width (in degrees). Please define an integer value between 0 and 360. This value is used in the following way:

  • For a button where the active span indication is From min to max, the minwidth will control the minimal visible width of the ring at the start positions (midi value 0 and values close to 0). If the attribute is set to 0, the ring will be invisible when the midi value = 0; if the minwidth is set to, e.g., 20, 20 degrees of the ring will be visible even when the midi value is 0.

  • For a button where the active span indication is From midpoint, the minwidth will control the minimal visible width of the ring at the center positions (midi value 64 and values close to 64). If the attribute is set to 0, the ring will be invisible when the midi value = 64; if the minwidth is set to, e.g., 20, 20 degrees of the ring will be visible when the midi value is 64 (or thereabout).

  • For a button with the active span indication At current value, the minwidth will control the visible width of the ring at the midi position. This visible part of the ring will be "attached" to the knob rotation and always highlight the current midi value (as will the knob).

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.

  • fixedimagecw - image for the clockwise fixed indicator.

  • fixedimageccw - image for the counterclockwise fixed indicator.

  • rotatingimagecw - image for the clockwise rotating indicator.

  • rotatingimageccw - image for the counterclockwise rotating indicator.

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"/>
or
<Background image="Background.png" dialimage=""/> 

  • For buttons, the plugin will build the image from the background, the ring and the knob.
  • For dials, the plugin will only build the image from the ring and the knob, leaving the background transparent.

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"/>

  • For buttons, the plugin will build the image from the image background image, the ring and the knob.
  • For dials, the plugin will build the image from the dialimage background image, the ring and the knob.

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.net
White knob created by macrovector - www.freepik.com
Scrub wheel and silver knob created by designfreebies - www.designfreebies.org