Лабораторный практикум построения визуальных объектов по многомерным данным

ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПОСТРОЕНИЯ ВИЗУАЛЬНЫХ ОБЪЕКТОВ ПО МНОГОМЕРНЫМ ДАННЫМ

с использованием графической оболочки «ВИД»

для построения визуальных форм отображения многомерных данных

Задание на лабораторную работу:

Ознакомится с интерфейсом графической оболочки В соответствии с вариантом задания разработать форму для отображения многомерных данных в режимах отображения 2D и 3D Провести тестирование разработанной формы в автономном режиме визуализации. Оформить отчет с обоснованием типа и местоположения графичеких объектах в режимах 2D и 3D. Защитить лабораторную работу, ответив на контрольные вопросы

Описание работы в графической оболочке «ВИД»

Создание и редактирование простых графических объектов

Разработанная система конструирования предоставляет инструмент для создания и редактирования графических объектов, состоящих из линий, эллипсов, прямоугольников.

С возможностью управления свойствами объекта:

-  размерами (ширина и высота),

-  координатами размещения,

-  цветовыми заливками,

-  разнообразными стилями линий – линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,

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

-  расположение текстовых строк вдоль произвольных кривых (подписей) с возможностью их форматирования,

-  возможность применения анимации к объектам.

Основной вид пользовательского интерфейса при построении графических объектов типа прямогульник представлен на рисунке 4.5.

Рисунок Пользовательский интерфейс при построении графического объекта типа прямоугольник

Функция создания и редактирования простых графических объектов основывается на базовом использовании технологии динамического создания изображения на серверной стороне с использованием серверного языка PHP и его загрузки данных в формате JSON на клиентскую сторону с помощью технологии AJAX.

В блоке 2 пользователь системы вводит исходные данные, требуемые для построения графического объекта, а именно:

-  геометрические размеры фигуры

-  координаты размещения фигуры

-  цвет фигуры

-  тип, толщину и цвет линий

-  при необходимости добавляет анимационные эффекты

-  позиционный коэффициент глубины

В блоке 3, на стороне клиента (web-браузера), проверяется корректность введенных данных, при несоответствии требованиям, пользователю предлагается повторить ввод ошибочных данных (блок 4). Если введенные данные удовлетворяют требованиям, то данные в формате JSON отправляются на сервер (AJAX-запрос) (блок 5).

В блоке 6, проверяется ответ web-сервера. При успешном AJAX-запросе данные с web-сервера разбираются на клиентской стороне (блок 8) и вызывается процедура построения изображения на клиентской стороне (блок 9), при неуспешном AJAX-запросе пользователю выводится причина ошибки и предложение о повторном вводе данных (блок 7).

Рисунок– Блок-схема алгоритма построения графических объектов типа эллипс и прямоугольник

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

На серверной стороне вызывается процедура обработки присланных данных (блок 2).

Происходит определение типа строимого объекта (блоки 3-7), если тип определен, то вызывается процедура создания графического объекта (блок 8), иначе серверный скрипт заканчивает свою работу – выход из алгоритма.

Процедура создания графического объекта (блок 8) состоит из:

-  генерации изображения, на основе введенных данных, с помощью подключаемой библиотеки для работы с графикой GD2.

-  внесение записи в базу данных (при условии успешной генерации)

Затем выполняется генерация выходных данных в формате JSON (блок 9) и отправляется ответ web-браузеру клиента.

Создание и редактирование сложных графических объектов

Разработанная система конструирования предоставляет инструмент для создания и редактирования графических объектов: линейных графиков, столбчатых диаграмм, круговых диаграмм.

С возможностью управления свойствами объекта:

-  размерами (ширина и высота),

-  координатами размещения,

-  цветовыми заливками,

-  разнообразными стилями линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,

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

-  расположение надписей, легенд с возможностью их форматирования

-  возможность применения анимации к объектам.

Основной вид пользовательского интерфейса представлен на рисунке.

Рисунок– Пользовательский интерфейс при построении графического объекта типа диаграмма

При создании системы основной идеей являлась универсализация процедур создания и обработки графических объектов на клиентской стороне. Поэтому функции создания и редактирования графических объектов схожи между собой и отличаются лишь реализацией на серверной стороне.

Приведем структурную схему алгоритма построения сложных графических объектов на серверной стороне.

Рисунок– Блок-схема алгоритма построения графических объектов типа столбчатых диаграмм

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

На серверной стороне вызывается процедура обработки присланных данных (блок 2). Происходит определение типа строимого объекта (блоки 3-7), если тип определен, то вызывается процедура создания графического объекта (блок 8), иначе серверный скрипт заканчивает свою работу – выход из алгоритма.

Процедура создания графического объекта (блок 8) состоит из:

-  генерации изображения, на основе введенных данных, с помощью подключаемой библиотеки для работы с графикой GD2 и библиотеки JpGraph для работы с графиками и диаграммами.

-  внесение записи в базу данных (при условии успешной генерации)

Затем выполняется генерация выходных данных в формате JSON (блок 9) и отправляется ответ web-браузеру клиента.

Создание и редактирование сложных графических объектов многомерной визуализации

Разработанная система конструирования предоставляет инструмент для создания и редактирования графических объектов для отображения многомерных данных с использованием пиктографиков:

-  звезд

-  круговых диаграмм

-  столбчатых диаграмм

-  линейных диаграмм

С возможностью управления свойствами объекта:

-  Размерами (ширина и высота),

-  Координатами размещения,

-  Цветовыми заливками,

-  Разнообразными стилями линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,

-  Свойством прозрачности всего изображения или его части, с заданной степенью,

-  Расположение надписей, легенд с возможностью их форматирования

-  Возможность применения анимации к объектам.

Основной вид пользовательского интерфейса представлен на рисунке.

Рисунок– Пользовательский интерфейс при построении графического объекта типа пиктографик

При создании системы основной идеей являлась унификация процедур создания и обработки графических объектов на клиентской стороне. Поэтому функции создания и редактирования графических объектов схожи между собой и отличаются лишь реализацией на серверной стороне.

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

Рисунок– Блок-схема алгоритма построения графических объектов - пиктографиков

На рисунке представлена блок-схема алгоритма построения сложных графических объектов многомерной визуализации на серверной стороне. Результатом работы алгоритма является созданное изображение с заданными параметрами, запись в базу данных вводимых параметров и загрузка изображения на клиентскую сторону. На серверной стороне вызывается процедура обработки присланных данных (блок 2). Происходит определение типа строимого объекта (блоки 3-7), если тип определен, то:

-  строится цикл (блоки 8-10) с числом повторений, заданным количеством вводимых записей

-  вызывается процедура создания пиктографика (блок 9)

Если определения типа не прошло успешно, то серверный скрипт заканчивает свою работу – выход из алгоритма.

Процедура создания графического объекта (блок 9) состоит из:

-  генерации изображения пиктографика, на основе введенных данных, с помощью подключаемой библиотеки для работы с графикой GD2 и библиотеки JpGraph для работы с графиками и диаграммами.

-  внесение записи в базу данных (при условии успешной генерации)

Затем выполняется генерация выходных данных в формате JSON (блок 11) и отправляется ответ web-браузеру клиента.

Визуализация данных в режиме 2D и 3D

Помимо инструментов для создания и редактирования графических схем, было разработано 2 версии модуля дистанционной визуализации графических схем:

-  визуализация данных в режиме 2D;

-  визуализация данных в режиме 3D.

Визуализация данных в режиме 2D представляет собой вариант отображения данных на плоскости.

На рисунке представлен пример использования модуля визуализации в режиме 2D.

Рисунок– Пример использования модуля дистанционной визуализации в режиме 2D

Основные возможности модуля:

-  отображение объектов визуализации, входящих в состав схемы;

-  предоставление пользователю возможности интерактивно взаимодействовать с объектами визуализации, входящими в состав схемы; при наведении на графические объекты

-  возможность легкого встраивания в любое web-приложение.

Модуль визуализации представляет собой самостоятельный модуль визуализации данных, который может быть интегрирован в любое web-приложение.

Приведем, блок - схему алгоритма визуализации данных в режиме 2D.

Рисунок– Блок-схема алгоритма построения графических объектов - пиктографиков

На рисунке представлена блок-схема алгоритма визуализации графических объектов в режиме 2D.

Результатом работы алгоритма является схема с отображенными на ней графическими объектами визуализации.

Пользователь вводит название схемы, которую он желает загрузить в модуль (блок 2). Происходит AJAX-запрос на сервер, в блоке 3 проверяется номер запрашиваемой схемы данных. Если она не существует, то сервер посылает сообщение об ошибке – конец алгоритма.

Если она существует, то в первом цикле (блоки 4-10) происходит выборка записей из таблиц, содержащих записи о графических объектах, по условию принадлежности к запрашиваемой схеме и сохранения их в массив (блок 5). Заполненный массив проверяется на непустые значения (блок 6). Если массив пустой, то переходим к следующей таблице графических объектов, если же массив содержит какие-либо значения, то в цикле (блоки 7-9) производим запись в выходной массив серверного скрипта в JSON формате (блок 8).

При выходе из первого цикла (блоки 4-10) получаем массив данных, содержащий информацию о всех графических объектах, входящих в состав запрашиваемой схемы данных. Выходной массив посылается на сторону клиента.

На стороне web-браузера в цикле (блоки 12-17) проводим чтение массива. Массив - двумерный, в первом измерении в качестве ключа – тип объекта, значение – массив объектов этого типа. В блоке 13 проверяем существование очередного типа графического объекта и при существовании такого в цикле (блоки 14-16) запускаем процедуру построения объекта, найденного типа (блок 15).

В качестве варианта обобщенной визуальной модели в режиме 3D был выбран куб, плоскости которого используются для отображения графических схем.

Основные возможности модуля:

-  отображение схем с графическими объектами;

-  управление расположением схем в модуле визуализации;

-  управление обзором сцены.

За основу модуля визуализации данных в режиме 3D был взят модуль отображения 3D сцены. Для полного соответствия заявленным техническим требованиям мною были внесены некоторые изменения в исходный программный код.

На рисунке представлен пример использования модуля дистанционной визуализации в режиме 3D.

Рисунок– Пример использования модуля дистанционной визуализации

в режиме.