Stuck with a SynthEdit project?

Tag: Sub Controls (Page 1 of 2)

Illuminated button with text.

This is a Sub-Control that really is only achievable with third party modules.
Both the button , and the text label are clickable.
I felt for a control it was useful to have both GUI Float + Bool along with DSP Bool and Volts outputs, which is easily done with a little planning.
Note: Purely out of interest this button structure is a good demonstration of the two-way communication between GUI modules- without this the option to have the text as clickable, and changing colour would not be possible.

DAM V Rectangle.

The DAM V Rectangle is connected so as to send a Float value of 1 when the button is clicked, with the mouse response set to the Step option this switches from 0 to 1 on the first click, then from 1 to 0 on the second click and so on.
The colour options I felt relevant to this project are connected to an IO module so the user can readily change them.

Mouse Response = Step
Gradient Point B (Y) and Alt Gradient Point B (Y) should be set to 50.
The colour options are:
Top ARGB = Off Top ARGB (Top gradient ARGB colour when button in the OFF state)
Bottom ARGB = Off Bottom ARGB (Bottom gradient ARGB colour when button in the OFF state)
Alt Top ARGB = On Top ARGB (Top gradient ARGB colour when button in the ON state)
Alt Bottom ARGB= On Top ARGB (Bottom gradient ARGB colour when button in the ON state)
Outline ARGB = Off Outline ARGB (Button outline ARGB colour when the button is in the OFF state)
Alt Outline ARGB = On Outline ARGB
(Button outline ARGB colour when the button is in the OFF state)

DAM Text Enter.

The Text Enter module displays the Text on the button which is also clickable.
Again some of the options are taken to an IO Module so that the options can be set as required by the user.

Text = The text label that appears on the button.
Font Size = The size of the label on the button. Entered as a float value, but goes up in steps of 1 pixel in direct proportion to this value.
On Text ARGB = The ARGB value for the text colour when the button is in the ON state.
Background colours. These should be preset to an ARGB value of 00000000 (you can just set the first two digits as 00) to give a transparent background for the text.
Module Settings:
Writable:
Un check this box so that when the button is clicked the text box does not change to white, and the text cannot be changed.
Font Options: Apart from Font ARGB and Font Size, set these as required for the font type, alignment and styles.

Logic switching.

We need to use a bit of Logic for making the Text Label behave in the same way as the button. Nothing too complex though.
ED Toggle Switch. This is used to toggle the Text Label state between on and off rather than it’s default momentary state. It’s connected between the mouse down output on the Text Enter module and the output of the Float To Bool converter. The output of the Float To Bool converter is also connected to the Choice plug of ED Switch > String module. The Switch module selects the ED Fixed_String module with it’s value of FF555555 (a dark grey, or alternatively a value of your own choice) when the Button/Text are in the OFF state, and the option set by the user at the On Text ARGB plug when the Button/Text are in the ON state.

Important Setting.

When you have finished the structure, go to the Panel view, and align the text label over the button where you want it positioned, and make sure you right click the text label and select Arrange > Move To Front. The Z view positioning of the text must be in front of the button.

The button in it’s On and Off states.

Resizable slider control.

The stock Slider Control in Synthedit has one major disadvantage- It’s not resizable. This project uses third party modules, and can be re-sized by editing its panel view. Note: Resizing the actual slider knob does mean creating a new .png file for it. This control also has the option to “spring” back to a default value, which can be useful, you could use it as a pitch bend slider control for example.

The Joystick/Slider module.

The ED Joystick Image control is used for the slider control itself, there are few properties settings to note, see below:

Setting Constrain X Max to 0 stops any horizontal movement of the control by locking it to the 0 position. Leave the Constrain Y settings as Min=0 and Max=1 as we want the full range.
Ctrl Scaling factor sets how fine the control movement is when holding the Ctrl key down and moving the slider. Both the backgrounds are set as 00 for the Alpha (transparency) level so the rest of the ARGB setting can be left blank.
The Mouse Down plugs are connected so that the control will be returned to it’s default position when this option is selected.

The control background and scale grid.

The background for the control is supplied by another third party control, the DAM Rectangle, which allows us a resizable background, outline and grid with control over the colours of the background and grid, the settings are shown below.
Although I have left the background colour as preset, you could easily link the Top ARGB and Bottom ARGB to allow these as user settings.

