Stuck with a SynthEdit project?

Category: SVG Controls

Sasha’s SVG Controls.

Sasha, one of the 3rd party module developers has released some SVG controls for SynthEdit. These modules are not free (only in a demo mode), but cost 49 Euro, and are available here.
These controls have two main advantages:
1) They can be re-sized with no loss of quality.
2) Highly customizable.
The basic set of control is shown below.

The basic SVG control.

The Help Files.

s SVG Control:
This is the module on which all the SVG controls can be created. It displays SVG files and makes them interactive by using @commands, and animation
Filename: (Text) Supplies the SVG file path.
Animation X/Y: (Floating Point) These plugs send and receive (exactly as the default SE controls) the horizontal (X) and vertical (Y) animation position of the control as a GUI Float value between 0 and 1.
Modulation Value: (Floating Point) The input plug for animation modulation. This animates each layer which name contains the “@modulate” command with the modulation value. This must be connect to a Patch Memory Float Out’s Value pin. Input is scaled so that 0-10 corresponds to the default of 0-1.
List Choice: (Integer) Sends and receives index value of the selected List Item as with other SynthEdit sub-controls.
List Items: (Text) Input for the list of items. Any input other than blank makes module the operate in a stepped mode, a blank input allows for a
continuous (un-stepped) movement of the control. A single item input makes the module operate in trigger (on-off) mode. Each list item’s text will replace the “@item” text in the SVG file.
Note: For the stepped option to operate correctly there must be the same number of List items as there are list choices. Important: the Integer list for choices must start at 0, not 1 if there are 5 List Items, then the List Choice shall be 0,1,2,3,4.
Mouse Down (X/Y): (Boolean) Outputs mouse pressed state.
@image: (Text) Supplies the bitmap file path. The Bitmap is displayed on a rectangle in the layer name (in the SVG file) which contains the “@image” command.
@label: (Text) Inputs the text string which is used for replacing the “@label” text in the SVG file.
@value: (Text) Input to supply the value text. This is used for replacing the “@value” text in the SVG file when the mouse pointer is over the control. Note about Hover: For the @value text to be visible the Opacity Normal value in the s SVG Control’s properties must be set to 0.
All Color plugs: How to specify the colours- This is either standard HTML colour names (i.e. Red, Orange, Yellow…), or hex color codes in the following formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.
@color: (Text) Input for the main control colour.
Cap: (Text) Input for the colour of the cap on the control knob.
Neon: (Text) Input for the hover text colour, and the “slot” for the slider control.
Pointer: (Text) Input for the colour of the pointer control knob.
Print: (Text) Input for the default text and scale colours.
Hint: (Text) Input for hint text (mouse hover)
Menu Items: (Text) Input for context menu items
Menu Selection: (Integer) Outputs the context menus item index value.
Position (X/Y): (Floating Point) Outputs the mouse pointers horizontal (X) and/or vertical (Y) position in the normalized floating point range (0.0 to 1.0)
Mouse Over: (Boolean) Outputs the mouse hover state.

Shown below are the controls Sasha has provided as pre-fabs with the SVG module pack.

Some of the SVG controls

SVG Slider Control.

Sasha, one of the SynthEdit 3rd party module developers has released some new modules which make SVG controls available in SynthEdit. The beauty of these is that they are fully resizable. In this post I’ll show you how to use the SVG Slider control. The structure for my prefab control is shown below, with the prefab control itself shown top right of the diagram.

I have added both Volts and Float DSP output plugs.
We can customize the appearance of the slider using the following IO mod plugs:
@Color: Sets the colour of the control knob
Neon: Sets the colour of the text under the control when the mouse cursor is over the control.
Pointer: Sets the colour of the pointer (line) on the slider knob.
Print: Sets the colour of the slider scale and the text below the control when the mouse cursor is not over the control.
@Label: The label text is the text shown below the control when the mouse cursor is not over the control. If no text is supplied the default of “Value” will be shown.
@Value: This is the text shown when the mouse cursor is oven the control. We can use this to provide a display of the current output value of the control. By using the modules as shown below we can create, and customize the value displayed.
The float scaler is used to multiply or divide the value to be displayed, the Float T Text converts the float value to text, and allows us to specify how many decimal places will be displayed (The output Volts/Float value is not affected). The s Merge module allows us to add our text of choice after the converted value with a preset separator character (Separator plug value).
Multiply: Use to divide or multiply to re-scale the default 0-10 output range for the display (this does not re-scale the output values!)
Decimal Places: Allows us to specify how many digits are displayed after the decimal point.
Ctrl Key: Holding down the control key whilst adjusting the control allows us to increase the accuracy with which we can adjust the control as with other standard SE controls and sub-controls.

Converting Float to Text for the display.

Note: To resize the control it’s not a matter of selecting it and dragging the outline, you can only drag the control to a new position. To resize the slider you must open the prefab and select the s SVG Control module, and then look for scale in the properties panel. To adjust the size of the control this value needs to be adjusted.

Scale of the slider control.