Authoring Applications: Building an Interactive Number Line
The following example will demonstrate how to build an interactive number line using embedded components.
Specifically, this example will show how the embedded Plot component can be used to retrieve input for mouse click actions and use the input to create a point plot that displays a single point corresponding to the area clicked. You can try this out by clicking on the plot above.
1. Creating a new Plot component
This section outlines how to add an embedded plot component to a worksheet.
In a new Maple worksheet, choose the Plot component from the Components palette:
The inserted component will look similar to the Plot component to the right. Notice that the Plot component does not contain any plots and displays as an empty box.
2. Properties of embedded components
Every embedded component has attributes that determine its appearance and contents. For Plot components, this includes properties such as name, size (in pixel width and pixel height), contents (value) and more. This section, outlines how you can gather information about and pass information to the Plot component.
It's important to note how you can pass and retrieve information about properties to and from embedded components. As you saw in the previous section, inserted Plot components do not contain any plots by default, so one of the first tasks you have is to add a plot to the Plot component. To do so, you first need to know where to send information about our plot.
All embedded components have an identity, known as name. To find the name of the plot component:
Right-click on the Plot component and choose 'Component Properties'. (Alternatively, select the component, and the component properties are displayed in the Context Panel.)
Find the value listed under the 'Name' field.
From the pop-up, you can observe that this particular Plot component has the name 'Plot0'. The pop-up also lists other attributes of the component such as tooltip, pixel width or pixel height, and the display of the plot border.
In order to programmatically send (or retrieve) information to the Plot component, you can use the DocumentTools:-SetProperty (or DocumentTools:-GetProperty) commands.
For example, the SetProperty command is used to set the pixel height of the Plot component Plot0:
The first argument in SetProperty is the name of the component you want to change
The second argument, pixelHeight, is the property that you want to change
The third argument is the new value for the property given in the second argument
DocumentTools:-SetPropertyPlot0, pixelHeight, 100
Similarly, to get the pixelHeight of the Plot component, the GetProperty command is used:
The first argument in GetProperty is the name of the component you want to query
The second argument, pixelHeight, is the property that you want to query
The value property contains information on the current plot.
Error, (in DocumentTools:-GetProperty) Attempted to retrieve unknown property 'value' on component 'Plot0'.
Since inserted plot components do not have a value by default, an error is returned as there is no value to retrieve. In order to send a plot to the Plot component, the value option can be set by passing a valid plot, such as plot(sin) to the Plot component:
3. Writing action code
Action code is added to embedded components in Maple to drive actions in Maple documents. This section, describes the steps needed to write Maple code that creates a point plot with a single point, similar to the following:
plots:-pointplot([1, 0], tickmarks = [[seq(-5 .. 5)], 0],
view = [-5 .. 5, -1 .. 1],
symbol = solidcircle,
symbolsize = 25)
In later sections, you will add this code to the Plot component in order to interactively plot a point.
In order to create a number line, you must first learn the syntax for creating a number line plot in Maple.
The plots:-pointplot command can create a new empty point plot:
Since you are building a number line, there are a few ways in which you can adjust our plot command in order to hide the y-axis:
The axis option can control the color of the y-axis:
plots:-pointplot, axis2 = color=White;
Using 0 as the value for the y-tickmarks means that no tickmarks are shown:
plots:-pointplot,tickmarks = seq−5 .. 5, 0;
The view option is also important for ensuring the the plot looks like a number line:
plots:-pointplot,tickmarks = seq−5 .. 5, 0, view=−5..5,−1..1,size=500,100;
Note in the above, you use the size option for making the y-axis shorter. The size option will not be needed later in this page as the size of the plot is dictated by the size of the Plot component.
Now that you have a suitable number line, adding a point to the number line is as simple as adding a value to our original code:
plots:-pointplot1,0,tickmarks = seq−5 .. 5, 0, view=−5..5,−1..1,size=500,100;
The size of the point in the above is rather small. The point size and style are controlled by the symbol and symbolsize options:
plots:-pointplot1,0,tickmarks = seq−5 .. 5, 0, view=−5..5,−1..1,size=500,100,symbol=solidcircle, symbolsize=25;
With this, you now have the required Maple code in order to create a point plot of a single value on a number line.
4. Retrieving input from an embedded component
Plot components have properties that describe their characteristics such as size and value. Plot components can also hold information about interaction with the plot, such as the x,y values of clicks on the plot. In this section, you will learn how to retrieve information on mouse clicks on the Plot component.
In section 2, you saw that the DocumentTools:-GetProperty command can retrieve information about properties of a component.
For Plot components, this information also includes details on the x,y click position of the last click on the plot, referred to as the properties clickx and clicky.
In order to be able to be able to capture clicks on Plot components, you must first enable the click on plot ability. To do so:
Right-click on the Plot component and choose 'Component Properties'.
Make sure that the option, 'Make Click and Drag the default manipulator' is turned on. This will change the default action on the plot from probe to Click and Drag.
When Click and Drag is activated, the DocumentTools:-GetProperty command can be used to retrieve the position of the last click.
Notice that our component name changed in this example. This is because you added a new Plot component for this section and any new Plot component must have a unique new name.
5. Building a number line application
In this section, you will use the techniques outlined in the previous sections in order to build an interactive number line. This is accomplished by:
Inserting a new Plot component
Writing action code that combines the code for generating a point plot from section 3 with the code for retrieving the x,y click position on the plot from section 4
Adding this action code to the 'Click Action' code for the Plot component
With the information from the previous sections, you are ready to build a number line application that registers clicks and shows a corresponding point on a number line.
Let's start by combining the results of section 2 and 3 in order to send a plot to the plot component. Also note that you have already changed the height of the Plot component and turned on 'Click and Drag' using the right-click 'Component Properties' pop-up (as per section 4).
The name of the component to the right is Plot2.
DocumentTools:-SetProperty Plot2, value,plots:-pointplot1,0,tickmarks = seq−5 .. 5, 0, view=−5..5,−1..1,symbol=solidcircle, symbolsize=25
In order to update our plot to register click actions, you now need to add click action code to the Plot component. To do so:
Right-click on the Plot component and choose 'Edit Click Action'.
This brings up a code editor that allows you to edit the code that is run at the event of a mouse click.
Copy the above code into the code editor.
The added code simply creates a pointplot with a point at [1,0], so you need to use the code from section 4 in order to update the plot. To do so,
Find the section in the code right after plots:-pointplot( .
Since you are only interested in clicks on the x-axis, replace only the 1 in the [1, 0] term with the following code:
If you were interested in registering and changing values on the y-axis as well, you would repeat this step only changing the '0' with a similar GetProperty command on the clicky property.
Note that if this also inserts a semicolon into your code editor, you'll need to remove this from your code. Lastly, save and close the code editor in order to apply the code.
You should now have a working clickable number line! Since all of the code for this component is contained in the plot component, you can even copy and paste the component on the right into a new worksheet and interact with it.
Commands used in this example:
Download Help Document