Exploring Interactivity

MATH 250: Mathematical Computing

In this tutorial, we focus on different ways in which you can interact with Mathematica.  Different people will explore different techniques based on their project.

The most versatile and portable method to interact with Mathematica is to use Manipulate.  If you want to create a Demonstration for the Wolfram Demonstrations Project, you should base your ideas around a Manipulate command that doesn’t involve too many fancy types of input.  This might be a good time to go back into the Documentation Center and read some of the advanced techniques for Manipulate: ref/Manipulate

17.1 Text input

To request data from users inside a Manipulate command use  ControlType->InputField.  Or more generally, construct your own InputField.
See here: ref/InputField

You can request all sorts of information from a user.

Manipulate[Plot[f,{x,0,10}],{{f,x^3,"Insert a function of x:"},ControlType->InputField}]

Sometimes you need to modify the input so that Mathematica can use it, and you might need to convert between Strings and Expressions.  
See guide/ConvertingBetweenExpressionsAndStrings.

Manipulate[Permutations[Characters[text]],{{text,"word","Insert text here"}}]

17.2 Buttons and Control Objects

If you want to create a button for your users, use the Button command.  Here is an example of clicking the button to change a variable.  Notice the multiple times that the Dynamic command is used.

x=3;
Column[{Button["Add one to x",Dynamic[x++]],Button["Add subtract one from x",Dynamic[x--]],Button["Square x",Dynamic[x=x*x]],Button["Reset x to 3",Dynamic[x=3]]}]
Dynamic[Framed[Style["x is "<>ToString[x],FontSize->30,FontFamily->"Arial", Bold, Darker[Green]],Background->LightYellow]]

Exploration Time!

Visit tutorial/IntroductionToControlObjects and copy some examples of Controls like Checkbox, SetterBar, and PopupMenu here to try them out.

Comprehension Question

Create one interface using a DynamicModule and a PopupMenu to let the user decide whether to show the graph of a Sine, Cosine, Tangent, Cotangent, Secant, or Cosecant function for x between -2π and 2π.

17.3 Dialog boxes

If you want to get simple Yes/No information or Multiple Choice information from a user, you could use a dialog box.  More information here: guide/DialogBoxes

ChoiceDialog["Pick one",{1->"a",2->"b",3->"c",4->"d"}]

17.4 Input by clicking

To use clicking as a source of user interactivity, you might use the ControlType->Locator option in Manipulate.  It is also possible to build clicking on top of Graphics using ClickPane.
Documentation: ref/ClickPane

DynamicModule[{pt={0,0}},
ClickPane[
Dynamic@Graphics[
{Yellow,Disk[],
Black,Point[pt],
Text[Round[pt,.01],{0,0}]
},ImageSize->Tiny
],(pt=#)&]]

17.5 EventHandler

If you want your users to convey information by typing keys on the keyboard or clicking a mouse or touching an interface, you will probably want to use an EventHandler.

Here is an example from that help page that when you click the circle, its color changes.

DynamicModule[{col=Green},EventHandler[Dynamic[Graphics[{col,Disk[]},ImageSize->Tiny]],{"MouseClicked":>(col=col/.{Red->Green,Green->Red})}]]

Here is an example from that help page that when you click the circle (to bring it into focus) and type the letter “x”, it appends an element to a list.

DynamicModule[{someList={}},
EventHandler[
Graphics[{Blue,Disk[]},ImageSize->100],
{{"KeyDown","x"}:>(AppendTo[someList,1];Print[someList])}]
]
(**does work**)

17.6 Using a game controller

Read this information: howto/UseBuiltinGamepadSupport

17.7 Other interactivity possibilities

To learn more about other available interactivity options, go here: guide/CustomInterfaceConstruction

17.8 Importing data, spreadsheets, images

A more basic level for interacting with the user is to import information (spreadsheet data, images, midi files ...) that you then go on to modify.  (Analyzing data, Modifying images...)  Use the Import command to to this.
See here: tutorial/ImportingAndExportingData.

17.9 Using curated data

You can access all of Wolfram’s curated data on many many subjects. See here for all the different types of data available: guide/ComputableDataOverview.

17.10 Organizing information on the screen

Once you know how you want your users to interact with your worksheet, you need to think about the best way to display the controls and the feedback information on the screen.

Use Row and Column to align content and use an Alignment option to align them as desired

x=0.5

Row[{
Framed["Here is horizontal content"],
Framed[Dynamic[x]],
Framed[Slider[Dynamic[x]]]
}]

y=0.5

Column[{
Framed["Here is vertical content"],
Framed[Dynamic[y]],
Framed[Slider[Dynamic[y]]]
},Alignment->Center]

Use a Panel to create a box around content

Panel[
Column[{"Here is more nicely organized content",
Row[{
Slider[Dynamic[z]]," z = ",
Dynamic[z]
}],
"What do you think?"
},Alignment->Center],Background->LightBlue,FrameMargins->5]

To change the font and color of text, use the Style command

Panel[
Column[{Style["Now we're even fancier!",FontFamily->"Times",FontSize->25],
Row[{
Column[{Slider[Dynamic[z],Appearance->{Small,"DownArrow"}],
Row[{"0","                                                               ","1"}]
}],
Column[{Style[" z is now ",Italic,FontFamily->"Times",FontSize->20,Blue],
Style[Dynamic[z],FontSize->20,Blue]
},Alignment->Center]
}],
Style["What do you think?",FontFamily->"Times",FontSize->25,Blend[{Green,Blue}]]
},Alignment->Center],Background->LightBlue,FrameMargins->5]