» The User Interface in Detail
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

The User Interface in Detail

Mandarin | Spanish | French | Russian | Italian

This page reflects the most recent changes to the interface in vvvv 45beta24. If you use an older version than that, please refer to the old version] of this page.

Using the mouse

The usage of the mouse has some intentional quirks, which help distinguishing between first time users and expert users. Most important it is recommended to use a Three-button mouse as vvvv makes use of all of them.

During patching be sure to always remember that if you want to change any values of a pin you will do it with the right button. Changing the position of a node or a window is done intuitively using the left button.

The usage of all mouse buttons allows us to always stay in run mode instead of having to switch between run-mode and patch-mode all the time, as some of you might be used to from pd or max.

Note that there is a locked mode that can be reached via Ctrl+E, in case you want to make sure that your patches are not accidentally altered.

See this video tutorial] on using your mouse to navigate in vvvv, and pick up some other patching tricks with this video tutorial].

Creating a new patch window

Click the middle button and select “New Patch” (or press Ctrl+P). Note that the window will pop up with the top left part of the window under your mouse cursor. This is where you only have to mouse-down and drag the window to its desired position.


Creating nodes

Double click in a patch with the left button to bring up the NodeBrowser. Here you can see an alphabetically sorted list of all the available nodes. By typing into the text field at the top you can filter the list. Right click inside the text field to bring up a categorized tree view of the node list.
Hover over a node to read a short description.

Left click to create the selected node or right click to cancel the operation and close the menu.

More information on the new NodeBrowser can be found on the NodeList page

You can also double click an already existing and connected node or subpatch or module and choose another one. All in- and outlets with the exact same name (regard Capitals) will keep their connections.
If you double click a node representing a subpatch or a module and type a . (dot) a list shows up which only contains the patches of the same folder location.


Creating a comment

Double click with the left button to bring up the NodeBrowser. As soon as you enter something in its text field that is no known node name or tag, you have created a comment. A good strategy for comments is starting with some special sign that vvvv doesn't recognize (you could use "//" as known from textual programming) and then typing your comment. Press enter when you're finished.


Connecting nodes

Do a left click on one of the pins you want to connect . You will see a line following the mouse cursor. All pins you can now connect to will grow to larger gray squares (Note: Hidden pins will not show up but can be connected as well). Do a left-click on your target pin. Your connection is made.

Long term Max users tend to hold the mouse button while drawing the line. This is simply not necessary.

You are only allowed to do valid connections. Inputs accept only one connection. If you drag another connection to an already connected pin, the first connection gets dropped. Note that you can also start at the input and draw to the output.

To cancel a line while drawing it, do a right click. To draw multiple lines from the same source, start with a right click, and then do left clicks to mark all targets.

When drawing a line you can middle click somewhere to create an IOBox that will match as well as contain the data that's in the pin you're coming from. This feature is immensely useful for the use with input pins, because you can "lift up" data from an input pin - e.g. if you need to transfer data otherwise trapped inside an input pin to another node.

If you want to learn more about the different kinds of pins, see Pins and Data Types.

Note that creating a loop is not a valid connection. If you want to do so insert a FrameDelay (Animation) node See Creating Feedback Loops

Deleting nodes or connections

Select and press delete or backspace. Selected connections can also be deleted with a right click. Any node can be reset/reloaded by ALT-right-clicking it.


Drawing segmented connections

While drawing the line, just do occasional left clicks. For each click, an anchor point is inserted. If you want to edit the shape of a connection, select it, and drag the black squares. To remove anchor points, align them in a straight line.

There are four different styles of connections: Straight, Bezier, Vertical-Horizontal-Vertical, and segmented lines. Press CTRL+Y to cycle through the first 3 styles with a connection selected, or use the “Alter Link-Type” command from the main menu.


Scrolling in the patch

You can move the patch around in the window by right clicking on an empty space in the patch and start dragging.
Vertical scrolling while dragging a line is possible by using the mouse wheel;
Horizontal version works by using the mouse wheel and pressing the ALT-key.
Speed up both horizontal and vertical scrolling with pressed CTRL-key

Moving a selection of nodes

