Button Dialog Operations

Double-click on the Button's border to open its Define Dialog box as shown in Figure 6-11 below. Notice that the dialog box has two major sections: Button Purpose and Button Appearance.

Figure 6-11
Primary Button Dialog Box

You can configure a button to accomplish any one of six major purposes. Your choices are: Information, Navigate, Menu Item, Tracing, Storytelling or Play Movie.  Note that each of the button purposes is unique.  A single button can not be used to accomplish multiple purposes.  However, in addition to accomplishing a one of the six purposes, a button can be configured to play a sound when it is clicked.

 

Here's a run-down on the different button purposes.

 
Information:
An information button is useful whenever you want to provide the users of your model with a handy repository for instructions, background information, or summary insights. When you click on an information button, a small "windoid" pops up.  The info windoid can contain text,  a graphic, or even a QuickTime movie. A close box on the windoid enables the user to put it away.

Setting up an information button is a straightforward process.  After creating a button, begin by entering its dialog and selecting the "Info" button purpose (it's the default, so this step is very easy!). Then, from the pop-up list to the right of the "Info" radio button, select the type of info that you want to display.  The pop-up list gives you three choices:  text, graphic, and movie.  Depending on your choice, a button labeled "Edit text..." or "Import..." will appear next to the pop-up list.  Click this button to enter/edit text, or to import a graphic or movie from disk.  

Text:  The text entry/edit dialog shown in Figure 6-12.

Figure 6-12
Info Button Dialog Box

In the Info Box, type or paste in the text you want to pop up when the button is clicked. The font will be determined by that specified in the Model Prefs dialog for the level on which you place the button. After you have entered your text, OK the dialogs. Then, click your button and a window, containing the text you've just entered, will pop up. You can then size and re-position the window as your requirements dictate.

Graphic:  To import a graphic from disk, select graphic from the pop-up list, click the Import... button and navigate through the directory structure to locate the target graphic.   Note that with QuickTime installed on your computer, you have access to a wide variety of graphics formats.  The Appendix to this chapter lists the formats available to you.  You'll find it most efficient to place disk-based graphics in a directory entitled "graphics", placed in the same directory as your model file. Doing so makes it easy to find the files, and also makes it easy to transport your model and the associated disk-based graphic files to other machines with different directory structures.

Movie:  To import a movie from disk, select Movie from the pop-up list, click the Import... button and navigate through the directory structure to locate the target movie.  It's a good idea to place all disk-based movies in a directory entitled "movies", placed in the same directory as your model file.  Doing so goes far to ensure that your model and its associated movies will be easily transportable from your machine to the machines of your clients and colleagues.

 
Navigation:
Navigation buttons can form an essential component of the user interface to your model. Navigation Buttons eliminate the need to scroll from one screen to the next. Button navigation is far more convenient than scrolling, and it is far friendlier to users who are  intimidated by working with computers.

To assign a navigation function to your button, click on the radio button next to Navigate in the Button Dialog (refer to Figure 6-11). Then click on the "Define Navigation" button. The define navigation dialog will appear as shown in Figure 6-13. Within this dialog you have three essential tasks:  Setting up the navigation itself, configuring the visual effects that will go along with the navigation, and choosing among the various options that can accompany a navigation.  We'll look at each task in turn.

Figure 6-13
Navigation Secondary Dialog

Setting up Camera Navigation: In the Define Navigation dialog, you have two options for navigation: Camera Navigation and Return Navigation. The first (and default) option for assigning navigation is Camera Navigation, which is selected by clicking on the radio button next to the picture of the camera. To determine the destination for the navigation button, click on the "Navigate To..." button and the cursor will turn into a camera image. Use the scroll bars (or the page up/down keys on your keyboard) to move to the desired location on the interface or map/model layer.  To change layers, click the up or down arrow on the left-hand frame of the diagram. Be sure to center the screen just the way you want it to appear. When you are satisfied with the location, click the camera icon anywhere on the screen to assign the associated coordinates to the button. You will then be returned to the main Button Dialog. Click OK exit the button dialog and to complete the navigation assignment.

Notes: When using the camera navigation option, it is important to use the scroll bars or page up/down keys to move to the new location to which you want to assign the button. Any click on the diagram itself while the camera is displayed will immediately assign the associated coordinates to the button. Also, note that there is a "secret feature" associated with camera navigation.  If you depress the control (command on Macintosh) key and click within a graphics object when you create a camera navigation assignment, the subsequent camera navigation will take you to the top-left coordinate of the graphics object.  Cool!

Deleting or Changing camera navigation assignment: To change a button's previously assigned camera navigation, you must first click once on the Delete Navigation button within the Define Navigation dialog, then click on "Navigate To..." to make the re-assignment.

Setting up a Return Navigation: The second option for button navigation is Return or "Back" behavior. With Return as the choice, when the button is clicked, the user will retrace Camera Navigation one step at a time. This works much like the Back button in a Web browser. The Return behavior has a Use Default Icon option next to it which, when checked, will display the default symbol on the button face. If you use this standard icon, users of your model will become familiar with this symbol and the Return function associated with it. Alternately, you may wish to assign text or a different symbol to the button (see the description for Import Picture later in this chapter for details). Clicking OK will return you to the main button dialog box.

 
Assigning Visual Effects: You can assign a Visual Effect to a Navigation Button to heighten interest and engage your audience. Visual effects use visual cues for smooth transition from one screen to the next.

To assign a Visual Effect, click-and-hold on the Visual Effect pop-up menu box and select from among the variety of effects. If you click the optional "Effect to black" box, the visual effect will transition to a black screen before it transitions to the new screen.

Selecting among navigation options:  At the bottom of the navigation sub-dialog, you can select from a plethora of navigation options.  Check the "Restore all devices" box to restore all devices (graphs, tables, sliders, etc.) as navigation takes place.  Check the "Restore Graphs/Tables" box (and don't check Restore All Devices) to clear the data from graphs and tables only.  Prevent navigation from taking place unless the user knows the password by checking the "Password Protect" Box (Camera navigation only). Check the "Post a Message" box to display a text message, a graphic, or a QuickTime movie during the navigation.  Finally, check the "Switch a variable" box to set the value of a variable to 0 or 1 when the navigation takes place.

 
Menu items:
You can associate Menu items with buttons by clicking once on the "Menu" radio button. You must then choose the desired Menu item you want performed when the end-user clicks the button. Click-and-hold on the menu box, and choose the menu item you want from the scrollable list; when you have made your choice, release your click to assign the specific operation. Your choice will appear in the bar next to "Menu Item." Figure 6-14 shows the list of possible Menu items that you can assign to a button.

Figure 6-14
Menu Items Available to Assign to Buttons

The Menu Items and their functions are well documented in Chapter 3. The button allows a couple additional choices beyond the documented menu items:

Run/Restore. The Run/Restore option will prevent the end user from beginning a new simulation until they have Reset the model (usually via a "Reset" button). This will prevent them from accidentally clicking the Run button after the completion of the run before they have had a chance to examine the graph and table output. If you use this option, you should provide a "Reset" button to set up the model for another run. A "Reset" button is a Menu button with "Restore all Devices" as the assigned function.

Print Exports.  The Print Export option will print a report containing any Text Boxes, Graphs, Tables and Sector Frames that have been marked for export.

 
Tracing:
A model structure's logic can be difficult to swallow in a single bite. And yet, a comprehensive diagram of the process by necessity will show the whole enchilada. Often, one doesn't know where to start. Also, the feedback loop structure of a model can be difficult to recognize when a model consumer (or builder, for that matter) is looking at a diagram that is rich with Stocks and Flows. It is difficult to identify these loops by inspection.

Tracing can be used to sequentially unfold the logic of a particular model, working back through the inputs to a given model variable. By displaying the model structure in mind-sized bites, tracing makes it far easier to understand how the model is put together. Tracing can also be used to step through the feedback loops associated with a given model variable. In so doing, it provides a more visceral sense for the feedback processes that are at work in the model.

Using the Tracing option you can define buttons to perform Logic or Loop Tracing. Each type of tracing "walks" you through relevant structure. Loop Tracing displays the loops that impact a particular model element. Starting at a single element, Logic Tracing unfurls structure - each time you click on a dot, you reveal the inputs to the dotted element.

Important Note:  The tracing button is accessible from the interface level only.  You cannot create a tracing button on the map/model level.

 
Loading/Removing/Exchanging Variables: The two lists within the dialog, shown in Figure 6-15, along with the buttons between the lists, are used to load, remove, and exchange the variables to be traced. All model variables (stocks, flows, converters) will appear in the Allowable list. Variables to be traced appear in the Selected list. When a variable has been loaded to the Selected list, it will appear gray in the Allowable list. Here's how to move variables between the two lists:

Figure 6-15
Tracing Button Dialog

If you have loaded more than one model element into the Tracing Button you will get the dialog similar to the one shown in Figure 6-16 when you click on the button. To trace a variable, select the variable by clicking on its name and click OK. Or, you can simply double-click on the desired variable's name. If you have only one model element loaded into the Tracing button, the software will begin tracing the element when you click on the button.

Figure 6-16
Variables for Tracing Dialog

If the button has been set up to do Logic tracing, you will be taken to the diagram where the selected tracing variable will be displayed with a big dot in it's center. Click on that dot to reveal the inputs to that variable. Continue clicking on the dotted variables to sequentially unfold model structure. When you're done tracing, click on the upward pointing arrow within the left column of the window to return to the Interface level. See Figure 6-17.

Figure 6-17
Clicking the Tracing Button

If the button has been set up for Loop tracing, each feedback loop that passes through the selected variable will be displayed. After each loop is drawn, a dot will appear within the selected variable. Click on the dot to clear the current loop and display the next loop. See Figure 6-18.

If you have checked the Cumulative Display option within the Loop Button define dialog, clicking the Loop Button will cause all of the loops that pass through the stock to be variable (i.e., it will not clear existing loops before drawing the next loop that passes through the variable).

Figure 6-18
Loop Tracing

 

Storytelling: Allows you to customize the sequential unfurling of the elements in your map. You choose both which elements are revealed, and in what order. The feature also allows you to intersperse text, graphics, sounds, or movies between each element that is being unfurled.  Finally, you can simulate the structure that is showing on the diagram, in mid story.  Taken as a whole, storytelling enables you to breathe life into the communication of your model and its insights.

Important Note:  The Storytelling button is accessible from the interface level only.  You cannot create a storytelling button on the map/model level.

To create a storytelling button, click once on the radio button marked "Storytelling" in the Button Dialog Box, on a button that you have created on the interface level. Then click the "Create Story..." button that becomes available. When you do, a secondary dialog box, like the one shown in Figure 6-19a, will appear.  This Storytelling dialog is the locus for the building and editing of your story line.

Figure 6-19a

The "Create Story..." Dialog

Building a story.  To build a story, the first step is to click the "Build Story" button within the storytelling dialog.  When you do, you'll be taken to the model layer.  There, you can click on diagram elements to add them to the story sequence.  The initial sequence will be determined by the order in which you select diagram elements.  You can subsequently modify the sequence from within the Storytelling dialog.  As you build the story, you can group items by depressing the shift key as you click on diagram elements, or you can drag select items.  To remove an item from the story simply click it again to de-select it.  Figure 6-19b, below, illustrates the process of building a story.

Figure 6-19b

Building a Story on the Model Layer

 

Refining and testing a story. Once you have built the initial story sequence on the diagram, you'll probably want to refine it.  Here, you'll work within the Storytelling dialog to group items, to change the sequencing, and to add annotations.  Figure 6-19a, above, provides a description of the controls available to you.

An essential component of this refining process is to test the story.  To do so, simply OK your way out of the Storytelling and button dialogs, and then use the hand to click on the button.  You'll be taken into storytelling mode.  There, each time you tap on the spacebar you will see the next step in the story sequence [this process analogous to "custom animation" within Microsoft PowerPoint]. Highlighting will indicate the new structure in each step of the story sequence.

To "back up" in the story sequence, tap the backspace key (On the Macintosh, tap the delete key).

As you test the story, re-size and re-position annotation as desired.  The software will retain the positions and sizes you set.  To end a storytelling sequence, click the up arrow on the diagram frame (or incorporate into the story a navigation button that takes the user to the interface layer).

Of special note in the context of refining and testing your story is the camera icon shown in Figure 6-19b.  The camera icon is something you can access when you visit the diagram in "build story" mode.  It  provides you with a mechanism for defining the diagram space in which the story will be told.  When you click the camera, the software will use the associated screen coordinates as the initial location for the display of the story.  In refining your story, you will want all the main story elements to be showing on your screen when you click the camera.  If the story contains elements that are "off screen" from this location, you will need to include a navigation button in your storytelling sequence, and instruct the end-user to click it.

Running your model while in Storytelling mode. One of the truly amazing features associated with storytelling is the ability to simulate portions of the model while you are in the midst of a storytelling sequence.  Because menus and toolbars are unavailable within a story sequence, you'll need to incorporate a run button in the story sequence.  [You also might want to incorporate a pinned graph or table, or perhaps a numeric display or two.  Doing so enables the end user to see clearly the results of the simulation.  The sample models that accompany the software make extensive use of this "run while in storytelling" feature.  We encourage you to take a look at these models to see what's possible.

The software's simulation algorithms are modified somewhat when you are running portions of the model in the midst of a story.  The approach is to evaluate all diagram entities that are displayed on the diagram at the time the simulation is run.  Those entities that are not showing (either because they have not been included in the story sequence or because they have not yet been unfurled in the story) are neutralized in the simulation.  The table below summarizes the rules used by the in evaluating equations within a storytelling sequence.

Figure 6-19c

Building a Story on the Model Layer

 

Type of equation logic within the entity

How the entity is displayed within the story

What happens

Constant in converter or flow

It is showing

A constant value is returned.  The user can change the value by hovering over the entity, depositing the cursor in the hover value box, typing a new value, and hitting the enter key on the keyboard.

Algebraic relationship in flow

No inputs to the flow are displayed

A constant value equal to 10% of the attached stock is returned.  The user can change the value by hovering over the flow regulator, depositing the cursor in the hover value box, typing a new value, and hitting the enter key on the keyboard.

Algebraic relationship in converter or flow

All inputs to the converter or flow are displayed

The full equation is evaluated using all input values.  The user cannot directly change the value returned by the flow or converter.

Algebraic relationship in converter or flow

Some but not all of the inputs to the converter or flow are displayed

The equation is evaluated using the inputs that are showing on the diagram.  The software attempts to neutralize the inputs that are not showing.  If "+" is displayed to the left of the entity in the story sequence, all non-displayed inputs to the entity are given a value of 0 in the evaluation of the entity's equation logic.  If "*" is showing next to the entity in the story sequence, all non-displayed inputs to the entity are given a value of 1 in the evaluation of the entity's equation logic.  Use the algebra controller button within the storytelling dialog to change the evaluation of non-displayed inputs.

 

Play Movie: You can assign a movie to a button by clicking once on the Play Movie radio button, then on the "Assign Movie" button. You will view a standard Get File dialog; select the file containing your movie. To complete the assignment, click OK. Now when the end user clicks the button, the movie assigned will play. QuickTime must be installed in your system to play movies in the software.

When you select the Play Movie radio button, an option called "Iris Visual Effect" will appear below in the dialog. Click in the box next to "Iris Visual Effect" to create a visual effect transition to your movie.

 
Button Sound:
The Button Purpose choices described are mutually exclusive. Sound, however, can be used in conjunction with any of the six button purposes. Though the default sound assigned to a button is a simple clicking sound, you can opt to import a sound you've recorded (music, audio text, sound effect) or use one from an audio library. Or, you can choose to have no sound associated with your button by unchecking the "Use clicking sound" box.

To assign a sound other than the clicking sound, click on the "Import Sound" button. You will be prompted by a standard "Get" dialog box to find and select your file (.wav sound files on Windows or System 7 sounds on Macintosh). After you select the file, the name of the sound file will appear below the button (which will read "Delete Sound").

Deleting sounds from a button: To delete or reassign a button's sound, click on the "Delete Sound" button to remove the current sound file. At this point, you may reassign a new sound file.

 

Button Appearance:  There are three major attributes which dictate the appearance of your button: the opacity, the shape and the image (if any) assigned to the button's surface. The features described in this section are located in the lower half of the dialog box, described in Figure 6-11.

 
Opaque/Transparent:
You can decide whether or not to allow users to see the button! The default is set to Opaque so that the button will be visible after you exit the Button Dialog. While opaque, you can use the default appearance, import a picture, or use text to define the button appearance.

Sometimes you will find it useful to create a transparent button. For instance, you might want to import a graphic and use invisible buttons to annotate parts of the graphic or navigate to more information about the graphic. In other instances, you might want to create "hot" text that pops-up a definition of a word or to navigate to a description of a concept. These are just two examples of how you can use invisible buttons and there are many more-be creative!

Initially, after choosing the Transparent option, the button will appear on the diagram with a faint, dotted outline. When this outline is displayed, you can select the button, double-click on the border to access the Button Dialog and otherwise manipulate the button as usual.

To make the border of a transparent button invisible, go to the Interface menu (at the Interface level) or to the Model menu (at the Map/Model level), select "Hide" and choose "Transparent Buttons." Your button will disappear but will remain on top of the graphic or text over which you've placed it. When the end-user clicks it, it will perform the operation you defined but to the user it will appear they clicked on the visible object. To return the dotted outline of transparent buttons (to access the dialog box), select "Show" from the Map or Model menu and choose "Transparent Buttons."

 
Shape:
Buttons may have rounded corners or squared (right-angled) corners. Take your pick!

 
Import Picture:
By far the most exciting decision for Button Appearance (next to color) is the decision about what picture your button will wear. There are two ways you can change the look of a button: text or pictures.

To Import a Picture, select one of the three sources for the title/picture you wish to import: the Title Box, a graphics file, or the Clipboard.

Title Box: To the immediate right of the Import Picture button is the Title Box.  Use it to type the text you want to appear on the button. If you'd like to format the display of the text, simply click once on the "Import Picture/Format" button that you'll find to the left of the title box.  You'll be taken to a dialog box like the one shown in Figure 6-19.

Figure 6-19
"Format Button Title" Dialog Box

Select the characteristics of the text that you desire, choosing a style, alignment, font, size and wide margins (or not). Click OK and you will return to the main Button Dialog (Figure 6-11). Notice the "*" that appears next to the Import Picture button. This indicates that a title/picture is assigned to the button.

 
Graphics file or Clipboard:
To import a picture (PICT file for Mac, see the appendix at the end of the chapter for Windows formats), click on the "From File" radio button to choose a picture file or "From Clipboard" to paste a picture that currently resides in the Clipboard on your machine. Then, when you click on Import Picture, you will be asked to select and assign a picture file using a standard "Get" dialog, or the picture will be pasted directly from the Clipboard.

 
Delete Picture:
To delete a previously assigned picture (picture file or text), click on the Delete Picture button; you can now assign a new picture.

 
Size to Button:
Check the Size to Button check box to cause the imported picture to be scaled to fit within the button.

See Also