Basics: GUI Handling – Visual

On this page we will have a deeper look into GUI customisation. It will be a bit complicate maybe, but I want to show you some details, before you have to ask why is this and that…

Module Window And Panel Window
In SynthEdit you have two kinds of viewing your project. The module window is showing you the layout(electronic schematic) of your synthesizer or effect. The panel window is showing you the face of your synthesizer or effect with knobs and sliders, for example.
basics_gui_handling_moduleandpanelview

SynthEdit’s VST Demo Panel Face
Keep in mind: Working with the demo version of SynthEdit, the background skin of your own created VSTs is disabled and the word ‘DEMO’ appears in pink over your synthesizer’s or effect’s control panel. Apart from this, your VSTs are full functional.
basics_gui_handling_vstdemoview

Change Skin (VST background)
To change the background skin of your synthesizer or effect, just right-click in the panel view window, select skin -> prophetblack. Don’t forget, you will not see it in VSTs you do with SynthEdit’s Demo version.

basics_general_handling_2_controls_changeskin

Arrange Controls In Panel Window
Let’s insert 2 knobs, 2 sliders and 3 LEDs in the module window. When done, right-click in the module window and select Panel Edit. You will see, the control elements in the panel window are placed by SynthEdit without any concept. You could just click and hold down left mouse button on the control elements in the panel edit window to move the controls arround to arrange them.
basics_gui_handling_controls_arrangement_a

Let’s arrange the controls in panel window similar to the module positions in the module window.
basics_gui_handling_arrangedcontrols

Arrange A Group Of Controls(Container) In Panel Window
Please put the 3 LED modules in a container now. You will notice, that the 3 LED modules are not visible again in the panel window.
basics_gui_handling_ledincontainer

INFO: I rename the 3 LEDs now from LED2 to first LED, second LED and third LED in the container, to show you something…

Let’s fix that now. Right-click the Container module and select Properties.
basics_gui_handling_containerpropertiesselect

Change the Controls on Parent from false to true. The Container’s LEDs show up in panel window again.
basics_gui_handling_propertiestrue

Two Types Of Selecting A Group Of Modules(Container)
You could select the whole group of LEDs or a single LED. I wanna show you that, because you will notice one or two Sub-View entries in the menu. This could be a bit confusing.

Selecting Whole Group
Please left click on the LEDs. A right-click on the border(marked green) will show you one Sub-View entry to select the panel view for the group of LEDs.
basics_gui_handling_select_ledrectangle

basics_gui_handling_subview_oneentry

Selecting Panel will open this panel window with the 3 LED group.
basics_gui_handling_3ledpanel

Selecting A Single Control Out Of A Group
A right-click on the green marked single LEDs, will show you two Sub-View entries.
basics_gui_handling_select_ledsingle

basics_gui_handling_subview_twoentries

SynthEdit give you two choices now….

1) open a separate panel window for the whole group of LEDs(first Sub-View entry)
basics_gui_handling_subview_1stentry

or…
2) open a separate panel window for each single LED (second Sub-View entry)
basics_gui_handling_subview_secondentry

Now you know why, I renamed the 3 LEDs before. To show you it’s different panel windows. ;)

Selecting Panel (pointing on the LED with the mouse pointer before you right-click!) will open separate panel windows for each LED. It is totally useless to do this, because you can’t do anything in this separate panel edit windows, but you could select Structure or Automation of each LED this way. Just keep that in mind.
basics_gui_handling_3ledwindows

I wanna show you one more thing…

Arrange Group Controls In Panel Window Via Container Panel Window
You could only move the whole container’s group of controls in the panel window(Main), remember? To change single positions of single controls, you must arrange the controls in the Container’s panel window first and move the rearranged group of Container’s controls in the panel window(Main) as a second act. Let’s do it now…

Select the 3 LEDs Group in module window.
basics_gui_handling_arrangecontrols_detailed_a

You will notice, moving the LEDs to the top left corner in the Container’s panel edit window, two LEDs are out of panel window(Main). You can’t see them anymore.
basics_gui_handling_arrangecontrols_detailed_b

To prevent this, you have to place the whole group in panel window(Main) to a position, to have enough space to place (and see) the single controls. Additionally you have to correct the single controls positions.
basics_gui_handling_arrangecontrols_detailed_c

Then you move the selected group in Containers panel window to the top left. It could happen, that you have to correct the position of group in the panel window(Main).
basics_gui_handling_arrangecontrols_detailed_d

Last step is to adjust the position of the LED group in the panel window(Main).
basics_gui_handling_arrangecontrols_detailed_e

In bigger projects with more Containers, it is useful to use the same system for any Container, to place groups in Container panel windows always to the top left of window.

You have read: SynthEdit Tutorials / Basics: GUI Handling – Visual