The “Spring”.

This is the section that allows us to have a position that the control automatically returns to our user determined default position as soon as the left mouse button is released. Although we have two Spring modules connected only one needs a Reset and normalized value set ( the Y position) Note: Although it seems like only one Spring module is needed this will not work without both connected as shown.
The reset value is the position we want the control to return to, and it is the normal GUI float range of 0 to 1, so to return to the mid position a value of 0.5 must be set for the “Spring Position”. This is independent of any values given to the Min Max values for the control, and will always follow this 0 to 1 scale.

The label and value display.

Another third party module is in use here, the DAM Text Enter module as this gives us greater control over the text formatting than the stock SE text modules.
Float to text is used to for the value readout with an ED GUI Multiply (Float) so re can re-scale the readout ( for example you want to convert a range of 0 to 10 to a range of 0 to 100%- this only affects the display, not the Volts/Float outputs.

Output.

I have Included a GUI Float output, a DSP Float output, and a Volts output. The Float to Volts conversion is set to smooth (30mS).

Resizing the control.

All that need to be done is open the Panel View then drag the relevant controls to their required sizes, then lock and close the panel view.
The panel view and control settings are shown below.

SVG “Analogue” Knob

Customising the look of the Analogue Knob.

@Label: (Text) The text label that appears below the control. (The colour is set by the “Print” ARGB)
@ Value: (Text) This is the value or alternative text that replaces @Label when the mouse hovers over the control. (The colour is set by the “Neon” ARGB)
@Color: (Text) Controls the colour of the “skirt” and main body of the knob.
Cap: (Text) Controls the colour of the cap insert in the centre of the knob.
Neon: (Text) Sets the hover colour for the @Value text.
Pointer: (Text) Sets the colour of the dot on the body of the knob.
Print: (Text) Sets the colour of the scale markings and the @Label text.

Changing the appearance of the knob.

Changing the behaviour of the knob.

Shown below are some useful properties settings for the knob:
Offset angle: This offsets the starting position of the knob, by changing this to 90 we add 90 degrees to the starting position of the knob.
Sweep Angle: By changing this to 180 we can limit the range down from the usual 300 degree control knob sweep, to a180 degrees sweep, or any other range that might be required. Note: This will not change the scale markings!
Scale: Adjusts the size of the control knob.
Opacity Normal: By setting this to 0 we obtain the behaviour where the @Label text is swapped for the @Value text as the mouse hovers over the control. If the value is left as 1 then only the @Label text will be seen..
Setting the Min/Max Range: This is the same as any other SynthEdit knob or Slider, and is set in the Patch Memory in the Prefab properties panel.

Changing the behaviour of the knob

Changing from a continuously variable control to stepped.
It’s a simple as changing the Patch memory From Float3 to List 3, and connecting up a module with a list plug, then connecting Choice and Item List plugs. Add a List to Text module to feed the choice to @value and it’s done. The Patch Memory sets it all up for you.

Using the knob as a stepped switch control for Lists.

Sasha’s SVG Controls.

I have left this in for those that have these controls, but sadly Sasha deleted his website and appears to have left the SE community, so they are no longer available. Whether he will return to the SE community no one knows, we have been unable to contact him.

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.

Creating a customizable button.

This project uses one of the Vector controls created by Davidson. It can be resized and the colours can be changed. There are GUI latching and momentary outputs along with DSP latching and momentary outputs.
There are plugs for customizing the text that appears above the button, which also changes when the button is clicked.
The structure of the prefab is shown in the diagram below, and the prefab file can be downloaded from here

You will need various third party modules installed for this to work however.
The RH-Switch-Text: is needed to switch between the On and Off text labels, and switch their colours.
The ED DSP Timer: is required as a bistable for the switch latching. Set to Bistable in the properties panel, no values are needed for T1 and T2 (they will be ignored anyway).
QTN Bool2GUIBool: is needed to connect the various GUI switching modules and the ED DSP Timer.
ED Text Entry: is not essential, you could us the stock one, but you’ll lose the text and background colour customization!
DAM V Circle: 100% Essential, there is no stock equivalent.
Notes:
i) The prefab container must have its properties set to “visible”
ii) The DAM V Circle module should have the mouse response set to step, unless you would rather the buttons just flash as they are clicked.

