sketchometry — это интерактивная динамическая геометрия, веб приложение, разработанное на базе библиотеки JSXGraph. Эта статья является учебным пособием по её использованию.

Чтобы посмотреть, что это такое, идём на сайт sketchometry. Жмём большую круглую блямбу в правом верхнем углу с надписью «start sketchometry» — и перед нами чертёжная доска с панелью инструментов вверху. На разных устройствах выглядит по-разному, как именно, можно получить представление, поизменяв ширину окна.

Панель инструментов

---

На моём ноутбуке верхняя часть с панелью инструментов выглядит так:



Слева мы видим кнопки отмены и возврата действия.

Правее находятся кнопки, включающие или выключающие режимы перемещения и построения. Если кнопка выделена, то режим включен, если нет — выключен. По умолчанию оба режима включены.
Ну, раз режим построения включен, так давайте что-нибудь и построим.

Построения

---

Большинство построений в выполняются жестами мышкой или пальцем. Описание жестов есть здесь (краткое на английском и немецком) и здесь (на немецком).

Построение	Жест	Результат
Точка
Прямая
Окружность
Треугольник
Четырёх- угольник
Окружность по центру и точке
Луч
Прямая через точку
Окружность через точку
Прямая через две точки
Луч по двум точкам
Отрезок
Окружность по центру и точке
Средняя точка
Отражённая точка
«Свободный» перпендикуляр
Перпендикуляр через точку на прямой
Перпендикуляр- ный отрезок через свобод- ную точку
Перпендикуляр- ная прямая через свободную точку
Параллельная прямая
Параллельная прямая через заданную точку
Отражение точки
Биссектриса
Угол
Окружность по трём точкам
Сектор по трём точкам
Угол по трём точкам
Многоугольник
Касательная

Кроме представленных в таблице жестов существуют ещё два способа построения окружности на основе уже имеющихся объектов — окружности и отрезка. В обоих случаях надо нажать левую клавишу и подержать несколько секунд. В первом случае копируется имеющаяся окружность. Во втором строится окружность, радиус которой равен исходному отрезку. В обоих случаях, не отпуская клавиши, окружность можно перенести в нужное место и там уже бросить.

Двигаемся дальше вправо по главной панели инструментов. Следующая кнопка, «Ещё...», открывает дополнительную панель инструментов построения.



С помощью инструментов этой панели можно построить:

1. График функции.
   Здесь мы видим поле ввода функции и ниже несколько вкладок. Первая — вкладка ввода некоторых символов. Остальные символы вводятся с клавиатуры. Да и эти тоже могут быть введены с клавиатуры.
   Вторая вкладка — выбор предопределённой функции из списка.
   Третья вкладка — выбор функции из списка уже построенных.Четвёртая вкладка — выбор ползунка из списка. Будет использовано его текущее значение.Пятая вкладка — задание области определения функции.Шестая — вкладка рукописного ввода.
2. Угол по трём точкам.
   Выбираем три точки (вершина при этом должна быть выбрана второй), получаем угол.
   
3. Сектор по трём точкам.
   Выбираем три точки (центр при этом должн быть выбран вторым), получаем сектор.
   
4. Правильный многоугольник.
   Выбрав этот инструмент, задаём число сторон и затем выделяем две точки, которые зададут одну из сторон.
   
5. Линейку.
   Это по сути отрезок с делениями, рядом с которым показана его длина.
   Для измерения, например, расстояния между точками надо, выбрав инструмент «Линейка», щёлкнуть по одной из точек, а потом второй конец линейки перетащить на вторую точку.
   
6. Ползунок.
   
7. Текст.
   Выглядит почти так же, как и инструмент построения графика функции. Разница только в том, что справа появилась кнопка «value», которая вставляет значение ползунка или функции при заданном аргументе.

Панель инструментов — продолжение

---

Продолжим знакомство с основной панелью инструментов.
Следующий инструмент — Масштаб / Навигация.

Команды масштабирования:

1. Уменьшить.
2. Вернуть исходный.
3. Увеличить.

Команды навигации (движения по чертежу):

1. Влево.
2. Вверх.
3. В середину.
4. Вниз.
5. Вправо.

Следующий — инструмент удаления объектов, корзина. Удаление происходит простым щелчком, без запроса подтверждения. Но зато отмена действия возможна даже после перезагрузки страницы.
Дальше — инстрмент «Глаз» (скрыть/показать объекты).
Следующий инструмент — инструмент измерения.
Измерить можно почти всё (кроме графика функции). Правда в случае измерения прямой линии и луча получим NaN.

