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

What this tutorial is about

align=center}

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

align=center}

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

align=center}

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 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.

align=center}

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:

• Text off the button ( IOBox (String) )
• X-location off the button ( IOBox (Value) Advanced? )
• Y-location off the button ( IOBox (Value) Advanced? )
• Height off the button ( IOBox (Value) Advanced? )
• Width off the button ( IOBox (Value) Advanced? )

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

• Layer off the button ( IOBox (Node) )
• If the button is clicked ( IOBox (Value) Advanced? )

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.