Open the tutorial.

In this tutorial, we will work with several user interface elements that provide for numerical display and editing. We will use both messages and the object inspector to change the appearance and behavior of objects in order to make them work as we wish.

Numerical display and editing is at the heart of Max patching. Whether data comes from sensors, MIDI devices or just from moving on-screen controls, numerical data is easy to test, manipulate and use for program control.

Look at the patcher named 07mNumericalUserInterfaces. At the left side of the patch is a set of interconnected message boxes, sliders, knobs and number boxes. The basic "slider" object in Max is called a slider, and can be oriented horizontally and vertically, depending on what we need for our patcher interface. The "knob" is called a dial object.

Click and drag on the "thumb" of the slider objects to see the results displayed in the connected number boxes. The output of a slider is an integer number based on the range of the slider. Both the vertical and horizontal slider perform identically.

The dial next to the vertical slider performs a similar function; however, in its current configuration, you need to move the mouse pointer in a vertical motion to change the position of the knob’s wiper. This is something we will look at changing later in this tutorial.

Click on the button just above the horizontal slider – it doesn’t seem to perform any function. However, if we change the number box connected to the slider, then click the button again, we will see that when a slider receives a bang, it responds by outputting its most recent value. Thus, a slider acts like a number storage tool as well as a numerical editor.

Finally, let’s unlock the patch. If we put the mouse pointer near the bottom-right corner of a slider or dial, we see a small resize box appear, and the cursor changes to reflect that we can resize the objects. When we click and drag the resize box, the size of the object changes, but the function of the object stays the same. This allows us to change the layout of our patch for convenience without changing the way our user interface elements operate.

All three of our user interface objects share the same output range: 0 through 127. Obviously, this is not the behavior we would always (or even normally) want. By default, these objects output numbers in the range of 0 to 127 (which mimics the MIDI number range); this range can easily be changed using messages to the object.

Above the objects are some message boxes formatting messages based on numbers coming in from attached number boxes. As we’ve seen in earlier tutorials, this is a mechanism to send commands to another object; in this case, we will use them to change the behavior of the slider and dial objects. If we change the first number box (connected to the size $1 message) to 50 and then move the sliders or knob, we see that the range has changed: you can now produce output from 30 through 79. Why not 80? It is because the size message determines the number of discrete steps for the object. If the starting step of 30 is included, 50 steps will give you a maximum value of 79.

Next, let's adjust the number box which triggers the min message. If we change this to 0, the slider objects and the dial now output messages in the range of 0 to 49. Using the min and size messages in tandem allow us to set the objects to output whatever range of values we need for our patching.

If we change the third number box (connected to the mult message) to 5, the output changes to output the range from 0 to 245, in steps of 5. This result is based on multiplying the current range by the multiplier value.

When you move the sliders, you might be surprised by some of the interim values that you see. This is based on the way in which the interface objects calculate their output: the objects maintain an internal value from 0 to the range (max - min - 1). This is multiplied by the mult value, then offset to match the min value. This means that the output will always have step sizes of mult, even as the value goes through 0.

On the right-hand side of the patch is a diamond array of number boxes, each one providing a different display format. The top-most number box is familiar to us – a decimal format number, with a triangle that helps us recognize this as an editable number box. Connected to this are two number boxes with different display formats: the left box displays information in hexadecimal (base-16), while the right box displays the information as if it were an incoming MIDI value.

The bottom number box shows a change in display characteristics: the number is in a bold font, and there is no triangle on the left of the box. This may be useful if you want to see more of the number in a limited space, or if you want to imply that the value shouldn’t be edited.

All of these variations on the number box are based on changes in the attributes of the object. Attributes are changed using the object inspector, a window containing all of an object's attributes, and an interface for editing them. Unlock the patch and hover the mouse over the middle-left of one of the number boxes – a small blue circle with the letter "i" will appear. Click on this circle to invoke the object inspector.

The initial display of the inspector shows all of the available attributes, color-coded by type. There is also a set of tabs across the top of the inspector that allow us to limit the attributes that we see. The "Display Format" attribute has a discrete number of values; you can see the available formats by clicking on the current value. The options are "Decimal", "Hex", "Octal", "Binary", "MIDI", and "MIDI (C4)". These are all variations on decimal display that may be useful, depending on the values you are entering or displaying in a number box.

When we click on the "Appearance" tab, we only see attributes that affect the appearance of the number box. Options include "Draw Triangle", something we saw disabled in the bottom number box in our patcher. Turn this on and off in the inspector, and notice that there is an immediate change in the object; changes to inspector values cause instant changes to the object.

The names used by the inspector do not necessarily match the messages used to control the object. How do we know what message might match a particular attribute? The easiest way to create a matching message is to click on the name of an attribute and drag it into an unlocked patcher. The name will be transformed into a message box formatted with the proper message, offering a shortcut when you want programmatic control of attributes.

Let's unlock the patcher and create our own small user interface. Open the object palette and select a slider, a dial and a number box. Resize them to be different sizes, and move them around to make an attractive layout. Note how the slider switches from a vertical to horizontal orientation depending on the aspect ratio (height versus width). Connect the objects to see how they interact, and use the objects as both display and editing tools. Then, for each object, open the inspector and make some changes in appearance. Change the colors, and (if you like) change their behavior. When you are done, lock the patch and make sure the object look and act as you expected.

Visual display and editing of numerical data can take many forms. We’ve seen how to use slider and dial objects, and how to display numbers in various formats within the number box. We’ve also changed the behavior of objects using both messages and the Object Inspector. Since using numerical data is so important in Max programming, it is helpful to have many ways to show and alter this type of data.