Part 9: Dynamic Applications
Go to Maple Portal Previous Tutorial Next Tutorial

Introduction


Maple's Tutorials are designed to help you get started with Maple, learn about the key tools available in Maple, and lead you through a series of problems.
In Part 9: Dynamic Applications, you will learn to use interactive embedded components to create your own application. The first example in this tutorial demonstrates Maple's Exploration Assistant. This assistant lets you quickly create interactive miniapplications and explore the parameters of Maple expressions.
The second interactive example demonstrates how to use a simple set of components to plot a math expression. The third example shows how to create an interactive plot component which will allow a user draw circles by clicking on a point to define the center and clicking on another point that will be on the circle.
To try this material on your own, start with an empty Maple document. Perform the steps described in the left column of each table below. The results of the steps are displayed in the right column for reference.
Refer to Help>Quick Reference for basic getting started tips.
Note for nonWindows users: The keystrokes given in this document are for Windows. There will be differences for other platforms. If you are using a different platform, see Shortcut Keys.


Exploration Assistant


The Exploration Assistant allows you to instantly create interactive miniapplications which can be used to explore the parameters of any arbitrary Maple expression, such as a plot, mathematical equation or command. With these applications, you can use sliders to change the values of the parameters and see instant results.
${}$
There are two ways you can use the Exploration Assistant:
•

Clicking the expression and selecting Explore from the context panel

•

Calling the Explore command

${}$
Steps (Using the Context Panel)

Results

1. Enter the expression $\int \mathrm{tan}{\left(x\right)}^{a}\+x\cdot \mathrm{cos}{\left(x\right)}^{b}\ⅆx$.

$\int \mathrm{tan}{\left(x\right)}^{a}\+x\cdot \mathrm{cos}{\left(x\right)}^{b}\ⅆx$

2. From the Context Panel for the expression, select Explore.


A new dialog box will appear. From here, you can set the range of values you would like to explore, as well as select which variables you would like to skip. When you select skip, that parameter remains as a symbolic unknown in the expression; no slider will be created to control that value.
3. For a, enter 5 for the lower value and 5 for the upper value. Leave the range for b as 0 to 10. Next to the variable x select the skip check box on the right. This will leave the variable x unchanged in the expression. When you are finished, press Explore.


4. A table is generated inline, with a math container for the expression and sliders for the indeterminates a and b. Move the sliders back and forth to see how they change the solution.




You can just as easily call the Exploration Assistant by using the Explore command, which takes as its parameter the Maple expression to be explored.
Steps (Using Commands)

Results

1. Enter the expression
$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)\,x\=2\cdot \mathrm{\π}..2\cdot \mathrm{\π}\right)\right)$ and press [Enter].

$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)\,x\=2\cdot \mathrm{\π}..2\cdot \mathrm{\π}\right)\right)$
${}$

2. In the dialog that appears, enter 1 for the lower ranges of a and b. When you are finished, press Explore.


3.A table is generated inline with a plot area and sliders for a and b. Move the sliders back and forth to see their effects on the plot.




For more information, see Using the Exploration Assistant.

Creating Animations



Creating Animations with the Exploration Assistant


The display of the generated frames at each set of parameter values can be animated. Each parameter control can have its own check box which determines whether it will play with the animation. These check boxes can be unselected while the animation is playing.
The animation check boxes can be specified as a single new default option, and this in turn can be overridden on any parameter's individual specification. The animation check boxes can be specified as present and initial selected, present and initially unselected, or absent altogether.
Note: Any parameters whose animation check box is unselected during play can still be interactively controlled.
Steps

Results

Enter the expression
$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)\,x\=2\cdot \mathrm{\π}..2\cdot \mathrm{\π}\right)\right)$ and press [Enter].

$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)comma;xequals;2\cdot \mathrm{\pi}..2\cdot \mathrm{\pi}\right)\right)$

In the dialog that appears, enter 1 for the lower ranges of a and b. In the Defaults section of the Explore window, select true from the animate list. Now, by default, all parameters that are not skipped will be animated. When you are finished, press Explore.


A table is generated inline with a plot area and sliders for a and b. Click Play to start the animation. Both sliders will be animated. To stop the animation for a particular slider, clear the check box next to it.






Creating Animations Programmatically


The display of the generated frames from the Explore command can also be animated, programmatically by supplying the animate option to the Explore command calling sequence:
>

