This tutorial covers the creation of custom controls using your own pictures. This function is provided by the pictctrl
objects, which use specially formatted pictures to give you customizable user interfaces.
Changing the colors and sizes of user interface elements can only get you so far when creating custom interfaces. The pictctrl
objects take it to the next level: virtually any graphic can be used to create switches, sliders and state indicators. However, in order to get the best possible result, you will have to format the images to make them conform to the objects’ requirements.
If you take a look at the tutorial patcher, you will see four rather silly pictures. In order to see the patch at work, click on the cellphone – it starts the metro
, which animates all of the other graphics. The cellphone is obviously acting like a momentary switch
, the ring is a slider
(following the output of a drunk
object), the thumb is a yea/nay indicator (another type of switch
), and the eyes are a multi-state indicator (jumping to the value of the random
object's output). Click on the cellphone again, and the whole operation will cease. Let’s look at each of these controls to see what is causing it to work.
The cellphone image, our momentary button, is made of two images – the plain cellphone and one with the backlight turned on. If you watch the toggle
object connected to its output, you see that the output is when you click the control, and when you release the mouse. Using the select
object at the output allows us to trigger the toggle
controlling the metro
While the metro
is off, let’s look at some of the other controls. They are all being driven by random
-like object, but they can be manually changed as well. Click and drag on the ring, and you will see that it acts like a horizontal slider – the output connected to the number
box provides a “current value” output when manually changed. In this case, there are steps tracked by the object.
The thumb image can also be controlled manually: When you click on it, it becomes neutral. When you release the mouse button, it reverses state. The eyes are similar, but change when you drag and click on the image. There are only a few frames, so it might be convenient to use the number
box above it to change the value in a more controllable way.
Let’s play with some of the setting of the cellphone switch. Unlock the patch, select the cellphone and open the object Inspector. You will see a large number of attributes available for this object; let’s start by playing with the object sizing. As provided in the patch, there is no way to change the object size: you can mouse around the bottom-right of the object, but the grow box will never be displayed.
In the inspector, you will see that an attribute named “Snap Size to Picture Size” is turned on. This attribute defeats user-based sizing; rather, it forces the object to be the size of the source image. If you turn off this attribute, the object can be resized, and the image will scale to match the sizing of the image.
Sometimes you will want to try certain images for buttons, but you may have to try several images for it to be right. You can change the image file by clicking on the image tab, then clicking on the Choose… button for the attribute. As an example, click on Choose, navigate to the Max 5 folder on your disk, then go to the patches/picts folder and select the image. This is more of a “stock” button image, and it replaces the cellphone button completely.
Click on the ring finger slider object, and look at the changes in the inspector. This is a different object (the pictslider
object), and it has a different set of attributes; most notably, two different images are used for the display. The background image (in this case, the finger) can be used to set the size of the object, while the ring image can be scaled or replaced separately. Click on the Choose
button for the “Knob Image File” of the pictslider
, move to the patches/picts
folder, and select the file. It will immediately show both “smiley” faces; one of these is the “clicked” image, so you need to click on the attribute to make it look right. Now, instead of moving a ring around the finger, you are sliding a face. You may want to try changing the attribute to center the face correctly for this image.
There are a variety of object attributes that require specific image formatting. For example, attributes such as thumbtoggle.pct
files to see how the complexity of a file increases when certain options are selected. The “eyes” pictctrl
, which supports dial
mode, also provides an example of attributes that are only able in dial mode.
and require that the source file be specially formatted to support those options. If you have an image editor available, you might want to open the
To get more information about the image formats for the pictctrl
object, open the help file for each, then double-click the subpatcher to see how an image has to be created for it to be a valid controller. If most of the “special features” are not used, the image can often be fairly simple, but more robust controls require more complex images – especially if a mask is used to provide transparency.
Covering all of the custom UI options made available by pictctrl
is beyond the scope of this tutorial. However, you should be able to see how the user interface of a patch can be completely altered by using custom image-based elements. While proper creation of the images can be difficult, the effort allows for complete control of the visual control environment.
Picture-based slider control
Choose randomly between on and off (1 and 0)