Tutorial 17: Interactivity

MATH 250: Mathematical Computing

In this tutorial, we focus on different ways in which users can interact with Mathematica.

17.1 Buttons

A simple way for a user to interact with an interface is through the use of a button.
To create a button for your users, use the Button command, which needs to know the text to display in the button and what to do when the button is pressed.

Button["Name of button",Print["You pressed the button."]]

It is possible to change the style of a button as well by inserting a graphics object. After you click the following button the variable m increases by 1.

m=10;
Graphics[Button[{Darker@Green,Disk[{0,0},{1,1/2}],Black,Text["I am a button",{0,0}]},m++],ImageSize->100]
m

Click on the button multiple times. Then you need to reevaluate m to see its new value

m

You might want to be able to see how m is changing in real time. So use Dynamic!

Dynamic[m]

Here is an example of using multiple buttons to change the same variable.  Notice how the Dynamic command is used to see the current value of y.

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

17.2 Control Objects

In the tutorial about Manipulate, you have seen a number of different types of Control Objects. You can use each of them individually outside of Manipulate.

DynamicModule[{v1=False,v2=0,v3,v4},
Column[{
Row[{"Check me! ", Checkbox[Dynamic[v1]],Dynamic[If[v1,Style["  You did it!",FontFamily->"Arial",Bold, Red],""]]}],
Row[{"Set me! ", SetterBar[Dynamic[v2],Range[5]],Dynamic[If[v2<5,Style["  Too low!",FontFamily->"Arial", Blue],Style["  You got it!",FontFamily->"Arial",Bold, Red]]]}],
Row[{"Slide me! ", Slider[Dynamic[v3],{0,1},ImageSize->100],Dynamic[Which[v3==0,"",v3<1,Style["  Keep Going!",FontFamily->"Arial", Blue],v3==1,Style["  You got it!",FontFamily->"Arial",Bold, Red]]]}]
}]
]

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 Text input

To request text data from users use an InputField. See here: ref/InputField

DynamicModule[{input=0},Column[{
Row[{"Input text here and press the Enter key:", InputField[Dynamic[input]]}],
Dynamic["The input variable is now equal to: "<>ToString[input]]
}]]

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.

DynamicModule[{text=word},
Panel[Column[{
Row[{
"Insert text here",InputField[Dynamic[text]] }],
Panel[Style[Dynamic[Permutations[Characters[ToString[text]]]],FontFamily->"Arial",15],Background->White,ImageSize->{1000,100}]
}]]
]

17.4 Input by clicking

To use clicking as a source of user interactivity, you can build clicking on top of a Graphics object 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=#)&]]

In this example, the color of the Graphics object gets updated depending on the distance the clicked point is from (0,0).

DynamicModule[{pt={0,0}},
ClickPane[
Dynamic@Graphics[
{Which[Norm[pt]<=.4,Red,Norm[pt]<=.75,Yellow,True,Green ],Disk[],
Black,Point[pt],
Text[Round[pt,.01],{0,-1.1}]
},ImageSize->100
],(pt=#)&]]

To involve more points, you can append the point to a list of points

Framed@DynamicModule[{pts={}},
ClickPane[
Dynamic@Graphics[
{LightBlue,Disk[],
Black,Point[pts],
Text["Number of clicks: "<>ToString[Length[pts]],{0,-1.1}]
},ImageSize->100
],(pts=Append[pts,#])&]]

Comprehension Question

How can you make sure that the only clicks that are recorded lie *inside* the circle?

Locators

If you preferred the locators that were present in Manipulate, you can instead use a LocatorPane.
Documentation: ref/LocatorPane

DynamicModule[{pts=N@{{1,1}/2,{-1,1}/2,{1,-1}/2}},
LocatorPane[Dynamic[pts],Dynamic[Graphics[{Lighter[Blend[{Blue,Green}],.5],Disk[],Black,Text["Points: ",{-1.1,-1.1}],Text[pts,{-0.9,-1.1},{Left,Center},FormatType->StandardForm]},ImageSize->400]]]
]

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.