sketchometry is an interactive dynamic geometry, web application developed based on the JSXGraph library . This article is a tutorial on its use.

To see what it is, go to the sketchometry website . Click on the big round blame in the upper right corner with the inscription "start sketchometry" - and in front of us is a drawing board with a toolbar at the top. On different devices it looks different, how exactly, you can get an idea by changing the width of the window.

Toolbar

---

On my laptop, the upper part with the toolbar looks like this:



On the left we see the cancel and return buttons.

To the right are buttons that turn on or off the modes of movement and construction. If the button is highlighted, the mode is on; if not, it is off. By default, both modes are enabled.
Well, since the build mode is on, so let's build something.

Construction

---

Most of the constructions are performed with gestures with the mouse or finger. Description of gestures is here (short in English and German) and here (in German).

Building	Gesture	Result
Point
Straight
Circle
Triangle
Four-gon
Center and Point Circumference
Ray
Straight through point
Circle through point
Direct through two points
Two point beam
Section
Center and Point Circumference
Midpoint
Reflected point
"Free" perpendicular
Perpendicular through a point on a line
Perpendicular segment through a free point
Perpendicular line through a free point
Parallel line
Parallel line through a given point
Point reflection
Bisector
Angle
Three-point circle
Three Point Sector
Three-point angle
Polygon
Tangent

In addition to the gestures presented in the table, there are two more ways to construct a circle based on existing objects - a circle and a segment. In both cases, you must press the left key and hold for a few seconds. In the first case, the existing circle is copied. In the second, a circle is constructed whose radius is equal to the initial segment. In both cases, without releasing the keys, the circle can be moved to the right place and quit there.

We move further to the right on the main toolbar. The next button, “More ...”, opens an additional toolbar for building.



Using the tools in this panel, you can build:

1. Function graph.
   Here we see the function input field and below are several tabs. The first is the input tab for some characters. The remaining characters are entered from the keyboard. Yes, and these can also be entered from the keyboard.
   The second tab is the selection of a predefined function from the list.
   The third tab is to select a function from the list of already built ones. Fourth tab - select a slider from the list. Its current value will be used. The fifth tab is the definition of the function definition area. Sixth - handwriting tab.
2. Three-point angle.
   We select three points (the vertex must be selected second), we get the angle.
   
3. Three-point sector.
   We select three points (the center should be chosen second), we get the sector.
   
4. Regular polygon.
   Having selected this tool, we set the number of sides and then select two points that will define one of the sides.
   
5. Ruler.
   This is essentially a segment with divisions, next to which its length is shown.
   To measure, for example, the distance between points, select the Ruler tool, click on one of the points, and then drag the second end of the ruler to the second point.
   
6. Slider
   
7. Text.
   It looks almost the same as the function graphing tool. The only difference is that the “value” button appears on the right, which inserts the value of the slider or function with the given argument.

Toolbar - continued

---

Let's continue our acquaintance with the main toolbar.
The next tool is Scale / Navigation.

Scaling Commands:

1. Reduce.
2. Return to original.
3. Click to enlarge.

Navigation commands (movement in the drawing):

1. To the left.
2. Up.
3. In the middle.
4. Way down.
5. To the right.

The next one is the object removal tool, the recycle bin. Removing is a simple click, without asking for confirmation. But the cancellation of the action is possible even after reloading the page.
Next - the “Eye” tool (hide / show objects).
The next tool is a measurement tool.
You can measure almost everything (except the function graph). True, in the case of measuring a straight line and a beam, we get NaN.

When measuring a point, we get its coordinates. And in the remaining cases, everything is quite expected - lengths, areas, angles.
If you select several objects (for points this is impossible), we get the sum of the measured values.
And finally, the last tool itself is properties.

Windows for setting properties of objects

---

Board Properties	Point Properties	Point Properties, Bottom

Here, in general, everything is clear. Each window is, in fact, a menu for selecting a property value. When you select some items, additional fields open.
For instance:

Entering point coordinates	Point size	Point shape	Point fill color (upper right corner - no fill)

The same additional fields appear in other windows.
We will get acquainted with other dialogues.

This is a dialog for setting straight lines, rays, and line segments. Here the only new thing is the ability to set the appearance of the ends. The first two buttons specify whether the ray or line extends beyond the borders. That is, the line may look like a straight line. The right two buttons set the ends of the lines in the form of arrows. Moreover, in the case of a ray and a straight line, the ends are considered at the boundary of the visible region of the drawing. If a continuation beyond the boundary of a segment or a ray is given, too.

Perhaps the rest of the windows do not make sense. Their differences are only in small details.

The circle properties window has an additional radius input field.
The properties window of the function has an additional function input field. If you click the mouse there, a window for plotting the graph will open, which we have already considered.
В окне свойств бегунка имеются поля ввода интервала значений и шага изменения значения.
В окне свойств многоугольника можно задать возможность его перемещения и будет ли он при этом оставлять след. Кстати, след могут оставлять многие объекты.

Галерея

---

The last (rightmost) button in the main toolbar is the exit to the gallery. The gallery looks like this: We see that each drawing in the gallery has its own window, which is flipped with a mouse click or gesture.
Each window has a toolbar and, in addition, there is a gallery toolbar.
Let's start with the gallery panel.
By clicking "New" we just get on a clean board.
By clicking “Import” you can import the drawing from the clouds:

In the first three cases, the authentication forms open in a separate window. In the fourth - on the spot. That's what they look like (for example, Dropbox and WebDAV).

The next button is the settings.


The Help button is just a link to http://www.sketchometry.org/help/
Now let's move on to the drawing window.
On the left we see the name of the drawing. It is editable in place.
On the right, the first button is export to the cloud. It opens almost the same window as the Import from Cloud button. The difference in the last line:

This line allows you to save the drawing on your computer, while setting the file format (you can also set the file format when saving to other clouds). What are these formats:

1. sketch is the format in which drawings are saved by the geonext program developed by the same University of Byroth as sketchometry and the JSXGraph library on which sketchometry is based.
2. Jessie Code is a file containing a drawing in the form of text in the JessieCode language. And JessieCode is a highly specialized language - an add-on for JSXGraph. You can learn about JessieCode syntax here , and practice here .
3. HTML is a page containing a JessieCode script.

And the last thing left to say is about the right two buttons. This is cloning and deleting a drawing.
That's all.
Well, it was, so to speak, a fairy tale. And now…

Aftertale

---

• About the license. As such, the text of the license is not there anywhere. Only somewhere on the side is it written that
  

  sketchometry is free to use. It can be used for education purposes and privately for free. For commercial usage please get in contact with the address in the imprint .

• Work on sketchometry is still far from finished, so there are bugs besides features. The most serious is the complete disappearance of the drawing when trying to perform some actions. I met this when changing the visibility of the slider and trying to make the polygon leave a trace (I really don’t know why this might be necessary, but still).
• It would be desirable, of course, to show real training tasks, but they are not yet available.

These are three spoons of tar.

Applications

---

• Gesture recognition in sketchometry .
• JSXGraph - introduction