move a selection nodes by pressing the cursor keys by 1 px.
move a selection nodes by pressing SHIFT and the cursor keys by 10 px.

Moving a patch window

You can move a patch window by ALT+leftclick and dragging. (This is actually used for something else - "docking" - as explained below but can also be used to move a patch window)

Changing Values in the Patch

Move the mouse over any pin and you will see a tool tip showing its current value. Values of input pins can be changed directly within the patch. You can reset any pin value by ALT right-clicking it. This will also reset the slice count back to the default. Alt-right-clicking on a node resets all of its pin values.


Value pins

Right click on the pin and drag the mouse vertically to change the value.
Additional pressed

SHIFT will divide the step size by a factor of 10.
CTRL will divide the step size by a factor of 10.
SHIFT+CTRL will divide the step size by a factor of 100.
ALT+SHIFT will multiply the step size by a factor of 10.
ALT+CTRL will multiply the step size by a factor of 10.
ALT+CTRL+SHIFT will multiply the step size by a factor of 100.

Color pins

Right-click to open a color field. Now click and drag vertically to change brightness and horizontally to change the hue. If you press CTRL while dragging you can change saturation. If you press SHIFT you can change the alpha value.


String pins

Right click the pin to invoke the operation according to the pins subtype.

  • If the string is of subtype short an ordinary edit box appears where you can enter a string.
  • If the string is of subtype long a separate window will open that allows you to enter text of multiple lines.
  • If the string is of subtype filename a file-select dialog will pop up.
  • If the string is of subtype directory a directory-select dialog will pop up.

Note that no matter what subtype the string is if you press CTRL while right clicking the file-select dialog will appear. Pressing SHIFT will invoke the directory-select dialog.


Enumerated pins

Right click to invoke the pull-down menu with all possible values.

IOBoxes

Sometimes it’s helpful to provide a user interface element in the patch. Therefore you can create IOBoxes to edit or display values in the patch. Create IOBoxes in a similar way as other nodes, but take care to select the right type: IOBox (Value) Advanced |Value?, IOBox (String) |String?, IOBox (Color) |Color?, IOBox (Enumerations) |Enumeration? or IOBox (Node) |Node? for advanced datatypes (like Transform or Texture)

You probably need IOBoxes for values quite often, so a double click with the right button will create one. IOBoxes are highly configurable. See their according help patches for more details.

Main Menu

The main menu pops up after a click with the middle button on most of the vvvv windows. If you have no middle button use SPACE + right click instead. If you have a middle button, but it doesn't invoke the menu, then you might have assigned the middle mouse button to something else than the middle click (Go to Settings>Control Panel>Mouse and look for the middle button assignment to change that back to “middle mouse button” or similar).

Beta28.1 Main Menu

Keyboard Shortcuts

See UI Reference for some more details.
And also, with no node selected, hit the F1 key, to see the very basic HelpPatch and read the most relevant keyboard shortcuts.

The Inspektor Window

If you want to view or edit multiple and/or normally invisible parameters, it is often necessary to open an Inspektor. This can be done via the main menu or by pressing CTRL-I. (Note that the Inspektor is no special window at all. An Inspektor is just a node with a corresponding window. Therefore invoking an Inspektor always creates an Inspektor (VVVV) node in the root)
When an Inspektor is already open pressing CTRL-I will just bring that (or any) Inspektor to the front and not create a new instance. To create multiple instances use CTRL+SHIFT+I.

The inspektor window shows all pins of a node in one window. The top section lists general information on the node and all configuration pins. These pins are special inputs which are only visible in the inspektor. The second area is the section with inputs; the lower section is for outputs. Areas in light gray can be edited by the user; areas in dark gray are read only. Note that outputs and connected inputs are read only, as the graph will calculate the values for these pins.

The narrow column to the very left will change the brightness of a pin in the patch (use that to dim out irrelevant pins).

Usually all Inspektors always change to display the currently selected node. If you want to permanently edit a specific node with a specific Inspektor, you can attach an Inspektor to the current selection by pressing the “Attach to Selection” button. You can select and edit multiple nodes at once, but you will only be allowed to edit the pins which all nodes have in common.