Shown below is a panel view of two of the switches in operation.

The Push Buttons in panel view.

The new Vector Knobs

Important note about the vector knobs:

Note: These knobs are not suitable for use in SynthEdit 1.4, although some have tried (with varying success) to use them in 1.4 it is really not recommended as you may well introduce “buggy” behaviour.

Vector Knob C

These control knobs have the advantage of being resizable. They can be used just as the old style “Image” knobs
With a few conversion and Patch Memories we can add text labels and a value readout, with customizable text colour and background. The colours for the centre of the knob (Foreground) and the “skirt” of the knob (Background) can both be changed too. Once the values have been set, they will be retained by the Patch Memories

Using the Vector Pan knob – adding a centre return “spring”.

There’s only one catch to be aware of here, the operation of Spring3 is different from the old Spring module. You must use the right hand Mouse Down input plug for it to work, the left hand plug is just a “through” signal that outputs the Mouse Down signal that the module receives. All we need do is enter the Reset Value of 0.5 in the properties panel. There is the option to enable or disable the spring action by setting and unsetting the On/Off plug. I have added the ED Joystick image as a pan position indicator (which can also control the Pan knob too…)

Vector Bar as a list option selector.

This uses a List to animation module to scroll through a list of options. The options are automatically taken from the List plug of the module it’s connected to.

Notes about Sub Controls

Introduction:
Sub controls provide a more customized user interface than standard controls but require more expertise to use effectively. They provide a lower-level access to the various visual elements on your control panel.
There are some basic rules that need to be followed to use them with a minimum of problems.

Controls vs. Sub-Controls- Why have Sub Controls?

Before sub-controls, SynthEdit provided only pre-made controls, like the Slider Control. To understand sub-controls, it’s useful to understand how a control works.

For example the Slider:
A slider has several interacting components…
Lets have a look at the custom made slider below. The original SE slider control is included as a comparison (this control cannot be opened up-it’s one of the old ones, (so it can’t be modified without C++ coding).

Moving the slider updates the numeric text readout and vice-versa. So there’s a bi-directional connection between the two sub-components.
Your computer typically updates its graphics 60 times per second yet the output of the is at audio-rate signal (typically 44,100 or more samples per second). So it follows that there’s a rate-conversion happening inside this module.
You can’t open up the original slider to see what’s going on inside, but here’s one I put together to demonstrate what goes on:

The current position of the slider is stored in the patch-memory, and the slider will move automatically to reflect the current patch. We need to find a way of displaying the output value of the control. That’s done with the Float to Text, and the ED Text Entry modules.
The Output from the module can take various forms. Here I have included three types of data that I think I’ll find useful:
1) DSP Volts out, 2) DSP Floating Point out, and 3) GUI Floating Point out.
So you can already see how we can “personalize” and add functions to our controls in this way..

The focal point is the Patch Memory module. This handles the communication between the graphical (GUI) elements (with blue backgrounds) and the audio-processing (DSP) elements (with grey backgrounds).
The Patch Memory module also handles any MIDI Automation of the control and handles switching between any presets (patches).

With the traditional Slider the layout of the elements was fixed. There’s no way, say, to put the numeric readout at the top. But now I have this Sub Control slider I can move the elements around at will. However using the Sub Control I just created then I can modify and move elements around as I like.

Moving the elements of the Sub Control around

The purpose behind Sub-Controls.

The purpose of sub-controls is to split up the control into its constituent parts. As you saw with the slider Sub Control, this is a way of giving far you more flexibility over the appearance of your controls.

The first and focal point is the Patch Memory module. It handles the communication between the graphical elements (on the left with blue backgrounds) and the audio-processing elements (on the right with grey backgrounds). The patch mem module also handles any MIDI Automation of the control and handles switching between presets (patches).
The second type of module here is the graphics controls. The Bitmap Image and the Text entry boxes. These accept user input and display the control’s current value. Graphical elements use the Patch-Mem module as a ‘hub’. Input to any object is reflected back to the others, keeping them always in sync.
The third type of module here is datatype conversion. For example the Text-to-Float module. It’s purpose is to bridge the Patch-Mem module’s numeric (float) value with the Text-entry module (which otherwise would be used perhaps for entering a file-name).

