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


This is where I will make my tutorial about the basic button I used.

What this tutorial is about


I am going to explain how to build a menu and use it for your own patches and modules.

I read a lot off people asking for a user interface to control their patches on an end-user level. VVVV does not have any nice 'button' nodes, how ever, you can create some nice buttons very easy.

There is a nice tool, that can create a 'user interfaces in operating system look' that works with VVVV called GRIPD. There is a nice tutorial, made by Joreg, on how to use GRIPD?. It is prety easy to understand and looks great, like a real Windows program. But the project I wanted to build needed a different look, and I wanted to be able to control the buttons without actualy clicking on them, for example a 5 sec timer.

My Tutorial will create a subpatch wich can be used to create several buttons. Also it is great for totall beginners to learn VVVV.

I will try and explain every step I made, and for every stap you can download the patch. Every new patch is based on the previous patch, so you can follow the building process step by step.

Draw a button


The basic off my project is to draw a button and figure out if the Mouse (System) Window | Mouse (System Window) ? has clicked on it. This subpatch will send out a value off ONE if there is a click on the button.

I used a Renderer (GDI) with a RoundRect (GDI) and Text (GDI) to draw my buttons.

GDI is not as nice as the fancy DX9 stuff vvvv is capable off. But placing text, editing button size, and calculating the mouse location is very easy. I gave the RoundRect (GDI) a small radius (0.050) to get slight curved corners.

You can download the Patch for this Basic Button here:

I added enough information to understand it. This is the very basic off VVVV, so if you don't understand this, better take a look at the other beginners tutorials again.

We will work our way up from this patch to a nice set off buttons.

Mouse Location


The X- and Y- location off the RoundRect (GDI) is located in the centre off the button. The same goes for the Text (GDI). The width and height off the button can be compared with the dia meter of an oval shape. When you have this information, you can make a patch that gives a value of ONE if the mouse pointer is inside the button using these rules:

The mouse pointer is placed in the buton when:
X location mouse = X centre Roundrect , epsilon (Width Roundrect / 2)
Y location mouse = Y centre Roundrect, epsilon (Height Roundrect / 2) )

The node = (Value) is used for this comparison, it returns "1" when a is equal to b within the given tolerance(where 'a' and 'b' beeing the mouse location and the roundrect centre). The tolerance, or epsilon, are like a range off values that both values may be in, and are still treated like equal.

This patch will draw a button and gives a value off ONE if the button is pressed. This is based on boolean logic (everything regarding computers is based on boolean logic, so it should be smart to realy understand these basics).

The button is the same as my other patch, only now I add the mouse location and left click. You can download the Patch for the 'Button and Mouse' here:

Later in this tutorial we will make a subpatch that adds another roundrect, to visualize if the button is pressed.

Making the button a subpatch.


Now that we can create one button, we can start building a nice menu. Suppatches are the building blocks for bigger complex patches. They are also here to keep overview off the project.

For this tutorial there will be 9 buttons, 3 groups off 3 buttons created. The funtion off these buttons will be created later. I will use a HLine (Plot) ? node to devide the three groups.

First the Button and Locate Mouse.v4p patch has got to be converted to a subpatch. For this we need to know what information we put in too the suppatch, and what information we want to get out off the suppatch. I also wrote what type off IO Box is needed to pass the correct type off information.

The information that needs to go in the suppatch is:

The information that needs to get out off the suppatch is:

The layer off the button is the information that the Renderer (GDI) will draw on the screen. Since there are a few buttons, a mouse pointer and other information, all these layers will be grouped together using the Group (GDI) node.

The suppatch will have the input and output pins like mentioned above. An output or input pin, when we talk about subpatches, is an IObox that has the folowing properies:

  • A descriptive name (set this with the Inspektor (VVVV) )
  • Only connected to ONE side
    • one connection on bottem = input pin
    • one connection on top = output pin

The horizontal order of the IOboxes dictates the order off the input and output pins.

I will not attach the patch, because it is basicly the same as the Button and Locate Mouse.v4p patch. When we make our menu, using this subpatch, you can download it.

anonymous user login


~20h ago

micha_nismus: worked out, thank you very much ! :-)

~2d ago

joreg: @micha_nismus does this help? https://youtu.be/xkrbT45BgOQ

~3d ago

micha_nismus: thx joerg. Can anybody help me why i can't see any renderer in gamma? thx :-)

~8d ago

joreg: @micha_nismus instead of discord, we're using matrix, see: chat

~8d ago

micha_nismus: searching for a public discord server for vvvv

~16d ago

joreg: Join us for the 20th #vvvv meetup on January 19th: https://thenodeinstitute.org/event/20-worldwide-vvvv-meetup/

~16d ago

joreg: @schlonzo re "SDSL support" did you see the Shader wizard? or do you mean something different?

~16d ago

joreg: @LCA not aware, but the HIKVision sdk comes with a c# demo. need help for a commercial project? get in touch via devvvvs@vvvv.org

~17d ago

LCA: Has anyone ever made a HIKVision GigE work with vvvv?

~22d ago

schlonzo: What's the shortcut Anton used? =)