How to build an interactive plotter with a polygon
Start 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 handlerDrawGraph, 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 )
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.
Our cursor is positionned around the fifth point , and the fifth line is highlighted.
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.