Custom dial fader images

A fader for the dial display is defined using an XML file and a couple of image files. I recommend storing all plugin-related files in the Documents/Trevliga Spel folder to have them all in the same place. This makes the profiles work on multiple computers, as the plugin automatically translates paths to that folder.

Images

The space allocated for a horizontal fader on the dial display is 190x50 px (width x height). The images to build the fader can be any size; they will be resized (and possibly rotated) to fit the space.

Image

Description

Background image

The background image is a static image that will always be the image's base layer. The image may be partially transparent if you want the dial strip background to be visible under the fader. The image should be in .png or .jpg format.

If used in the Mackie Control action, the background image is resized to 190x50 px if it is not exactly that size. If used in the Multi Mackie action, the image is rotated 90 degrees counterclockwise and resized to the space allocated for the item.

Handle Bar image/p>

The Handlebar enables a bar-type fader display. The image should be the same size as the background (190x50px) and will be shifted so that the rightmost edge of the image is positioned at the current handle position. This can be used instead of, or together with, the handle image. The image should be in .png or .jpg format.

If used in the Mackie Control action, the VU image is resized to 190x50 px if it is not exactly that size. If used in the Multi Mackie action, the image is rotated 90 degrees counterclockwise and resized to the space allocated for the item.

VU image

The VU image is an optional image that is superimposed on the background to show a VU meter based on the volume level reported by the daw. The image should be the same size as the background (190x50px) and is revealed from the left up to the current VU level; the part above the current VU level is cropped. The image should be in .png or .jpg format.

If used in the Mackie Control action, the VU image is resized to 190x50 px if it is not exactly that size. If used in the Multi Mackie action, the image is rotated 90 degrees counterclockwise and resized to the space allocated for the item.

VU Front image

The VU front image is an optional "leading edge" for the VU display. The image should be the same size as the background (190x50px) and will be shifted so that the rightmost edge of the image is positioned at the current VU level. The VU Front image can highlight the current VU level, which might otherwise be hard to spot depending on VU and background image colors. The image should be in .png or .jpg format.

The VU Front image requires the VU image to be present to be used. Use a fully transparent VU image only to see the VU edge.

If used in the Mackie Control action, the VU image is resized to 190x50 px if it is not exactly that size. If used in the Multi Mackie action, the image is rotated 90 degrees counterclockwise and resized to the space allocated for the item.

Handle image

The handle image is superimposed on the background with the horizontal position determined by the midi value: 0 = far left, 127 = far right.

  • The image must be stored in .png format.

  • The height should be the same as the background image (50 px). When the handle image has the same height as the background image, it will be resized proportionally to the background image when it is rotated for vertical use. If the handle image has a different height, it will be rotated but not resized when used vertically.

  • The width should be as tight to the handle image as possible since that controls how the plugin can move the handle. If the handle has excess transparent areas to the left or right of the "real" handle, it cannot move entirely to the edges.

  • Use transparent areas to fill up space above and below the handle, and use those areas to position the handle vertically.

The images are rendered in the order described in the table above. All images should be transparent in areas that are not to be rendered in the image layer.

Configuration file

The configuration for a dial fader "design" is stored in an XML file, and if you want to use a specific design for a dial, you only need to reference this XML file.

  • If you want to add a new (=previously not referenced) design to a dial, press the Add design button and select the XML file defining the design. This will select the design for the current dial and add the design name to the dropdown list for easy access when configuring other dials.

  • If you want to add the same design to other dials, you simply choose the design from the dropdown list.

File content:

<?xml version="1.0" encoding="utf-8" ?>
<Fader displayname="Blue">
	<Background
		dialimage="Background.png"
		dialimage_muted="Background_Muted.png"/>
	<Handle 
		dialimage="Handle.png" 
		dialimage_muted="Handle_Muted.png" 
		dialbarimage="HandleBar.png" 
		visualcenterpoint="7"/>
	<VU 
		dialimage="VU.png" 
		dialfrontimage="VUFront.png"/>
</Fader>

Attribute

Description

Fader - 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 - dialimage

The file name for the background image.

Background - dialimage_muted

The file name for the background image to be used when the channel is muted. If no muted background should be displayed, the attribute can be excluded altogether or reference an empty value (dialimage_muted="")

Handle - dialimage

The file name for the handle image. If no handle should be displayed, the attribute can be excluded altogether or reference an empty value (dialimage="")

Handle - dialimage_muted

The file name for the handle image to be used when the channel is muted. If no muted handle should be displayed, the attribute can be excluded altogether or reference an empty value (dialimage_muted="")

Handle - dialbarimage

The file name for the handle bar image. If no handle should be displayed, the attribute can be excluded altogether or reference an empty value (dialbarimage="")

Handle - visualcenterpoint

Usually, the handle image is created with the handle centered in the image, but it is possible to create an image where the handle is off-center due to, e.g., a shadow on one side. When the handle is off-center in the handle image, it will appear slightly off from the expected horizontal position. A midi value of 64 should, e.g., cause the handle to be visibly dead center on the fader, but an off-center handle will be slightly off (since the center of the image will be placed at the center of the fader.

In such cases, this attribute can be used to tell the plugin where the visible center of the handle itself is located. An example is a handle image 20 px wide where the handle occupies the first 14 px, and the rest of the image is a shadow. If we, in this case, set visualcenterpoint="7", we tell the plugin that the center point of the visible handle is 7px from the left, and the plugin will use this information to position the handle correctly horizontally. If no adjustment is required, the attribute can be excluded or reference an empty value (visualcenterpoint="").

VU - dialimage

The file name for the VU image. If no VU should be displayed, the attribute can be excluded altogether or reference an empty name (dialimage="")

VU - dialfrontimage

The file name for the VU front image. If no VU front image should be displayed, the attribute can be excluded altogether or reference an empty value (dialfrontimage="")

XML tags and attribute names are case-sensitive. All images must be in the same folder as the XML file, and the images should be defined with the file name only (not the full path).