You can see from the arrow heads in the picture below that the GUI Floating Point pins (blue background) are bi-directional. This ties in with the expected behavior.

Bi directional GUI data flow

Updating the numeric-entry box moves the knob and vice-versa. These signals are not sampled like audio signals but are event-driven. Event driven means that the control only sends data and uses the CPU when being moved, at all other times it does nothing. Compared to an audio (DSP) signal, the knob thus generates data at a much slower rate, and only when actually needed.

The signal leaves the Patch-Memory module via the Value Out plug as an audio connection, but it’s still sending data at the slower rate generated by the PC’s graphics system. This is why we include the next stage the Float To Volts module.
The Float-to-Volt smooths out, and up-samples our Floating Point data to a true audio-rate signal suitable for controlling SynthEdit’s various audio modules.
In SynthEdit these audio rate signals are called Voltages because SynthEdit is simulating an old-school Voltage controlled Synthesizer.
The Float-to-Volts module gives you control over how smooth the conversion should be. Less smoothing uses less CPU, but the resulting audio changes (especially with filters) may sound ‘stepped’ or ‘zippered’.
There is another reason this module must be included- without it the data rates will be miss-matched and updates in control position lost resulting in jerky or glitchy changes to the audio modules.

The general structure of a Sub-Control patch is:
[Graphical Control]<—>[datatype Converter]<—>[Patch Mem]—>[Audio modules]

Customizing.
You can see that the numeric input is optional, just delete it if you don’t need it. Same with the rotating knob image. Also you can now place the elements however you like.

Some of the settings available and what they do:
Hint:- Provides for ‘Tooltips’, the popup yellow boxes that appear when you mouse-over the control.
Menu Items and Menu Selection:- Provides a context menu (right-click menu). Type the menu items as a comma-separated list. e.g. “Set to Center=1, Randomize”. These will appear on the context menu, along with SynthEdit’s menu entries.
The ‘Menu Selection’ pin outputs the user’s selection as an integer. e.g. if the user clicks ‘Set to Center’ the pin goes to 1. After any selection the pin returns quickly to zero. Always number your item list from 1 otherwise the first item will always output 0 (which is no different from ‘no-selection’).
Editable:- You can use this with Text Entry boxes to stop uses from changing a label by accident, or to prevent values being entered into a control’s value box.
Greyed:- You can use this with a Text Entry box to indicate that control is not currently relevant.

Efficiency.
GUI Modules:
As you know modules with blue backgrounds are ‘GUI Modules’ (Graphical User Interface Modules). These are designed to process user-input (mouse clicks and text entry etc.). These are not intended to process audio signals. On multicore systems they will usually run on a core separate from the audio processing, this allows the audio modules to take priority when the CPU is under load.
Hybrid GUI/DSP modules:
Modules with both blue and grey pins (like the Patch Memory Modules) are hybrid modules. Internally they consist of two parts running simultaneously in separate processes. Communication between the two parts is complex and is thus more CPU intensive than between other modules.

Don’t use audio modules to process GUI signals

In general aim to keep your use of hybrid modules to the absolute minimum.
For example:
Suppose you want to increase a knob’s display to range between 0 and 100, your might think to use the standard Multiplier module. Being an Audio module, this requires an extra conversion via a patch-mem or similar. A much more efficient method is to use a ‘pure‘ GUI solution like the Float-Scaler module.
This will: 1) keep your circuit simpler and 2) your CPU usage far lower.

Use caution with GUI connections into Containers

Sub Controls are only active when the control panel window is open. When you close the control panel, the sub-controls immediately become inactive.
Not only this but GUI plugs communicate only with modules visible in the same window, so if you are passing controls though another container, you must set that containers properties so with the “Controls on Parent” are visible, otherwise the GUI signals will not pass through the container.
This behavior is in support of the new VST3 standards.

Example:- A Knob image is inside a Container, which is connected to a Patch Memory outside the control’s container. Unless the Container is set so that the Panel View is visible the knob cannot not respond to mouse movements and appears ‘frozen’, the Volt Meter and Vector Bar won’t respond to any control movements.

Sending GUI data through a container equals problems
These container settings block the data