Read the Inspektor Tutorial for more information about the Inspektor, or watch the video tutorial.

Some more words about nodes

Most nodes have pins of a basic data type. The tool tip will show the data as soon as you keep the mouse over the pin. For a more detailed view, open up an inspektor window (Ctrl+I).

Lots of nodes have configuration pins, which are only visible in the Inspektor. These pins usually have some more drastic consequences, and they can not be connected in the graph. A usual application for configuration pins would be setting the number of input or output pins. Having these pins as configuration pins will save you from the danger of destroying your graph by entering erroneous values.

Pins with a basic data type follow some simple rules:
If an input gets disconnected, it maintains the current values. The current value of all unconnected inputs gets stored in the patch file, so you don’t need any explicit initialization (as in other graphical programming languages)

Tip: If you want to initialize some pins in your patch to constant values, then you can temporarily connect these values to a node, adjust everything as you like and then delete all objects which calculated the constant – the input pins retain their values.

To reset an input pin to the default value, use ALT + Right Click.

!Note that this applies only to basic data types. Pins with advanced datatype (like Transform) do loose their value
One distinctive feature of vvvv in comparison to other graphical programming systems like PD or Max is that data is always on. Data will not be transferred as separate events which occur only at certain times, but as a continuous stream of values. In vvvv you will get accurate results as soon as you connect the pins, without the need to bang any first inputs.
In the past this was necessary to gain performance while using simple integer operations, but with modern processors and animation requirements this is no longer an advantage.

Docking

If you are working with multiple windows, Docking can be useful to stack windows on top of each others. Windows will snap into another, and vvvv automatically shows tabs to select between the different windows. You can use docking with all windows within vvvv.

Dock one window to another by pressing ALT while clicking in a window and dragging it onto another. Release the mouse button when a gray border in the target window appears. Then use the tabs to bring different windows to front.

Undock windows by just starting to dock as described above but releasing the mouse button somewhere over the desktop instead of another vvvv window.

Pressing ALT+SHIFT while dragging will dock a stack of docked windows onto another window.

At the moment there is a small known bug in docking: sometimes docked patches are not docked anymore after loading. To work around this problem make sure to resize all docked windows before saving.

On loading a series of docked patches they get arranged in the loading order. So in oder to influence the tab order you have to open the patch where the docked patches are located in an xml editor and change the order of the nodes containing the subpatches in the xml.

Cycling Windows

The WindowSwitcher lets you cycle through all currently visible windows (this will include all patches and all renderers and Inspektors) using CTRL+TAB. Just like cycling through a list of all open programs on your desktop using ALT+TAB this will bring the chosen window to front. Once you brought up the WindowSwitcher you can also select the window you need with the mouse.

Hidden Nodes and Locked Patches.

When a patch is locked, CTRL+E, the patch is protected against modifying it. In the top left corner there is a '#' symbol, to indicate the patch is locked. In a locked patched, it is still possible to change the values of IOBoxes, and also all the vvvv functions still work. To unlock, use CTRL+E again.

When one or more nodes or connections are selected, pressing CTRL+H will mark them as hidden when a patch is locked. Hidden nodes and connections in a locked patch are not visible or accessible anymore. In an unlocked patch they will stand out with a lighter shade of grey.

For more information, watch this video tutorial.

anonymous user login

Shoutbox

~2d ago

skyliner: the vcard page is assembled by personal settings + user page

~2d ago

lasal: thank you guys but this is to edit the user data, i don't find how to edit the vcard

~2d ago

CeeYaa: @lasal - haha nice - I think it's funny - you should keep it ;) to change - HOME-SETTINGS - PERSONAL SETTINGS

~2d ago

skyliner: @lasal: here?

~2d ago

lasal: who knows how to edit the vcard?

~2d ago

joreg: get started with #vl with this first part of a series of "vl for vvvv users" tutorial: https://discourse.vvvv.org/t/vl-for-vvvv-users-key-differences-1-5/15919 #vvvv

~2d ago

joreg: speak japanese? this looks like a great resource for #vvvv tipsntricks: https://qiita.com/advent-calendar/2017/vvvv

~8d ago

ARTEKLAB: @Patxi7 Awesome!!!