$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)\,x\=2\cdot \mathrm{\π}..2\cdot \mathrm{\π}\right)\,\mathrm{animate}\right)$ ${}$



Animation Loops


The loop option allows for looped play of the animated sequence.
The loop control check box can be omitted altogether (default), initially selected, or initially unselected.
Note: The animation loop can be turned off at any time by clearing the check box for loop.
>

$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{cos}\left(a\cdot x\right)\cdot \mathrm{sin}\left(b\cdot x\right)\,x\=2\cdot \mathrm{\π}..2\cdot \mathrm{\π}\right)\,\mathrm{animate}\,\mathrm{loop}\right)$ $\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}$




Control Types and Control Placement



Selecting Control Type


Parameters whose values are specified as a range can be any of several types of variable controller.
The variable controller choices are: slider, dial, volumegauge, meter, and rotarygauge.
The size of the central plotting component can be optionally specified. By default its size is determined by the size of the initial plot.
>

$\mathrm{Explore}\left(\mathrm{plot}\left(\mathrm{abs}\left(\left(c2\right)\cdot \left(cplus;2\right)\right)\cdot \mathrm{sin}\left(a\cdot x\right)comma;xequals;6..6comma;\mathrm{view}equals;4..4\right)comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\mathrm{parameters}equals;\left[\left[cequals;0.0..2comma;\mathrm{controller}equals;\mathrm{volumegauge}\right]comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\left[aequals;1..3.0comma;\mathrm{controller}equals;\mathrm{dial}\right]\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\right]comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\mathrm{size}equals;\left[400comma;246\right]comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\mathrm{placement}equals;\mathrm{left}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\right)semi;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}$



Placement of Controls


The controls for parameters can be placed either to the left, bottom, or right of the central display component.
All parameter controls can be placed via a single optional argument to the Explore command, as a customized default.
Parameter controls can also be specified individually as an override of any default.
>

$\mathrm{Explore}\left(\mathrm{plot}\left(bplus;\mathrm{abs}\left(\left(c2\right)\cdot \left(cplus;2\right)\right)\cdot \mathrm{cos}\left(a\cdot x\right)comma;xequals;6..6comma;\mathrm{view}equals;8..8\right)comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\mathrm{parameters}equals;\left[cequals;0.0..2comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}bequals;3..3comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\left[aequals;1..3.0comma;\mathrm{placement}equals;\mathrm{bottom}\right]\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\right]comma;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\mathrm{placement}equals;\mathrm{right}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\right)semi;\phantom{\rule[0.0ex]{0.0em}{0.0ex}}\phantom{\rule[0.0ex]{0.0em}{0.0ex}}$


For further examples demonstrating how the Explore command can be used to build an interactive application, see Building an Application with Explore.



Creating Basic Interactive Components


Embedded components can be added to a document from the Components palette. In this tutorial, we use the Plot Component and the Button Component.
Steps

Results

1. From the Components palette, add these components to your document:
•

Plot component

•

Mathematical expression component

•

Button component



2. Click anywhere in the plot component to display the Plot context panel.
3. Change the Name to "MathPlot".


4. Click anywhere in the mathematical expression component to display the Mathematical Expression context panel.
5. Change the Name to "PlotInput", and change the Height to 60.


7. Click the Button component to display the Button context panel.
8. Change the Caption to "Plot Expression".


9. Click the Plot Expression button and in the context panel, select Edit Click Code. The Code Editor opens.
10. Copy and paste the code below into the space, after the use DocumentTools in line, but before the end use; line.
Tip: You can include comments in your code. # denotes a comment and the line will not be executed. You must leave use DocumentTools in and end use; in order for the code to execute properly.
This line of code will create a plot from the mathematical expression entered in the input box and draw this plot in the MathPlot component.
${}$
12. Save the code and close the Code Editor to return to your worksheet.


13. In the Mathematical Expression
component, enter a mathematical expression such as $x\cdot \mathrm{cos}\left(2\cdot x\right)\+{\mathrm{sin}}^{2}\left(x\right)$.
14. Click the Plot Expression button to see a plot of the expression.




For more information on the command used in the code to connect the embedded components, see DocumentTools[Do].


Building an Interactive Plot Component


Within a plot component, you can define clickanddrag behavior. You can enter commands to define actions to be performed in three scenarios:
•

