GUI system can become very robust if you want to include all kinds of controls like: buttons, sliders, counters, knobs, etc. Specially if you want to control different types of data like: Values, Colors, Strings... I have tried that and very soon I have found myself in a serious mess. I had a lot of subpatches connecting to all other and number of feedback connections forming crazy loops that soon enough rendered my patch unreadable. There was only one way out: Ctrl-A and Delete.

To start clean I deviced several rules for working GUI:

One central module should be used to manipulate all control values regardless of control type.
Modules that will provide values to the central module and use output results should interconnect in chains. Output from one module will be used as input for the other i.e. they will connect like DMX or MIDI devices avoiding messy patching.
There must be input/output modules that can handle spreads and central module should be able to work with any number of such modules without serious user attention.
Modules that display controls in DX window will not care about actual data. They will change apperance according to input control values and will provide quad transformations in projection space for mouse over (hover) detection.
The system of input and output data streams should be simple enough so users can create their own modules.
GUI should be able to display on separate window as well as like pull-out or pop-up on any DX window.

Basic concept

I have patched some modules for preview of the system. I tried to follow the rules but some modules are not so strict yet. Since this is an open project, you are welcomed to contribute on vvvvorum.

To start, download this patch (open TRY_GUI_modular.v4p):
http://www.vvvv.org/tiki-download_file.php?fileId=1201TRY_GUI_modular.zip (103.93 Kb)</a>

Several things to note about this patch:

Gauge and HoverControl modules are handling all control values, so they are not designed to interconnect with other modules yet.
Although I tried to make controls to react on right click & drag - like we used to in vvvv, they are controled with left click instead. This is due to a bug described here.
textures are png. You can edit them in fireworks or any other editor.

Updates:

Pointer module (bug fixed) ...http://www.vvvv.org/tiki-download_file.php?fileId=1202Pointer.zip (27.18 Kb)</a>

Concept

(Some definitions to follow while patching all modules.)

The core of the system is GUI CS module with its inputs and outputs. The structure of the input and output spreads should be defined in a certain way all other modules could follow.

GUI CS module receives control values and controller data, and dynamicaly maps controllers to GUI controls.
GUI CS module outputs resulting values, data for modules that display controls on the screen and feedback data for input modules.

Internaly, GUI CS takes care of controls' properties and slice counts.

GUI CS Module

Data Inputs

Control values & data

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Input Data

::n*3::

Value

::float::

control value
Count

::integer::

spread count
Update

::bool::

forcing update of control value
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

n is total number of controls. Each control would take 3 slices in Input Data spread: value of current slice, total spread count and update flag. Update flag would bang '1' each time control value should be updated - for example when slice index changes.

According to order in the spread, each control will have its unique index - refered to as Control CH (Control channel) later in this text.

Controller (CTRL) data

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

CTRL In

::c::

Value

::float::

output of controller modules
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

c is total number of controller channels.

For example:

MouseCTRL module could map mouse_x, mouse_y, mousewheel, leftbutton and mouse_y offset to five different channels.

Controller channel will be refered to as CTRL CH later in this text.

CTRL/Control Map

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Map

::var*3::

CTRL CH

::integer::

Control CH

::integer::

Data

::enum::

(Value, Slice)

Focus

::n::

::bool::

~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

The map describes which control is listening to which CTRL CH and also sets if either control value or slice index shoud be controlled.

The map changes dinamicaly and it has variable (var) number of entries.

For example:

If we want to do something like in the basic concept patch, HoverCTRL module would listen certain CTRL CHs for mouse position and append one mapping for mousewheel (Slice) and one for mouse_y offset (Value) when leftbutton is pressed, both binding CTRL CHs to the same Control CH of control in focus.

Controlling several controls at once can also be achieved through mapping (to change slice index for grouped controls like vectors or colors), but this should also be possible using other modules on the output side as well.

Focus spread is normaly recieved from Hover controllers and copied to Control Data spreads. GUI CS module doesn't care about focus.

CTRL/Control Map can also hold default mappings, if for example we want to set one CTRL CH to change slice indices for all controls. This would be done by setting the Control CH to -1. Separate Mapping module should be used for more complex GUI setups.

Note about addressing Control and CTRL Channels

