How to build an interactive plotter with a polygon

Starting to build our stack

1) Create a table named "MyTable" and fill it with some numerics datas ( only positive values for our lesson )
2) Create a button named "Draw"
3) Create a rectangle named "destRect" , and put it where you want your graph to be drawn
4) Create a polygon and keep its original name "Polygon". You can draw few points, but we don't bother about the size and the position of it.
This Polygon will be our graph result afterwards and will be automatically redrawn by our Card Script.

If you have questions at this point,
you might want to read George's lesson first: "How to make a simple line graph"

Look in our Application Browser

We can see our 4 cards objects with their respectives names, and we have only 2 scripts. One script in our "Draw" button, and our main script in the card. We will explore them now.

Script in our "Draw" button

We are calling our card handler DrawGraph, passing 3 parameters, well, self-explained.

Sleeves up ! our plotter script

(1) We split our original list of lines of points in 2 lists; one for the X, the second for the Y axis, respectively listTableX and listTableY.

(2) We are calculating the rectangle including all our original points

(3) We have the rectangle where all final points will fit into.

(4) We set the ratios for our X and Y values

(5) For each item ( actually a point ) in our list we transform the original point to a new value. Points in a polygon are integers, that's why we use the round() function. The last line of the repeat will build our new list of point in a format understandable by our polygon ( each point is on a separate line )

(6) We update our polygon with our calculated points.... That's it !

If you have questions at this point about the details of calculation,
you might want to read George's lesson first: "How to make a simple line graph"

Make the plotter real...

Hmmm, it works, but I don't like these black lines.
Ok, we can change this behavior easily. See next chapter...

Make the plotter real. Second version

Above, we see the last lines of our card script, with 2 little changes from the previous script.

(1) We add a cr ( return ) character after each point. Doing so, the Polygon sees all our points as splited, and he will not draw the lines any more. Easy, no ?

(2) We have to suppress the last cr of our list ( if not, we will have an extra point with value 0,0 )

And then....

Our new plotter.

Now we would like to add some extra information as a line for the X axis, another one for the Y axis, and maybe 4 fields in each corner of our plotter ( the blue rectangle ) filled with the 4 values we calculated at the beginning of our script.

But in this case we are not really using the best of Revolution.

Why not doing a minimalist interaction with our plotter ?

For instance, bringing the cursor close to a red point, will highlight the original corresponding value,
which means the corresponding line in our Table.

For this , we add 2 handlers in our card script...

Add handlers for user interaction

The script displayed above is the final part of all our script. See the section "Sleeves up !.." for the first part.

(1) We had a list variable listP2. It will contains our list of points. Almost the same as listP, except for the extra cr after each point.

(2) We fills our list for each iteration of the repeat loop.

(3) We need to declare lisP2 as local, so to be shared between handlers. ( Please, put this line on top of the script )

(4) We calculate all the distances from our cursor position and each point. It returns the index of the closest point or 0 if the
distance is more than minDistance.

(5) For each move of our cursor, we pass here, call TheClosestPoint() function and highlight the corresponding line. Highlighting a field
with empty or 0 will reset the previous highlighted line.

Final screen

Our cursor is positionned around the fifth point , and the fifth line is highlighted.

Et voila.

How do we make our spots square and red

Select our Polygon, open the Property Inspector.

(1) Choose the basic Properties from the top menu.
(2) Select the markerDrawn option
(3) Choose the size of the line
(4) Draw your marker with this list of points. In our example, we have drawn a square of 2 pixels

For setting the red color, in (1) Select "Colors and patterns"
and choose the color of the Marker.

2 Comments

John Tripp

why does the programme not compile?
repeat for each line thisLine in the text of field tableName
put word 1 of thisLine & comma after listTableX
put word 2 of thisLine & comma after listTableY
end repeat
the program says chink: can't create a variable with that name (explicitVariables?() near listTableX, char 38 for line
put word 1 of thisLine & comma after listTableX
it appears to be an exact copy of the code in the help page but this error is poping up more and more often and I cannot find any reference to what it means or how to adjust - why d you have code in the help file that does not work?

Hanson Schmidt-Cornelius

Hi John,

the reason you are getting this is because you probably have variable checking switched on and you are not declaring the variables.

Variable checking is a good thing, as it encourages good development practices. You can switch it off by clicking the script editor and then selecting: "Edit -> Variable Checking."

If you want to keep this feature on (recommended), then add: "local listTableX, listTableY" before you use these variables.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment