...

вторник, 14 октября 2014 г.

sketchometry — динамическая геометрия в браузере

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



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




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

image


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


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

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




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

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

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


Дополнительная панель инструментов построения


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



  1. График функции.

    Вкладка символыЗдесь мы видим поле ввода функции и ниже несколько вкладок. Первая — вкладка ввода некоторых символов. Остальные символы вводятся с клавиатуры. Да и эти тоже могут быть введены с клавиатуры.

    Вторая вкладка — выбор предопределённой функции из списка.Вкладка выбора функции из списка

    Третья вкладка — выбор функции из списка уже построенных.Вкладка выбора функции из списка уже построенныхЧетвёртая вкладка — выбор ползунка из списка. Будет использовано его текущее значение.Вкладка выбора ползунка из спискаПятая вкладка — задание области определения функции.Вкладка задания области определенияШестая — вкладка рукописного ввода.Вкладка рукописного ввода

  2. Угол по трём точкам.

    Выбираем три точки (вершина при этом должна быть выбрана второй), получаем угол.

    Угол по трём точкамГотовый угол

  3. Сектор по трём точкам.

    Выбираем три точки (центр при этом должн быть выбран вторым), получаем сектор.

    Сектор по трём точкамГльтовый сектор

  4. Правильный многоугольник.

    Выбрав этот инструмент, задаём число сторон и затем выделяем две точки, которые зададут одну из сторон.

    Построение многоугольникаГотовый многоугольник

  5. Линейку.

    Это по сути отрезок с делениями, рядом с которым показана его длина.

    Для измерения, например, расстояния между точками надо, выбрав инструмент «Линейка», щёлкнуть по одной из точек, а потом второй конец линейки перетащить на вторую точку.

    Построение линейкиГотовая линейка

  6. Ползунок.

    Ползунок

  7. Текст.

    Выглядит почти так же, как и инструмент построения графика функции. Разница только в том, что справа появилась кнопка «value», которая вставляет значение ползунка или функции при заданном аргументе.Инструмент текст






Продолжим знакомство с основной панелью инструментов.

Следующий инструмент — Масштаб / Навигация.

Масшт/Нав

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

  1. Уменьшить.

  2. Вернуть исходный.

  3. Увеличить.


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

  1. Влево.

  2. Вверх.

  3. В середину.

  4. Вниз.

  5. Вправо.




Следующий — инструмент удаления объектов, корзина. Удаление происходит простым щелчком, без запроса подтверждения. Но зато отмена действия возможна даже после перезагрузки страницы.

Дальше — инстрмент «Глаз» (скрыть/показать объекты).

Следующий инструмент — инструмент измерения.

Измерить можно почти всё (кроме графика функции). Правда в случае измерения прямой линии и луча получим NaN.

Инструмент измерения

При измерении точки получаем её координаты. А в остальный случаях всё вполне ожидаемо — длины, площади, углы.

Если выделить несколько объектов (для точек это невозможно), получим сумму измеряемых величин.

И наконец последний собственно инструмент — свойства.














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

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

Например:













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

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

Познакомимся и с другими диалогами.





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

Концы прямых

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

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



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


















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

Кстати, след могут оставлять многие объекты.
Окно свойств многоугольника





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

Каждое окно имеет панель инструментов и, кроме того, есть панель инструментов галереи.

Начнём с панели галереи.

Нажав «Новый» мы просто попадаем на чистую доску.

Нажав «Импорт» можно импортировать чертёж из облаков:

Импорт

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

ДропбоксВебдав

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

Настройки 1

Настройки 2

Кнопка «Помощь» — это просто ссылка на http://ift.tt/1scWyjs

Теперь перейдём к окошку чертежа.

Слева видим имя чертежа. Оно редактируемо на месте.

Справа первая кнопка — экспорт в облако. Она открывает почти такое же окно, как и кнопка «Импорт из облака». Отличие в последней строке:

Экспорт в облако

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


  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 ещё далеко не закончена, поэтому там кроме фич есть и глюки. Наиболее серьёзный — это полное исчезновение чертежа при попытке выполнить некоторые действия. Я с таким встретился при изменении видимости ползунка и при попытке заставить многоугольник оставлять след (я, правда, не знаю, зачем это может понадобиться, но всё же).

  • Было бы желательно, конечно, показать реальные учебные задания, но их пока нет.




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

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий