Простой язык для описания и генерации диаграмм в HTML5-документе

Вернуться к списку проектов На главную страницу курса

Заказчик

Колосов Александр Сергеевич, старший преподаватель кафедры Информатики и математического обеспечения. Эл.почта: akolosov@cs.karelia.ru.

Инструктор

Димитров Вячеслав Михайлович, преподаватель кафедры Информатики и математического обеспечения. Эл.почта: dimitrov@cs.karelia.ru. Раб.тел.: 711015. Офис: 215 каб.

Аннотация проекта

В научно-технических текстах для иллюстрации абстрактных концепций применяются различные виды диаграмм: блок-схемы, графики, карты и др. Существует большое разнообразие программ для создания таких иллюстраций, в число которых входят как векторные редакторы общего назначения, так и специализированные инструменты для создания диаграмм конкретного типа. Однако, как правило, все они обладают одним существенным недостатком — отрисовка и позиционирование элементов диаграммы выполняется вручную с помощью мыши. В результате, при создании достаточно сложных диаграмм, бо́льшая часть времени тратится на выравнивание элементов по регулярной сетке.

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

Реализацию такого подхода можно встретить в инструменте визуализации графов Grpahviz (см. примеры), а также в пакете для создания векторных изображений TikZ/PGF (см. пример) для системы компьютерной вёрстки T_eX. В рамках данного проекта предлагается реализовать вышеописанный подход на базе технологий HTML5. Необходимо разработать инструмент, позволяющий описывать внутри HTML-документа диаграммы, состоящие из заданных элементов этого документа. Должны предоставляться следующие возможности.

Возможность относительного позиционирования HTML-элементов. Например: "справа от элемента с заданным id".
- Должны поддерживаться следующие варианты размещения: справа, слева, сверху, снизу, левый верхний угол, левый нижний угол, правый верхний угол, правый нижний угол.
- При задании относительного местоположения может быть также задано расстояние от объекта.
Возможность указания наличия связывающих линий между элементами.
- Связывающие линии должны создаваться автоматически, а не описываться пользователем как отдельные HTML-элементы.
- При описании линии для нее могут быть указаны следующие атрибуты: толщина, стиль (сплошная, пунктир, штрих-пунктир и т.д.), стрелка начала, стрелка конца.
Возможность описания примитивных объектов эллипс и прямоугольник с заданными геометрическими параметрами.
- Может быть задан текст внутри этих объектов.
- Могут быть заданы атрибуты: цвет фона, цвет обводки, толщина обводки, стиль обводки (сплошная, пунктир, штрих-пунктир и т.д.).
Описание диаграм должно задаваться внутри HTML-документа и интерпретироваться в момент отображения документа браузером.

Ссылки

Разработчики

Казначеева Екатерина Олеговна, 22303
Кузнецова Ирина Сергеевна, 22303
Кучумов Руслан Ильдусович, 22304
Аникиева Светлана Алексеевна, 22303
Трофимова Екатерина Владимировна, 22303
Епифанов Валерий Константинович, 22304