Fader Image Files V2

Custom button fader images V2

These files are used by the Generic Midi button. For custom fader files used by the Control Change/NRPN and Mackie Control buttons, please see the "Custom fader images" page.

Images

The space for Generic Midi button fader images is 144x144px for a single button and 144x288px or 288x144px for a dual button. All images should be created for 144x144px vertically and are automatically stretched when used in a dual-button configuration and rotated when used in a horizontal configuration.

Image	Description
Background image	The background image is a static 144x144 px image that will always be the image's base layer. The image should be in .png or .jpg format. The background image should not include text or numbers since those will look bad when stretched, and rotated if the fader is used horizontally. Instead, you can define texts in the XML file; please see the description below.
Handle Bar image	The Handlebar enables a bar-type fader display. The image should be the same size as the background (144x144px) and will be shifted so that the upmost 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.
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 (144x144px) and is revealed from the bottom up to the current VU level; the part above the current VU level is cropped. The image should be in .png or .jpg format.
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 (144x144px) and will be shifted so that the upmost 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.
Handle image	The handle image is superimposed on the background with the vertical position determined by the midi value: 0 = bottom, 127 = top. The width must be the same as the background image (144px), and the image must be stored in .png format. The height should be as tight to the visible handle as possible, as it controls how the plugin can move the handle. If the handle has excess transparent areas above or below the "real" handle, it cannot be moved entirely to the edges. Use transparent areas to fill up space to the left and right of the handle, and use those areas to position the handle horizontally.

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 button fader "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 defining 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" ?>
<Fader displayname="My cool design">
	<Background image="Background.png" />
	<Handle image="Handle.png"  barimage="handlebar.png"/>
	<VU image="VU2.png" frontimage="vufront.png"/>
	<Texts font="Verdana" size="15" color="ffffff" coloronvu="000000">
		<Text text="5" x="72" y="26"/>
		<Text text="0" x="72" y="42"/>
		<Text text="10" x="72" y="57"/>
		<Text text="20" x="72" y="71"/>
		<Text text="30" x="72" y="85"/>
		<Text text="40" x="72" y="100"/>
		<Text text="50" x="72" y="114"/>
		<Text text="-oo" x="72" y="128"/>
	</Texts>
	
	<Padding >
		<Top 
			size="40" 
			background="#dddddd" 
			textcolor="#000000" 
			textposition="center" 
			textfont="Tahoma" 
			textmaxsize="18" 
			textminsize="10"/>
		<Bottom 
			size="40" 
			background="#dddddd" 
			textcolor="#000000" 
			textposition="center" 
			textfont="Tahoma" 
			textmaxsize="18" 
			textminsize="10"/>
	</Padding>
</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 -image	The file name for the background image.
Handle - image	The file name for the handle image. If no handle should be displayed, the attribute can be excluded altogether or reference an empty value (image="").
Handle - barimage	The file name for the handlebar image. If no handlebar should be displayed, the attribute can be excluded altogether or reference an empty value (barimage=""). Please note that the handlebar is an "addon" to the handle image and is only used if a handle image is configured. If you want a handlebar image but no visible handle, please add a fully transparent handle image.
VU - image	The file name for the VU image. If no VU should be displayed, the attribute can be excluded altogether or reference an empty name (image="")
VU - frontimage	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 (frontimage="") Please note that the VU front is an "addon" to the VU image and is only used if a VU image is configured. If you want a VU front image but no visible VU meter, please add a fully transparent VU image.
Texts	Since the fader images may be stretched and rotated, fixed texts included in the images will not look good. In a dual-button configuration, they will be stretched, and in a horizontal fader, they will be tilted. To avoid this, you can define the texts in the configuration file, and they will be added to the final image after it has been stretched and rotated. If you want to include texts this way, the XML file should contain a "Texts" section with individual "Text" properties for each text you want to add. The "Texts" section keeps the font attributes for all the texts. color. The color of the texts in the image. The color must be defined as an eight-character hex string in the format "#RRGGBBAA" (red-green-blue-alpha; the "#" character is optional). coloronvu. Optional attribute for the color of the texts in the image while on a VU background. If the attribute is not defined, the same color is used on both the VU and normal backgrounds. font. The font for the text in the image. It must be one of the fonts available in the Stream Deck editor title properties popup. size. The text size to be used (in points, the same scale used in the Stream Deck editor title properties popup). The "Text" property defines the text and position for each text. text. The text that should be added at the defined position. x. The X position of the centerpoint of the text, in pixels counted from the left edge. x. The Y position of the centerpoint of the text, in pixels counted from the top edge. The X/Y coordinates should reference a single vertical button in the 144x144px space of the image. If the image is stretched or rotated, the plugin calculates new text positions and repositions the texts. When adding texts to the image, the plugin will avoid overlapping texts; if two texts come too close and overlap, one of the texts will be suppressed.
Padding	The padding section has separate subsections for the top and bottom padding. The same attributes are present in both sections. size. The vertical size of the padding area in pixels. background. The background color of the padding area. The color must be defined as an eight-character hex string in the format "#RRGGBBAA" (red-green-blue-alpha). textcolor. The color of the text in the padding area. The same color format as the background. textposition. The horizontal alignment of the text in the padding area. "left", "center", or "right", textfont. The font for the text in the padding area. It must be one of the fonts available in the Stream Deck editor title properties popup. textmaxsize and textminsize. The plugin will scale the text to fit in the available space in the padding area. These two attributes define the largest and smallest text size to be used (in points, the same scale used in the Stream Deck editor title properties popup). The text attributes in the design file are used as a default setting for the design, but they can be changed individually for each button using the Stream Deck editor title properties popup. The padding background color in the design file is used as a default setting for the design, but it can be changed individually for each button using the "colorize info area" setting in the "Visual tweaks" section.

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