Custom fader images

If the built-in mixer-like design doesn't work for you, you can design your own fader style where the handle movement is controlled like the mixer-like faders.

Background image

Background images must be square (since the buttons are square), and the recommended size is 144x144 pixels. They can be larger, but there's no point in having larger images since they will be resized to 144x144 (since that's the size used by StreamDeck) at an extra performance cost.

The images should be in .png or .jpg format. Do not store images in the plugin folder; they will be deleted if a plugin update is installed. I recommend storing all plugin-related files in the Documents/Trevliga Spel folder to have them all in the same place.

Handle image

Handle images must be constructed with greater care than background images. The following are mandatory rules:

  • They must be stored in .png format.

  • They must be exactly 144 pixels wide or high. The size of the handle image determines the orientation of the fader; if it is 144 pixels wide, a vertical fader is created; if it is 144 pixels high, a horizontal fader is created.

  • The width/height, not 144 pixels, should be as tight to the handle image as possible since that controls how the plugin can move the handle. If, e.g., a vertical handle has excess transparent areas above or below the "real" handle, it cannot move entirely to the edges. There are no limitations on this size - the 23 pixels mentioned in the explained picture are just what happens to be used by the built-in handles.

  • Use transparent areas to fill up space on each side of the handle, and use those areas to position the handle center or closer to one side.

VU meter image

VU meter images must be square, and the recommended size is 144x144 pixels. They can be larger, but there's no point in having larger images since they will be resized to 144x144 (since that's the size used by StreamDeck) at an extra performance cost.

Some facts:

  • Images must be stored in .png format.

  • VU meter images will be revealed from the bottom up, controlled by the volume level.

  • The revealed part is rendered on the background, where opaque parts cover the background image.

  • Either the VU meter image is a complete copy of the background image, with the VU coloring added, or it is a partial copy being transparent where there is no VU meter information. (...this is a recommendation, not a rule; you can have something completely different as the VU meter if that makes sense to you :-) )

  • If two buttons handle the same fader, the VU meter will also span both buttons, and the VU images for the two buttons should be designed according to this.

  • When calculating how much and which part of the VU image to show, the plugin excludes space occupied by padding. If you, e.g., have two buttons with 45 pixels padding both at the top and bottom, a 100% VU meter will start 45 pixels from the bottom and end 45 pixels from the top.

  • The Mackie Control protocol defines volume in 12 steps where 0=0% and 12=100%, so the VU meter will not be as fine-grained and accurate as in the daw.

Padding

If you create background images (for lower and upper buttons), you can reserve some space at the end positions where the plugin can display the track name and dB value. When you have those background images defined, you can set the padding dropdowns to a value corresponding to the reserved space you have created in your background images. (Padding is only used for vertical faders; if the selected handle image causes a horizontal fader to be created, the padding values are ignored).

I have created two example images with some gray space at the end positions in the image to the right, and I have set both padding dropdowns to 45. The dropdown value represents the number of pixels that should be reserved at the position. The entire image (width and height) is 144 pixels, so the dropdown value should be seen relative to that image size.

With both values set to 45 (as in my example), the handle movements are restricted and will never come closer to the upper and lower edge than 45 pixels. The full value range for the fader is still used; it's just that it doesn't use the full height of the buttons. This way, the text information and the handle will never occupy the same space.