<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>

<chapter name="Max Interface Tutorial 1: bpatchers">

<setdocpatch name="01uBpatchers" patch="01uBpatchers.maxpat"/>
<previous name="communicationschapter03">UDP Networking</previous>
<next name="interfacechapter02">Picture UI Elements</next>
<parent name="00_maxindex">Max Tutorials</parent>

<indexinfo category="User Interface" title="Bpatchers">Working with inlined patchers</indexinfo>

<h1>Interface Tutorial 1: bpatchers</h1>

<h2>Introduction</h2>

<p>This tutorial looks at a useful object for embedding subpatchers within a patcher so that their interface is visible.  The <o>bpatcher</o> object is superficially similar to making any abstraction: we create a patcher file (with inlets and outlets, as necessary) and save it to disk.  Rather than instantiating it with an object box, however, we use the <o>bpatcher</o> object to 'embed' it visibly inside another patcher.  This allows us to construct a library of interface elements - pieces of patcher logic that show an interface that we can re-use multiple times.</p>

<p>To open the tutorial patch, click on the <b>Open Tutorial</b> button in the upper right-hand corner of the documentation window.</p>

<h2>Overview of the tutorial patcher</h2>

<p>Take a look at the tutorial patcher.  The reasonably sparse window contains a <o>toggle</o> labeled "Start", three <o>button</o> objects ("draw", "see", and "erase"), and three identical-looking interface areas, each with a "clear button>.</p>

<p>Click on the <o>toggle</o> labeled "Start".  Move the mouse over to the left-hand interface area and draw in the blue rectangle that contains the small yellow ball.  This is a <o>jsui</o> object loaded with a user-interface that presents an X-Y function to track the mouse when clicked.  As you draw by dragging in the <o>jsui</o>, the <i>gesture</i> of your drawing will be traced in red in the <o>lcd</o> object below.  The <o>lcd</o> object has its <m>border</m> turned off, so you won't see anything until you draw something in the <o>jsui</o>.  If you clear the <o>lcd</o> (with the "erase" <o>button</o>) you should see your gesture draw again.</p>

<p>Go to the second and third <o>jsui</o> objects and "draw" in them with the mouse.  Notice that they generate tracings in the <o>lcd</o> object in green and blue, respectively.  Hit the "erase" <o>button</o> to <m>clear</m> the <o>lcd</o> and see them redraw.</p>

<p>Turn up the <o>slider</o> objects next to the <o>jsui</o> objects and you will see that the tracings become noisy - the gestures recorded from the <o>jsui</o> are now being randomized a bit to add more texture to the drawing.  Click any of the <o>button</o> objects labeled "clear" to erase the captured gesture.  You can then redraw a new gesture in the appropriate <o>jsui</o>.</p>

<p>With some gestures loaded, click on the <o>button</o> labeled "see" at the top of the patcher.  Notice that the three interface areas suddenly look different - a new set of <o>jsui</o> objects appear that play back the gestures as you entered them, and the associated controls have gone away.  Where did the original <o>jsui</o>, <o>slider</o>, and "clear" <o>button</o> for each interface go?</p>

<h2>The <o>bpatcher</o> object</h2>

<p>Unlock the tutorial patcher.  Notice that a number of hidden objects appear; moreover, light blue boxes appear around the three interface areas.  The blue boxed areas are in fact <o>bpatcher</o> objects containing an abstraction patcher saved on disk.  These patcher files have parts of their interface shown inside the main tutorial patch. The concept is that a patch contained in the <o>bpatcher</o> is <i>behind</i> the main patcher and shows through an opening.</p>

<p>Click on any of the three interface areas and notice that, rather than being able to edit the objects within, you can merely move and resize the <o>bpatcher</o> (blue box) area. Control-click (Mac) or right-click (Windows) on one of the blue boxes to get its contextual menu.  From the menu, go down to the <b>Object</b> submenu and select "Open Original doodlepatch.maxpat".  The original copy of the three interface areas will open.  Let's take a look at that patcher.</p>

