Authoring Applications: Building an Interactive Number Line - Maple Programming Help

Online Help

All Products    Maple    MapleSim


Home : Support : Online Help : Applications and Example Worksheets : App Authoring : examples/EmbeddedComponents/NumberLine

Authoring Applications: Building an Interactive Number Line

Overview

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

Section Summary

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 simply reads 'Embedded Plot Window'.

 

 

 

 

2. Properties of embedded components

Section Summary

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'.

• 

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

DocumentTools:-GetPropertyPlot0, pixelHeight

100

(2.1)

The value property contains information on the current plot.

DocumentTools:-GetPropertyPlot0, value

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:

DocumentTools:-SetPropertyPlot0,value, plotsin

3. Writing action code

Section Summary

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:

plots:-pointplot;

 

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:

axis

tickmarks

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 = seq5 .. 5, 0;

 

The view option is also important for ensuring the the plot looks like a number line:

plots:-pointplot,tickmarks = seq5 .. 5, 0, view=5..5,1..1,size=400,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:

output redirected...

(3.1)

plots:-pointplot1,0,tickmarks = seq5 .. 5, 0, view=5..5,1..1,size=400,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 = seq5 .. 5, 0, view=5..5,1..1,size=400,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

Section Summary

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.

DocumentTools:-GetPropertyPlot1, pixelWidth

400

(4.1)

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.

 

 

Once Click and Drag is activated, the DocumentTools:-GetProperty command can be used to retrieve the position of the last click.

DocumentTools:-GetPropertyPlot1,clickx

output redirected...

(4.2)

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

Section Summary

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 = seq5 .. 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:

DocumentTools:-GetPropertyPlot2, clickx

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:

plots:-pointplot

DocumentTools:-SetProperty

DocumentTools:-GetProperty