However as soon as we change the relevant settings on the Container – Patch Mem the controls spring into life: (see below)

Changing the container settings lets the data through.
The settings that do work.


Note: The structure view will always have this issue, but if the knob’s container has ‘Controls on Parent’ set it will work fine on the Panel view.
The reason is:- With ‘Control on Parent’ set, the knob is displayed on it’s parent container’s window, which the same container the PatchMem is in.
This is confusing- So if possible, always keep your GUI connections within the same container. If you do need GUI connections into a container, you can often get the structure view working too…
For this the container’s ‘Show on Module’ needs to be set. This makes the knob visible in the same window as the Patch Mem which means the data connection works, but there’s still a catch. The right-hand window’s knob still won’t work properly. As it’s effectively a sub-container. There’s no way you can get the Patch Memory module visible in that window.

Summary: Sub controls in a container will work fine on the Panel view provided the container has ‘Show on Parent’ set.
They control may not always respond in the structure view but you can often
(but not always) fix the problem with the ‘Show on Module’ setting.

GUI modules need to be seen

Sub Controls function only while their Container’s Panel is open. i.e. if you close you synth’s panel, those sub controls become inactive.
Therefore never rely on GUI modules to process audio signals. The exception is hybrid modules (Patch Memory) which will continue to provide patch-selection and automation functions via their audio pins.

Avoid splitters
Due to a design mistake, SynthEdit 1.0 had the Container’s ‘Control on Parent’ pin on the wrong side. This made it impossible to connect it to a Patch Mem module (needed for save/recall of paged panel settings).
The ‘Bool Splitter’ was introduced to fix this problem, but the bool splitter causes problems of it’s own. The bool splitter ‘reflects’ any one input signal back out it’s other inputs, this is a bad design because it is not clear which module is in control of the others. The result is modules ‘fighting’ each other for control. Symptoms include ‘flakey’ inconsistent behavior and patches not saved/recalled correctly.
3rd party module developers have sometimes copied SynthEdit’s example and released modules that rely on the use of splitters. This is not their fault, however if at all possible avoid using splitters.

Prefabs worth studying.
SynthEdit’s Insert/Controls menu has several good examples. The Joystick module shows how to make any type of horizontal slider, vertical slider, or two-axis Joystick. Hint: For Sliders – use the resize handles to restrict the area of movement to a narrow strip.

Visual Indicators.
The LED2 prefab is a template for any type of indicator or meter. Notable is it’s clever use of a transparent overlay image to dim the light, and the use of the Tinted Image module to provide for any color light.

Skins Part 2

The global.txt file

If you were a new user looking at the default skin for the first time, wondering how to make your own slick professional skin, the first thing you should look at is:
C:\Users\Public\Documents\SynthEdit Projects\skins\default\global.txt
This is where fonts, their sizes, colours, backgrounds, etc. are all defined.
Global.txt is the minimum requirement to have a new skin, here are the contents of the global.txt file as defined for the default skin.

Note: If you are familiar with CSS as used in web page design this will look familiar, it’s basically a cut down version of CSS.

Important Note: Never delete or modify the default skin or its global.txt file. Synthedit looks for these file when loading.
As with every other item in the default skin – that SynthEdit looks for when loading – if there is no definition in the global.txt file, it will refer back to the original default folder. That is why you don’t edit the default, among other reasons (you will get a strange display in structure view unless you really know what you’re doing).

Commenting:
A line prefixed by a semicolon is a comment, anything you put in a comment is not read by SE.
Commenting is useful as you may not remember why you changed a setting in a skin, and what the results of the change are. Comments are a designers best friend. Note: You can also use ‘//’ for commenting.

If you see the 3rd party skins made by experts, they only have a few items in them, you only need to include the objects you want to replace or change.
For example: you could, for example, make a skin called “Alternative Fonts1” and it would just contain global.txt – and your new global.txt need only contain a few references, not all, if you only wanted to change fonts for a few but not all text displays.

Fonts:
Beware of using unusual fonts. You’ll experience a bit of a disappointment seeing one of you projects on someone else’s computer with the wrong font, your fonts have to exist on the host system to display correctly, stick to the window (or MAC) system core fonts and you can’t go wrong.