All channel addresses start with 1 and not with 0. This is both because of internal structure of GUI CS module and because of ease of handling.
Because the default state of value type nodes is always zero, maps and internal spreads that are not affected or initialized will always show zeros. If we wouldn't ignore zero channels the first Control and CTRL channels would allways interact.

Data Outputs

Output Value

Output Value is just a spread of float values with n slices - one for each control.

Control Data

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Control Out

::n*3::

Control Value

::float::

Output Value * Ratio
Focus

::bool::

is in focus?
Bound

::bool::

is value controlled?

CH Data

::n*2::

Count

::Integer::

Slice

::Integer::

~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

Control Data streams are used as inputs for display and other output modules. Ratio is control property.

I/O Control Output

I/O Control Data

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

I/O Control

::n*2::

Output Value

::float::

Slice

::integer::

~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

I/O Control Data spread is used to control input modules (like SpreadControl module)

GUI CS Control Properties

There are several properties that should be set for each control.

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Type

::n::

::enum::

(Copy, Slide, Push-Pull, Toggle, Bang)
Bounds

::n*2::

Min

::float::

Max

::float::

Behaviour

::n::

::enum::

(Float, Wrap, Mirror, Clamp)
Ratio

::n::

::float::

Ratio between Output Value and Control Value
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

For more complex GUI systems we could use separate module that would allow us to set default properties for groups of controls and tune or override some properties for certain controls.

Input Modules

SpreadControl

SpreadControl module grants control to GUI CS module over choosen slice from input spread and stores all changes in output spread.

Inputs

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Input

::var::

::float::

Input spread

Input Data

::n*3::

n: number of Control channels
Value

::float::

control value
Count

::integer::

spread count
Update

::bool::

forcing update of control value

I/O Control

::n*2::

(from GUI CS module)
Output Value

::float::

Slice

::integer::

Reset

::1::

::bool::

resets output to input values

Control CH

::1::

::integer::

existing Control channel to use
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

Outputs

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

Input Data

::n*3::

Value

::float::

control value
Count

::integer::

spread count
Update

::bool::

forcing update of control value

I/O Control

::n*2::

copy of input pin
Output Value

::float::

Slice

::integer::

Reset

::1::

::bool::

copy of input pin

Slice

::1::

::integer::

current slice

Output

::var::

::float::

Output spread
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

Input Data pin connects to the next input module or to GUI CS module. Data of choosen Control CH are changed.

ColorControl

...under construction ...

...

Controller Modules

Controller modules send controller output values to CTRL stream.

Inputs

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

CTRL In

::var::

::float::

CTRL spread

Ratio

::var::

::float::

CTRL CH

::var::

::integer::

one or more channels to use
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

...and other controller specific input pins like MIDI channel, mouse_x, etc.

Outputs

~~#ddd:.............................~~	~~#ddd:...............~~	~~#ddd:...............~~		~~#ddd:..........................................................................~~
Pin (Data)	::Count::	::Type::		description

CTRL Out

::var::

::float::

CTRL spread
~~#ddd:.............................~~

~~#ddd:...............~~

~~#ddd:..........................................................................~~

If user selects non existing CTRL channel, controller module should add new slices to CTRL spread.
CTRL channel 0 will be ignored by GUI CS module!

Feel free to use this template for new controller modules:http://www.vvvv.org/tiki-download_file.php?fileId=1228TemplateCTRL.v4p (6.28 Kb)</a>

Mouse

http://www.vvvv.org/tiki-download_file.php?fileId=1229MouseGlobalCTRL.v4p (9.44 Kb)</a>
http://www.vvvv.org/tiki-download_file.php?fileId=1230MouseWindowCTRL.v4p (8.94 Kb)</a>

GUI modular o_0!

Introduction

The idea

Basic concept

Concept

GUI CS Module

Data Inputs

Note about addressing Control and CTRL Channels

Data Outputs

I/O Control Output

GUI CS Control Properties

Input Modules

SpreadControl

ColorControl

...

Controller Modules

Mouse

MIDI & DMX

Multitouch

...

---UNDER CONSTRUCTION----

CTRL Data Modules

Click

Mixer

...

Mapping Modules

Default Mapping

HoverControl

Multitouch Mapping

...

Output Modules

DX9 Controls

MIDI & DMX

...

Demo patches

Shoutbox