This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

The GUI

Russian | Italian | Korean | French

Mouse & Keyboard

The user interface of vvvv has been designed to be used with a three-button mouse. If you don't have a middle mousebutton in vvvv you can always simulate a middle-click using SPACE+rightclick.

Also vvvv's ease of use heavily relies on shortcuts. Here is how you can learn about them:

Patch Editor

When vvvv starts all you see is a virgin gray window, a so called patch. Welcome to vvvv.

How to open:

  • Ctrl+P to create a new patch
  • Ctrl+Shift+P to create a new subpatch

Symbols in the title bar

  • * the patch has changes
  • ~ the patch has only layout changes
  • + the patch is readonly
  • # the patch is locked
  • ° the patch is always the topmost window (toggle via CTRL+T)

For more info on how to operate in the patch editor see:

Main Menu

vvvv's main menu is not visible by default in order to save precious screen-estate. Also we save you from doing a lot of mouse-meters moving the cursor to and from the menu as it is always at your finger tip and can easily invoked:

How to open:

  • Middle mouse button click in an empty area in a patch
  • SPACE key + Rightclick in an empty area in a patch

If you have a middle button, but it doesn’t invoke the menu, then your system may have assigned the middle mouse button to a different function. Go to Settings > Control Panel > Mouse and look for the "middle button assignment" to fix that.

Node Browser

The NodeBrowser is the central access point to all nodes that exist within vvvv. This is from where you create the nodes with which you build your patches.

How to open:

  • Double Left Click inside an empty area in a patch
  • Double Left Click an existing node to replace it (and keep valid connections)
  • Ctrl+N to open it in a separate window

By typing into the text field at the top you can filter the list to find what you want. Then:

  • Leftclick a node to create it.
  • Rightlick a node to show its helppatch
  • Middleclick a node it to open its online reference page..
  • Ctrl+Leftclick a 'Template' node to clone it and write your own Dynamic Plugin or an Effect.

The NodeBrowser has three buttons (T, C, F) in top right corner:

T

Search the nodes by their Tags.
Just start typing one or more words and the list will be filtered to match your search tags.

Or type:

  • 'm ' (M followed by Space) to filter modules
  • 'v ' to filter vl plugins
  • 'd ' to filter dynamic c# plugins
  • 'p ' to filter binary .net plugins
  • 't ' to filter patches
  • 'f ' to filter FreeFrame plugins
  • 'x ' to filter effect nodes
  • 'i ' to filter nodes with an internal version

C

Categorized tree view of the node list.

F

Filter which categories are visible in the NodeBrowser. By default all categories are on.

These three modes can also be switched by a Rightclick in the text field.

Herr Inspektor

Herr Inspektor is giving you an overview of the settings of all the pins of a selected node. If you want to view or edit multiple and/or normally invisible parameters, it is often necessary to open an Inspektor.

How to open
  • Ctrl+I
  • Ctrl+Shift+I for additional Inspektor Windows

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.

Structure

The Inspektor's view is structured into 3 sections:

  • Configuration Pins: only visible in the Inspektor
  • Input Pins: editable input pins
  • Output Pins: readonly output pins
Editing values

Values in the Inspektor are changed the same way as in IOBoxes. Basically that means: rightclick (strings, enums) or rightclick+drag (values, colors). For details see Editing IOBoxes.

Pin Visibility

The narrow column of quads on the very left indicates the visibility of a pin in the patch. By clicking the quads you can toggle the respective pins between Visible, Hidden and OnlyInspektor.

Attaching Inspektor

Usually all Inspektors always adapt to 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 create additional Inspektors for editing other nodes by pressing Ctrl+Shift+I.

Multiple nodes at once

When selecting multiple nodes at once the Inspektor only shows pins that all those nodes have in common.

See also:

Finder

The Finder gives you an overview of the currently loaded patch hierarchy and quickly lets you find nodes in your patches.

How to open:

  • Ctrl+F
  • Ctrl+Shift+F for additional Finder Windows

It's not necessary to click on the text field, its active as soon as the finder window is active.

Move the mouse over the text field to see the tag list that allows for some quick filtering. Note that all those tags come into effect only when followed by a space.

Search Scope

By default only nodes in the active patch are searched.
Via the following tags you can expand the scope:

<
search globally in the whole graph
>
search in patches within the active patch

Check the complete list of tags to filter particular nodes.

If you also want to search inside modules activate the M checkbox in the topright corner of the finder.