Small Button and LED:– There is the difference between small button and switch or led. The small button is ‘click’ action -momentary- switch is ‘stepped’ -2step ‘latch’ , and the LED isn’t defined, and therefore is ‘passive’, a slave graphic.

Knob med.png and Knob small.png:- These are ‘type animated‘ with mouse response rotary.
In contrast to the fader used with the standard fader, which is a bitmap with a Mask, why the different method? I could replace the bitmap and mask with a PNG with transparency, as long as I observed positioning and size (making it much easier to make new faders)

Are you really supposed to start using the subcontrols knobs straight off? You don’t of course, you use the stock knob and fader when you’re knocking up an idea – so ideally, it would be nice to re-do those in your new skin, even if you were to use subcontrols.
In fact the quest would ideally be to produce a complete replacement generic skin where you can change the colours easily (for example).
That is quite a bit of work if you want to know what is going on with each different object type. The ‘workmanlike’ approach of just bashing out new graphics, rigorously adhering to default sizes, and maintaining consistency in style, may be the quickest and most effective way to achieve this, ultimately.

Note that there is a full set of parameters for each text category, but that it is not always used in full; so you could add extra parameters like background colour to them.

Colours: For some reason the method of specifying colours is non-standard. Instead of RR GG BB (the usual Red-Green-Blue format) in SynthEdit it’s reversed to BB GG RR!

Default skin global.txt (annotated)

;other skin settings
; EVERYTHING WITH SEMICOLONS IS IGNORED
; Fonts
; www.w3.org/TR/REC-CSS1#font-variant
; font-color – BBGGRR Blue-Green-Red mix, hexadecimal numbers
; background-color SAME (-1 = transparent)
; font-size – Height in pixels
; font-family – Searches available fonts, left to right. Specific font name, or generic…
; ‘serif’ (e.g. Times)
; ‘sans-serif’ (e.g. Helvetica)
; ‘cursive’ (e.g. Zapf-Chancery)
; ‘fantasy’ (e.g. Western)
; ‘monospace’ (e.g. Courier). Doesn’t seem to go smaller than 12 (Mind you too much smaller and it will be difficult to read, need to consider usability)
; Arial, Times New Roman, and Courier New are core fonts to Windows
;
; text-decoration underline (overline, line-through, blink not supported)
; font-style normal |italic (oblique not supported)

; font-weight : normal | bold | light | 100 | 200 | 300 | 400
; | 500 | 600 | 700 | 800 | 900
; following not supported at present: bolder | lighter
; text-align center | left | right
;UP TO THIS POINT, EVERYTHING IS INSTRUCTIONS FOR HOW TO DEFINE FONTS AND DISPLAY THEM
;
;TEXT DISPLAY CATEGORIES FOLLOW:
; >(text on modules title bar, structure view)
FONT_CATEGORY module_title
font-family Arial, “sans-Serif”
font-size 12
font-color #FFFFFF

FONT_CATEGORY panel_group (panel lines title font)
;font-family “System”, “sans-Serif” <THIS IS IGNORED but why 2 options below?
font-family “MS Sans Serif”, “sans-Serif”
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_label (never sure about this one.. ?default control text?)
;font-family System, “monoSpace”
;font-size 12
font-family “MS Sans Serif”, “sans-Serif”
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_edit (get confused by this one too..)
;font-family System, Arial, “sans-serif”
;font-size 12
font-family “MS Sans Serif”, “sans-Serif”
font-size 14
font-weight bold
;font-color #000000 – don’t apply to edit boxes

this one is obvious
; this category is for LED Stack item labels and rotary switch labels
FONT_CATEGORY switch_label
font-family Verdana, “monoSpace”
font-size 10
font-color #F5F5F5

FONT_CATEGORY selector_text >this too.
;font-family System, “monoSpace”
;font-size 10
font-family “MS Sans Serif”, “sans-Serif”
font-size 14
font-weight bold
font-color #ff0000

; the writing on container and VST plugin displays
FONT_CATEGORY tty
font-family terminal, monoSpace
font-size 10
font-color #00f000
background-color #000000

; plugs the pins in structure view?
FONT_CATEGORY plug
font-family Arial, “MS Sans Serif”, Verdana
font-size 10
font-color #000000