<p>Unlock the "doodlepatch.maxpat" abstraction.  Notice that all we see is the interface elements of the patcher, regardless of whether the patcher is unlocked.  This is because the patcher is in <b>Presentation Mode</b> - we can set any patcher to open in Presentation Mode by checking "Open In Presentation" in the Patcher Inspector.  From the <b>View</b> menu, uncheck <b>Presentation</b> and the patcher will morph back to its original view and a bunch of patcher logic will appear.</p>

<p>Take a look at the code in the patcher.  It uses a <o>coll</o> object as well as some supporting logic to take the drawing data from the <o>jsui</o> object and record it (this is a form of gesture capture, as seen in "Data Tutorial 3").  The second <o>jsui</o> (to the right) immediately reanimates the data from the <o>coll</o> in response to <m>bang</m> messages coming in from the <o>inlet</o> and driving a <o>counter</o> object.</p>

<h2>Offsetting a <o>bpatcher</o></h2>

<p>Without closing the "doodlepatch.maxpat" file, switch back to the tutorial patcher and look at the "draw" and "see" <o>button</o> objects when the patcher is unlocked.  Notice that they trigger <o>message</o> boxes containing the messages <m>offset -60 0</m> and <m>offset -360 0</m>, respectively, sent into the second inlet of the <o>bpatcher</o> objects.</p>

<p>Look in the bpatcher patch and see what the second inlet is connected to.  Notice that it talks to a <o>thispatcher</o> object.  The <o>thispatcher</o> object provides functionality for controlling the appearance of a patcher file, including its size, position on the screen, and whether the title bar is visible or not.  When used within a <o>bpatcher</o> file, the <o>thispatcher</o> object can scroll the interface of the <o>bpatcher</o> object based on coordinates provided with the <m>offset</m> message.  This allows our main tutorial patcher to switch between two different viewpoints on the same <o>bpatcher</o> file - in this case, the "draw" view and the "see view".</p>

<h2>Arguments for <o>bpatcher</o> objects</h2>

<p>Look a the patcher logic attached to the outlet of the <o>bpatcher</o> file.  There is an <o>append</o> object with three <i>pound-sign</i> abstraction arguments (<m>#1 #2 #3</m>).  These arguments would normally be provided in the object box if we were to load "doodlepatch.maxpat" as a normal abstraction in our patcher.  In order to set these arguments within a <o>bpatcher</o> object, we have to use the object's <b>Inspector</b>.</p>

<p>Close the <o>bpatcher</o> abstraction file and go back to the tutorial patcher.  Click on one of the <o>bpatcher</o> objects and open its <b>Inspector</b>.  Notice that at the bottom we can find the name of the <m>Patcher File</m> loaded by the object.  Directly under this is the <m>Argument(s)</m> field, which contains three numbers.  These numbers are substituted for the patcher arguments for each <o>bpatcher</o> independently, allowing us to differentiate multiple copies of them in our patch.</p>

<p>The arguments for our <o>bpatcher</o> in this tutorial control the three colors drawn by the gesture capture system in the <o>lcd</o> (in short, they provide the last three numbers for the <m>frameoval</m> commands sent to the <o>lcd</o>).  Open the <b>Inspector</b> for each <o>bpatcher</o> and change those values to a different color value in RGB form (<m>0</m>-<m>255</m>).  When you record new gestures, you will see them appear in the <o>lcd</o> using the colors you selected.</p>

<h2>Summary</h2>

<p>The <o>bpatcher</o> object provides an extremely useful way to embed visual interfaces within a larger project.  An interface can be designed (with whatever supporting logic is required), saved, and displayed in another patch.  The <m>offset</m> message to a <o>thispatcher</o> object within a <o>bpatcher</o> allows us to "scroll" the viewing rectangle of the object to reveal different portions of the interface.  This, combined with the use of Presentation Mode, allows us to customize the interface further.  Just as with other types of abstractions, patchers made for use with the <o>bpatcher</o> object can process arguments, set through the object's Inspector.</p>

<seealsolist>
<seealso name="bpatcher">Embed a visible subpatch inside a box</seealso>
<seealso name="thispatcher">Send messages to a patcher</seealso>
</seealsolist>

</chapter>