При измерении точки получаем её координаты. А в остальный случаях всё вполне ожидаемо — длины, площади, углы.
Если выделить несколько объектов (для точек это невозможно), получим сумму измеряемых величин.
И наконец последний собственно инструмент — свойства.

Окна настройки свойств объектов

---

Свойства доски	Свойства точки	Свойства точки, нижняя часть

Здесь, в общем-то всё понятно. Каждое окно представляет собой, по сути, меню выбора значения свойства. При выборе некоторых пунктов открываются дополнительные поля.
Например:

Ввод координат точки	Размер точки	Форма точки	Цвет заливки точки (правый верхний угол — без заливки)

Анологичные дополнительные поля появляются и в других окнах.
Познакомимся и с другими диалогами.

Это диалог настроек прямых линий, лучей и отрезков. Здесь единственное новое — это возможность задать вид концов. Первые две кнопки задают, продолжаются ли луч или отрезок за границы. То есть отрезок может выглядеть как прямая линия. Правые две кнопки задают концы линий в виде стрелок. Причём в случае луча и прямой линии концы считаются на границе видимой области чертежа. Если задано продолжение за границу отрезка или луча — тоже.

Остальные окна целиком, пожалуй, приводить не имеет смысла. Их отличия — только в небольших деталях.

Окно свойств окружности имеет дополнительное поле ввода радиуса.
Окно свойств гарфика функции имеет дополнительное поле ввода функции. Если там щёлкнуть мышкой, откроется окно построения графика, которое мы уже рассмотрели.
В окне свойств бегунка имеются поля ввода интервала значений и шага изменения значения.
В окне свойств многоугольника можно задать возможность его перемещения и будет ли он при этом оставлять след. Кстати, след могут оставлять многие объекты.

Галерея

---

Последняя (самая правая) кнопка в главной панели инструментов — выход в галерею. Галерея выглядит вот так: Мы видим, что у каждого чертежа в галерее своё окно, которые перелистываются щелчком мышки или жестом.
Каждое окно имеет панель инструментов и, кроме того, есть панель инструментов галереи.
Начнём с панели галереи.
Нажав «Новый» мы просто попадаем на чистую доску.
Нажав «Импорт» можно импортировать чертёж из облаков:

В первых трёх случаях формы аутетификации открываются в отдельном окне. В четвёртом — на месте. Вот так они выглядят (для примера — Dropbox и WebDAV).

Следующая кнопка — настройки.


Кнопка «Помощь» — это просто ссылка на http://www.sketchometry.org/help/
Теперь перейдём к окошку чертежа.
Слева видим имя чертежа. Оно редактируемо на месте.
Справа первая кнопка — экспорт в облако. Она открывает почти такое же окно, как и кнопка «Импорт из облака». Отличие в последней строке:

Эта строка позволяет сохранить чертёж на своём компьютере, задав при этом формат файла (формат файла можно задать и при сохранении в остальные облака). Что это за форматы:

1. sketch — это формат, в котором сохраняет чертежи программа geonext, разработанная тем же Байротским университетом, что и sketchometry и библиотека JSXGraph, на которой sketchometry основана.
2. Jessie Code — это файл, содержащий чертёж в виде текста на языке JessieCode. А JessieCode — это узкоспециализированный язык — надстройка над JSXGraph. С синтаксисом JessieCode можно познакомиться здесь, а потренироваться — здесь.
3. HTML — страница, содержащая скрипт на JessieCode.

И последнее, что осталось сказать — о правых двух кнопках. Это клонирование и удаление чертежа.
Вот и всё.
Ну вот, это была, так сказать, сказка. А теперь…

Послесказие

---

• О лицензии. Как такового текста лицензии там нигде нет. Только где-то сбоку написано, что
  

  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.

• Работа над sketchometry ещё далеко не закончена, поэтому там кроме фич есть и глюки. Наиболее серьёзный — это полное исчезновение чертежа при попытке выполнить некоторые действия. Я с таким встретился при изменении видимости ползунка и при попытке заставить многоугольник оставлять след (я, правда, не знаю, зачем это может понадобиться, но всё же).
• Было бы желательно, конечно, показать реальные учебные задания, но их пока нет.

Вот такие три ложки дёгтя.

Приложения

---

• Распознавание жестов в sketchometry.
• JSXGraph — введение