FONT_CATEGORY “Normal”
font-family “MS Sans Serif”
font-size 12
font-color #000000
background-color #ffffff
text-align center

FONT_CATEGORY “Heading 1”
font-family Arial, Verdana
font-size 28
font-color #fff7f7
text-align center
text-decoration underline
;font-style italic
font-weight 900

FONT_CATEGORY “Heading 2”
text-align center
font-family Arial
font-size 18

FONT_CATEGORY “Heading 3”
text-align center
font-family Arial
font-size 14

FONT_CATEGORY “User 1”
font-family Arial Unicode MS
font-size 14
font-color #464646
background-color #ffffff
text-align left

FONT_CATEGORY “User 2”
font-family Courier

FONT_CATEGORY “User 3”
font-family Fixedsys

More about Skins…
Skins Part 1
Skins Part 3

Skins Part 3

Text Files in the Default skin.

Each of these files relates to a graphic control element, and controls how it is displayed along with how it behaves.

arrow_left.txt and arrow right.txt
type animated
frame_size 22, 22
mouse_response click

Up down selector
Up/Down Selector (aka arrow left/arrow right)

bargraph1.txt
type bargraph
frame_size 28, 60
segment 1, 6
segment_count 9

Peak Meter
Bargraph (AKA Peak Meter).

bender.txt
type animated
frame_size 35, 76
padding 2, 3, 24, 2
mouse_response vertical

Pitch Bender
Pitch bender control (aka bender).

browse.txt
type animated
mouse_response click
frame_size 21,21

Browse for file
Browse for file icon

button.txt
type animated
frame_size 18, 30
mouse_response click

Button
Button

button_sm.txt
type animated
frame_size 20, 20
mouse_response click

Small Button
Small Button

buttonoff.txt
; medium button with light in the off condition
type animated
mouse_response click
frame_size 18,30

Button
Button

drop_down.txt
type animated
frame_size 22, 22
mouse_response click

Drop down symbol

file_button.txt
; ‘FILE’ button on VST controls panel
type animated
mouse_response click
frame_size 40,17

File button (seen on VST panel only)

hslider.txt
type slider
frame_size 51, 25
handle_rect 53, 1, 68, 25
handle_range 8, 33
orientation horizontal

Horizontal Slider
Horizontal Slider

joystick.txt
type animated
frame_size 25, 25
; extra space at: top, bottom, left, right
padding 7, 1, 7, 1

Joystick
Joystick Control

knob_med.txt
type animated
frame_size 32, 32
mouse_response rotary

Knob Medium
Knob

knob_sm.txt
type animated
frame_size 16, 16
mouse_response rotary

Knob small
Knob Small


led.txt
type animated
frame_size 18, 18

LED2
LED2 Indicator.

lines.txt
type lines
frame_size 27, 27 // Size of corners
; line_end_length 5 // length of line end-cap. Defaults to 5.

Panel Group (Lines)
Lines (aka Panel Group)

moog_knob.txt – this is the scale for the knob.
type animated
frame_size 48, 45
padding 13, 7, 13, 4
mouse_response rotary

moog_kob_sm.txt– is just a smaller version of the knob scale shown above.
type animated
frame_size 30, 29
padding 8, 4, 8, 3
mouse_response rotary

shiny_cap.txt – shiny_cap is the insert in the centre of the knob control.
type animated
frame_size 28, 28
padding 18, 19, 18, 19
mouse_response rotary

shiny_cap_sm.txt – shiny_cap_sm is the insert in the centre of the small knob
type animated
frame_size 18, 18
padding 11, 12, 11, 12
mouse_response rotary

switch.txt
; medium vertical slider
type animated
orientation vert
frame_size 25, 26
; padding adds extra space at: top, bottom, left, right
padding 5, 2, 5, 3
mouse_response stepped

Switch
Switch

switch_rotary.txt
type animated
frame_size 40, 40
mouse_response rotary

Rotary Switch
Rotary Switch

v_slider_med.txt
type slider
frame_size 28, 40
handle_rect 4, 41, 28, 55
handle_range 1, 26
orientation vertical

Slider control
Vertical Slider

vu_meter.txt
type animated
frame_size 67, 38

VU Meter
VU Meter


Synthedit Skins Part 1
Skins Part 2

« Older posts