Mouse Interaction
  • Leftclick a node to focus and select it in the patch (if the patch is visible)
  • Doubleclick a node: same as above but opens patch if hidden
  • Rightclick a node to show its GUI/Editor (in local scope RightClicking the active patch goes one level up)
  • RightDrag to scroll canvas
  • MouseWheeel to zoom canvas
  • Rightclick the tag-textfield to clear it

Window Switcher

The WindowSwitcher is invoked by pressing Ctrl+TAB and shows a graphical visualisation of the complete running graph.

Use Ctrl+TAB or Ctrl+Shift+TAB to cycle through the open windows or select a window with the mouse to jumpt to it.

Timeliner

The Timeliner allows you to define keyframes of values, strings and colors over time and then get the values of a specific point in time via its output pins.

How to open:

For detailed informations on how to operate the timeline see

Code Editor

If you're missing a spefic node you can write your own:

Custom syntax highlighting can be defined in the lib/thirdparty/*.xshd files.

How to open:

See also:

Project Explorer

Press CTRL+J to bring up the ProjectExplorer window. Here you see a treeview of all your projects and this is where you can add/remove

  • documents
  • references

to/from projects.

Documents

While you can define multiple plugin-classes within a document (just put them one after the other) with a bigger set of nodes it may be a good idea to split them into multiple documents. Just right-click your project in the explorer and select Add.. to add an existing or new document.

References

Here you you will usually either:

  • reference libraries from the GAC
  • or reference a thirdparty managed library (eg. a device driver)

TTY Renderer

The Renderer (TTY) has 3 main purposes:

  • mostly it is used as vvvvs error console so it is good practice to have a tty open to be informed of things that go wrong.
  • use it to write your own logs.
  • render your ASCII-art.

How to open:

See also:

Kommunikator

The Kommunikator allows you to preview, crop, save and upload screenshots to vvvv.org. If you provide your login you can even add images to the pool of site-headers.

How to open:

  • Ctrl+3

See also:

Window Modes

Each window in vvvv also has a node associated. In other words: some nodes in vvvv have an associated window. You can identify those nodes by their icons.

Nodes with windows can be displayed in four modes:

  • Hidden: only the node is visible
  • InABox: node as box, containing the window
  • Windowed: node with separate window
  • Fullscreen: window visible fullscreen

Use the following shortcuts to switch to the respective modes:

  • Hidden Alt+3
  • InABox Alt+2
  • Windowed Alt+1
  • Full Screen Alt+Enter

As an alternative quick shortcut to toggle between the hidden and windowed modes simply rightclick a node.

There is a difference between hiding and closing a patch (or any window) in vvvv:

  • if you hide a window (ALT+3), its associated node will still be part of the system and continue working
  • if you close a window (CTRL+W), its associated node will be removed from its patch and thus no longer be part of the program

Docking

When working with multiple windows, docking can be useful to stack windows on top of each other to save precious screenspace.

Dock

Dock one window to another by pressing ALT while clicking inside it. Then drag it onto another window and release the mouse button when a gray border appears inside the target window.
Dock a stack of docked windows onto another window by doing the same while pressing ALT+SHIFT.

Undock

Undock windows by pressing ALT while leftclicking inside of it.

Tabs

Use the tabs to navigate between the different patches. Rightclick a tab to find the patchs node in its parentpatch.



This is the landing page of the category The GUI

anonymous user login

Shoutbox

~2d ago

~3d ago

joreg: Follow TobyK on his Advent of Code: https://www.twitch.tv/tobyklight

~7d ago

joreg: vvvvTv S02E02 is out: Saving & Loading UI State: https://www.youtube.com/live/GJQGVxA1pIQ

~7d ago

joreg: We now have a presence on LinkedIn: https://www.linkedin.com/company/vvvv-group

~14d ago

joreg: vvvvTv S02E01 is out: Buttons & Sliders with Dear ImGui: https://www.youtube.com/live/PuuTilbqd9w

~20d ago

joreg: vvvvTv S02E00 is out: Sensors & Servos with Arduino: https://visualprogramming.net/blog/2024/vvvvtv-is-back-with-season-2/

~20d ago

~21d ago

fleg: hey there! What's the best tool for remote work? Teamviewer feels terrible. Thanks!

~1mth ago

joreg: Last call: 6-session vvvv beginner course starting November 4: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-i/

~2mth ago

joreg: Missed the last meetup? You can rewatch it here: https://www.youtube.com/live/MdvTa58uxB0?si=Fwi-9hHoCmo794Ag