Edit Click Code performs an action when the mouse is clicked in the plot area

•

Edit Dragged Code performs an action when the mouse is dragged in the plot area

•

Edit Drag End Code performs an action when the mouse is is released from dragging

•

Edit Hover Code performs an action when the mouse is positioned over the plot in the plot component.

To interact with the plot you need to use the Click and Drag manipulator
. This allows you to add or drag points on the plot area. You can access this manipulator from the Plot Toolbar or the Context Panel.
For this example, you will be creating an interactive plot of a circle. First, you will click on a point to define its center, then define its radius by clicking on a point that will be on the circle. To set up this interactive plot, you will edit the Edit Click Code section of the plot component.
Steps

Results

1. From the Components Palette, add the Plot
and Button
components to your document.


Editing the Plot Properties
2. Click anywhere in the plot component to display the Plot context panel.
3. Change the Name to ClickPlot.
4. Select Click and Drag Manipulator. This will automatically execute the code the first time you click on the plot area.
Tip: You can resize the area of the plot component by editing the Width and Height dimensions.


6. Click the plot component and from the context panel select Edit Click Code. The Code Editor opens.
7. Insert the following commands above the end use; statement:
${}$
Tip: clickx and clicky store the coordinates of the position where the mouse click occurs. The command Do(%ClickPlot=...) references the plot component ClickPlot its values.
8. Save the code and close the Code Editor to return to your worksheet.


Editing the Button Properties
9. Click the button to display the context panel.
10. In the Caption area, type "Clear Plot".
11. Again, from the Button context panel select Edit Click Code . The Code Editor opens.
12. Insert the following commands above the end use; statement:
These commands clear the plot area.
13. Save the code and close the Code Editor to return to your worksheet.

${}$

Now the embedded component is ready to be tested. To use this miniapplication:
•

Press Clear Plot to clear the component memory.

•

Click on the plot area and select the
icon from the Plot toolbar. This is the Click and Drag manipulator that will allow you to interact with the plot area.

Tip: You can access all plot manipulator tools from the Plot Toolbar.
•

Click on the plot area to chose the location of the center.

•

Click on a new location to chose a point on the circle. A circle is drawn.

You can clear the plot by pushing the Clear Plot button.


Here is a complete working plot component for you to try. Use the steps above to draw a circle.

${}$



For more information on the commands used in the code of this example, see DocumentTools[Do], plots[pointplot], and plottools[circle].


More Examples


For the remaining examples, you can view the code via the Context Panel by clicking the components and selecting the appropriate Edit Code option. If you would like to recreate these examples, simply add the components in the same manner as the first example and copy the code behind the components.

Line of Best Fit


In this example, as points are drawn on the plot, the line of best fit is updated and the equation of the line will be generated in the Math Expression area.
•

Press Clear Plot to clear the component memory.

•

Click on the plot area and select the
icon from the plotting toolbar.

•

Click on the plot area to add data points. The line of best fit will automatically be updated and its equation shown.

•

You can clear the plot by pushing the Clear Plot button.

${}$
To create this on your own, insert the
,
, and
components in your document using the Components Palette and copy the code from the example above.
Tip: The code in each component will refer to other components by name. Make sure the names match the names of your components.


Curve Fitting


Draw points on the plot, and a curve is drawn that interpolates the points using polynomial interpolation. This example uses a code edit region and a plot component. A code edit region provides a environment for writing code that does not appear in the main document. The code edit region icon also acts as a button. By clicking on the icon, the code inside that region is executed.
•

Click on the code edit region
button below.

•

Click on the plot area and select the
icon from the plotting toolbar.

•

You can now click on the plot area to add points and have Maple create a curve from your points. You can also take an existing point and drag it to a new location, and the curve will automatically update.

•

To clear the plot, press the
button again.

${}$
Click Here to Initialize Plot Region
${}$
To create this on your own, insert a Code Edit Region by going to go to Insert > Code Edit Region. Click on the region and then from the context panel, check or clear Expanded to expand or collapse the area.
Using the Components palette on the lefthand side, click on the
component to add it to your document and copy the code from the example above.

These examples use the Least Squares and Polynomial Interpolation commands from the Curve Fitting package. For an introduction to Curve Fitting in Maple, see the Curve Fitting topic in the Maple Portal.

Go to Maple Portal Previous Tutorial Next Tutorial
