User Interface Design

MATH 250: Mathematical Computing

In this tutorial, we focus on building a user interface in Mathematica. We need to organize the layout of the interface to both capture user input and responsively display the computed output.

18.1 Creating a background for your interface

Use Panel to enclose components in a background panel

Panel[
Graphics[Disk[]],Background->LightBlue,FrameMargins->20,ImageSize->300]

Use Framed to draw a box around any content.

Framed[Plot3D[x^2+y^2,{x,-2,2},{y,-2,2}]]

Use the RoundingRadius option to round the corners.

Framed[Plot3D[x^2+y^2,{x,-2,2},{y,-2,2}],RoundingRadius->10]

18.2 Aligning components with respect to each other

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.

The basic building blocks are Row (to align components horizontally), Column (to align components vertically), and Grid (to align components in a two-dimensional grid).

Row and Column work similarly. The input is a list of components, which are then aligned horizontally or vertically.

x=0.5; y=True;

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

Column[{
"Here is vertical content",
Dynamic[y],
Checkbox[Dynamic[y]]
}]

Use an Alignment option to specify a particular justification:

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

Use ImageSize to specify the width of a Row object.

Framed@Row[{
"Here is horizontal content",
Dynamic[x],
Slider[Dynamic[x]]
},ImageSize->800]

Full details are available here: tutorial/GridsRowsAndColumnsOverview

18.3 Styling

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

"I am some text"

Style["I am some formatted text!",FontFamily->"Times",FontSize->25]

Style["Now I'm fancy text!",Blend[{Blue,Green},.5],Italic, FontFamily->"Times",FontSize->25]

18.4 Putting them together.

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]

18.5 Deciding on the medium

Do you want to deploy your notebook to the cloud and have it accessible worldwide? 
See some examples here: workflowguide/WebDeployedInterfaces.
Explore guide/CloudFunctionsAndDeployment.

Do you want your interface to open up in a new window? Consider using CreateDocument. guide/DocumentGeneration

18.3